feat: add workspace view mode settings

frontend-web/src/core/system-settings/hooks.ts

@@ -1,5 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
+import { useLocalSettings } from "@/core/settings";
+
 import {
   loadAppearanceSettings,
   loadCitationDisplaySettings,
@@ -16,6 +18,7 @@ import {
   type LeaderboardSettingsUpdate,
   type PrivateSquareUpdate,
   type PromptPrefixUpdate,
+  type ViewMode,
 } from "./api";
 
 const PROMPT_PREFIX_KEY = ["systemSettings", "promptPrefix"] as const;
@@ -86,6 +89,31 @@ export function useUpdateAppearanceSettings() {
   });
 }
 
+/**
+ * Effective card/list display mode for the skill or agent list. A user's own
+ * choice (persisted in local settings) wins; otherwise the admin-configured
+ * system default applies; otherwise a built-in fallback (skills → list,
+ * agents → card, matching the historical layout of each page). `setMode`
+ * persists the user's override locally.
+ */
+export function useViewMode(
+  kind: "skill" | "agent",
+): [ViewMode, (mode: ViewMode) => void] {
+  const [settings, setSettings] = useLocalSettings();
+  const { data: appearance } = useAppearanceSettings();
+  const overrideKey = kind === "skill" ? "skillViewMode" : "agentViewMode";
+  const userOverride = settings.display[overrideKey];
+  const adminDefault =
+    kind === "skill"
+      ? appearance?.default_skill_view
+      : appearance?.default_agent_view;
+  const fallback: ViewMode = kind === "skill" ? "list" : "card";
+  const mode: ViewMode = userOverride ?? adminDefault ?? fallback;
+  const setMode = (next: ViewMode) =>
+    setSettings("display", { [overrideKey]: next });
+  return [mode, setMode];
+}
+
 export function useCitationDisplaySettings() {
   return useQuery({
     queryKey: CITATION_DISPLAY_KEY,