From e0d15c96f1e1dc563e30caac05ce774f7941eb8b Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 7 Apr 2024 19:18:49 -0500
Subject: [PATCH] feat(web): workflow automation ui

---
 .../components/elements/buttons/button.svelte |  2 +-
 .../side-bar/side-bar.svelte                  | 11 ++++
 .../workflow-page/workflow-card.svelte        | 10 +++
 .../workflow-page/workflow-editor.svelte      | 64 +++++++++++++++++++
 .../workflow-page/workflow-list.svelte        | 17 +++++
 web/src/routes/(user)/workflows/+page.svelte  | 15 +++++
 web/src/routes/(user)/workflows/+page.ts      | 12 ++++
 7 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 web/src/lib/components/workflow-page/workflow-card.svelte
 create mode 100644 web/src/lib/components/workflow-page/workflow-editor.svelte
 create mode 100644 web/src/lib/components/workflow-page/workflow-list.svelte
 create mode 100644 web/src/routes/(user)/workflows/+page.svelte
 create mode 100644 web/src/routes/(user)/workflows/+page.ts

diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte
index 31817f206a..9fc47c1634 100644
--- a/web/src/lib/components/elements/buttons/button.svelte
+++ b/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',
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index cfb0a6bde3..f4eaf6372b 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
@@ -9,12 +9,17 @@
     mdiArchiveArrowDownOutline,
     mdiHeartMultiple,
     mdiHeartMultipleOutline,
+    mdiHomeAutomation,
     mdiImageAlbum,
     mdiImageMultiple,
     mdiImageMultipleOutline,
     mdiMagnify,
     mdiMap,
+    mdiPageLayoutSidebarLeft,
+    mdiSettingsHelper,
+    mdiSlide,
     mdiTrashCanOutline,
+    mdiTuneVariant,
   } from '@mdi/js';
   import LoadingSpinner from '../loading-spinner.svelte';
   import StatusBox from '../status-box.svelte';
@@ -145,6 +150,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 -->
diff --git a/web/src/lib/components/workflow-page/workflow-card.svelte b/web/src/lib/components/workflow-page/workflow-card.svelte
new file mode 100644
index 0000000000..0f01ef35d3
--- /dev/null
+++ b/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 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>
diff --git a/web/src/lib/components/workflow-page/workflow-editor.svelte b/web/src/lib/components/workflow-page/workflow-editor.svelte
new file mode 100644
index 0000000000..8eeeaca690
--- /dev/null
+++ b/web/src/lib/components/workflow-page/workflow-editor.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import Button from '$lib/components/elements/buttons/button.svelte';
+</script>
+
+<section class="h-full dark:bg-zinc-900">
+  <div id="workflow-control-bar" class="m-4 flex justify-between place-items-center gap-2">
+    <div>
+      <p class="uppercase text-lg dark:text-white">
+        Add this photo to every albums and notify everybody about this glorious asset
+      </p>
+    </div>
+
+    <div>
+      <Button size="sm" color="red">Discard</Button>
+      <Button size="sm">Disable</Button>
+      <Button size="sm" color="green">Save</Button>
+    </div>
+  </div>
+
+  <div>
+    <div
+      class="bg-green-800 text-white min-h-[60px] flex place-items-center place-content-center translate-y-3 mx-4 mt-2 rounded-2xl"
+    >
+      When an asset is uploaded
+    </div>
+
+    <div class="w-full flex place-items-center place-content-center">
+      <div class="flex flex-col place-items-center z-10">
+        <div class="rounded-full border-[6px] border-green-800 h-[20px] w-[20px] bg-white translate-y-1"></div>
+        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-green-800 via-purple-800 to-indigo-900"></div>
+        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+      </div>
+    </div>
+
+    <div id="condition-blocks" class="-translate-y-3">
+      <div class="bg-indigo-800 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4">
+        And has Alex and Henry and Nate
+      </div>
+
+      <div
+        class="bg-indigo-800 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+      >
+        And from Nurnberg, Germany
+      </div>
+    </div>
+
+    <div class="w-full flex place-items-center place-content-center">
+      <div class="flex flex-col place-items-center z-10">
+        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white translate-y-1"></div>
+        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-indigo-800 via-purple-800 to-indigo-900"></div>
+        <div class="rounded-full border-[6px] border-indigo-800 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+      </div>
+    </div>
+
+    <div id="action-blocks">
+      <div class="w-full bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center">
+        Add to Album
+      </div>
+      <div class="w-full bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center">
+        Send webhook to abc.com with payload 123
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/web/src/lib/components/workflow-page/workflow-list.svelte b/web/src/lib/components/workflow-page/workflow-list.svelte
new file mode 100644
index 0000000000..c827ca74f8
--- /dev/null
+++ b/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-600 h-full relative overflow-scroll">
+  <div class="sticky top-0 dark:bg-immich-dark-bg flex justify-between place-items-center pr-2 py-4">
+    <p class="text-xs dark:text-white">CURRENT WORKFLOW</p>
+    <Button size="sm">New Workflow</Button>
+  </div>
+
+  <div>
+    {#each Array.from({ length: 50 }) as _, i}
+      <WorkflowCard />
+    {/each}
+  </div>
+</section>
diff --git a/web/src/routes/(user)/workflows/+page.svelte b/web/src/routes/(user)/workflows/+page.svelte
new file mode 100644
index 0000000000..e1abf8b7a1
--- /dev/null
+++ b/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}>
+  <section class="grid grid-cols-[400px_1fr] h-full">
+    <WorkflowList />
+    <WorkflowEditor />
+  </section>
+</UserPageLayout>
diff --git a/web/src/routes/(user)/workflows/+page.ts b/web/src/routes/(user)/workflows/+page.ts
new file mode 100644
index 0000000000..20aa9256d6
--- /dev/null
+++ b/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;