light theme

web/src/lib/components/elements/buttons/button.svelte

@@ -42,7 +42,7 @@
       'text-immich-primary dark:text-immich-dark-primary enabled:dark:hover:bg-immich-dark-primary/10 enabled:hover:bg-immich-primary/10',
     'light-red': 'bg-[#F9DEDC] text-[#410E0B] enabled:hover:bg-red-50',
     red: 'bg-red-500 text-white enabled:hover:bg-red-400',
-    green: 'bg-green-500 text-gray-800 enabled:hover:bg-green-400/90',
+    green: 'bg-green-600 text-white enabled:hover:bg-green-400/90',
     gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
     'transparent-gray':
       'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -15,6 +15,7 @@
     mdiMagnify,
     mdiMap,
     mdiTrashCanOutline,
+    mdiTuneVariant,
   } from '@mdi/js';
   import LoadingSpinner from '../loading-spinner.svelte';
   import StatusBox from '../status-box.svelte';
@@ -145,6 +146,12 @@
         </svelte:fragment>
       </SideBarLink>
     {/if}
+
+    <div class="text-xs transition-all duration-200 dark:text-immich-dark-fg">
+      <p class="hidden p-6 group-hover:sm:block md:block">AUTOMATION</p>
+      <hr class="mx-4 mb-[31px] mt-8 block group-hover:sm:hidden md:hidden" />
+    </div>
+    <SideBarLink title="Workflows" routeId="/(user)/workflows" icon={mdiTuneVariant} />
   </nav>
 
   <!-- Status Box -->

web/src/lib/components/workflow-page/editor/workflow-action-card.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiPencil, mdiTrashCan } from '@mdi/js';
+</script>
+
+<div
+  class="bg-zinc-300 dark:bg-zinc-800 text-black dark:text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
+>
+  <p class="col-start-2 col-span-1">Add to album "RANDOM"</p>
+
+  <div class="col-start-3 col-span-1 flex gap-2 justify-self-end">
+    <CircleIconButton size="20" padding="2" title="Remove rule" icon={mdiTrashCan} />
+    <CircleIconButton size="20" padding="2" title="Edit rule" icon={mdiPencil} />
+  </div>
+</div>

web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { mdiPencil, mdiTrashCan } from '@mdi/js';
+</script>
+
+<div
+  class="bg-zinc-200 text-black dark:bg-zinc-700 dark:text-white min-h-[60px] grid grid-cols-[15%_70%_15%] place-items-center place-content-center rounded-2xl mx-4 mt-2 p-2"
+>
+  <p class="col-start-2 col-span-1">And has Alex and Henry and Nate</p>
+
+  <div class="col-start-3 col-span-1 flex gap-2 justify-self-end">
+    <CircleIconButton size="20" padding="2" title="Remove rule" icon={mdiTrashCan} />
+    <CircleIconButton size="20" padding="2" title="Edit rule" icon={mdiPencil} />
+  </div>
+</div>

web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte

@@ -0,0 +1,5 @@
+<div
+  class="bg-immich-primary text-white dark:bg-immich-dark-primary dark:text-black min-h-[60px] flex place-items-center place-content-center mx-4 mt-2 rounded-2xl"
+>
+  When an asset is uploaded
+</div>

web/src/lib/components/workflow-page/workflow-card.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // export let onSelect: () => void;
+</script>
+
+<div
+  class="rounded-3xl mr-2 my-4 min-h-[60px] grid grid-cols-[32px_1fr] gap-2 place-items-center p-4 place-content-center bg-gray-100 hover:bg-gray-200 dark:bg-gray-900 hover:dark:bg-gray-800"
+>
+  <div class="w-4 h-4 rounded-full bg-green-400"></div>
+  <p class="dark:text-gray-300">Add this photo to every albums and notify everybody about this glorious asset</p>
+</div>

