Skip to content

Commit 602df16

Browse files
committed
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
1 parent a000eaf commit 602df16

File tree

7 files changed

+52
-20
lines changed

7 files changed

+52
-20
lines changed

src/components/ChatModeSelector.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
3333
setIsCreatingFolder(true);
3434
// Get the app to check its structure
3535
const app = await IpcClient.getInstance().getApp(appId);
36-
const backendFiles = app.files.filter((file: string) => file.startsWith("backend/"));
36+
const backendFiles = app.files.filter((file: string) =>
37+
file.startsWith("backend/"),
38+
);
3739

3840
// If no backend files exist, create the backend folder
3941
if (backendFiles.length === 0) {
@@ -58,8 +60,12 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
5860
setIsCreatingFolder(true);
5961
// Get the app to check its structure
6062
const app = await IpcClient.getInstance().getApp(appId);
61-
const frontendFiles = app.files.filter((file: string) => file.startsWith("frontend/"));
62-
const backendFiles = app.files.filter((file: string) => file.startsWith("backend/"));
63+
const frontendFiles = app.files.filter((file: string) =>
64+
file.startsWith("frontend/"),
65+
);
66+
const backendFiles = app.files.filter((file: string) =>
67+
file.startsWith("backend/"),
68+
);
6369

6470
// If no frontend files exist, create the frontend folder
6571
if (frontendFiles.length === 0) {
@@ -107,7 +113,11 @@ export function ChatModeSelector({ appId }: { appId?: number }) {
107113
};
108114

109115
return (
110-
<Select value={selectedMode} onValueChange={handleModeChange} disabled={isCreatingFolder}>
116+
<Select
117+
value={selectedMode}
118+
onValueChange={handleModeChange}
119+
disabled={isCreatingFolder}
120+
>
111121
<Tooltip>
112122
<TooltipTrigger asChild>
113123
<MiniSelectTrigger

src/components/CreateAppDialog.tsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function CreateAppDialog({
4040
const [appName, setAppName] = useState("");
4141
const [isSubmitting, setIsSubmitting] = useState(false);
4242
const [appType, setAppType] = useState<"frontend" | "backend" | "fullstack">(
43-
selectedBackendFramework ? "fullstack" : "frontend"
43+
selectedBackendFramework ? "fullstack" : "frontend",
4444
);
4545
const { createApp } = useCreateApp();
4646
const { data: nameCheckResult } = useCheckName(appName);
@@ -62,7 +62,7 @@ export function CreateAppDialog({
6262
name: appName.trim(),
6363
selectedTemplateId: template?.id,
6464
selectedBackendFramework,
65-
isFullStack: appType === "fullstack"
65+
isFullStack: appType === "fullstack",
6666
});
6767
if (template && NEON_TEMPLATE_IDS.has(template.id)) {
6868
await neonTemplateHook({
@@ -100,16 +100,21 @@ export function CreateAppDialog({
100100
{template
101101
? `Create a new app using the ${template.title} template.`
102102
: selectedBackendFramework
103-
? `Create a new app with the ${selectedBackendFramework} backend framework.`
104-
: "Create a new app."}
103+
? `Create a new app with the ${selectedBackendFramework} backend framework.`
104+
: "Create a new app."}
105105
</DialogDescription>
106106
</DialogHeader>
107107

108108
<form onSubmit={handleSubmit}>
109109
<div className="grid gap-4 py-4">
110110
<div className="grid gap-2">
111111
<Label>App Type</Label>
112-
<RadioGroup value={appType} onValueChange={(value: "frontend" | "backend" | "fullstack") => setAppType(value)}>
112+
<RadioGroup
113+
value={appType}
114+
onValueChange={(value: "frontend" | "backend" | "fullstack") =>
115+
setAppType(value)
116+
}
117+
>
113118
<div className="flex items-center space-x-2">
114119
<RadioGroupItem value="frontend" id="frontend" />
115120
<Label htmlFor="frontend">Frontend (React)</Label>
@@ -120,7 +125,9 @@ export function CreateAppDialog({
120125
</div>
121126
<div className="flex items-center space-x-2">
122127
<RadioGroupItem value="fullstack" id="fullstack" />
123-
<Label htmlFor="fullstack">Full Stack (Frontend + Backend)</Label>
128+
<Label htmlFor="fullstack">
129+
Full Stack (Frontend + Backend)
130+
</Label>
124131
</div>
125132
</RadioGroup>
126133
</div>

src/components/ModelPicker.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { isAliFullStackProEnabled, type LargeLanguageModel } from "@/lib/schemas";
1+
import {
2+
isAliFullStackProEnabled,
3+
type LargeLanguageModel,
4+
} from "@/lib/schemas";
25
import { Button } from "@/components/ui/button";
36
import {
47
Tooltip,
@@ -138,7 +141,8 @@ export function ModelPicker() {
138141
}
139142
const selectedModel = settings?.selectedModel;
140143
const isSmartAutoEnabled =
141-
settings.enableProSmartFilesContextMode && isAliFullStackProEnabled(settings);
144+
settings.enableProSmartFilesContextMode &&
145+
isAliFullStackProEnabled(settings);
142146
const modelDisplayName = getModelDisplayName();
143147
// Split providers into primary and secondary groups (excluding auto)
144148
const providerEntries =

src/components/ProModeSelector.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ export function ProModeSelector() {
5353
};
5454

5555
const hasProKey = settings ? hasAliFullStackProKey(settings) : false;
56-
const proModeTogglable = hasProKey && Boolean(settings?.enableAliFullStackPro);
56+
const proModeTogglable =
57+
hasProKey && Boolean(settings?.enableAliFullStackPro);
5758

5859
return (
5960
<Popover>

src/components/ReleaseChannelSelector.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export function ReleaseChannelSelector() {
2727
action: {
2828
label: "Download Stable",
2929
onClick: () => {
30-
IpcClient.getInstance().openExternalUrl("https://alifullstack.alitech.io/download");
30+
IpcClient.getInstance().openExternalUrl(
31+
"https://alifullstack.alitech.io/download",
32+
);
3133
},
3234
},
3335
});

src/components/RuntimeModeSelector.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ export function RuntimeModeSelector() {
2121
const handleRuntimeModeChange = async (value: "host" | "docker") => {
2222
// Only allow host mode - Docker is disabled for app development
2323
if (value === "docker") {
24-
showError("Docker mode is disabled. Apps always run in local development mode for optimal development experience.");
24+
showError(
25+
"Docker mode is disabled. Apps always run in local development mode for optimal development experience.",
26+
);
2527
return;
2628
}
2729
try {
@@ -47,17 +49,20 @@ export function RuntimeModeSelector() {
4749
</SelectTrigger>
4850
<SelectContent>
4951
<SelectItem value="host">Local (default)</SelectItem>
50-
<SelectItem value="docker" disabled>Docker (disabled)</SelectItem>
52+
<SelectItem value="docker" disabled>
53+
Docker (disabled)
54+
</SelectItem>
5155
</SelectContent>
5256
</Select>
5357
</div>
5458
<div className="text-sm text-gray-500 dark:text-gray-400">
55-
Apps always run in local development mode for optimal development experience.
56-
Docker mode is disabled.
59+
Apps always run in local development mode for optimal development
60+
experience. Docker mode is disabled.
5761
</div>
5862
</div>
5963
<div className="text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 p-2 rounded">
60-
ℹ️ Docker mode is disabled for app development. Apps run directly on your local machine for the best development experience.
64+
ℹ️ Docker mode is disabled for app development. Apps run directly on
65+
your local machine for the best development experience.
6166
</div>
6267
</div>
6368
);

src/pages/hub.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ import { TemplateCard } from "@/components/TemplateCard";
88
import { BackendFrameworkCard } from "@/components/BackendFrameworkCard";
99
import { CreateAppDialog } from "@/components/CreateAppDialog";
1010
import { NeonConnector } from "@/components/NeonConnector";
11-
import { backendFrameworksData, type BackendFramework } from "@/shared/backendFrameworks";
11+
import {
12+
backendFrameworksData,
13+
type BackendFramework,
14+
} from "@/shared/backendFrameworks";
1215

1316
const HubPage: React.FC = () => {
1417
const router = useRouter();

0 commit comments

Comments
 (0)