Merge branch 'main' into fetch-channels-from-hydra

Author: fricklerhandwerk

frontend/package-lock.json

@@ -14,6 +14,7 @@
     "format": "biome format --write ."
   },
   "dependencies": {
+    "@ark-ui/react": "^5.37.2",
     "@tanstack/react-query": "^5.60.0",
     "lucide-preact": "^1.17.0",
     "preact": "^10.24.0",

frontend/package.json

@@ -1,10 +1,10 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Route, Switch } from "wouter-preact";
+import { Redirect, Route, Switch } from "wouter-preact";
 import { Footer } from "@/components/footer/Footer";
+import { Disclaimer } from "@/components/header/Disclaimer";
 import { HeaderBar } from "@/components/header/HeaderBar";
 import { Home } from "@/routes/Home";
 import { UserSettings } from "@/routes/UserSettings";
-import { Disclaimer } from "./components/header/Disclaimer";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,7 +23,11 @@ export function App() {
       <main>
         <Switch>
           <Route path="/ui-v2/" component={Home} />
-          <Route path="/ui-v2/user" component={UserSettings} />
+          <Route path="/ui-v2/user">
+            <Redirect to="/ui-v2/user/subscriptions" />
+          </Route>
+          <Route path="/ui-v2/user/subscriptions" component={UserSettings} />
+          <Route path="/ui-v2/user/tokens" component={UserSettings} />
           <Route>
             <p>Page not found</p>
           </Route>

frontend/src/App.tsx

@@ -8,10 +8,7 @@
  * - Throws `ApiError` on non-2xx (TanStack Query marks the query as failed). `ApiError.status` lets consumers discriminate errors (e.g. treat 401 as "not logged in").
  *
  */
-function getCsrfToken(): string | null {
-  const match = document.cookie.match(/(?:^|;\s*)csrftoken=([^;]*)/);
-  return match ? decodeURIComponent(match[1]) : null;
-}
+import { getCsrfToken } from "@/utils/csrf";
 
 const UNSAFE_METHODS = new Set(["POST", "PUT", "PATCH", "DELETE"]);
 

frontend/src/api/client.ts

@@ -1,30 +1,40 @@
-import { getConfig } from "@/config";
-import styles from "./Footer.module.css";
+import { useServerInfo } from "@/hooks/useServerInfo";
 
 function Revision() {
-  const { production, revision } = getConfig();
-  const shortRev = revision.slice(0, 8);
+  const serverInfo = useServerInfo();
+
+  if (serverInfo) {
+    const { production, revision } = serverInfo;
+    const shortRev = revision.slice(0, 8);
 
-  if (production) {
     return (
-      <a href={`https://github.com/NixOS/nix-security-tracker/commit/${revision}`}>{shortRev}</a>
+      <p>
+        Running revision{" "}
+        {production ? (
+          <a href={`https://github.com/NixOS/nix-security-tracker/commit/${revision}`}>
+            {shortRev}
+          </a>
+        ) : (
+          <span>{shortRev} (development)</span>
+        )}
+      </p>
     );
+  } else {
+    return null;
   }
-
-  return <span>{shortRev} (development)</span>;
 }
 
 export function Footer() {
   return (
-    <footer className={styles.footer}>
+    <footer className="bg-nixos-blue box spacious column gap text-white centered">
       <p>
         Nixpkgs security tracker is part of{" "}
         <a href="https://nixos.org/community/teams/security/">NixOS security infrastructure</a>.
       </p>
-      <p>
-        <a href="https://github.com/NixOS/nix-security-tracker">Source code</a>, running revision{" "}
+      <div className="row gap-big">
+        <a href="https://github.com/NixOS/nix-security-tracker">Source code</a>
         <Revision />
-      </p>
+      </div>
     </footer>
   );
 }

frontend/src/components/AutoSubscribeToggle.tsx

@@ -1,38 +1,62 @@
-import { LogInIcon, LogOutIcon, UserIcon } from "lucide-preact";
-import { Link } from "wouter-preact";
+import { BellIcon, KeyRoundIcon, LogInIcon, LogOutIcon } from "lucide-preact";
+import { useLocation } from "wouter-preact";
+import { Avatar } from "@/components/ui/Avatar";
+import { Menu } from "@/components/ui/Menu";
+import { Skeleton } from "@/components/ui/Skeleton";
 import { LOGIN_URL, logout, useAuth } from "@/hooks/useAuth";
-import styles from "./AuthStatus.module.css";
 
 export function AuthStatus() {
   const { user, isAuthenticated, isLoading } = useAuth();
+  const [, setLocation] = useLocation();
 
   if (isLoading) {
-    return <span>Loading...</span>;
+    return (
+      <div className="row box compact centered gap-small">
+        <Skeleton width="6em" height="1em" />
+        <Skeleton shape="circle" width="2em" height="2em" />
+      </div>
+    );
   }
 
   if (!isAuthenticated || !user) {
     return (
       <div className="row gap-small centered">
         <LogInIcon />
-        <a href={LOGIN_URL} className={styles.loginLink}>
-          Login with GitHub
-        </a>
+        <a href={LOGIN_URL}>Login with GitHub</a>
       </div>
     );
   }
 
   return (
-    <div className="row gap centered">
-      <Link className="row gap-small centered" href="/ui-v2/user" title={user.username}>
-        {user.avatar_url ? (
-          <img src={user.avatar_url} alt="avatar" className={styles.avatar} />
-        ) : (
-          <UserIcon className={`${styles.avatar} ${styles.placeholder}`} />
-        )}
-      </Link>
-      <button type="button" onClick={logout} className={styles.logoutButton} title="Logout">
-        <LogOutIcon />
-      </button>
-    </div>
+    <Menu
+      trigger={
+        <div className="row box compact centered gap-small">
+          <div>User settings</div>
+          <Avatar avatarUrl={user.avatar_url} username={user.username} />
+        </div>
+      }
+      label={user.username}
+      items={[
+        {
+          value: "subscriptions",
+          label: "Subscriptions",
+          icon: <BellIcon size="1em" />,
+          onSelect: () => setLocation("/ui-v2/user/subscriptions"),
+        },
+        {
+          value: "tokens",
+          label: "API Tokens",
+          icon: <KeyRoundIcon size="1em" />,
+          onSelect: () => setLocation("/ui-v2/user/tokens"),
+        },
+        { type: "separator" },
+        {
+          value: "logout",
+          label: "Logout",
+          icon: <LogOutIcon size="1em" />,
+          onSelect: logout,
+        },
+      ]}
+    />
   );
 }