feat: enhance UI components and template selection

- Improve ChatModeSelector, CreateAppDialog, and ModelPicker components
- Add ProModeSelector and RuntimeModeSelector enhancements
- Update ReleaseChannelSelector with better UX
- Enhance hub page to include 3D template option
- Improve overall user experience for template selection and mode switching

Author: SFARPak

src/components/ChatModeSelector.tsx

@@ -33,7 +33,9 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
         setIsCreatingFolder(true);
         // Get the app to check its structure
         const app = await IpcClient.getInstance().getApp(appId);
-        const backendFiles = app.files.filter((file: string) => file.startsWith("backend/"));
+        const backendFiles = app.files.filter((file: string) =>
+          file.startsWith("backend/"),
+        );
 
         // If no backend files exist, create the backend folder
         if (backendFiles.length === 0) {
@@ -58,8 +60,12 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
         setIsCreatingFolder(true);
         // Get the app to check its structure
         const app = await IpcClient.getInstance().getApp(appId);
-        const frontendFiles = app.files.filter((file: string) => file.startsWith("frontend/"));
-        const backendFiles = app.files.filter((file: string) => file.startsWith("backend/"));
+        const frontendFiles = app.files.filter((file: string) =>
+          file.startsWith("frontend/"),
+        );
+        const backendFiles = app.files.filter((file: string) =>
+          file.startsWith("backend/"),
+        );
 
         // If no frontend files exist, create the frontend folder
         if (frontendFiles.length === 0) {
@@ -107,7 +113,11 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
   };
 
   return (
-    <Select value={selectedMode} onValueChange={handleModeChange} disabled={isCreatingFolder}>
+    <Select
+      value={selectedMode}
+      onValueChange={handleModeChange}
+      disabled={isCreatingFolder}
+    >
       <Tooltip>
         <TooltipTrigger asChild>
           <MiniSelectTrigger

src/components/CreateAppDialog.tsx

@@ -40,7 +40,7 @@ export function CreateAppDialog({
   const [appName, setAppName] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [appType, setAppType] = useState<"frontend" | "backend" | "fullstack">(
-    selectedBackendFramework ? "fullstack" : "frontend"
+    selectedBackendFramework ? "fullstack" : "frontend",
   );
   const { createApp } = useCreateApp();
   const { data: nameCheckResult } = useCheckName(appName);
@@ -62,7 +62,7 @@ export function CreateAppDialog({
         name: appName.trim(),
         selectedTemplateId: template?.id,
         selectedBackendFramework,
-        isFullStack: appType === "fullstack"
+        isFullStack: appType === "fullstack",
       });
       if (template && NEON_TEMPLATE_IDS.has(template.id)) {
         await neonTemplateHook({
@@ -100,16 +100,21 @@ export function CreateAppDialog({
             {template
               ? `Create a new app using the ${template.title} template.`
               : selectedBackendFramework
-              ? `Create a new app with the ${selectedBackendFramework} backend framework.`
-              : "Create a new app."}
+                ? `Create a new app with the ${selectedBackendFramework} backend framework.`
+                : "Create a new app."}
           </DialogDescription>
         </DialogHeader>
 
         <form onSubmit={handleSubmit}>
           <div className="grid gap-4 py-4">
             <div className="grid gap-2">
               <Label>App Type</Label>
-              <RadioGroup value={appType} onValueChange={(value: "frontend" | "backend" | "fullstack") => setAppType(value)}>
+              <RadioGroup
+                value={appType}
+                onValueChange={(value: "frontend" | "backend" | "fullstack") =>
+                  setAppType(value)
+                }
+              >
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem value="frontend" id="frontend" />
                   <Label htmlFor="frontend">Frontend (React)</Label>
@@ -120,7 +125,9 @@ export function CreateAppDialog({
                 </div>
                 <div className="flex items-center space-x-2">
                   <RadioGroupItem value="fullstack" id="fullstack" />
-                  <Label htmlFor="fullstack">Full Stack (Frontend + Backend)</Label>
+                  <Label htmlFor="fullstack">
+                    Full Stack (Frontend + Backend)
+                  </Label>
                 </div>
               </RadioGroup>
             </div>

src/components/ModelPicker.tsx

@@ -1,4 +1,7 @@
-import { isAliFullStackProEnabled, type LargeLanguageModel } from "@/lib/schemas";
+import {
+  isAliFullStackProEnabled,
+  type LargeLanguageModel,
+} from "@/lib/schemas";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -138,7 +141,8 @@ export function ModelPicker() {
   }
   const selectedModel = settings?.selectedModel;
   const isSmartAutoEnabled =
-    settings.enableProSmartFilesContextMode && isAliFullStackProEnabled(settings);
+    settings.enableProSmartFilesContextMode &&
+    isAliFullStackProEnabled(settings);
   const modelDisplayName = getModelDisplayName();
   // Split providers into primary and secondary groups (excluding auto)
   const providerEntries =

src/components/ProModeSelector.tsx

@@ -53,7 +53,8 @@ export function ProModeSelector() {
   };
 
   const hasProKey = settings ? hasAliFullStackProKey(settings) : false;
-  const proModeTogglable = hasProKey && Boolean(settings?.enableAliFullStackPro);
+  const proModeTogglable =
+    hasProKey && Boolean(settings?.enableAliFullStackPro);
 
   return (
     <Popover>

src/components/ReleaseChannelSelector.tsx

@@ -27,7 +27,9 @@ export function ReleaseChannelSelector() {
         action: {
           label: "Download Stable",
           onClick: () => {
-            IpcClient.getInstance().openExternalUrl("https://alifullstack.alitech.io/download");
+            IpcClient.getInstance().openExternalUrl(
+              "https://alifullstack.alitech.io/download",
+            );
           },
         },
       });

src/components/RuntimeModeSelector.tsx

@@ -21,7 +21,9 @@ export function RuntimeModeSelector() {
   const handleRuntimeModeChange = async (value: "host" | "docker") => {
     // Only allow host mode - Docker is disabled for app development
     if (value === "docker") {
-      showError("Docker mode is disabled. Apps always run in local development mode for optimal development experience.");
+      showError(
+        "Docker mode is disabled. Apps always run in local development mode for optimal development experience.",
+      );
       return;
     }
     try {
@@ -47,17 +49,20 @@ export function RuntimeModeSelector() {
             </SelectTrigger>
             <SelectContent>
               <SelectItem value="host">Local (default)</SelectItem>
-              <SelectItem value="docker" disabled>Docker (disabled)</SelectItem>
+              <SelectItem value="docker" disabled>
+                Docker (disabled)
+              </SelectItem>
             </SelectContent>
           </Select>
         </div>
         <div className="text-sm text-gray-500 dark:text-gray-400">
-          Apps always run in local development mode for optimal development experience.
-          Docker mode is disabled.
+          Apps always run in local development mode for optimal development
+          experience. Docker mode is disabled.
         </div>
       </div>
       <div className="text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 p-2 rounded">
-        ℹ️ Docker mode is disabled for app development. Apps run directly on your local machine for the best development experience.
+        ℹ️ Docker mode is disabled for app development. Apps run directly on
+        your local machine for the best development experience.
       </div>
     </div>
   );

src/pages/hub.tsx

@@ -8,7 +8,10 @@ import { TemplateCard } from "@/components/TemplateCard";
 import { BackendFrameworkCard } from "@/components/BackendFrameworkCard";
 import { CreateAppDialog } from "@/components/CreateAppDialog";
 import { NeonConnector } from "@/components/NeonConnector";
-import { backendFrameworksData, type BackendFramework } from "@/shared/backendFrameworks";
+import {
+  backendFrameworksData,
+  type BackendFramework,
+} from "@/shared/backendFrameworks";
 
 const HubPage: React.FC = () => {
   const router = useRouter();