refactor(ui): one rule for resettable, role key and display name; an honest reset label

The card menu's reset read 'Clear watch progress' but also un-hides and un-watches; it now says so.
The resettable rule, the demo-first role key and the display-name fallback each lived in several
components tied by comments; they are shared helpers now, and the menu reuses the card's own
strings instead of duplicate keys.

frontend/src/components/NavSidebar.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useNavigation, useNavigationActions } from "./navigationContext";
 import { Info, LogOut, Settings, Shield, UserPlus, type LucideIcon } from "lucide-react";
 import { api, type Me } from "../lib/api";
+import { displayName, roleKey } from "../lib/api/account";
 import { pinOnNextPage } from "../lib/activeAccount";
 import * as e2ee from "../lib/e2ee";
 import { useLiveQuery } from "../lib/useLiveQuery";
@@ -156,15 +157,9 @@ export default function NavSidebar({
 
   const rowBase =
     "selectable w-full flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition";
-  const name = me.display_name ?? me.email.split("@")[0];
-  // Role is surfaced as a plain title tooltip on the account row (no visual badge). Demo isn't a
-  // real role (it's a flag on a `user` row), so surface it first.
-  const roleKey: "admin" | "user" | "demo" = me.is_demo
-    ? "demo"
-    : me.role === "admin"
-      ? "admin"
-      : "user";
-  const roleLabel = t(`nav.role.${roleKey}`);
+  const name = displayName(me);
+  // Role is surfaced as a plain title tooltip on the account row (no visual badge).
+  const roleLabel = t(`nav.role.${roleKey(me)}`);
 
   const renderItem = ({ page: p, icon: Icon, label, badge }: NavItem) => {
     const active = page === p;
@@ -323,7 +318,7 @@ export default function NavSidebar({
                       />
                       <span className="min-w-0 text-left">
                         <span className="block text-[0.8125rem] text-fg truncate">
-                          {a.display_name ?? a.email.split("@")[0]}
+                          {displayName(a)}
                         </span>
                         <span className="block text-2xs text-muted truncate">{a.email}</span>
                       </span>