Task #609: Per-user app enable/disable in Settings

- New `user_hidden_apps` table (userId+appId composite PK, cascade) in
  lib/db/src/schema/user-hidden-apps.ts; registered in schema index;
  pushed to dev DB via drizzle-kit.
- Backend (artifacts/api-server/src/routes/apps.ts):
  - GET /me/apps — returns every globally-active app visible to the
    user with a `hidden` flag.
  - PUT /me/apps/:appId/hidden — toggles a row in user_hidden_apps,
    gated by getVisibleAppsForUser + isActive so a user can't toggle
    apps they can't reach.
  - GET /apps (Home/Dock) now uses getVisibleNonHiddenAppsForUser so
    hidden apps disappear immediately.
- lib/appsVisibility.ts: added getHiddenAppIdsForUser and
  getVisibleNonHiddenAppsForUser helpers.
- OpenAPI: added /me/apps + /me/apps/{appId}/hidden, MyApp and
  UpdateMyAppHiddenBody schemas; regenerated api-zod + api-client-react.
- Frontend (settings-panel.tsx): added "My apps" accordion section as
  first GroupItem with MyAppsBody — Switch per app, optimistic update,
  invalidates getListMyAppsQueryKey + getListAppsQueryKey so Home/Dock
  refresh without reload.
- Translations: added settingsPanel.section.myApps + settingsPanel.myApps
  in ar.json + en.json.
- Code review fix: /me/apps and PUT gating filter isActive even for
  admins, so inactive apps don't appear in the Settings list.
- Proposed follow-up #611 (Playwright test that hidden apps disappear
  from Home and Dock).

artifacts/api-server/src/lib/appsVisibility.ts

@@ -7,6 +7,7 @@ import {
   userAppOrdersTable,
   userGroupsTable,
   groupAppsTable,
+  userHiddenAppsTable,
 } from "@workspace/db";
 import { and, asc, eq, inArray, sql } from "drizzle-orm";
 import { getEffectiveRoleIds } from "../middlewares/auth";
@@ -105,3 +106,31 @@ export async function getVisibleAppsForUser(
       groupGrantedSet.has(app.id),
   );
 }
+
+/**
+ * Returns the set of app IDs the given user has personally hidden from
+ * their Home/Dock via PUT /me/apps/{appId}/hidden.
+ */
+export async function getHiddenAppIdsForUser(
+  userId: number,
+): Promise<Set<number>> {
+  const rows = await db
+    .select({ appId: userHiddenAppsTable.appId })
+    .from(userHiddenAppsTable)
+    .where(eq(userHiddenAppsTable.userId, userId));
+  return new Set(rows.map((r) => r.appId));
+}
+
+/**
+ * Like getVisibleAppsForUser but additionally strips apps the user has
+ * personally hidden. Used by GET /apps which backs Home + Dock so the
+ * hidden toggle in Settings takes effect immediately.
+ */
+export async function getVisibleNonHiddenAppsForUser(
+  userId: number,
+): Promise<typeof appsTable.$inferSelect[]> {
+  const visible = await getVisibleAppsForUser(userId);
+  const hidden = await getHiddenAppIdsForUser(userId);
+  if (hidden.size === 0) return visible;
+  return visible.filter((a) => !hidden.has(a.id));
+}

artifacts/api-server/src/routes/apps.ts

