Feat/real time dashboard

.github/pull_request_template.md

@@ -1,65 +1,83 @@
 ## Summary
 
-Enhanced the existing `PULL_REQUEST_TEMPLATE.md` to improve contribution quality, accessibility awareness, and reviewer guidance.
+<!-- Briefly describe what this PR does and why. 1–3 sentences is enough. -->
 
-Closes #1107
+Closes #<!-- issue number -->
 
 ---
 
 ## Type of Change
 
-- [ ] Bug fix
-- [ ] New feature
-- [x] Documentation update
-- [ ] Refactor / code cleanup
+<!-- Check all that apply -->
+
+- [ ] 🐛 Bug fix (non-breaking change that fixes an issue)
+- [ ] ✨ New feature (non-breaking change that adds functionality)
+- [ ] 💥 Breaking change (fix or feature that changes existing behavior)
+- [ ] 📝 Documentation update
+- [ ] ♻️ Refactor / code cleanup (no functional change)
+- [ ] ⚡ Performance improvement
+- [ ] 🔒 Security fix
+- [ ] 🧪 Tests only
 
 ---
 
-## Changes Made
+## What Changed
+
+<!-- List the key changes made. Be specific — mention file names or functions where helpful. -->
 
-- Improved PR template structure and readability
-- Added accessibility checklist section
-- Added additional notes section
-- Enhanced contributor guidance for testing and review
-- Improved consistency for future pull requests
+-
+-
+-
 
 ---
 
 ## How to Test
 
-Steps for the reviewer to verify this works:
+<!-- Steps a reviewer can follow to verify your changes work correctly. -->
+
+1.
+2.
+3.
 
-1. Create a new pull request
-2. Verify the updated PR template appears automatically
-3. Check that all checklist sections render properly
-4. Ensure markdown formatting works correctly
+**Expected result:**
 
 ---
 
-## Screenshots (if UI change)
+## Screenshots / Recordings
 
-N/A
+<!-- For UI changes, attach before/after screenshots or a short screen recording. Delete this section if not applicable. -->
+
+| Before | After |
+|--------|-------|
+|        |       |
 
 ---
 
 ## Checklist
 
-- [x] Linked issue in summary
-- [x] `npm run lint` passes locally
-- [x] No TypeScript errors (`npm run type-check`)
-- [x] Self-reviewed the diff
-- [ ] Added/updated tests if applicable
+<!-- Complete before requesting review. -->
+
+- [ ] Linked the related issue above
+- [ ] Self-reviewed my own diff
+- [ ] No unnecessary `console.log`, debug code, or commented-out blocks
+- [ ] `npm run lint` passes locally
+- [ ] No TypeScript errors (`npm run type-check`)
+- [ ] Added or updated tests where applicable
+- [ ] Updated documentation / comments if behavior changed
 
 ---
 
-## Accessibility Checklist
+## Accessibility (UI changes only)
+
+<!-- Skip this section if your PR has no UI impact. -->
 
-- [x] Proper keyboard navigation tested
-- [x] Responsive UI verified
-- [x] Accessibility labels added where needed
+- [ ] Keyboard navigation works correctly
+- [ ] Color contrast meets WCAG AA standard
+- [ ] ARIA labels / roles added where needed
+- [ ] Tested on mobile / responsive layout
 
 ---
 
-## Additional Notes
+## Additional Context
 
-This update standardizes pull request submissions and helps maintain consistent review quality across contributions.
+<!-- Anything else reviewers should know: trade-offs made, follow-up issues, related PRs, etc. Leave blank if none. -->

DEVELOPMENT.md

@@ -8,8 +8,8 @@ Everything you need to run DevTrack locally from scratch in under 10 minutes.
 
 | Tool | Version | Check |
 |------|---------|-------|
-| Node.js | >= 18 | `node -v` |
-| npm | >= 9 | `npm -v` |
+| Node.js | >= 20 | `node -v` |
+| pnpm | >= 9 | `pnpm -v` |
 | Git | any | `git --version` |
 
 You also need free accounts on:
@@ -24,7 +24,7 @@ You also need free accounts on:
 ```bash
 git clone https://github.com/Priyanshu-byte-coder/devtrack.git
 cd devtrack
-npm install
+pnpm install
 ```
 
 ---
@@ -100,7 +100,7 @@ openssl rand -base64 32
 ## 5. Run the dev server
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000). Click **Sign in with GitHub**.
@@ -226,14 +226,14 @@ All GitHub API calls use the signed-in user's OAuth token — stored in the sess
 
 | Command | What it does |
 |---------|-------------|
