move enable button to info form

Author: alextran1502

i18n/en.json

@@ -1509,7 +1509,6 @@
   "no_results_description": "Try a synonym or more general keyword",
   "no_shared_albums_message": "Create an album to share photos and videos with people in your network",
   "no_uploads_in_progress": "No uploads in progress",
-  "no_workflows_yet": "No workflows yet",
   "not_allowed": "Not allowed",
   "not_available": "N/A",
   "not_in_any_album": "Not in any album",
@@ -2276,6 +2275,7 @@
   "workflow_delete_prompt": "Are you sure you want to delete this workflow?",
   "workflow_deleted": "Workflow deleted",
   "workflow_description": "Workflow description",
+  "workflow_info": "Workflow info",
   "workflow_json": "Workflow JSON",
   "workflow_json_help": "Edit the workflow configuration in JSON format. Changes will sync to the visual builder.",
   "workflow_name": "Workflow name",

pnpm-lock.yaml

@@ -24,7 +24,6 @@
 
   let pickerMetadata = $state<AlbumResponseDto | PersonResponseDto | AlbumResponseDto[] | PersonResponseDto[]>();
 
-  // Fetch metadata for existing picker values (albums/people)
   $effect(() => {
     if (!value) {
       pickerMetadata = undefined;

web/src/lib/assets/empty-workflows.svg

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
+  import emptyWorkflows from '$lib/assets/empty-workflows.svg';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
   import { AppRoute } from '$lib/constants';
   import type { WorkflowPayload } from '$lib/services/workflow.service';
   import { handleError } from '$lib/utils/handle-error';
@@ -187,17 +189,13 @@
   <section class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 sm:w-5/6 md:w-4xl">
       {#if workflows.length === 0}
-        <div class="flex flex-col items-center justify-center gap-4 py-20">
-          <Icon icon={mdiPlay} size="64" class="text-immich-primary dark:text-immich-dark-primary" />
-          <h2 class="text-2xl font-semibold">{$t('no_workflows_yet')}</h2>
-          <p class="text-center text-sm text-muted">
-            {$t('workflows_help_text')}
-          </p>
-          <Button shape="round" color="primary" onclick={handleCreateWorkflow}>
-            <Icon icon={mdiPlus} size="18" />
-            {$t('create_first_workflow')}
-          </Button>
-        </div>
+        <EmptyPlaceholder
+          title={$t('create_first_workflow')}
+          text={$t('workflows_help_text')}
+          onClick={handleCreateWorkflow}
+          src={emptyWorkflows}
+          class="mt-10 mx-auto"
+        />
       {:else}
         <div class="my-6 grid gap-6">
           {#each workflows as workflow (workflow.id)}

web/src/lib/components/workflows/WorkflowPickerField.svelte

@@ -370,19 +370,38 @@
             <div class="flex place-items-start gap-3">
               <Icon icon={mdiInformationOutline} size="20" class="mt-1" />
               <div class="flex flex-col">
-                <CardTitle>Basic information</CardTitle>
-                <CardDescription>Describing the workflow</CardDescription>
+                <CardTitle>
+                  {$t('workflow_info')}
+                </CardTitle>
               </div>
             </div>
           </CardHeader>
 
           <CardBody>
-            <VStack gap={6}>
-              <Field class="text-sm" label={$t('name')} for="workflow-name" required>
+            <VStack gap={4}>
+              <div
+                class="relative overflow-hidden border p-4 w-full rounded-xl"
+                class:bg-primary-50={editWorkflow.enabled}
+              >
+                <Field
+                  label={editWorkflow.enabled ? $t('enabled') : $t('disabled')}
+                  for="workflow-enabled"
+                  color={editWorkflow.enabled ? 'primary' : 'secondary'}
+                >
+                  <Switch id="workflow-enabled" bind:checked={editWorkflow.enabled} />
+                </Field>
+              </div>
+
+              <Field label={$t('name')} for="workflow-name" required>
                 <Input id="workflow-name" placeholder={$t('workflow_name')} bind:value={name} />
               </Field>
-              <Field class="text-sm" label={$t('description')} for="workflow-description">
-                <Textarea id="workflow-description" placeholder={$t('workflow_description')} bind:value={description} />
+              <Field label={$t('description')} for="workflow-description">
+                <Textarea
+                  id="workflow-description"
+                  grow
+                  placeholder={$t('workflow_description')}
+                  bind:value={description}
+                />
               </Field>
             </VStack>
           </CardBody>
@@ -559,7 +578,7 @@
 
 <ControlAppBar onClose={() => goto(AppRoute.WORKFLOWS)} backIcon={mdiArrowLeft} tailwindClasses="fixed! top-0! w-full">
   {#snippet leading()}
-    <p>{data.meta.title}</p>
+    <Text>{data.meta.title}</Text>
   {/snippet}
 
   {#snippet trailing()}
@@ -588,11 +607,6 @@
         </Button>
       </HStack>
 
-      <HStack gap={2}>
-        <Text class="text-sm">{editWorkflow.enabled ? 'ON' : 'OFF'}</Text>
-        <Switch bind:checked={editWorkflow.enabled} />
-      </HStack>
-
       <Button leadingIcon={mdiContentSave} size="small" color="primary" onclick={updateWorkflow} disabled={!hasChanges}>
         {$t('save')}
       </Button>