@@ -16,6 +16,7 @@ import {
   auditLogsTable,
   permissionsTable,
   usersTable,
+  userHiddenAppsTable,
 } from "@workspace/db";
 import { requireAuth, requireAdmin, getEffectiveRoleIds } from "../middlewares/auth";
 import {
@@ -27,7 +28,11 @@ import { emitAppsChangedToPermissionHolders } from "../lib/realtime";
 // Re-exported from lib/appsVisibility so storage authorization
 // (lib/objectAuthz.ts) can use the exact same RBAC without taking a
 // dependency on this routes module.
-import { getVisibleAppsForUser } from "../lib/appsVisibility";
+import {
+  getVisibleAppsForUser,
+  getVisibleNonHiddenAppsForUser,
+  getHiddenAppIdsForUser,
+} from "../lib/appsVisibility";
 export { getVisibleAppsForUser };
 import {
   CreateAppBody,
@@ -42,10 +47,71 @@ const router: IRouter = Router();
 
 router.get("/apps", requireAuth, async (req, res): Promise<void> => {
   const userId = req.session.userId!;
-  const visible = await getVisibleAppsForUser(userId);
+  // Home + Dock want the user's effective list, so apply the per-user
+  // hidden filter here. The Settings panel calls GET /me/apps below to
+  // see the full unfiltered list with the hidden flag for toggling.
+  const visible = await getVisibleNonHiddenAppsForUser(userId);
   res.json(visible);
 });
 
+router.get("/me/apps", requireAuth, async (req, res): Promise<void> => {
+  const userId = req.session.userId!;
+  // Exclude globally-inactive apps even for admins — the per-user
+  // Settings list is "which of my apps do I want visible", and the
+  // user can't reach inactive apps from Home/Dock anyway.
+  const visible = (await getVisibleAppsForUser(userId)).filter(
+    (a) => a.isActive,
+  );
+  const hidden = await getHiddenAppIdsForUser(userId);
+  res.json(visible.map((a) => ({ ...a, hidden: hidden.has(a.id) })));
+});
+
+router.put(
+  "/me/apps/:appId/hidden",
+  requireAuth,
+  async (req, res): Promise<void> => {
+    const userId = req.session.userId!;
+    const appId = Number(req.params.appId);
+    if (!Number.isInteger(appId) || appId <= 0) {
+      res.status(400).json({ error: "Invalid appId" });
+      return;
+    }
+    const body = req.body as { hidden?: unknown } | undefined;
+    if (typeof body?.hidden !== "boolean") {
+      res.status(400).json({ error: "hidden must be a boolean" });
+      return;
+    }
+    // Gate on the user's actual visibility so a non-admin can't toggle
+    // a hidden flag for an app they shouldn't even know exists.
+    // Also require the app to be globally active so we don't persist
+    // user_hidden_apps rows for apps the user can't reach anyway.
+    const visible = (await getVisibleAppsForUser(userId)).filter(
+      (a) => a.isActive,
+    );
+    const app = visible.find((a) => a.id === appId);
+    if (!app) {
+      res.status(404).json({ error: "App not found" });
+      return;
+    }
+    if (body.hidden) {
+      await db
+        .insert(userHiddenAppsTable)
+        .values({ userId, appId })
+        .onConflictDoNothing();
+    } else {
+      await db
+        .delete(userHiddenAppsTable)
+        .where(
+          and(
+            eq(userHiddenAppsTable.userId, userId),
+            eq(userHiddenAppsTable.appId, appId),
+          ),
+        );
+    }
+    res.json({ ...app, hidden: body.hidden });
+  },
+);
+
 router.get("/admin/apps", requireAdmin, async (_req, res): Promise<void> => {
   const allApps = await db
     .select()

artifacts/tx-os/src/components/settings-panel.tsx

@@ -4,7 +4,14 @@ import { useQueryClient } from "@tanstack/react-query";
 import {
   useUpdateLanguage,
   getGetMeQueryKey,
+  useListMyApps,
+  useUpdateMyAppHidden,
+  getListMyAppsQueryKey,
+  getListAppsQueryKey,
+  type MyApp,
 } from "@workspace/api-client-react";
+import * as LucideIcons from "lucide-react";
+import type { LucideIcon } from "lucide-react";
 import {
   Settings as SettingsIcon,
   Volume2,
@@ -132,6 +139,106 @@ function LanguageBody() {
   );
 }
 
+type IconName = keyof typeof LucideIcons;
+function isIconName(x: string): x is IconName {
+  return x in LucideIcons;
+}
+function resolveAppIcon(name: string): LucideIcon {
+  if (isIconName(name)) {
+    const Candidate = LucideIcons[name] as unknown;
+    if (typeof Candidate === "function" || typeof Candidate === "object") {
+      return Candidate as LucideIcon;
+    }
+  }
+  return LucideIcons.Grid2X2;
+}
+
+/**
+ * Per-user Home/Dock app visibility. Each row is a Switch that toggles a
+ * row in `user_hidden_apps` for the current user. The mutation invalidates
+ * both this list and the GET /apps query that backs Home + Dock so the
+ * change reflects everywhere immediately without a reload.
+ */
+function MyAppsBody() {
+  const { t, i18n: i18nInstance } = useTranslation();
+  const lang = i18nInstance.language;
+  const queryClient = useQueryClient();
+  const { data: apps, isLoading } = useListMyApps({
+    query: { queryKey: getListMyAppsQueryKey() },
+  });
+  const update = useUpdateMyAppHidden({
+    mutation: {
+      onMutate: async ({ appId, data }) => {
+        const key = getListMyAppsQueryKey();
+        await queryClient.cancelQueries({ queryKey: key });
+        const previous = queryClient.getQueryData<MyApp[]>(key);
+        if (previous) {
+          queryClient.setQueryData<MyApp[]>(
+            key,
+            previous.map((a) =>
+              a.id === appId ? { ...a, hidden: data.hidden } : a,
+            ),
+          );
+        }
+        return { previous };
+      },
+      onError: (_err, _vars, ctx) => {
+        if (ctx?.previous) {
+          queryClient.setQueryData(getListMyAppsQueryKey(), ctx.previous);
+        }
+      },
+      onSettled: () => {
+        queryClient.invalidateQueries({ queryKey: getListMyAppsQueryKey() });
+        queryClient.invalidateQueries({ queryKey: getListAppsQueryKey() });
+      },
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="px-3 py-4 text-sm text-muted-foreground">
+        {t("settingsPanel.myApps.loading")}
+      </div>
+    );
+  }
+  if (!apps || apps.length === 0) {
+    return (
+      <div className="px-3 py-4 text-sm text-muted-foreground">
+        {t("settingsPanel.myApps.empty")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      {apps.map((app) => {
+        const Icon = resolveAppIcon(app.iconName);
+        const name = lang === "ar" ? app.nameAr : app.nameEn;
+        const visible = !app.hidden;
+        return (
+          <ToggleRow
+            key={app.id}
+            active={visible}
+            onClick={() =>
+              update.mutate({ appId: app.id, data: { hidden: visible } })
+            }
+            label={name}
+            leftIcon={
+              <span
+                className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md"
+                style={{ backgroundColor: `${app.color}20`, color: app.color }}
+                aria-hidden="true"
+              >
+                <Icon size={14} />
+              </span>
+            }
+          />
+        );
+      })}
+    </div>
+  );
+}
+
 function SoundBody() {
   const { t } = useTranslation();
   const { user } = useAuth();
@@ -154,7 +261,7 @@ function SoundBody() {
   );
 }
 
-type GroupId = "language" | "notifications" | "sound" | "clock";
+type GroupId = "myApps" | "language" | "notifications" | "sound" | "clock";
 
 /**
  * Section wrapper that styles each accordion item like the existing
@@ -219,6 +326,9 @@ function SettingsPanelBody({
       onValueChange={(v) => onOpenChange(v as GroupId[])}
       className="space-y-2"
     >
+      <GroupItem id="myApps" title={t("settingsPanel.section.myApps")}>
+        <MyAppsBody />
+      </GroupItem>
       <GroupItem id="language" title={t("settingsPanel.section.language")}>
         <LanguageBody />
       </GroupItem>

artifacts/tx-os/src/locales/ar.json

@@ -193,6 +193,7 @@
   "settingsPanel": {
     "title": "الإعدادات",
     "section": {
+      "myApps": "تطبيقاتي",
       "language": "اللغة",
       "notifications": "الإشعارات",
       "sound": "الصوت",
@@ -204,6 +205,10 @@
     },
     "sound": {
       "master": "تشغيل أصوات الإشعارات"
+    },
+    "myApps": {
+      "loading": "جارٍ تحميل التطبيقات...",
+      "empty": "لا توجد تطبيقات متاحة."
     }
   },
   "notifSettings": {

artifacts/tx-os/src/locales/en.json

@@ -199,6 +199,7 @@
   "settingsPanel": {
     "title": "Settings",
     "section": {
+      "myApps": "My apps",
       "language": "Language",
       "notifications": "Notifications",
       "sound": "Sound",
@@ -210,6 +211,10 @@
     },
     "sound": {
       "master": "Play notification sounds"
+    },
+    "myApps": {
+      "loading": "Loading apps…",
+      "empty": "No apps available."
     }
   },
   "notifSettings": {