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/SettingsPanel.tsx

@@ -8,6 +8,7 @@ import { Activity, Bell, Check, Loader2, Monitor, RefreshCw, Trash2, User } from
 import DiagnosticsSettings from "./DiagnosticsSettings";
 import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
 import { api, HttpError, type Me } from "../lib/api";
+import { displayName, roleKey } from "../lib/api/account";
 import { notifyActionError } from "../lib/actionErrors";
 import { LS, useAccountPersistedState } from "../lib/storage";
 import Avatar from "./ui/Avatar";
@@ -792,12 +793,10 @@ export function AccountHeader({ me }: { me: Me }) {
           className="w-12 h-12 rounded-full"
         />
         <div className="min-w-0">
-          <div className="font-semibold truncate">{me.display_name ?? me.email.split("@")[0]}</div>
+          <div className="font-semibold truncate">{displayName(me)}</div>
           <div className="text-xs text-muted truncate">{me.email}</div>
           {/* Translated, like the sidebar's tooltip: the raw `user` read in English under HU. */}
-          <div className="text-xs text-muted">
-            {t(`nav.role.${me.is_demo ? "demo" : me.role === "admin" ? "admin" : "user"}`)}
-          </div>
+          <div className="text-xs text-muted">{t(`nav.role.${roleKey(me)}`)}</div>
           {!me.is_demo && (
             <div className="text-xs text-muted" data-testid="account-last-login">
               {me.last_login_at