web/src/lib/components/workflow-page/workflow-editor.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import WorkflowActionCard from '$lib/components/workflow-page/editor/workflow-action-card.svelte';
+  import WorkflowRuleCard from '$lib/components/workflow-page/editor/workflow-rule-card.svelte';
+  import WorkflowTriggerCard from '$lib/components/workflow-page/editor/workflow-trigger-card.svelte';
+  import { mdiPlus } from '@mdi/js';
+</script>
+
+<section class="h-full overflow-scroll">
+  <div
+    id="workflow-control-bar"
+    class="sticky top-0 flex justify-between place-items-center border-b border-gray-200 dark:border-gray-800 p-4 bg-zinc-50 dark:bg-zinc-900 z-20"
+  >
+    <p class="uppercase text-lg dark:text-white font-medium">
+      Add this photo to every albums and notify everybody about this glorious asset
+    </p>
+
+    <div class="flex gap-2">
+      <Button size="sm" color="red">Discard</Button>
+      <Button size="sm">Disable</Button>
+      <Button size="sm" color="green">Save</Button>
+    </div>
+  </div>
+
+  <div id="workflows-selection">
+    <!-- TRIGGER BLOCK -->
+    <div class="translate-y-3">
+      <p class="pl-4 text-xs dark:text-gray-300">TRIGGER</p>
+      <WorkflowTriggerCard />
+    </div>
+
+    <!-- VISUAL CONNECTOR -->
+    <div class="relative w-full grid grid-cols-3 place-items-center place-content-center z-10">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-xs dark:text-gray-300">RULES</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center">
+        <div
+          class="rounded-full border-[6px] border-immich-primary dark:border-immich-dark-primary h-[20px] w-[20px] bg-white translate-y-1"
+        ></div>
+        <div
+          class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-immich-primary dark:from-immich-dark-primary via-zinc-300 dark:via-gray-600 dark:to-zinc-700"
+        ></div>
+        <div
+          class="rounded-full border-[6px] border-zinc-200 dark:border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"
+        ></div>
+      </div>
+    </div>
+
+    <!-- RULES BLOCK -->
+    <div id="rule-block" class="-translate-y-6">
+      <WorkflowRuleCard />
+      <WorkflowRuleCard />
+
+      <div
+        class="border-2 dark:border-gray-700 dark:text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
+        <span><Icon path={mdiPlus} /></span> ADD RULE
+      </div>
+    </div>
+
+    <!-- VISUAL CONNECTOR -->
+    <div class="relative w-full grid grid-cols-3 place-items-center place-content-center -translate-y-9 z-10">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-xs dark:text-gray-300">ACTIONS</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center">
+        <div class="rounded-full border-[6px] border-gray-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
+        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-gray-900 via-indigo-800 to-gray-700"></div>
+        <div class="rounded-full border-[6px] border-gray-700 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+      </div>
+    </div>
+
+    <!-- ACTION BLOCK -->
+    <div id="action-block" class="-translate-y-14">
+      <WorkflowActionCard />
+      <WorkflowActionCard />
+      <div
+        class="border-2 dark:border-gray-500 dark:text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
+        <span><Icon path={mdiPlus} /></span> ADD ACTION
+      </div>
+    </div>
+  </div>
+</section>

web/src/lib/components/workflow-page/workflow-list.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+  import WorkflowCard from '$lib/components/workflow-page/workflow-card.svelte';
+</script>
+
+<section id="workflow-list" class="border-r border-gray-200 dark:border-gray-800 h-full relative overflow-scroll pr-2">
+  <div class="sticky top-0 dark:bg-immich-dark-bg flex justify-between place-items-center pr-2 py-4 bg-immich-bg">
+    <p class="text-xs dark:text-white">CURRENT WORKFLOWS</p>
+    <Button size="sm">New Workflow</Button>
+  </div>
+
+  <div>
+    {#each Array.from({ length: 50 }) as _}
+      <WorkflowCard />
+    {/each}
+  </div>
+</section>

web/src/routes/(user)/workflows/+page.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import WorkflowEditor from '$lib/components/workflow-page/workflow-editor.svelte';
+  import WorkflowList from '$lib/components/workflow-page/workflow-list.svelte';
+  import type { PageData } from './$types';
+
+  export let data: PageData;
+</script>
+
+<UserPageLayout title={data.meta.title} scrollbar={false}>
+  <section class="grid grid-cols-[25%_1fr] h-full">
+    <WorkflowList />
+    <WorkflowEditor />
+  </section>
+</UserPageLayout>

web/src/routes/(user)/workflows/+page.ts

@@ -0,0 +1,12 @@
+import { authenticate } from '$lib/utils/auth';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate();
+
+  return {
+    meta: {
+      title: 'Workflows',
+    },
+  };
+}) satisfies PageLoad;