ui: Modal work

web/src/lib/components/album-page/rule-selection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import BaseModal from '$lib/components/shared-components/base-modal.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import { AlbumResponseDto } from '@api';
+
+  export let album: AlbumResponseDto;
+  const dispatch = createEventDispatcher();
+</script>
+
+<BaseModal
+  on:close={() => {
+    dispatch('close');
+  }}
+>
+  <svelte:fragment slot="title">
+    <span class="flex place-items-center gap-2">
+      <p class="font-medium text-immich-fg dark:text-immich-dark-fg">Select people & rule</p>
+    </span>
+  </svelte:fragment>
+</BaseModal>

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -23,6 +23,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import RuleSelection from '$lib/components/album-page/rule-selection.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute, dateFormats } from '$lib/constants';
   import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
@@ -40,6 +41,7 @@
   import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
   import Link from 'svelte-material-icons/Link.svelte';
   import Plus from 'svelte-material-icons/Plus.svelte';
+  import FaceMan from 'svelte-material-icons/FaceMan.svelte';
   import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
   import type { PageData } from './$types';
 
@@ -56,6 +58,7 @@
     SELECT_ASSETS = 'select-assets',
     ALBUM_OPTIONS = 'album-options',
     VIEW_USERS = 'view-users',
+    RULE_SELECTION = 'rule-selection',
     VIEW = 'view',
   }
 
@@ -338,7 +341,7 @@
             <Button
               size="sm"
               rounded="lg"
-              disabled={album.assetCount == 0}
+              disabled={album.assetCount === 0}
               on:click={() => (viewMode = ViewMode.SELECT_USERS)}
             >
               Share
@@ -352,7 +355,7 @@
       <ControlAppBar on:close-button-click={handleCloseSelectAssets}>
         <svelte:fragment slot="leading">
           <p class="text-lg dark:text-immich-dark-fg">
-            {#if $timelineSelected.size == 0}
+            {#if $timelineSelected.size === 0}
               Add to album
             {:else}
               {$timelineSelected.size.toLocaleString($locale)} selected
@@ -398,7 +401,7 @@
         <!-- ALBUM TITLE -->
         <section class="pt-24">
           <input
-            on:keydown={(e) => e.key == 'Enter' && titleInput.blur()}
+            on:keydown={(e) => e.key === 'Enter' && titleInput.blur()}
             on:blur={handleUpdateName}
             class="w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
               ? 'hover:border-gray-400'
@@ -474,14 +477,26 @@
       {/if}
 
       {#if album.assetCount === 0}
-        <section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
+        <section id="empty-album" class=" mt-[200px] flex flex-col place-content-center place-items-center">
-          <div class="w-[300px]">
+          <div class="w-[340px]">
             <p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
+
+            <button
+              on:click={() => (viewMode = ViewMode.RULE_SELECTION)}
+              class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
+            >
+              <span class="text-text-immich-primary dark:text-immich-dark-primary"><FaceMan size="34" /> </span>
+              <div class="text-left">
+                <div class="text-lg">Select people & rules</div>
+                <div class="text-sm">Create an auto-updating album</div>
+              </div>
+            </button>
+
             <button
               on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
               class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
             >
-              <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
+              <span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="34" /> </span>
               <span class="text-lg">Select photos</span>
             </button>
           </div>
@@ -533,3 +548,7 @@
     on:updated={({ detail: description }) => handleUpdateDescription(description)}
   />
 {/if}
+
+{#if viewMode === ViewMode.RULE_SELECTION}
+  <RuleSelection on:close={() => (viewMode = ViewMode.VIEW)} {album} />
+{/if}