From e382df3d62d16436a31254ab296478f5f40e48b5 Mon Sep 17 00:00:00 2001
From: riyadhafraa <49757212-riyadhafraa@users.noreply.replit.com>
Date: Tue, 19 May 2026 11:08:06 +0000
Subject: [PATCH] Add ability to show and hide applications in settings

Update settings panel and locales to include functionality for hiding and showing applications, adding new aria-labels for improved accessibility.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 463b7df5-a279-404c-b017-da0acab30371
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/qxUqlQr
Replit-Helium-Checkpoint-Created: true
---
 artifacts/tx-os/src/components/settings-panel.tsx | 8 +++++++-
 artifacts/tx-os/src/locales/ar.json               | 4 +++-
 artifacts/tx-os/src/locales/en.json               | 4 +++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/artifacts/tx-os/src/components/settings-panel.tsx b/artifacts/tx-os/src/components/settings-panel.tsx
index ae702bae..4567f24d 100644
--- a/artifacts/tx-os/src/components/settings-panel.tsx
+++ b/artifacts/tx-os/src/components/settings-panel.tsx
@@ -47,11 +47,13 @@ function ToggleRow({
   active,
   onClick,
   label,
+  ariaLabel,
   leftIcon,
 }: {
   active: boolean;
   onClick: () => void;
   label: string;
+  ariaLabel?: string;
   leftIcon?: React.ReactNode;
 }) {
   return (
@@ -59,7 +61,7 @@ function ToggleRow({
       type="button"
       role="switch"
       aria-checked={active}
-      aria-label={label}
+      aria-label={ariaLabel ?? label}
       onClick={onClick}
       className="w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg text-start hover:bg-foreground/5 transition-colors"
     >
@@ -215,6 +217,9 @@ function MyAppsBody() {
         const Icon = resolveAppIcon(app.iconName);
         const name = lang === "ar" ? app.nameAr : app.nameEn;
         const visible = !app.hidden;
+        const ariaLabel = visible
+          ? t("settingsPanel.myApps.hide", { name })
+          : t("settingsPanel.myApps.show", { name });
         return (
           <ToggleRow
             key={app.id}
@@ -223,6 +228,7 @@ function MyAppsBody() {
               update.mutate({ appId: app.id, data: { hidden: visible } })
             }
             label={name}
+            ariaLabel={ariaLabel}
             leftIcon={
               <span
                 className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md"
diff --git a/artifacts/tx-os/src/locales/ar.json b/artifacts/tx-os/src/locales/ar.json
index 682005d6..4732d886 100644
--- a/artifacts/tx-os/src/locales/ar.json
+++ b/artifacts/tx-os/src/locales/ar.json
@@ -208,7 +208,9 @@
     },
     "myApps": {
       "loading": "جارٍ تحميل التطبيقات...",
-      "empty": "لا توجد تطبيقات متاحة."
+      "empty": "لا توجد تطبيقات متاحة.",
+      "hide": "إخفاء {{name}}",
+      "show": "إظهار {{name}}"
     }
   },
   "notifSettings": {
diff --git a/artifacts/tx-os/src/locales/en.json b/artifacts/tx-os/src/locales/en.json
index 2842726c..c600cdcd 100644
--- a/artifacts/tx-os/src/locales/en.json
+++ b/artifacts/tx-os/src/locales/en.json
@@ -214,7 +214,9 @@
     },
     "myApps": {
       "loading": "Loading apps…",
-      "empty": "No apps available."
+      "empty": "No apps available.",
+      "hide": "Hide {{name}}",
+      "show": "Show {{name}}"
     }
   },
   "notifSettings": {