chore(web): rename components to PascalCase (#28013)

chore: rename components to PascalCase

web/src/app.d.ts

@@ -36,7 +36,7 @@ type NestedKeys<T, K = keyof T> = K extends keyof T & string
   : never;
 
 declare module 'svelte-i18n' {
-  import type { InterpolationValues } from '$lib/elements/format-message.svelte';
+  import type { InterpolationValues } from '$lib/elements/format-message';
   import type { Readable } from 'svelte/store';
 
   type Translations = NestedKeys<typeof en>;

web/src/lib/actions/__test__/FocusTrap.spec.ts

@@ -1,4 +1,4 @@
-import FocusTrapTest from '$lib/actions/__test__/focus-trap-test.svelte';
+import FocusTrapTest from '$lib/actions/__test__/FocusTrapTest.svelte';
 import { setDefaultTabbleOptions } from '$lib/utils/focus-util';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';

web/src/lib/components/ActionMenuItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { isEnabled } from '$lib/utils';
   import { type ActionItem } from '@immich/ui';
 

web/src/lib/components/AdaptiveImage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import AlphaBackground from '$lib/components/AlphaBackground.svelte';
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
   import DelayedLoadingSpinner from '$lib/components/DelayedLoadingSpinner.svelte';
   import ImageLayer from '$lib/components/ImageLayer.svelte';
   import Thumbhash from '$lib/components/Thumbhash.svelte';

web/src/lib/components/ApiKeyPermissionsPicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ApiKeyGrid from '$lib/components/user-settings-page/user-api-key-grid.svelte';
+  import ApiKeyGrid from '$lib/components/user-settings-page/UserApiKeyGrid.svelte';
   import { Permission } from '@immich/sdk';
   import { Checkbox, IconButton, Input, Label } from '@immich/ui';
   import { mdiClose } from '@mdi/js';

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -2,8 +2,8 @@
   import SupportedDatetimePanel from '$lib/components/admin-settings/SupportedDatetimePanel.svelte';
   import SupportedVariablesPanel from '$lib/components/admin-settings/SupportedVariablesPanel.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/SystemConfigButtonRow.svelte';
-  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/SettingInputField.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';

web/src/lib/components/album-page/AlbumCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+  import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getContextMenuPositionFromEvent, type ContextMenuPosition } from '$lib/utils/context-menu';
   import { getShortDateRange } from '$lib/utils/date-time';

web/src/lib/components/album-page/AlbumCardGroup.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AlbumCard from '$lib/components/album-page/album-card.svelte';
+  import AlbumCard from '$lib/components/album-page/AlbumCard.svelte';
   import { Route } from '$lib/route';
   import { albumViewSettings } from '$lib/stores/preferences.store';
   import { type AlbumGroup, isAlbumGroupCollapsed, toggleAlbumGroupCollapsing } from '$lib/utils/album-utils';

web/src/lib/components/album-page/AlbumCover.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import AssetCover from '$lib/components/sharedlinks-page/covers/asset-cover.svelte';
-  import NoCover from '$lib/components/sharedlinks-page/covers/no-cover.svelte';
+  import AssetCover from '$lib/components/sharedlinks-page/covers/AssetCover.svelte';
+  import NoCover from '$lib/components/sharedlinks-page/covers/NoCover.svelte';
   import { getAssetMediaUrl } from '$lib/utils';
   import { type AlbumResponseDto } from '@immich/sdk';
   import { t } from 'svelte-i18n';

web/src/lib/components/album-page/AlbumViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import AlbumMap from '$lib/components/album-page/album-map.svelte';
+  import AlbumMap from '$lib/components/album-page/AlbumMap.svelte';
   import DownloadAction from '$lib/components/timeline/actions/DownloadAction.svelte';
   import SelectAllAssets from '$lib/components/timeline/actions/SelectAllAction.svelte';
   import AssetSelectControlBar from '$lib/components/timeline/AssetSelectControlBar.svelte';
@@ -20,9 +20,9 @@
   import { ActionButton, IconButton, Logo } from '@immich/ui';
   import { mdiDownload, mdiFileImagePlusOutline, mdiPresentationPlay } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import ThemeButton from '../shared-components/theme-button.svelte';
-  import AlbumSummary from './album-summary.svelte';
+  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
+  import ThemeButton from '../shared-components/ThemeButton.svelte';
+  import AlbumSummary from './AlbumSummary.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;

web/src/lib/components/album-page/AlbumsList.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
-  import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
+  import AlbumCardGroup from '$lib/components/album-page/AlbumCardGroup.svelte';
+  import AlbumsTable from '$lib/components/album-page/AlbumsTable.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
+  import RightClickContextMenu from '$lib/components/shared-components/context-menu/RightClickContextMenu.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
   import AlbumOptionsModal from '$lib/modals/AlbumOptionsModal.svelte';

web/src/lib/components/album-page/AlbumsTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import AlbumTableHeader from '$lib/components/album-page/albums-table-header.svelte';
-  import AlbumTableRow from '$lib/components/album-page/albums-table-row.svelte';
+  import AlbumTableHeader from '$lib/components/album-page/AlbumsTableHeader.svelte';
+  import AlbumTableRow from '$lib/components/album-page/AlbumsTableRow.svelte';
   import { AlbumGroupBy, albumViewSettings } from '$lib/stores/preferences.store';
   import {
     isAlbumGroupCollapsed,

web/src/lib/components/album-page/__tests__/AlbumCard.spec.ts

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom';
 import { render, waitFor, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { init, register, waitLocale } from 'svelte-i18n';
-import AlbumCard from '../album-card.svelte';
+import AlbumCard from '../AlbumCard.svelte';
 
 const onShowContextMenu = vi.fn();
 

web/src/lib/components/album-page/__tests__/AlbumCover.spec.ts

@@ -1,4 +1,4 @@
-import AlbumCover from '$lib/components/album-page/album-cover.svelte';
+import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
 import { albumFactory } from '@test-data/factories/album-factory';
 import { render } from '@testing-library/svelte';

web/src/lib/components/asset-viewer/ActivityViewer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { activityManager } from '$lib/managers/activity-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
@@ -18,7 +18,7 @@
   import * as luxon from 'luxon';
   import { t } from 'svelte-i18n';
   import { fromAction } from 'svelte/attachments';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
+  import UserAvatar from '../shared-components/UserAvatar.svelte';
 
   const units: Intl.RelativeTimeFormatUnit[] = ['year', 'month', 'week', 'day', 'hour', 'minute', 'second'];
 

web/src/lib/components/asset-viewer/AlbumListItem.svelte

@@ -7,7 +7,7 @@
   import { Icon } from '@immich/ui';
   import { mdiCheckCircle } from '@mdi/js';
   import type { Action } from 'svelte/action';
-  import AlbumListItemDetails from './album-list-item-details.svelte';
+  import AlbumListItemDetails from './AlbumListItemDetails.svelte';
 
   interface Props {
     album: AlbumResponseDto;

web/src/lib/components/asset-viewer/AssetViewer.spec.ts

@@ -8,7 +8,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import { fireEvent, waitFor } from '@testing-library/svelte';
-import AssetViewer from './asset-viewer.svelte';
+import AssetViewer from './AssetViewer.svelte';
 
 vi.mock('$lib/managers/feature-flags-manager.svelte', () => ({
   featureFlagsManager: {

web/src/lib/components/asset-viewer/AssetViewer.svelte

@@ -2,9 +2,9 @@
   import { browser } from '$app/environment';
   import { focusTrap } from '$lib/actions/focus-trap';
   import type { Action, OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import NextAssetAction from '$lib/components/asset-viewer/actions/next-asset-action.svelte';
-  import PreviousAssetAction from '$lib/components/asset-viewer/actions/previous-asset-action.svelte';
-  import AssetViewerNavBar from '$lib/components/asset-viewer/asset-viewer-nav-bar.svelte';
+  import NextAssetAction from '$lib/components/asset-viewer/actions/NextAssetAction.svelte';
+  import PreviousAssetAction from '$lib/components/asset-viewer/actions/PreviousAssetAction.svelte';
+  import AssetViewerNavBar from '$lib/components/asset-viewer/AssetViewerNavBar.svelte';
   import { preloadManager } from '$lib/components/asset-viewer/PreloadManager.svelte';
   import OnEvents from '$lib/components/OnEvents.svelte';
   import { AssetAction, ProjectionType } from '$lib/constants';
@@ -38,17 +38,17 @@
   import type { SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
   import { fly } from 'svelte/transition';
-  import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
-  import ActivityStatus from './activity-status.svelte';
-  import ActivityViewer from './activity-viewer.svelte';
-  import DetailPanel from './detail-panel.svelte';
-  import EditorPanel from './editor/editor-panel.svelte';
-  import CropArea from './editor/transform-tool/crop-area.svelte';
-  import ImagePanoramaViewer from './image-panorama-viewer.svelte';
-  import OcrButton from './ocr-button.svelte';
-  import PhotoViewer from './photo-viewer.svelte';
-  import SlideshowBar from './slideshow-bar.svelte';
-  import VideoViewer from './video-wrapper-viewer.svelte';
+  import Thumbnail from '../assets/thumbnail/Thumbnail.svelte';
+  import ActivityStatus from './ActivityStatus.svelte';
+  import ActivityViewer from './ActivityViewer.svelte';
+  import DetailPanel from './DetailPanel.svelte';
+  import EditorPanel from './editor/EditorPanel.svelte';
+  import CropArea from './editor/transform-tool/CropArea.svelte';
+  import ImagePanoramaViewer from './ImagePanoramaViewer.svelte';
+  import OcrButton from './OcrButton.svelte';
+  import PhotoViewer from './PhotoViewer.svelte';
+  import SlideshowBar from './SlideshowBar.svelte';
+  import VideoViewer from './VideoWrapperViewer.svelte';
 
   export type AssetCursor = {
     current: AssetResponseDto;

web/src/lib/components/asset-viewer/AssetViewerNavBar.spec.ts

@@ -5,7 +5,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import { preferencesFactory } from '@test-data/factories/preferences-factory';
 import { userAdminFactory } from '@test-data/factories/user-factory';
 import '@testing-library/jest-dom';
-import AssetViewerNavBar from './asset-viewer-nav-bar.svelte';
+import AssetViewerNavBar from './AssetViewerNavBar.svelte';
 
 describe('AssetViewerNavBar component', () => {
   const additionalProps = {

web/src/lib/components/asset-viewer/AssetViewerNavBar.svelte

@@ -2,22 +2,22 @@
   import { goto } from '$app/navigation';
   import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import AddToStackAction from '$lib/components/asset-viewer/actions/add-to-stack-action.svelte';
-  import ArchiveAction from '$lib/components/asset-viewer/actions/archive-action.svelte';
-  import DeleteAction from '$lib/components/asset-viewer/actions/delete-action.svelte';
-  import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/keep-this-delete-others.svelte';
-  import RatingAction from '$lib/components/asset-viewer/actions/rating-action.svelte';
-  import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/remove-asset-from-stack.svelte';
-  import RestoreAction from '$lib/components/asset-viewer/actions/restore-action.svelte';
-  import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/set-album-cover-action.svelte';
-  import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/set-person-featured-action.svelte';
-  import SetProfilePictureAction from '$lib/components/asset-viewer/actions/set-profile-picture-action.svelte';
-  import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/set-stack-primary-asset.svelte';
-  import SetVisibilityAction from '$lib/components/asset-viewer/actions/set-visibility-action.svelte';
-  import UnstackAction from '$lib/components/asset-viewer/actions/unstack-action.svelte';
+  import AddToStackAction from '$lib/components/asset-viewer/actions/AddToStackAction.svelte';
+  import ArchiveAction from '$lib/components/asset-viewer/actions/ArchiveAction.svelte';
+  import DeleteAction from '$lib/components/asset-viewer/actions/DeleteAction.svelte';
+  import KeepThisDeleteOthersAction from '$lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte';
+  import RatingAction from '$lib/components/asset-viewer/actions/RatingAction.svelte';
+  import RemoveAssetFromStack from '$lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte';
+  import RestoreAction from '$lib/components/asset-viewer/actions/RestoreAction.svelte';
+  import SetAlbumCoverAction from '$lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte';
+  import SetFeaturedPhotoAction from '$lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte';
+  import SetProfilePictureAction from '$lib/components/asset-viewer/actions/SetProfilePictureAction.svelte';
+  import SetStackPrimaryAsset from '$lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte';
+  import SetVisibilityAction from '$lib/components/asset-viewer/actions/SetVisibilityAction.svelte';
+  import UnstackAction from '$lib/components/asset-viewer/actions/UnstackAction.svelte';
   import LoadingDots from '$lib/components/LoadingDots.svelte';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/ButtonContextMenu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import RemoveFromAlbumAction from '$lib/components/timeline/actions/RemoveFromAlbumAction.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';

web/src/lib/components/asset-viewer/DetailPanel.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import DetailPanelDate from '$lib/components/asset-viewer/detail-panel-date.svelte';
-  import DetailPanelDescription from '$lib/components/asset-viewer/detail-panel-description.svelte';
-  import DetailPanelLocation from '$lib/components/asset-viewer/detail-panel-location.svelte';
-  import DetailPanelRating from '$lib/components/asset-viewer/detail-panel-star-rating.svelte';
-  import DetailPanelTags from '$lib/components/asset-viewer/detail-panel-tags.svelte';
+  import DetailPanelDate from '$lib/components/asset-viewer/DetailPanelDate.svelte';
+  import DetailPanelDescription from '$lib/components/asset-viewer/DetailPanelDescription.svelte';
+  import DetailPanelLocation from '$lib/components/asset-viewer/DetailPanelLocation.svelte';
+  import DetailPanelRating from '$lib/components/asset-viewer/DetailPanelStarRating.svelte';
+  import DetailPanelTags from '$lib/components/asset-viewer/DetailPanelTags.svelte';
   import { timeToLoadTheMap } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
@@ -40,11 +40,11 @@
   import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import PersonSidePanel from '../faces-page/person-side-panel.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
+  import PersonSidePanel from '../faces-page/PersonSidePanel.svelte';
   import OnEvents from '../OnEvents.svelte';
-  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import AlbumListItemDetails from './album-list-item-details.svelte';
+  import UserAvatar from '../shared-components/UserAvatar.svelte';
+  import AlbumListItemDetails from './AlbumListItemDetails.svelte';
 
   interface Props {
     asset: AssetResponseDto;
@@ -393,7 +393,7 @@
 
   {#if latlng && featureFlagsManager.value.map}
     <div class="h-90">
-      {#await import('$lib/components/shared-components/map/map.svelte')}
+      {#await import('$lib/components/shared-components/map/Map.svelte')}
         {#await delay(timeToLoadTheMap) then}
           <!-- show the loading spinner only if loading the map takes too much time -->
           <div class="flex items-center justify-center h-full w-full">

web/src/lib/components/asset-viewer/DetailPanelDescription.spec.ts

@@ -2,7 +2,7 @@ import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import DetailPanelDescription from './detail-panel-description.svelte';
+import DetailPanelDescription from './DetailPanelDescription.svelte';
 
 describe('DetailPanelDescription', () => {
   it('clears unsaved draft on asset change', async () => {

web/src/lib/components/asset-viewer/ImagePanoramaViewer.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
-  {#await Promise.all([loadAssetData(assetId), import('./photo-sphere-viewer-adapter.svelte')])}
+  {#await Promise.all([loadAssetData(assetId), import('./PhotoSphereViewerAdapter.svelte')])}
     <LoadingSpinner />
   {:then [data, { default: PhotoSphereViewer }]}
     <PhotoSphereViewer panorama={data} originalPanorama={getAssetUrl({ asset, forceOriginal: true })} />

web/src/lib/components/asset-viewer/PhotoViewer.svelte

@@ -2,9 +2,9 @@
   import { shortcuts } from '$lib/actions/shortcut';
   import { zoomImageAction } from '$lib/actions/zoom-image';
   import AdaptiveImage from '$lib/components/AdaptiveImage.svelte';
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/FaceEditor.svelte';
   import Thumbhash from '$lib/components/Thumbhash.svelte';
-  import OcrBoundingBox from '$lib/components/asset-viewer/ocr-bounding-box.svelte';
+  import OcrBoundingBox from '$lib/components/asset-viewer/OcrBoundingBox.svelte';
   import AssetViewerEvents from '$lib/components/AssetViewerEvents.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { castManager } from '$lib/managers/cast-manager.svelte';
@@ -22,7 +22,7 @@
   import { onDestroy, untrack } from 'svelte';
   import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures';
   import { t } from 'svelte-i18n';
-  import type { AssetCursor } from './asset-viewer.svelte';
+  import type { AssetCursor } from './AssetViewer.svelte';
 
   type Props = {
     cursor: AssetCursor;

web/src/lib/components/asset-viewer/SlideshowBar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
-  import ProgressBar from '$lib/components/shared-components/progress-bar/progress-bar.svelte';
+  import ProgressBar from '$lib/components/shared-components/progress-bar/ProgressBar.svelte';
   import { ProgressBarStatus } from '$lib/constants';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import SlideshowSettingsModal from '$lib/modals/SlideshowSettingsModal.svelte';

web/src/lib/components/asset-viewer/VideoNativeViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
-  import VideoRemoteViewer from '$lib/components/asset-viewer/video-remote-viewer.svelte';
+  import FaceEditor from '$lib/components/asset-viewer/face-editor/FaceEditor.svelte';
+  import VideoRemoteViewer from '$lib/components/asset-viewer/VideoRemoteViewer.svelte';
   import { assetViewerFadeDuration } from '$lib/constants';
   import { castManager } from '$lib/managers/cast-manager.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';

web/src/lib/components/asset-viewer/VideoPanoramaViewer.svelte

@@ -12,7 +12,7 @@
   const { asset }: Props = $props();
 
   const modules = Promise.all([
-    import('./photo-sphere-viewer-adapter.svelte').then((module) => module.default),
+    import('./PhotoSphereViewerAdapter.svelte').then((module) => module.default),
     import('@photo-sphere-viewer/equirectangular-video-adapter').then((module) => module.EquirectangularVideoAdapter),
     import('@photo-sphere-viewer/video-plugin').then((module) => module.VideoPlugin),
     import('@photo-sphere-viewer/video-plugin/index.css'),

web/src/lib/components/asset-viewer/VideoWrapperViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import VideoNativeViewer from '$lib/components/asset-viewer/video-native-viewer.svelte';
-  import VideoPanoramaViewer from '$lib/components/asset-viewer/video-panorama-viewer.svelte';
+  import VideoNativeViewer from '$lib/components/asset-viewer/VideoNativeViewer.svelte';
+  import VideoPanoramaViewer from '$lib/components/asset-viewer/VideoPanoramaViewer.svelte';
   import { ProjectionType } from '$lib/constants';
   import type { AssetResponseDto } from '@immich/sdk';
 

web/src/lib/components/asset-viewer/actions/AddToStackAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { createStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';

web/src/lib/components/asset-viewer/actions/ArchiveAction.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
   import type { OnAction, PreAction } from '$lib/components/asset-viewer/actions/action';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { toggleArchive } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';

web/src/lib/components/asset-viewer/actions/DeleteAction.spec.ts

@@ -2,7 +2,7 @@ import { renderWithTooltips } from '$tests/helpers';
 import type { AssetResponseDto } from '@immich/sdk';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import '@testing-library/jest-dom';
-import DeleteAction from './delete-action.svelte';
+import DeleteAction from './DeleteAction.svelte';
 
 let asset: AssetResponseDto;
 

web/src/lib/components/asset-viewer/actions/KeepThisDeleteOthers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { keepThisDeleteOthers } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';

web/src/lib/components/asset-viewer/actions/NextAssetAction.svelte

@@ -3,7 +3,7 @@
   import { Icon } from '@immich/ui';
   import { mdiChevronRight } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import NavigationArea from '../navigation-area.svelte';
+  import NavigationArea from '../NavigationArea.svelte';
 
   interface Props {
     onNextAsset: () => void;

web/src/lib/components/asset-viewer/actions/PreviousAssetAction.svelte

@@ -3,7 +3,7 @@
   import { Icon } from '@immich/ui';
   import { mdiChevronLeft } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import NavigationArea from '../navigation-area.svelte';
+  import NavigationArea from '../NavigationArea.svelte';
 
   interface Props {
     onPreviousAsset: () => void;

web/src/lib/components/asset-viewer/actions/RemoveAssetFromStack.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
 
   import { AssetAction } from '$lib/constants';
   import { removeAssetFromStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';

web/src/lib/components/asset-viewer/actions/RestoreAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { toTimelineAsset } from '$lib/utils/timeline-util';

web/src/lib/components/asset-viewer/actions/SetAlbumCoverAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { eventManager } from '$lib/managers/event-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAlbumInfo, type AlbumResponseDto, type AssetResponseDto } from '@immich/sdk';

web/src/lib/components/asset-viewer/actions/SetPersonFeaturedAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
   import { updatePerson, type AssetResponseDto, type PersonResponseDto } from '@immich/sdk';

web/src/lib/components/asset-viewer/actions/SetProfilePictureAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
   import type { AssetResponseDto } from '@immich/sdk';
   import { modalManager } from '@immich/ui';

web/src/lib/components/asset-viewer/actions/SetStackPrimaryAsset.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
 
   import { AssetAction } from '$lib/constants';
   import { updateStack, type AssetResponseDto, type StackResponseDto } from '@immich/sdk';

web/src/lib/components/asset-viewer/actions/SetVisibilityAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { handleError } from '$lib/utils/handle-error';

web/src/lib/components/asset-viewer/actions/UnstackAction.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/MenuOption.svelte';
   import { AssetAction } from '$lib/constants';
   import { deleteStack } from '$lib/utils/asset-utils';
   import { toTimelineAsset } from '$lib/utils/timeline-util';

web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { shortcut } from '$lib/actions/shortcut';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';

web/src/lib/components/assets/thumbnail/ImageThumbnail.spec.ts

@@ -1,4 +1,4 @@
-import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
 import { fireEvent, render } from '@testing-library/svelte';
 
 vi.mock('$lib/utils/sw-messaging', () => ({

web/src/lib/components/assets/thumbnail/ImageThumbnail.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
+  import BrokenAsset from '$lib/components/assets/BrokenAsset.svelte';
   import Image from '$lib/components/Image.svelte';
   import { Icon } from '@immich/ui';
   import { mdiEyeOffOutline } from '@mdi/js';

web/src/lib/components/assets/thumbnail/Thumbnail.svelte

@@ -26,8 +26,8 @@
   import type { ClassValue } from 'svelte/elements';
   import { fade } from 'svelte/transition';
   import Thumbhash from '$lib/components/Thumbhash.svelte';
-  import ImageThumbnail from './image-thumbnail.svelte';
-  import VideoThumbnail from './video-thumbnail.svelte';
+  import ImageThumbnail from './ImageThumbnail.svelte';
+  import VideoThumbnail from './VideoThumbnail.svelte';
   interface Props {
     asset: TimelineAsset;
     groupIndex?: number;

web/src/lib/components/assets/thumbnail/__test__/Thumbnail.spec.ts

@@ -1,5 +1,5 @@
 import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock';
-import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
 import { getTabbable } from '$lib/utils/focus-util';
 import { assetFactory } from '@test-data/factories/asset-factory';
 import { render } from '@testing-library/svelte';

web/src/lib/components/faces-page/AssignFaceSidePanel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import SearchPeople from '$lib/components/faces-page/PeopleSearch.svelte';
   import { timeBeforeShowLoadingSpinner } from '$lib/constants';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { getPeopleThumbnailUrl, handlePromiseError } from '$lib/utils';
@@ -13,7 +13,7 @@
   import { t } from 'svelte-i18n';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
 
   interface Props {
     editedFace: AssetFaceResponseDto;

web/src/lib/components/faces-page/PersonSidePanel.svelte

@@ -24,8 +24,8 @@
   import { t } from 'svelte-i18n';
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import AssignFaceSidePanel from './assign-face-side-panel.svelte';
+  import ImageThumbnail from '../assets/thumbnail/ImageThumbnail.svelte';
+  import AssignFaceSidePanel from './AssignFaceSidePanel.svelte';
 
   interface Props {
     assetId: string;

web/src/lib/components/layouts/AdminPageLayout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import BreadcrumbActionPage from '$lib/components/BreadcrumbActionPage.svelte';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
+  import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
+  import BottomInfo from '$lib/components/shared-components/side-bar/BottomInfo.svelte';
   import { Route } from '$lib/route';
   import { sidebarStore } from '$lib/stores/sidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';

web/src/lib/components/layouts/UserPageLayout.svelte

@@ -4,8 +4,8 @@
 
 <script lang="ts">
   import { useActions, type ActionArray } from '$lib/actions/use-actions';
-  import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
-  import UserSidebar from '$lib/components/shared-components/side-bar/user-sidebar.svelte';
+  import NavigationBar from '$lib/components/shared-components/navigation-bar/NavigationBar.svelte';
+  import UserSidebar from '$lib/components/shared-components/side-bar/UserSidebar.svelte';
   import type { HeaderButtonActionItem } from '$lib/types';
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import { Button, ContextMenuButton, HStack, isMenuItemType, type MenuItemType } from '@immich/ui';

web/src/lib/components/pages/SharedLinkPage.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import AlbumViewer from '$lib/components/album-page/album-viewer.svelte';
-  import IndividualSharedViewer from '$lib/components/share-page/individual-shared-viewer.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import ThemeButton from '$lib/components/shared-components/theme-button.svelte';
+  import AlbumViewer from '$lib/components/album-page/AlbumViewer.svelte';
+  import IndividualSharedViewer from '$lib/components/share-page/IndividualSharedViewer.svelte';
+  import ControlAppBar from '$lib/components/shared-components/ControlAppBar.svelte';
+  import ThemeButton from '$lib/components/shared-components/ThemeButton.svelte';
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { setSharedLink } from '$lib/utils';

web/src/lib/components/share-page/IndividualSharedViewer.svelte

@@ -20,8 +20,8 @@
   import { IconButton, Logo, toastManager } from '@immich/ui';
   import { mdiArrowLeft, mdiDownload, mdiFileImagePlusOutline, mdiSelectAll } from '@mdi/js';
   import { t } from 'svelte-i18n';
-  import ControlAppBar from '../shared-components/control-app-bar.svelte';
-  import GalleryViewer from '../shared-components/gallery-viewer/gallery-viewer.svelte';
+  import ControlAppBar from '../shared-components/ControlAppBar.svelte';
+  import GalleryViewer from '../shared-components/gallery-viewer/GalleryViewer.svelte';
 
   interface Props {
     sharedLink: SharedLinkResponseDto;
@@ -132,7 +132,7 @@
   </header>
 {:else if assets.length === 1}
   {#await getAssetInfo({ ...authManager.params, id: assets[0].id }) then asset}
-    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer cursor={{ current: asset }} onAction={handleAction} />
     {/await}
   {/await}

web/src/lib/components/shared-components/CoordinatesInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
+  import NumberRangeInput from '$lib/components/shared-components/NumberRangeInput.svelte';
   import { generateId } from '$lib/utils/generate-id';
   import { convert } from 'geo-coordinates-parser';
   import { t } from 'svelte-i18n';

web/src/lib/components/shared-components/__test__/NumberRangeInput.spec.ts

@@ -1,4 +1,4 @@
-import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
+import NumberRangeInput from '$lib/components/shared-components/NumberRangeInput.svelte';
 import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import type { Mock } from 'vitest';

web/src/lib/components/shared-components/context-menu/ButtonContextMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/ContextMenu.svelte';
   import { languageManager } from '$lib/managers/language-manager.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
   import {

web/src/lib/components/shared-components/context-menu/RightClickContextMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { contextMenuNavigation } from '$lib/actions/context-menu-navigation';
   import { shortcuts } from '$lib/actions/shortcut';
-  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
+  import ContextMenu from '$lib/components/shared-components/context-menu/ContextMenu.svelte';
   import { optionClickCallbackStore, selectedIdStore } from '$lib/stores/context-menu.store';
   import { generateId } from '$lib/utils/generate-id';
   import { tick, type Snippet } from 'svelte';

web/src/lib/components/shared-components/gallery-viewer/GalleryViewer.svelte

@@ -2,8 +2,8 @@
   import { goto } from '$app/navigation';
   import { shortcuts, type ShortcutOptions } from '$lib/actions/shortcut';
   import type { Action } from '$lib/components/asset-viewer/actions/action';
-  import type { AssetCursor } from '$lib/components/asset-viewer/asset-viewer.svelte';
-  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import type { AssetCursor } from '$lib/components/asset-viewer/AssetViewer.svelte';
+  import Thumbnail from '$lib/components/assets/thumbnail/Thumbnail.svelte';
   import { AssetAction } from '$lib/constants';
   import Portal from '$lib/elements/Portal.svelte';
   import type { AssetMultiSelectManager } from '$lib/managers/asset-multi-select-manager.svelte';
@@ -401,7 +401,7 @@
 <!-- Overlay Asset Viewer -->
 {#if assetViewerManager.isViewing}
   <Portal target="body">
-    {#await import('$lib/components/asset-viewer/asset-viewer.svelte') then { default: AssetViewer }}
+    {#await import('$lib/components/asset-viewer/AssetViewer.svelte') then { default: AssetViewer }}
       <AssetViewer
         cursor={assetCursor}
         onAction={handleAction}

web/src/lib/components/shared-components/navigation-bar/AccountInfoPanel.svelte

@@ -12,7 +12,7 @@
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
-  import UserAvatar from '../user-avatar.svelte';
+  import UserAvatar from '../UserAvatar.svelte';
 
   type Props = {
     onClose?: () => void;

web/src/lib/components/shared-components/navigation-bar/NavigationBar.svelte

@@ -5,8 +5,8 @@
 <script lang="ts">
   import { page } from '$app/state';
   import { clickOutside } from '$lib/actions/click-outside';
-  import NotificationPanel from '$lib/components/shared-components/navigation-bar/notification-panel.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+  import NotificationPanel from '$lib/components/shared-components/navigation-bar/NotificationPanel.svelte';
+  import SearchBar from '$lib/components/shared-components/search-bar/SearchBar.svelte';
   import SkipLink from '$lib/elements/SkipLink.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
@@ -19,9 +19,9 @@
   import { mdiBellBadge, mdiBellOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import ThemeButton from '../theme-button.svelte';
-  import UserAvatar from '../user-avatar.svelte';
-  import AccountInfoPanel from './account-info-panel.svelte';
+  import ThemeButton from '../ThemeButton.svelte';
+  import UserAvatar from '../UserAvatar.svelte';
+  import AccountInfoPanel from './AccountInfoPanel.svelte';
 
   type Props = {
     onUploadClick?: () => void;