docs: move ideaprovider component in code snippet implementation to step 7, change navigateTo to goTo with import, change wording of permissions text

src/routes/docs/tutorials/react/step-4/+page.markdoc

@@ -16,6 +16,7 @@ Create a new file `src/lib/context/user.jsx` and add the following code to it.
 import { ID } from "appwrite";
 import { createContext, useContext, useEffect, useState } from "react";
 import { account } from "../appwrite";
+import { goto } from "$app/navigation";
 
 const UserContext = createContext();
 
@@ -29,7 +30,7 @@ export function UserProvider(props) {
   async function login(email, password) {
     const loggedIn = await account.createEmailPasswordSession(email, password);
     setUser(loggedIn);
-    navigateTo("/");
+    goTo("/");
   }
 
   async function logout() {
@@ -67,14 +68,13 @@ Now, we can use the `useUser` hook to access the user's data from any component.
 
 # Basic routing  {% #basic-routing %}
 
-First, wrap the `main` element with the `UserProvider` and `IdeaProvider` component.
+First, wrap the `main` element with the `UserProvider` component.
 
 Update `src/App.jsx` to the following code.
 
 ```client-web
 import { Home } from "./pages/Home";
 import { UserProvider } from "./lib/context/user";
-import { IdeaProvider } from "./lib/context/ideas";
 
 function App() {
   const isLoginPage = window.location.pathname === "/login";
@@ -82,9 +82,7 @@ function App() {
   return (
     <div>
       <UserProvider>
-        <IdeaProvider>
           <main>Home page</main>
-        </IdeaProvider>
       </UserProvider>
     </div>
   );
@@ -101,7 +99,6 @@ Update `src/App.jsx` to the following code.
 import { Login } from "./pages/Login";
 import { Home } from "./pages/Home";
 import { UserProvider } from "./lib/context/user";
-import { IdeaProvider } from "./lib/context/ideas";
 
 function App() {
   const isLoginPage = window.location.pathname === "/login";
@@ -109,9 +106,7 @@ function App() {
   return (
     <div>
       <UserProvider>
-        <IdeaProvider>
           <main>{isLoginPage ? <Login /> : <Home />}</main>
-        </IdeaProvider>
       </UserProvider>
     </div>
   );

src/routes/docs/tutorials/react/step-6/+page.markdoc

@@ -5,7 +5,7 @@ description: Add a database to your React application using Appwrite Web SDK.
 step: 6
 ---
 # Create collection {% #create-collection %}
-In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.  Adding user's permissions allows authorized users to view, create and delete documents.
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas. To authorize users to view, create, and delete documents, set the collection's permissions for the user's needs.
 
 {% only_dark %}
 ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)

src/routes/docs/tutorials/react/step-7/+page.markdoc

@@ -78,4 +78,30 @@ export function Home() {
     </>
   );
 }
+```
+
+In `src/App.jsx`, wrap the `main` element with the `IdeaProvider` component.
+
+```client-web
+import { Login } from "./pages/Login";
+import { Home } from "./pages/Home";
+import { UserProvider } from "./lib/context/user";
+import { IdeaProvider } from "./lib/context/ideas";
+
+function App() {
+  const isLoginPage = window.location.pathname === "/login";
+
+  return (
+    <div>
+      <UserProvider>
+        <IdeaProvider>
+          <Navbar /> {/* Add the navbar before page content */}
+          <main>{isLoginPage ? <Login /> : <Home />}</main>
+        </IdeaProvider>
+      <UserProvider>
+    </div>
+  );
+}
+
+export default App;
 ```