apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-29 19:35:20 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(web): polish automations detail view

Browse source
This commit is contained in:
CREDO23 2026-05-28 15:40:18 +02:00
parent b90bed2dbd
commit 2d8d42bd9c
12 changed files with 65 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

24
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/automation-detail-content.tsx
View file

@ -72,16 +72,20 @@ export function AutomationDetailContent({
canDelete={perms.canDelete} canDelete={perms.canDelete}
/> />
<AutomationDefinitionSection definition={automation.definition} /> <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
<div className="space-y-6 min-w-0 lg:col-span-2">
<AutomationTriggersSection <AutomationDefinitionSection definition={automation.definition} />
triggers={automation.triggers} <AutomationRunsSection automationId={automation.id} />
automationId={automation.id} </div>
canUpdate={perms.canUpdate} <div className="space-y-6 min-w-0">
canDelete={perms.canDelete} <AutomationTriggersSection
/> triggers={automation.triggers}
automationId={automation.id}
<AutomationRunsSection automationId={automation.id} /> canUpdate={perms.canUpdate}
canDelete={perms.canDelete}
/>
</div>
</div>
</> </>
); );
} }

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-definition-section.tsx
View file

@ -24,7 +24,7 @@ export function AutomationDefinitionSection({ definition }: AutomationDefinition
const hasInputs = !!definition.inputs; const hasInputs = !!definition.inputs;
return ( return (
<Card> <Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<CardTitle className="text-base font-semibold">Definition</CardTitle> <CardTitle className="text-base font-semibold">Definition</CardTitle>
<span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5"> <span className="text-xs font-mono text-muted-foreground border border-border/60 rounded px-1.5 py-0.5">

60
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-detail-loading.tsx
View file

@ -3,12 +3,13 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton"; import { Skeleton } from "@/components/ui/skeleton";
/** /**
* Skeleton for the detail page. Same shell as the loaded view (header + * Skeleton for the detail page. Mirrors the loaded view's main/sidebar
* two stacked cards) so the layout doesn't jump on data arrival. * grid (Definition + Runs on the left, Triggers on the right) so layout
* doesn't reflow when data arrives.
*/ */
export function AutomationDetailLoading() { export function AutomationDetailLoading() {
return ( return (
<div className="space-y-6"> <>
<div className="space-y-3"> <div className="space-y-3">
<Skeleton className="h-4 w-32" /> <Skeleton className="h-4 w-32" />
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@ -18,25 +19,38 @@ export function AutomationDetailLoading() {
<Skeleton className="h-4 w-96" /> <Skeleton className="h-4 w-96" />
</div> </div>
<Card> <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
<CardHeader> <div className="space-y-6 min-w-0 lg:col-span-2">
<Skeleton className="h-5 w-32" /> <Card className="border-border/60 bg-accent">
</CardHeader> <CardHeader>
<CardContent className="space-y-4"> <Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-3/4" /> </CardHeader>
<Skeleton className="h-4 w-1/2" /> <CardContent className="space-y-4">
<Skeleton className="h-24 w-full" /> <Skeleton className="h-4 w-3/4" />
</CardContent> <Skeleton className="h-4 w-1/2" />
</Card> <Skeleton className="h-24 w-full" />
</CardContent>
<Card> </Card>
<CardHeader> <Card className="border-border/60 bg-accent">
<Skeleton className="h-5 w-24" /> <CardHeader>
</CardHeader> <Skeleton className="h-5 w-32" />
<CardContent> </CardHeader>
<Skeleton className="h-20 w-full" /> <CardContent>
</CardContent> <Skeleton className="h-20 w-full" />
</Card> </CardContent>
</div> </Card>
</div>
<div className="space-y-6 min-w-0">
<Card className="border-border/60 bg-accent">
<CardHeader>
<Skeleton className="h-5 w-24" />
</CardHeader>
<CardContent>
<Skeleton className="h-20 w-full" />
</CardContent>
</Card>
</div>
</div>
</>
); );
} }

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-runs-section.tsx
View file

@ -23,7 +23,7 @@ export function AutomationRunsSection({ automationId }: AutomationRunsSectionPro
const runs = data?.items ?? []; const runs = data?.items ?? [];
return ( return (
<Card> <Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<div className="space-y-1"> <div className="space-y-1">
<CardTitle className="text-base font-semibold inline-flex items-center gap-2"> <CardTitle className="text-base font-semibold inline-flex items-center gap-2">

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/automation-triggers-section.tsx
View file

@ -23,7 +23,7 @@ export function AutomationTriggersSection({
canDelete, canDelete,
}: AutomationTriggersSectionProps) { }: AutomationTriggersSectionProps) {
return ( return (
<Card> <Card className="border-border/60 bg-accent">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<CardTitle className="text-base font-semibold">Triggers</CardTitle> <CardTitle className="text-base font-semibold">Triggers</CardTitle>
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/plan-step-card.tsx
View file

@ -15,7 +15,7 @@ interface PlanStepCardProps {
*/ */
export function PlanStepCard({ step, index }: PlanStepCardProps) { export function PlanStepCard({ step, index }: PlanStepCardProps) {
return ( return (
<div className="rounded-md border border-border/60 bg-background overflow-hidden"> <div className="rounded-md border border-border/60 overflow-hidden">
<div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30"> <div className="flex items-center gap-2 px-4 py-2 border-b border-border/60 bg-muted/30">
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground"> <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
{index + 1} {index + 1}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-details-panel.tsx
View file

@ -109,7 +109,7 @@ function Section({
function JsonBlock({ value }: { value: unknown }) { function JsonBlock({ value }: { value: unknown }) {
return ( return (
<pre className="rounded-md bg-background/60 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64"> <pre className="rounded-md bg-muted/40 px-3 py-2 text-[11px] font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-words max-h-64">
{JSON.stringify(value, null, 2)} {JSON.stringify(value, null, 2)}
</pre> </pre>
); );

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/run-row.tsx
View file

@ -24,7 +24,7 @@ export function RunRow({ run, automationId }: RunRowProps) {
: formatRelativeDate(run.created_at); : formatRelativeDate(run.created_at);
return ( return (
<div className="rounded-md border border-border/60 bg-background overflow-hidden"> <div className="rounded-md border border-border/60 overflow-hidden">
<button <button
type="button" type="button"
onClick={() => setOpen((value) => !value)} onClick={() => setOpen((value) => !value)}

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/runs-loading.tsx
View file

@ -9,7 +9,7 @@ export function RunsLoading() {
{ROW_KEYS.map((key) => ( {ROW_KEYS.map((key) => (
<div <div
key={key} key={key}
className="flex items-center justify-between gap-4 rounded-md border border-border/60 bg-background/50 px-4 py-3" className="flex items-center justify-between gap-4 rounded-md border border-border/60 px-4 py-3"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Skeleton className="h-5 w-20 rounded-md" /> <Skeleton className="h-5 w-20 rounded-md" />

2
surfsense_web/app/dashboard/[search_space_id]/automations/[automation_id]/components/trigger-card.tsx
View file

@ -48,7 +48,7 @@ export function TriggerCard({ trigger, automationId, canUpdate, canDelete }: Tri
return ( return (
<> <>
<div className="rounded-md border border-border/60 bg-background overflow-hidden"> <div className="rounded-md border border-border/60 overflow-hidden">
<div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60"> <div className="flex items-center justify-between gap-4 px-4 py-3 border-b border-border/60">
<div className="flex items-center gap-3 min-w-0"> <div className="flex items-center gap-3 min-w-0">
<CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden /> <CalendarClock className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden />

2
surfsense_web/app/dashboard/[search_space_id]/automations/new/components/automation-json-form.tsx
View file

@ -75,7 +75,7 @@ export function AutomationJsonForm({ searchSpaceId }: AutomationJsonFormProps) {
const hasIssues = issues.length > 0; const hasIssues = issues.length > 0;
return ( return (
<Card> <Card className="border-border/60 bg-accent">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
<CardTitle className="text-base font-semibold inline-flex items-center gap-2"> <CardTitle className="text-base font-semibold inline-flex items-center gap-2">
<FileJson className="h-4 w-4 text-muted-foreground" aria-hidden /> <FileJson className="h-4 w-4 text-muted-foreground" aria-hidden />

8
surfsense_web/components/layout/providers/LayoutDataProvider.tsx
View file

@ -726,9 +726,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
: undefined : undefined
} }
workspacePanelContentClassName={ workspacePanelContentClassName={
isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage || isAutomationsPage isAutomationsPage
? "max-w-5xl" ? "max-w-none"
: undefined : isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage
? "max-w-5xl"
: undefined
} }
isLoadingChats={isLoadingThreads} isLoadingChats={isLoadingThreads}
activeSlideoutPanel={activeSlideoutPanel} activeSlideoutPanel={activeSlideoutPanel}