From d1085e8a027aedca1078c073b84514ea24274134 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 14 Nov 2024 09:41:11 -0600
Subject: [PATCH] chore(web): move enum out of .svelte file (#14144)

* chore(web): clean up todo task

* chore(web): move enums out of .svelte file
---
 .../asset-viewer/slideshow-bar.svelte           |  3 ++-
 .../faces-page/manage-people-visibility.svelte  |  9 +--------
 .../progress-bar/progress-bar.svelte            |  8 +-------
 .../search-bar/search-filter-modal.svelte       |  7 +------
 .../search-bar/search-media-section.svelte      |  2 +-
 web/src/lib/constants.ts                        | 17 +++++++++++++++++
 web/src/routes/(user)/explore/+page.svelte      |  8 ++------
 web/svelte.config.js                            |  3 +--
 8 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/slideshow-bar.svelte b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
index 95e08cb310..3fc2af14da 100644
--- a/web/src/lib/components/asset-viewer/slideshow-bar.svelte
+++ b/web/src/lib/components/asset-viewer/slideshow-bar.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import { shortcuts } from '$lib/actions/shortcut';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import ProgressBar, { ProgressBarStatus } from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
+  import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
   import SlideshowSettings from '$lib/components/slideshow-settings.svelte';
+  import { ProgressBarStatus } from '$lib/constants';
   import { SlideshowNavigation, slideshowStore } from '$lib/stores/slideshow.store';
   import { mdiChevronLeft, mdiChevronRight, mdiClose, mdiCog, mdiFullscreen, mdiPause, mdiPlay } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
diff --git a/web/src/lib/components/faces-page/manage-people-visibility.svelte b/web/src/lib/components/faces-page/manage-people-visibility.svelte
index 295f629736..0a3c86d3a9 100644
--- a/web/src/lib/components/faces-page/manage-people-visibility.svelte
+++ b/web/src/lib/components/faces-page/manage-people-visibility.svelte
@@ -1,11 +1,3 @@
-<script lang="ts" module>
-  const enum ToggleVisibility {
-    HIDE_ALL = 'hide-all',
-    HIDE_UNNANEMD = 'hide-unnamed',
-    SHOW_ALL = 'show-all',
-  }
-</script>
-
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
@@ -23,6 +15,7 @@
   import { mdiClose, mdiEye, mdiEyeOff, mdiEyeSettings, mdiRestart } from '@mdi/js';
   import { t } from 'svelte-i18n';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { ToggleVisibility } from '$lib/constants';
 
   interface Props {
     people: PersonResponseDto[];
diff --git a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
index 0ccb8f9556..5b663bd1a9 100644
--- a/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
+++ b/web/src/lib/components/shared-components/progress-bar/progress-bar.svelte
@@ -1,11 +1,5 @@
-<script module lang="ts">
-  export enum ProgressBarStatus {
-    Playing = 'playing',
-    Paused = 'paused',
-  }
-</script>
-
 <script lang="ts">
+  import { ProgressBarStatus } from '$lib/constants';
   import { handlePromiseError } from '$lib/utils';
 
   import { onMount } from 'svelte';
diff --git a/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte b/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
index 4b53f60b5f..cee4cb8896 100644
--- a/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-filter-modal.svelte
@@ -2,12 +2,7 @@
   import type { SearchLocationFilter } from './search-location-section.svelte';
   import type { SearchDisplayFilters } from './search-display-section.svelte';
   import type { SearchDateFilter } from './search-date-section.svelte';
-
-  export enum MediaType {
-    All = 'all',
-    Image = 'image',
-    Video = 'video',
-  }
+  import { MediaType } from '$lib/constants';
 
   export type SearchFilter = {
     query: string;
diff --git a/web/src/lib/components/shared-components/search-bar/search-media-section.svelte b/web/src/lib/components/shared-components/search-bar/search-media-section.svelte
index 37fa4292ae..658944055a 100644
--- a/web/src/lib/components/shared-components/search-bar/search-media-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-media-section.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import RadioButton from '$lib/components/elements/radio-button.svelte';
-  import { MediaType } from './search-filter-modal.svelte';
+  import { MediaType } from '$lib/constants';
   import { t } from 'svelte-i18n';
 
   interface Props {
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index c0031ac436..f6cd8aa8ab 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -360,3 +360,20 @@ export enum PersonPageViewMode {
   BIRTH_DATE = 'birth-date',
   UNASSIGN_ASSETS = 'unassign-faces',
 }
+
+export enum MediaType {
+  All = 'all',
+  Image = 'image',
+  Video = 'video',
+}
+
+export enum ProgressBarStatus {
+  Playing = 'playing',
+  Paused = 'paused',
+}
+
+export enum ToggleVisibility {
+  HIDE_ALL = 'hide-all',
+  HIDE_UNNANEMD = 'hide-unnamed',
+  SHOW_ALL = 'show-all',
+}
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index c31c0538e4..dcb3c2e92d 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -18,16 +18,12 @@
 
   let { data }: Props = $props();
 
-  enum Field {
-    CITY = 'exifInfo.city',
-  }
-
-  const getFieldItems = (items: SearchExploreResponseDto[], field: Field) => {
+  const getFieldItems = (items: SearchExploreResponseDto[], field: string) => {
     const targetField = items.find((item) => item.fieldName === field);
     return targetField?.items || [];
   };
 
-  let places = $derived(getFieldItems(data.items, Field.CITY));
+  let places = $derived(getFieldItems(data.items, 'exifInfo.city'));
   let people = $state(data.response.people);
 
   let hasPeople = $derived(data.response.total > 0);
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 1fe4171e67..c5c93e5330 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -9,8 +9,7 @@ process.env.PUBLIC_IMMICH_PAY_HOST = process.env.PUBLIC_IMMICH_PAY_HOST || 'http
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-  // TODO: migrate all enums to .ts files and remove `{script: true}` once
-  preprocess: vitePreprocess({ script: true }),
+  preprocess: vitePreprocess(),
   kit: {
     adapter: adapter({
       fallback: 'index.html',