mirror/QuickStack
1
0
Fork 0
mirror of https://github.com/biersoeckli/QuickStack.git synced 2026-02-10 21:49:19 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat/add scrollable areas to app action buttons and tabs for improved UI navigation

Browse Source
This commit is contained in:
biersoeckli
2025-01-07 13:47:56 +00:00
parent 56395c7303
commit 73501349ca
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/project/app/[appId]/app-action-buttons.tsx
View File

@@ -6,9 +6,10 @@ import { deploy, startApp, stopApp } from "./actions";
import { AppExtendedModel } from "@/shared/model/app-extended.model";
import { Toast } from "@/frontend/utils/toast.utils";
import AppStatus from "./app-status";
import { Hammer, Pause, Play, Rocket } from "lucide-react";
import { ExternalLink, Hammer, Pause, Play, Rocket } from "lucide-react";
import { toast } from "sonner";
import { AppEventsDialog } from "./app-events-dialog";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
export default function AppActionButtons({
app
@@ -16,12 +17,22 @@ export default function AppActionButtons({
app: AppExtendedModel;
}) {
return <Card>
<CardContent className="p-4 flex gap-4">
<div className="self-center"><AppEventsDialog app={app}><AppStatus appId={app.id} /></AppEventsDialog></div>
<Button onClick={() => Toast.fromAction(() => deploy(app.id))}><Rocket /> Deploy</Button>
<Button onClick={() => Toast.fromAction(() => deploy(app.id, true))} variant="secondary"><Hammer /> Rebuild</Button>
<Button onClick={() => Toast.fromAction(() => startApp(app.id))} variant="secondary"><Play />Start</Button>
<Button onClick={() => Toast.fromAction(() => stopApp(app.id))} variant="secondary"><Pause /> Stop</Button>
<CardContent className="p-4 ">
<ScrollArea>
<div className="flex gap-4">
<div className="self-center"><AppEventsDialog app={app}><AppStatus appId={app.id} /></AppEventsDialog></div>
<Button onClick={() => Toast.fromAction(() => deploy(app.id))}><Rocket /> Deploy</Button>
<Button onClick={() => Toast.fromAction(() => deploy(app.id, true))} variant="secondary"><Hammer /> Rebuild</Button>
<Button onClick={() => Toast.fromAction(() => startApp(app.id))} variant="secondary"><Play />Start</Button>
<Button onClick={() => Toast.fromAction(() => stopApp(app.id))} variant="secondary"><Pause /> Stop</Button>
{app.appDomains.length > 0 && <Button onClick={() => {
const domain = app.appDomains[0];
const protocol = domain.useSsl ? 'https' : 'http';
window.open(`${protocol}://${domain.hostname}`, '_blank');
}} variant="secondary"><ExternalLink /></Button>}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</CardContent>
</Card >;
}

23
src/app/project/app/[appId]/app-tabs.tsx
View File

@@ -19,6 +19,7 @@ import DbCredentials from "./credentials/db-crendentials";
import VolumeBackupList from "./volumes/volume-backup";
import { VolumeBackupExtendedModel } from "@/shared/model/volume-backup-extended.model";
import BasicAuth from "./advanced/basic-auth";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
export default function AppTabs({
app,
@@ -39,15 +40,19 @@ export default function AppTabs({
return (
<Tabs defaultValue="general" value={tabName} onValueChange={(newTab) => openTab(newTab)} className="space-y-4">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
{app.appType !== 'APP' && <TabsTrigger value="credentials">Credentials</TabsTrigger>}
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="storage">Storage</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<ScrollArea >
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
{app.appType !== 'APP' && <TabsTrigger value="credentials">Credentials</TabsTrigger>}
<TabsTrigger value="general">General</TabsTrigger>
<TabsTrigger value="environment">Environment</TabsTrigger>
<TabsTrigger value="domains">Domains</TabsTrigger>
<TabsTrigger value="storage">Storage</TabsTrigger>
<TabsTrigger value="advanced">Advanced</TabsTrigger>
</TabsList>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="overview" className="grid grid-cols-1 3xl:grid-cols-2 gap-4">
<MonitoringTab app={app} />
<Logs app={app} />