Improve meeting settings by adding collapsible sections and removing redundant text

Refactor executive meetings page to use collapsible sections for alert preferences and font settings, and remove descriptive text from locale files.

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

@@ -1033,14 +1033,14 @@
     },
     "highlight": {
       "title": "تمييز الاجتماع الحالي",
-      "hint": "تظليل الاجتماع الذي يقع وقته الآن.",
+      "hint": "",
       "reset": "إعادة إلى الافتراضي"
     },
     "dragRow": "اسحب لإعادة الترتيب",
     "editMeetingTitle": "تعديل عنوان الاجتماع",
     "alertPrefs": {
       "title": "تنبيه الاجتماع القادم",
-      "hint": "تظهر نافذة صغيرة عائمة قبل بداية كل اجتماع بـ 5 دقائق. تقدر تطفّيها أو تختار لوناً يناسب واجهتك.",
+      "hint": "",
       "enabledLabel": "عرض تنبيه الاجتماع القادم",
       "colorTitle": "لون النافذة",
       "reset": "إعادة إلى الافتراضي",
@@ -1419,7 +1419,7 @@
     },
     "fontSettingsPage": {
       "heading": "إعدادات الخط",
-      "intro": "تطبق هذه الإعدادات على جدول الاجتماعات. يمكنك حفظ تفضيلك الشخصي، ويمكن للمسؤول حفظ الإعدادات العامة لجميع المستخدمين.",
+      "intro": "",
       "scope": "النطاق",
       "scopeUser": "تفضيلي الشخصي",
       "scopeGlobal": "عام (جميع المستخدمين)",

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

@@ -934,7 +934,7 @@
     },
     "highlight": {
       "title": "Highlight current meeting",
-      "hint": "Outline the meeting whose time is now.",
+      "hint": "",
       "reset": "Reset to default"
     },
     "dragRow": "Drag to reorder",
@@ -958,7 +958,7 @@
     },
     "alertPrefs": {
       "title": "Upcoming meeting alert",
-      "hint": "A small floating popup appears 5 minutes before each meeting starts. You can turn it off entirely or pick a color theme that fits your workspace.",
+      "hint": "",
       "enabledLabel": "Show upcoming meeting alert",
       "colorTitle": "Color theme",
       "reset": "Reset to default",
@@ -1285,7 +1285,7 @@
     },
     "fontSettingsPage": {
       "heading": "Font Settings",
-      "intro": "These settings apply to the meetings schedule. You can save your personal preference; admins can also save the global default.",
+      "intro": "",
       "scope": "Scope",
       "scopeUser": "My preference",
       "scopeGlobal": "Global (everyone)",

artifacts/tx-os/src/pages/executive-meetings.tsx

@@ -7279,18 +7279,44 @@ function SettingsSection({
           </CollapsibleContent>
         </section>
       </Collapsible>
-      <section className="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
-        <AlertPrefsCard t={t} />
-      </section>
-      <section className="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
-        <FontSettingsSection
-          font={font}
-          globalFont={globalFont}
-          globalLogoObjectPath={globalLogoObjectPath}
-          canEditGlobal={canEditGlobalFont}
-          t={t}
-        />
-      </section>
+      <Collapsible asChild>
+        <section className="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
+          <CollapsibleTrigger asChild>
+            <button type="button" className="w-full flex items-center justify-between group cursor-pointer">
+              <h2 className="text-base font-semibold text-[#0B1E3F] flex items-center gap-2">
+                <Bell className="w-4 h-4" />
+                {t("executiveMeetings.alertPrefs.title")}
+              </h2>
+              <ChevronDown className="w-4 h-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-3">
+            <AlertPrefsCard t={t} />
+          </CollapsibleContent>
+        </section>
+      </Collapsible>
+      <Collapsible asChild>
+        <section className="bg-white border border-gray-200 rounded-lg p-4 sm:p-6">
+          <CollapsibleTrigger asChild>
+            <button type="button" className="w-full flex items-center justify-between group cursor-pointer">
+              <h2 className="text-base font-semibold text-[#0B1E3F] flex items-center gap-2">
+                <Sliders className="w-4 h-4" />
+                {t("executiveMeetings.fontSettingsPage.heading")}
+              </h2>
+              <ChevronDown className="w-4 h-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+            </button>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="mt-3">
+            <FontSettingsSection
+              font={font}
+              globalFont={globalFont}
+              globalLogoObjectPath={globalLogoObjectPath}
+              canEditGlobal={canEditGlobalFont}
+              t={t}
+            />
+          </CollapsibleContent>
+        </section>
+      </Collapsible>
     </div>
   );
 }
@@ -7327,17 +7353,7 @@ function AlertPrefsCard({ t }: { t: (k: string) => string }) {
 
   return (
     <div className="space-y-4 max-w-2xl" data-testid="em-alert-prefs">
-      <div>
-        <h2 className="text-base font-semibold text-[#0B1E3F] flex items-center gap-2">
-          <Bell className="w-4 h-4" />
-          {t("executiveMeetings.alertPrefs.title")}
-        </h2>
-        <p className="text-xs text-gray-500 mt-1 leading-relaxed">
-          {t("executiveMeetings.alertPrefs.hint")}
-        </p>
-      </div>
-
-      <div className="flex items-center justify-between gap-3 border-t border-gray-200 pt-3">
+      <div className="flex items-center justify-between gap-3">
         <label
           htmlFor="em-alert-enabled-toggle"
           className="text-sm font-medium text-[#0B1E3F] cursor-pointer"
@@ -7475,12 +7491,7 @@ function FontSettingsSection({
 
   return (
     <div className="space-y-4 max-w-2xl">
-      <h2 className="text-xl sm:text-2xl font-bold text-[#0B1E3F]">
-        {t("executiveMeetings.fontSettingsPage.heading")}
-      </h2>
-      <p className="text-sm text-gray-600">{t("executiveMeetings.fontSettingsPage.intro")}</p>
-
-      <div className="bg-white border border-gray-200 rounded-md p-4 space-y-3">
+      <div className="space-y-3">
         {canEditGlobal && (
           <FormRow label={t("executiveMeetings.fontSettingsPage.scope")}>
             <Select value={scope} onValueChange={(v) => setScope(v as "user" | "global")}>