Refactor layout components to improve responsiveness and accessibility; integrate appShell classes for consistent styling across DesktopAIShell and BottomNav. Update SelectPage to enhance option selection UI with image support and language filtering logic in SystemPage for better localization handling.

client/src/pages/SelectPage.tsx

@@ -13,8 +13,12 @@
 import { useLocation } from "wouter";
 import { ChevronLeft, Check } from "lucide-react";
 import { useDevice } from "@/contexts/DeviceContext";
+import { cn } from "@/lib/utils";
 import { useEffect, useState } from "react";
 
+const iisModeImageUrl = (index: number) =>
+  `${import.meta.env.BASE_URL}IIS/iis_app${index + 1}.png`;
+
 /* ── Key → API field mapping ── */
 const KEY_TO_SETTING: Record<string, string> = {
   effect_value: "effect_value",
@@ -118,26 +122,68 @@ export default function SelectPage() {
         <div className="w-8" />
       </div>
 
-      {/* ── Options list ── */}
       <div className="px-4 pt-4 pb-24">
-        <div className="ios-list-group">
-          {options.map((opt, idx) => {
-            const isSelected = idx === selectedIdx;
-            return (
-              <button
-                key={idx}
-                className="ios-list-row w-full text-left active:bg-white/5 transition-colors"
-                onClick={() => void handleSelect(idx)}>
-                <span className={`flex-1 text-[16px] ${isSelected ? "text-white font-medium" : "text-white/75"}`}>
-                  {opt}
-                </span>
-                {isSelected && (
-                  <Check size={18} style={{ color: "#00FFF6" }} />
-                )}
-              </button>
-            );
-          })}
-        </div>
+        {key === "IISMode" ? (
+          <div className="grid w-full grid-cols-2 gap-3">
+            {options.map((opt, idx) => {
+              const isSelected = idx === selectedIdx;
+              return (
+                <button
+                  key={idx}
+                  type="button"
+                  disabled={saving}
+                  className={cn(
+                    "flex flex-col items-center gap-2 rounded-xl border-2 p-1.5 transition-all active:scale-[0.98] disabled:opacity-60",
+                    isSelected
+                      ? "border-[#00FFF6] shadow-[0_0_14px_rgba(0,255,246,0.35)]"
+                      : "border-white/10",
+                  )}
+                  onClick={() => void handleSelect(idx)}
+                  aria-pressed={isSelected}
+                  aria-label={opt}
+                >
+                  <img
+                    src={iisModeImageUrl(idx)}
+                    alt={opt}
+                    className="block w-full h-auto rounded-lg bg-black/40"
+                    loading="lazy"
+                  />
+                  <span
+                    className={cn(
+                      "w-6 h-6 rounded-full flex items-center justify-center shrink-0",
+                      isSelected
+                        ? "bg-[#00FFF6] text-black shadow-[0_0_10px_rgba(0,255,246,0.45)]"
+                        : "border-2 border-white/20",
+                    )}
+                  >
+                    {isSelected && <Check size={12} strokeWidth={3} />}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="ios-list-group">
+            {options.map((opt, idx) => {
+              const isSelected = idx === selectedIdx;
+              return (
+                <button
+                  key={idx}
+                  className="ios-list-row w-full text-left active:bg-white/5 transition-colors"
+                  onClick={() => void handleSelect(idx)}
+                  disabled={saving}
+                >
+                  <span className={`flex-1 text-[16px] ${isSelected ? "text-white font-medium" : "text-white/75"}`}>
+                    {opt}
+                  </span>
+                  {isSelected && (
+                    <Check size={18} style={{ color: "#00FFF6" }} />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );