Merge branch 'main' into lookout-desktop-handoff

The Hackatime relink prompt and the panel's own project loader both landed
in the picker's opening lines. Keep both: `router`/`needsRelink` for the
relink alert, `usesOwnLoader` for the panel that reads its list through a
panel token instead of the signed-in user's cookies.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: anscg

apps/client/src/components/entity/HackatimeProjectPicker.tsx

@@ -4,10 +4,14 @@ import clsx from "clsx";
 import { formatDuration } from "@hackclub/lapse-shared";
 import type { HackatimeProject } from "@hackclub/lapse-api";
 
+import { useRouter } from "next/router";
+
 import { api } from "@/api";
 import type { IconGlyph } from "@/common";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { Alert } from "@/components/ui/Alert";
+import { Button } from "@/components/ui/Button";
+import { useHackatimeRelink } from "@/hooks/useHackatimeRelink";
 
 /** The maximum length of a Hackatime project name, as enforced by the API contract. */
 const MAX_PROJECT_NAME_LENGTH = 128;
@@ -274,10 +278,17 @@ export function HackatimeProjectPicker({ isActive, initialProject, onChange, onL
    */
   compact?: boolean;
 }) {
+  const router = useRouter();
+  const needsRelink = useHackatimeRelink();
+
   const usesOwnLoader = Boolean(loadProjects);
   const [projects, setProjects] = useState<HackatimeProject[]>(() => usesOwnLoader ? [] : cachedProjects ?? []);
   const [isLoadingProjects, setIsLoadingProjects] = useState(usesOwnLoader || cachedProjects === null);
 
+  function reconnect() {
+    router.push(`/auth?force=1&redirect=${encodeURIComponent(router.asPath)}`);
+  }
+
   const [mode, setMode] = useState<SyncMode>("existing");
   const [selectedProject, setSelectedProject] = useState<string | null>(null);
   const [newProjectName, setNewProjectName] = useState("");
@@ -545,6 +556,18 @@ export function HackatimeProjectPicker({ isActive, initialProject, onChange, onL
               </div>
             </div>
           </>
+        ) : needsRelink ? (
+          <Alert variant="warning" icon="private">
+            <div className="flex flex-col gap-3">
+              <p className="font-bold">Relink Hackatime to sync</p>
+              <p>
+                Hackatime won&apos;t let us read your projects until you authorize Lapse again, so this list is
+                empty even if you have projects. Naming a new one here would sync your time somewhere unexpected.
+              </p>
+
+              <Button kind="primary" onClick={reconnect}>Relink Hackatime</Button>
+            </div>
+          </Alert>
         ) : (
           <Alert variant="info" icon="idea">
             <p>We couldn&apos;t find any projects on your Hackatime account. Give this one a name below - we&apos;ll create it for you.</p>

apps/client/src/components/layout/HackatimeRelinkBanner.tsx

@@ -0,0 +1,27 @@
+import NextLink from "next/link";
+import { useRouter } from "next/router";
+
+import { useHackatimeRelink } from "@/hooks/useHackatimeRelink";
+
+const AUTH_ROUTE = "/auth";
+
+/**
+ * A site-wide strip for users whose Hackatime authorization predates the `read` scope. Their timelapses still sync,
+ * but Hackatime won't hand over their project list, so the picker looks empty. Signing in again reissues the token.
+ */
+export function HackatimeRelinkBanner() {
+  const router = useRouter();
+  const needsRelink = useHackatimeRelink();
+
+  if (!needsRelink || router.pathname === AUTH_ROUTE)
+    return null;
+
+  return (
+    <NextLink
+      href={`${AUTH_ROUTE}?force=1&redirect=${encodeURIComponent(router.asPath)}`}
+      className="block w-full bg-red text-white font-bold text-center px-6 py-2 transition-[filter] hover:brightness-95"
+    >
+      Hackatime can&apos;t show your projects until you reconnect. Click here to sign in again.
+    </NextLink>
+  );
+}

apps/client/src/components/layout/HackatimeRelinkModal.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+import { Modal, ModalHeader, ModalContent } from "@/components/layout/Modal";
+import { Button } from "@/components/ui/Button";
+import { useHackatimeRelink } from "@/hooks/useHackatimeRelink";
+
+const AUTH_ROUTE = "/auth";
+const DISMISSED_SESSION_KEY = "lapse:hackatimeRelinkDismissed";
+
+/**
+ * Raised once per session for users whose Hackatime authorization predates the `read` scope. Dismissing it leaves
+ * `HackatimeRelinkBanner` in place, so the way to fix it stays reachable without asking twice.
+ */
+export function HackatimeRelinkModal() {
+  const router = useRouter();
+  const needsRelink = useHackatimeRelink();
+  const [dismissed, setDismissed] = useState(true);
+
+  useEffect(() => {
+    setDismissed(sessionStorage.getItem(DISMISSED_SESSION_KEY) === "true");
+  }, []);
+
+  function dismiss() {
+    sessionStorage.setItem(DISMISSED_SESSION_KEY, "true");
+    setDismissed(true);
+  }
+
+  function reconnect() {
+    router.push(`${AUTH_ROUTE}?force=1&redirect=${encodeURIComponent(router.asPath)}`);
+  }
+
+  const isOpen = needsRelink && !dismissed && router.pathname !== AUTH_ROUTE;
+
+  return (
+    <Modal isOpen={isOpen} size="SMALL">
+      <ModalHeader
+        icon="clock"
+        title="Reconnect Hackatime"
+        description="Hackatime needs your permission again"
+        showCloseButton
+        onClose={dismiss}
+      />
+
+      <ModalContent className="gap-4 text-base">
+        <p>
+          Your timelapses still sync! The picker shows up empty, as if you had no projects.
+        </p>
+
+        <p className="text-muted">
+          Reconnecting Hackatime fixes this issue. It only takes a few seconds.
+        </p>
+
+        <Button kind="primary" onClick={reconnect} className="w-full">
+          Reconnect Hackatime
+        </Button>
+      </ModalContent>
+    </Modal>
+  );
+}

apps/client/src/components/layout/RootLayout.tsx

@@ -3,6 +3,8 @@ import { PropsWithChildren } from "react";
 import clsx from "clsx";
 
 import { Header } from "@/components/layout/Header";
+import { HackatimeRelinkBanner } from "@/components/layout/HackatimeRelinkBanner";
+import { HackatimeRelinkModal } from "@/components/layout/HackatimeRelinkModal";
 import { LegacyRecoveryBanner } from "@/components/legacy/LegacyRecoveryBanner";
 import { jetBrainsMono, phantomSans } from "@/fonts";
 
@@ -25,6 +27,8 @@ export default function RootLayout({ children, title = "Lapse", description = "T
         jetBrainsMono.variable,
         phantomSans.className
       )}>
+        <HackatimeRelinkModal />
+        <HackatimeRelinkBanner />
         <LegacyRecoveryBanner />
 
         { showHeader && <Header /> }

apps/client/src/hooks/useHackatimeRelink.ts

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+
+import { api } from "@/api";
+import { useAuth } from "@/hooks/useAuth";
+
+export const RELINK_SESSION_KEY = "lapse:hackatimeNeedsRelink";
+
+/**
+ * Whether the signed-in user has to authorize Lapse with Hackatime again. A "no" is cached for the browser
+ * session, since checking costs a request to Hackatime and almost nobody needs to be asked twice.
+ */
+export function useHackatimeRelink(): boolean {
+  const router = useRouter();
+  const auth = useAuth(false);
+  const [needsRelink, setNeedsRelink] = useState(false);
+
+  // Nothing renders this on /auth anyway, and checking there would ask about the token being replaced.
+  const isReauthenticating = router.pathname === "/auth";
+
+  useEffect(() => {
+    if (!auth.currentUser || isReauthenticating) {
+      setNeedsRelink(false);
+      return;
+    }
+
+    // Only "no" is worth remembering. Someone told to reconnect is expected to go and do it, so a cached "yes"
+    // would outlive the fix and keep nagging them - which is exactly what it did.
+    if (sessionStorage.getItem(RELINK_SESSION_KEY) === "false") {
+      setNeedsRelink(false);
+      return;
+    }
+
+    let cancelled = false;
+    (async () => {
+      const res = await api.hackatime.linkStatus({});
+      if (cancelled || !res.ok)
+        return;
+
+      if (res.data.needsRelink)
+        sessionStorage.removeItem(RELINK_SESSION_KEY);
+      else
+        sessionStorage.setItem(RELINK_SESSION_KEY, "false");
+
+      setNeedsRelink(res.data.needsRelink);
+    })();
+
+    return () => { cancelled = true; };
+  }, [auth.currentUser, isReauthenticating]);
+
+  return needsRelink;
+}

apps/client/src/hooks/useInterval.ts

@@ -1,10 +1,16 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
 export function useInterval(callback: () => void, delay: number) {
+  // Held in a ref so an inline callback - a new function on every render - doesn't tear down and
+  // immediately re-fire the interval each time the component renders.
+  const latest = useRef(callback);
+  latest.current = callback;
+
   useEffect(() => {
-    const timer = setInterval(callback, delay);
-    callback();
+    const tick = () => latest.current();
+    const timer = setInterval(tick, delay);
+    tick();
 
     return () => clearInterval(timer);
-  }, [callback, delay]);
-}
+  }, [delay]);
+}