-| `npm run dev` | Start dev server at localhost:3000 |
-| `npm run build` | Production build |
-| `npm run lint` | ESLint |
-| `npm run type-check` | TypeScript compiler check (no emit) |
+| `pnpm dev` | Start dev server at localhost:3000 |
+| `pnpm build` | Production build |
+| `pnpm lint` | ESLint |
+| `pnpm type-check` | TypeScript compiler check (no emit) |
 
 Run lint and type-check before pushing:
 ```bash
-npm run lint && npm run type-check
+pnpm lint && pnpm type-check
 ```
 
 ---
@@ -336,12 +336,12 @@ On Windows PowerShell:
 Next.js reads `.env.local` only at startup. After any change, stop and restart:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
 #### 5. Check the server console for the real error
 
-The browser only shows `error=github` — the actual error is printed to the **terminal running `npm run dev`**. Look for lines starting with `[next-auth]` or `signIn:`.
+The browser only shows `error=github` — the actual error is printed to the **terminal running `pnpm dev`**. Look for lines starting with `[next-auth]` or `signIn:`.
 
 ---
 
@@ -385,4 +385,4 @@ Open a [GitHub Discussion](https://github.com/Priyanshu-byte-coder/devtrack/disc
 
 
 ### Husky Hooks Troubleshooting Guide
-- If prettier-check fails in sandboxed environments, run git commit with --no-verify.
+- If prettier-check fails in sandboxed environments, run git commit with --no-verify.

src/components/DashboardHeader.tsx

@@ -18,6 +18,7 @@ import UserAvatar from "@/components/UserAvatar";
 import KeyboardShortcuts from "@/components/KeyboardShortcuts";
 import { Moon, Sun } from "lucide-react";
 import { toast } from "sonner";
+import { useRealtimeSync } from "@/hooks/useRealtimeSync";
 
 type DashboardSyncContextValue = {
   lastSynced: Date | null;
@@ -110,6 +111,42 @@ export default function DashboardHeader() {
     setGreeting(computeCurrentGreeting());
   }, []);
 
+  // Extracted to useCallback so useRealtimeSync can call it as a stable reference.
+  const loadSettings = useCallback(async () => {
+    if (!session) {
+      setIsPublic(null);
+      return;
+    }
+    try {
+      const res = await fetch("/api/user/settings");
+      if (res.ok) {
+        const data = await res.json();
+        setIsPublic(data.is_public === true);
+      } else {
+        setIsPublic(false);
+      }
+    } catch (error) {
+      console.error("Failed to load settings:", error);
+      setIsPublic(false);
+    }
+  }, [session]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  // -------------------------------------------------------------------------
+  // Realtime: re-fetch user settings whenever the `users` row changes
+  // (e.g. is_public toggled in another tab). Falls back to 60-second polling.
+  // NOTE: enable Realtime for the `users` table in Supabase and ensure the
+  // anon role has a SELECT policy, or provide a user-scoped filter once a
+  // Supabase JWT is available in the session.
+  // -------------------------------------------------------------------------
+  const { isLive: isHeaderLive } = useRealtimeSync(
+    "users",
+    ["UPDATE"],
+    loadSettings,
+  );
   useEffect(() => {
     if (!session?.githubLogin) return;
 
@@ -159,31 +196,6 @@ export default function DashboardHeader() {
   const { lastSynced } = useDashboardSync();
   const [now, setNow] = useState(() => Date.now());
 
-  useEffect(() => {
-    if (!session) {
-      setIsPublic(null);
-      return;
-    }
-
-    async function loadSettings() {
-      try {
-        const res = await fetch("/api/user/settings");
-
-        if (res.ok) {
-          const data = await res.json();
-          setIsPublic(data.is_public === true);
-        } else {
-          setIsPublic(false);
-        }
-      } catch (error) {
-        console.error("Failed to load settings:", error);
-        setIsPublic(false);
-      }
-    }
-
-    loadSettings();
-  }, [session]);
-
   // Extract a fallback username parameter from active session data strings
   const displayName = session?.user?.name || session?.githubLogin || "Developer";
   useEffect(() => {
@@ -252,8 +264,20 @@ export default function DashboardHeader() {
               coding activity at a glance
             </p>
             {minutesAgo !== null && (
-              <p className="mt-1 text-xs text-[var(--muted-foreground)]">
+              <p className="mt-1 flex items-center gap-1.5 text-xs text-[var(--muted-foreground)]">
                 {minutesAgo <= 0 ? "Synced just now" : `Synced ${minutesAgo} min ago`}
+                {isHeaderLive && (
+                  <span
+                    title="Live — connected to Supabase Realtime"
+                    className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-500"
+                  >
+                    <span className="relative flex h-1.5 w-1.5">
+                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75" />
+                      <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                    </span>
+                    Live
+                  </span>
+                )}
               </p>
             )}
           </div>
@@ -388,4 +412,4 @@ export default function DashboardHeader() {
       </div>
     </header>
   );
-}
+}