merge main

This commit is contained in:
Alex Tran
2025-11-25 22:18:03 +00:00
57 changed files with 2473 additions and 2121 deletions

View File

@@ -2,6 +2,7 @@
import type { PluginActionResponseDto, PluginFilterResponseDto } from '@immich/sdk';
import { Icon, Modal, ModalBody } from '@immich/ui';
import { mdiFilterOutline, mdiPlayCircleOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
interface Props {
filters: PluginFilterResponseDto[];
@@ -25,34 +26,32 @@
};
</script>
<Modal title="Add Workflow Step" icon={false} onClose={() => onClose()}>
<Modal title={$t('add_workflow_step')} icon={false} onClose={() => onClose()}>
<ModalBody>
<div class="space-y-6">
<!-- Filters Section -->
{#if availableFilters.length > 0 && (!type || type === 'filter')}
<div>
<div class="flex items-center gap-2 mb-3">
<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>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Filters</h3>
</div>
<div class="grid grid-cols-1 gap-2">
{#each availableFilters as filter (filter.id)}
<button
type="button"
onclick={() => handleSelect('filter', filter)}
class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-amber-300 dark:hover:border-amber-700 hover:bg-amber-50/50 dark:hover:bg-amber-950/20 transition-all text-left"
>
<div class="flex-1">
<p class="font-medium text-sm text-gray-900 dark:text-gray-100">{filter.title}</p>
{#if filter.description}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{filter.description}</p>
{/if}
</div>
</button>
{/each}
<div class="flex items-center gap-2 mb-3">
<div class="h-6 w-6 rounded-md bg-warning-100 flex items-center justify-center">
<Icon icon={mdiFilterOutline} size="16" class="text-warning" />
</div>
<h3 class="text-sm font-semibold">Filters</h3>
</div>
<div class="grid grid-cols-1 gap-2">
{#each availableFilters as filter (filter.id)}
<button
type="button"
onclick={() => handleSelect('filter', filter)}
class="flex items-start gap-3 p-3 rounded-lg border bg-light-100 hover:border-warning-500 dark:hover:border-warning-500 text-left"
>
<div class="flex-1">
<p class="font-medium text-sm">{filter.title}</p>
{#if filter.description}
<p class="text-xs text-light-500 mt-1">{filter.description}</p>
{/if}
</div>
</button>
{/each}
</div>
{/if}
@@ -60,22 +59,22 @@
{#if availableActions.length > 0 && (!type || type === 'action')}
<div>
<div class="flex items-center gap-2 mb-3">
<div class="h-6 w-6 rounded-md bg-teal-100 dark:bg-teal-950 flex items-center justify-center">
<div class="h-6 w-6 rounded-md bg-success-50 flex items-center justify-center">
<Icon icon={mdiPlayCircleOutline} size="16" class="text-success" />
</div>
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Actions</h3>
<h3 class="text-sm font-semibold">Actions</h3>
</div>
<div class="grid grid-cols-1 gap-2">
{#each availableActions as action (action.id)}
<button
type="button"
onclick={() => handleSelect('action', action)}
class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-teal-300 dark:hover:border-teal-700 hover:bg-teal-50/50 dark:hover:bg-teal-950/20 transition-all text-left"
class="flex items-start gap-3 p-3 rounded-lg border bg-light-100 hover:border-success-500 dark:hover:border-success-500 text-left"
>
<div class="flex-1">
<p class="font-medium text-sm text-gray-900 dark:text-gray-100">{action.title}</p>
<p class="font-medium text-sm">{action.title}</p>
{#if action.description}
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">{action.description}</p>
<p class="text-xs text-light-500 mt-1">{action.description}</p>
{/if}
</div>
</button>