move enable button to info form

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

@@ -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/routes/(user)/utilities/workflows/+page.svelte

@@ -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/routes/(user)/utilities/workflows/[workflowId]/+page.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>