immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 09:15:05 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

wip

Browse Source
This commit is contained in:
Alex Tran
2025-11-18 21:50:04 +00:00
parent 272ad7c773
commit 7eecfc43df
4 changed files with 327 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/workflow/schema-form/SchemaFormFields.svelte
View File

@@ -241,7 +241,7 @@
{@const label = component.title || component.label || key}
<div
class="flex flex-col gap-1 bg-gray-50 dark:bg-subtle border border-gray-200 dark:border-gray-700 p-4 rounded-xl"
class="flex flex-col gap-1 bg-gray-100 dark:bg-subtle border border-gray-200 dark:border-gray-700 p-4 rounded-xl"
>
<!-- Select component -->
{#if component.type === 'select'}

83
web/src/lib/components/workflows/workflow-summary-sidebar.svelte Normal file
View File

@@ -0,0 +1,83 @@
<script lang="ts">
import type { PluginActionResponseDto, PluginFilterResponseDto, PluginTriggerResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui';
import { mdiChevronRight, mdiFilterOutline, mdiFlashOutline, mdiPlayCircleOutline } from '@mdi/js';
interface Props {
trigger: PluginTriggerResponseDto;
filters: PluginFilterResponseDto[];
actions: PluginActionResponseDto[];
}
let { trigger, filters, actions }: Props = $props();
</script>
<div class="fixed right-20 top-1/2 -translate-y-1/2 z-10 w-64">
<div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg p-4">
<h3 class="text-sm font-semibold mb-4 text-gray-700 dark:text-gray-300">Workflow Summary</h3>
<div class="space-y-3">
<!-- Trigger -->
<div class="flex items-start gap-2">
<div class="shrink-0 mt-0.5">
<div class="h-6 w-6 rounded-md bg-indigo-100 dark:bg-primary/20 flex items-center justify-center">
<Icon icon={mdiFlashOutline} size="16" class="text-primary" />
</div>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">{trigger.name}</p>
</div>
</div>
<!-- Arrow -->
{#if filters.length > 0}
<div class="flex justify-center">
<Icon icon={mdiChevronRight} size="20" class="text-gray-400 rotate-90" />
</div>
<!-- Filters -->
<div class="flex items-start gap-2">
<div class="shrink-0 mt-0.5">
<div class="h-6 w-6 rounded-md bg-amber-100 dark:bg-amber-950 flex items-center justify-center">
<Icon icon={mdiFilterOutline} size="16" class="text-warning" />
</div>
</div>
<div class="flex-1 min-w-0">
<div class="space-y-1">
{#each filters as filter, index (filter.id)}
<p class="text-xs text-gray-700 dark:text-gray-300 truncate">
{index + 1}. {filter.title}
</p>
{/each}
</div>
</div>
</div>
{/if}
<!-- Arrow -->
{#if actions.length > 0}
<div class="flex justify-center">
<Icon icon={mdiChevronRight} size="20" class="text-gray-400 rotate-90" />
</div>
<!-- Actions -->
<div class="flex items-start gap-2">
<div class="shrink-0 mt-0.5">
<div class="h-6 w-6 rounded-md bg-teal-100 dark:bg-teal-950 flex items-center justify-center">
<Icon icon={mdiPlayCircleOutline} size="16" class="text-success" />
</div>
</div>
<div class="flex-1 min-w-0">
<div class="space-y-1">
{#each actions as action, index (action.id)}
<p class="text-xs text-gray-700 dark:text-gray-300 truncate">
{index + 1}. {action.title}
</p>
{/each}
</div>
</div>
</div>
{/if}
</div>
</div>
</div>