tui: surface a dismissible new-interface notice and tighten settings copy for clarity

Users who were migrated to the new interface will now see a dismissible notice in Settings explaining the old interface was phased out, so they are not surprised by the change. The new-interface toggle is also visually elevated with a card style so it is easier to find. Settings labels and descriptions across General have been rewritten to be shorter and more direct, so it is quicker to understand what each option controls. The "New" badge color is also adjusted for better readability.

packages/app/src/components/settings-general.tsx

@@ -251,7 +251,7 @@ export const SettingsGeneral: Component = () => {
   })
 
   const InterfaceSection = () => (
-    <div class="flex flex-col gap-1">
+    <div class="flex flex-col gap-4">
       <SettingsList>
         <SettingsRow
           title={
@@ -280,6 +280,23 @@ export const SettingsGeneral: Component = () => {
           </div>
         </SettingsRow>
       </SettingsList>
+
+      <Show when={!settings.general.newInterfaceNoticeDismissed()}>
+        <SettingsList>
+          <SettingsRow
+            title={language.t("settings.general.row.newInterfaceNotice.title")}
+            description={language.t("settings.general.row.newInterfaceNotice.description", {
+              date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
+                oldInterfaceSunset,
+              ),
+            })}
+          >
+            <Button size="small" variant="ghost" onClick={settings.general.dismissNewInterfaceNotice}>
+              {language.t("settings.general.row.newInterfaceNotice.dismiss")}
+            </Button>
+          </SettingsRow>
+        </SettingsList>
+      </Show>
     </div>
   )
 

packages/app/src/components/settings-v2/general.tsx

@@ -230,34 +230,53 @@ export const SettingsGeneralV2: Component<{
 
   const InterfaceSection = () => (
     <div class="settings-v2-section">
-      <SettingsListV2>
-        <SettingsRowV2
-          title={
-            <span class="flex items-center gap-2">
-              {language.t("settings.general.row.newInterface.title")}
-              <Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
-            </span>
-          }
-          description={language.t("settings.general.row.newInterface.description", {
-            date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
-              oldInterfaceSunset,
-            ),
-          })}
-        >
-          <div data-action="settings-new-layout-designs">
-            <Switch
-              checked={settings.general.newLayoutDesigns()}
-              onChange={(checked) => {
-                settings.general.setNewLayoutDesigns(checked)
-                if (checked) return
-                void import("@/components/dialog-settings").then((module) => {
-                  void dialog.show(() => <module.DialogSettings />)
-                })
-              }}
-            />
-          </div>
-        </SettingsRowV2>
-      </SettingsListV2>
+      <div class="settings-v2-interface-feature">
+        <SettingsListV2>
+          <SettingsRowV2
+            title={
+              <span class="flex items-center gap-2">
+                {language.t("settings.general.row.newInterface.title")}
+                <Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
+              </span>
+            }
+            description={language.t("settings.general.row.newInterface.description", {
+              date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
+                oldInterfaceSunset,
+              ),
+            })}
+          >
+            <div data-action="settings-new-layout-designs">
+              <Switch
+                checked={settings.general.newLayoutDesigns()}
+                onChange={(checked) => {
+                  settings.general.setNewLayoutDesigns(checked)
+                  if (checked) return
+                  void import("@/components/dialog-settings").then((module) => {
+                    void dialog.show(() => <module.DialogSettings />)
+                  })
+                }}
+              />
+            </div>
+          </SettingsRowV2>
+        </SettingsListV2>
+      </div>
+
+      <Show when={!settings.general.newInterfaceNoticeDismissed()}>
+        <SettingsListV2>
+          <SettingsRowV2
+            title={language.t("settings.general.row.newInterfaceNotice.title")}
+            description={language.t("settings.general.row.newInterfaceNotice.description", {
+              date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
+                oldInterfaceSunset,
+              ),
+            })}
+          >
+            <ButtonV2 size="small" variant="ghost-muted" onClick={settings.general.dismissNewInterfaceNotice}>
+              {language.t("settings.general.row.newInterfaceNotice.dismiss")}
+            </ButtonV2>
+          </SettingsRowV2>
+        </SettingsListV2>
+      </Show>
     </div>
   )
 

packages/app/src/components/settings-v2/settings-v2.css

@@ -90,6 +90,11 @@
   box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
 }
 
+.settings-v2-interface-feature [data-component="settings-v2-list"] {
+  background-color: var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-raised);
+}
+
 [data-component="settings-v2-row"] {
   display: flex;
   flex-wrap: wrap;
@@ -128,7 +133,7 @@
 }
 
 [data-slot="settings-v2-row-description"] {
-  font-size: 11px;
+  font-size: 13px;
   font-weight: 440;
   line-height: 1;
   color: var(--v2-text-text-muted);