From 974227a95e89f6caacc5f0caa91875b7ea85cdb9 Mon Sep 17 00:00:00 2001
From: Alex Tran <alex.tran1502@gmail.com>
Date: Wed, 16 Aug 2023 23:03:18 -0500
Subject: [PATCH] format

---
 .../lib/components/elements/dropdown.svelte   |  6 +--
 web/src/lib/stores/preferences.store.ts       |  4 +-
 web/src/routes/(user)/albums/+page.svelte     | 39 ++++++++++---------
 3 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/elements/dropdown.svelte b/web/src/lib/components/elements/dropdown.svelte
index 89af518e..2feef233 100644
--- a/web/src/lib/components/elements/dropdown.svelte
+++ b/web/src/lib/components/elements/dropdown.svelte
@@ -11,7 +11,7 @@
 
   export let options: DropdownOption[] = [];
   export let value = options[0];
-  export let icons: typeof LinkButton[] | undefined = undefined;
+  export let icons: (typeof LinkButton)[] | undefined = undefined;
 
   let showMenu = false;
 
@@ -24,8 +24,8 @@
     showMenu = false;
   };
 
-  $: index = options.findIndex(option => option === value)
-  $: icon = icons?.[index]
+  $: index = options.findIndex((option) => option === value);
+  $: icon = icons?.[index];
 </script>
 
 <div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index dbab68b5..281b0623 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -46,10 +46,10 @@ export interface AlbumViewSettings {
 
 export enum AlbumViewMode {
   Cover = 'Cover',
-  List = 'List'
+  List = 'List',
 }
 
 export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settings', {
   sortBy: 'Most recent photo',
-  view: AlbumViewMode.Cover
+  view: AlbumViewMode.Cover,
 });
diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 802b20e0..4b4ac217 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -29,15 +29,18 @@
   export let data: PageData;
 
   const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
-  const viewOptions = [{
-    name: AlbumViewMode.Cover,
-    icon: ViewGridOutline
-  }, {
-    name: AlbumViewMode.List,
-    icon: FormatListBulletedSquare
-  }]
-  const viewOptionNames = viewOptions.map(option => option.name)
-  const viewOptionIcons = viewOptions.map(option => option.icon)
+  const viewOptions = [
+    {
+      name: AlbumViewMode.Cover,
+      icon: ViewGridOutline,
+    },
+    {
+      name: AlbumViewMode.List,
+      icon: FormatListBulletedSquare,
+    },
+  ];
+  const viewOptionNames = viewOptions.map((option) => option.name);
+  const viewOptionIcons = viewOptions.map((option) => option.icon);
 
   const {
     albums: unsortedAlbums,
@@ -103,8 +106,8 @@
   };
 
   const dateLocaleString = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString($locale, dateFormats.album)
-  }
+    return new Date(dateString).toLocaleDateString($locale, dateFormats.album);
+  };
 
   onMount(() => {
     removeAlbumsIfEmpty();
@@ -162,18 +165,18 @@
       >
         {#each $albums as album (album.id)}
           <tr
-            class="flex h-[50px] w-full place-items-center text-center odd:bg-immich-gray even:bg-immich-bg odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 border-[3px] border-transparent p-5 hover:cursor-pointer hover:border-immich-primary/75 dark:hover:border-immich-dark-primary/75"
+            class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-5 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75"
             on:click={() => goto(`albums/${album.id}`)}
             on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
             tabindex="0"
           >
-            <td class="w-1/4 text-ellipsis px-2 text-md">{album.albumName}</td>
-            <td class="w-1/4 text-ellipsis px-2 text-md">
-               {album.assetCount}
-               {album.assetCount == 1 ? `item` : `items`}
+            <td class="text-md w-1/4 text-ellipsis px-2">{album.albumName}</td>
+            <td class="text-md w-1/4 text-ellipsis px-2">
+              {album.assetCount}
+              {album.assetCount == 1 ? `item` : `items`}
             </td>
-            <td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.updatedAt)}</td>
-            <td class="w-1/4 text-ellipsis px-2 text-md">{dateLocaleString(album.createdAt)}</td>
+            <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.updatedAt)}</td>
+            <td class="text-md w-1/4 text-ellipsis px-2">{dateLocaleString(album.createdAt)}</td>
           </tr>
         {/each}
       </tbody>