fix(docs): update degit and clone commands to use the correct repository URL

refactor(app): clean up authentication status rendering in App component
style(app): remove unnecessary margin from grid layout in App.css

Author: dean-journeyapps

README.md

@@ -11,15 +11,15 @@ We recommend using the first option for a quick start.
 2. Use [degit](https://github.com/Rich-Harris/degit) to scaffold the project:
 
 ```bash
-npx degit powersync-product-success/vite-react-ts-powersync-supabase
+npx degit powersync-community/vite-react-ts-powersync-supabase
 ```
 
 > **Note**: `degit` is a tool that downloads the latest version of a repository without the git history, giving you a clean starting point. Add a second argument to specify your project name (e.g., my-app).
 
 3. Clone the repository directly and install dependencies:
 
 ```bash
-git clone https://github.com/powersync-product-success/vite-react-ts-powersync-supabase.git
+git clone https://github.com/powersync-community/vite-react-ts-powersync-supabase.git
 ```
 
 ## Usage

src/App.css

@@ -84,7 +84,6 @@ body {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
-  margin-bottom: 1.5rem;
 }
 
 .status-card,

src/App.tsx

@@ -33,12 +33,12 @@ function App() {
 
       // First check if we already have a session
       let session = connector.currentSession;
-      
+
       if (!session) {
         // Only sign in anonymously if we don't have a session
         session = await connector.signInAnonymously();
       }
-      
+
       const userId = session?.user?.id;
 
       if (userId) {
@@ -81,7 +81,7 @@ function App() {
       }
       console.log("No user ID, attempting to authenticate...");
       await fetchUserID();
-      
+
       // If still no userID after fetch, don't proceed
       if (!userID) {
         console.error("Cannot create counter: No authenticated user");
@@ -129,16 +129,13 @@ function App() {
                 </div>
                 <div><strong>hasSynced:</strong> {status.hasSynced?.toString() ?? "false"}</div>
                 <div><strong>lastSyncedAt:</strong> {status.lastSyncedAt?.toLocaleString() ?? "N/A"}</div>
+
+                <div><strong>User ID:</strong> {userID || "Not authenticated"}</div>
+                {isAuthenticating && <div><strong>Status:</strong> Authenticating...</div>}
+                {authError && <div style={{ color: 'red' }}><strong>Auth Error:</strong> {authError}</div>}
               </>
             )}
           </div>
-          
-          {/* Authentication Status */}
-          <div className="auth-status">
-            <div><strong>User ID:</strong> {userID || "Not authenticated"}</div>
-            {isAuthenticating && <div><strong>Status:</strong> Authenticating...</div>}
-            {authError && <div style={{color: 'red'}}><strong>Auth Error:</strong> {authError}</div>}
-          </div>
         </div>
 
         <div className="logo-card">
@@ -188,7 +185,7 @@ function App() {
         <>
           {/* Show authentication status or create counter button */}
           {!userID ? (
-              <p>Please sign in to create a counter.</p>
+            <p>Please sign in to create a counter.</p>
           ) : (
             <>
               {/* Only visible if the current user has not created a counter */}