From 16543a233bd2d582269287e5df9953daa81b2397 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Sun, 7 Apr 2024 20:37:26 -0500
Subject: [PATCH] basic ui complete

---
 .../editor/workflow-action-card.svelte        | 15 ++++
 .../editor/workflow-rule-card.svelte          | 15 ++++
 .../editor/workflow-trigger-card.svelte       |  5 ++
 .../workflow-page/workflow-editor.svelte      | 83 +++++++++----------
 .../workflow-page/workflow-list.svelte        |  6 +-
 web/src/routes/(user)/workflows/+page.svelte  |  2 +-
 6 files changed, 79 insertions(+), 47 deletions(-)
 create mode 100644 web/src/lib/components/workflow-page/editor/workflow-action-card.svelte
 create mode 100644 web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte
 create mode 100644 web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte

diff --git a/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-action-card.svelte
new file mode 100644
index 0000000000..966537a980
--- /dev/null
+++ b/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-gray-800 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>
diff --git a/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-rule-card.svelte
new file mode 100644
index 0000000000..7d9a522eda
--- /dev/null
+++ b/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-gray-700 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>
diff --git a/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte b/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte
new file mode 100644
index 0000000000..a270733a39
--- /dev/null
+++ b/web/src/lib/components/workflow-page/editor/workflow-trigger-card.svelte
@@ -0,0 +1,5 @@
+<div
+  class="dark:bg-immich-dark-primary text-black min-h-[60px] flex place-items-center place-content-center mx-4 mt-2 rounded-2xl"
+>
+  When an asset is uploaded
+</div>
diff --git a/web/src/lib/components/workflow-page/workflow-editor.svelte b/web/src/lib/components/workflow-page/workflow-editor.svelte
index 90c070d181..8bd5c87b3e 100644
--- a/web/src/lib/components/workflow-page/workflow-editor.svelte
+++ b/web/src/lib/components/workflow-page/workflow-editor.svelte
@@ -1,76 +1,73 @@
 <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">
-  <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
+    id="workflow-control-bar"
+    class="flex justify-between place-items-center border-b border-gray-800 p-4 bg-zinc-900"
+  >
+    <p class="uppercase text-lg dark:text-white">
+      Add this photo to every albums and notify everybody about this glorious asset
+    </p>
 
-    <div>
+    <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>
-    <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 id="workflows-selection">
+    <!-- TRIGGER BLOCK -->
+    <div class="translate-y-3">
+      <p class="pl-4 text-sm dark:text-gray-300">TRIGGER</p>
+      <WorkflowTriggerCard />
     </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-900 h-[20px] w-[20px] bg-white -translate-y-1"></div>
+    <!-- VISUAL CONNECTOR -->
+    <div class="w-full grid grid-cols-3 place-items-center place-content-center">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">RULES</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
+        <div
+          class="rounded-full border-[6px] 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-dark-primary via-gray-600 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>
 
-    <div id="condition-blocks" class="-translate-y-3">
-      <div class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4">
-        And has Alex and Henry and Nate
-      </div>
+    <!-- RULES BLOCK -->
+    <div id="rule-block" class="-translate-y-6">
+      <WorkflowRuleCard />
+      <WorkflowRuleCard />
 
       <div
-        class="bg-indigo-900 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
-      >
-        And from Nurnberg, Germany
-      </div>
-
-      <div
-        class="border-2 border-indigo-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
+        class="border-2 border-gray-700 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>
 
-    <div class="w-full flex place-items-center place-content-center -translate-y-6">
-      <div class="flex flex-col place-items-center z-10">
-        <div class="rounded-full border-[6px] border-indigo-900 h-[20px] w-[20px] bg-white translate-y-1"></div>
-        <div class="h-[60px] w-[5px] bg-white bg-gradient-to-b from-indigo-900 via-indigo-800 to-gray-700"></div>
+    <!-- VISUAL CONNECTOR -->
+    <div class="w-full grid grid-cols-3 place-items-center place-content-center -translate-y-9">
+      <p class="col-start-1 col-span-1 justify-self-start self-end pl-4 pb-6 text-sm dark:text-gray-300">ACTIONS</p>
+      <div class="col-start-2 col-span-1 flex flex-col place-items-center z-10">
+        <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>
 
-    <div id="action-blocks" class="-translate-y-11">
-      <div
-        class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
-      >
-        Add to Album
-      </div>
-      <div
-        class="bg-gray-700 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
-      >
-        Send webhook to abc.com with payload 123
-      </div>
+    <!-- ACTION BLOCK -->
+    <div id="action-block" class="-translate-y-14">
+      <WorkflowActionCard />
+      <WorkflowActionCard />
       <div
         class="border-2 border-gray-500 text-white min-h-[60px] flex place-items-center place-content-center rounded-2xl mx-4 mt-2"
       >
diff --git a/web/src/lib/components/workflow-page/workflow-list.svelte b/web/src/lib/components/workflow-page/workflow-list.svelte
index c827ca74f8..80a37d625c 100644
--- a/web/src/lib/components/workflow-page/workflow-list.svelte
+++ b/web/src/lib/components/workflow-page/workflow-list.svelte
@@ -3,14 +3,14 @@
   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">
+<section id="workflow-list" class="border-r 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">
-    <p class="text-xs dark:text-white">CURRENT WORKFLOW</p>
+    <p class="text-xs dark:text-white">CURRENT WORKFLOWS</p>
     <Button size="sm">New Workflow</Button>
   </div>
 
   <div>
-    {#each Array.from({ length: 50 }) as _, i}
+    {#each Array.from({ length: 50 }) as _}
       <WorkflowCard />
     {/each}
   </div>
diff --git a/web/src/routes/(user)/workflows/+page.svelte b/web/src/routes/(user)/workflows/+page.svelte
index e1abf8b7a1..5c9dc4a861 100644
--- a/web/src/routes/(user)/workflows/+page.svelte
+++ b/web/src/routes/(user)/workflows/+page.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <UserPageLayout title={data.meta.title}>
-  <section class="grid grid-cols-[400px_1fr] h-full">
+  <section class="grid grid-cols-[25%_1fr] h-full">
     <WorkflowList />
     <WorkflowEditor />
   </section>