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

chore: rename components to PascalCase

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;

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { focusTrap } from '$lib/actions/focus-trap';
-  import NotificationItem from '$lib/components/shared-components/navigation-bar/notification-item.svelte';
+  import NotificationItem from '$lib/components/shared-components/navigation-bar/NotificationItem.svelte';
   import { notificationManager } from '$lib/stores/notification-manager.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { NotificationType, type NotificationDto } from '@immich/sdk';

web/src/lib/components/shared-components/purchasing/PurchaseActivationSuccess.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/SettingSwitch.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
   import { Button, Icon } from '@immich/ui';

web/src/lib/components/shared-components/purchasing/PurchaseContent.svelte

@@ -4,8 +4,8 @@
   import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
   import { Button, Heading, LoadingSpinner } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
-  import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
+  import UserPurchaseOptionCard from './IndividualPurchaseOptionCard.svelte';
+  import ServerPurchaseOptionCard from './ServerPurchaseOptionCard.svelte';
 
   interface Props {
     onActivate: () => void;

web/src/lib/components/shared-components/search-bar/SearchBar.svelte

@@ -12,7 +12,7 @@
   import { mdiClose, mdiMagnify, mdiTune } from '@mdi/js';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
-  import SearchHistoryBox from './search-history-box.svelte';
+  import SearchHistoryBox from './SearchHistoryBox.svelte';
 
   type Props = {
     value?: string;

web/src/lib/components/shared-components/search-bar/SearchCameraSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/Combobox.svelte';
   import type { SearchCameraFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { SearchSuggestionType, getSearchSuggestions } from '@immich/sdk';

web/src/lib/components/shared-components/search-bar/SearchLocationSection.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { asComboboxOptions, asSelectedOption } from '$lib/components/shared-components/Combobox.svelte';
   import type { SearchLocationFilter } from '$lib/types';
   import { handlePromiseError } from '$lib/utils';
   import { getSearchSuggestions, SearchSuggestionType } from '@immich/sdk';

web/src/lib/components/shared-components/search-bar/SearchPeopleSection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
+  import ImageThumbnail from '$lib/components/assets/thumbnail/ImageThumbnail.svelte';
+  import SingleGridRow from '$lib/components/shared-components/SingleGridRow.svelte';
   import SearchBar from '$lib/elements/SearchBar.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { handleError } from '$lib/utils/handle-error';

web/src/lib/components/shared-components/search-bar/SearchRatingsSection.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
-  import Combobox from '../combobox.svelte';
+  import Combobox from '../Combobox.svelte';
 
   interface Props {
     rating?: number | null;

web/src/lib/components/shared-components/search-bar/SearchTagsSection.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/Combobox.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { getAllTags, type TagResponseDto } from '@immich/sdk';
   import { Checkbox, Label, Text } from '@immich/ui';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
-  import TagPill from '../tag-pill.svelte';
+  import TagPill from '../TagPill.svelte';
 
   interface Props {
     selectedTags: SvelteSet<string> | null;

web/src/lib/components/shared-components/settings/SettingAccordion.svelte

@@ -2,7 +2,7 @@
   import { Icon } from '@immich/ui';
   import { onDestroy, onMount, type Snippet } from 'svelte';
   import { slide } from 'svelte/transition';
-  import { getAccordionState } from './setting-accordion-state.svelte';
+  import { getAccordionState } from './SettingAccordionState.svelte';
 
   const accordionState = getAccordionState();
 

web/src/lib/components/shared-components/settings/SettingInputField.spec.ts

@@ -1,7 +1,7 @@
 import { SettingInputFieldType } from '$lib/constants';
 import { render } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
-import SettingInputField from './setting-input-field.svelte';
+import SettingInputField from './SettingInputField.svelte';
 
 describe('SettingInputField component', () => {
   it('validates number input on blur', async () => {

web/src/lib/components/shared-components/settings/SettingSwitch.spec.ts

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/svelte';
-import SettingSwitch from './setting-switch.svelte';
+import SettingSwitch from './SettingSwitch.svelte';
 
 describe('SettingSwitch component', () => {
   it('links switch and subtitle ids on the switch', () => {

web/src/lib/components/shared-components/settings/SettingsLanguageSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { invalidateAll } from '$app/navigation';
-  import Combobox from '$lib/components/shared-components/combobox.svelte';
+  import Combobox from '$lib/components/shared-components/Combobox.svelte';
   import { defaultLang } from '$lib/constants';
   import { lang } from '$lib/stores/preferences.store';
   import { getClosestAvailableLocale, langCodes, langs } from '$lib/utils/i18n';

web/src/lib/components/shared-components/side-bar/BottomInfo.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import PurchaseInfo from './PurchaseInfo.svelte';
+  import ServerStatus from './ServerStatus.svelte';
+  import StorageSpace from './StorageSpace.svelte';
+</script>
+
+<div class="mt-auto">
+  <StorageSpace />
+</div>
+
+<PurchaseInfo />
+
+<div class="mb-6 mt-2">
+  <ServerStatus />
+</div>

web/src/lib/components/shared-components/side-bar/RecentAlbums.spec.ts

@@ -1,5 +1,5 @@
 import { sdkMock } from '$lib/__mocks__/sdk.mock';
-import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
+import RecentAlbums from '$lib/components/shared-components/side-bar/RecentAlbums.svelte';
 import { albumFactory } from '@test-data/factories/album-factory';
 import { render, screen } from '@testing-library/svelte';
 import { tick } from 'svelte';

web/src/lib/components/shared-components/side-bar/UserSidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import BottomInfo from '$lib/components/shared-components/side-bar/bottom-info.svelte';
-  import RecentAlbums from '$lib/components/shared-components/side-bar/recent-albums.svelte';
-  import Sidebar from '$lib/components/sidebar/sidebar.svelte';
+  import BottomInfo from '$lib/components/shared-components/side-bar/BottomInfo.svelte';
+  import RecentAlbums from '$lib/components/shared-components/side-bar/RecentAlbums.svelte';
+  import Sidebar from '$lib/components/sidebar/Sidebar.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
   import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
   import { Route } from '$lib/route';

web/src/lib/components/shared-components/side-bar/bottom-info.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import PurchaseInfo from './purchase-info.svelte';
-  import ServerStatus from './server-status.svelte';
-  import StorageSpace from './storage-space.svelte';
-</script>
-
-<div class="mt-auto">
-  <StorageSpace />
-</div>
-
-<PurchaseInfo />
-
-<div class="mb-6 mt-2">
-  <ServerStatus />
-</div>

web/src/lib/components/shared-components/tree/Tree.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import TreeItems from '$lib/components/shared-components/tree/tree-items.svelte';
+  import TreeItems from '$lib/components/shared-components/tree/TreeItems.svelte';
   import { TreeNode } from '$lib/utils/tree-utils';
   import { Icon } from '@immich/ui';
   import { mdiChevronDown, mdiChevronRight } from '@mdi/js';

web/src/lib/components/shared-components/tree/TreeItems.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Tree from '$lib/components/shared-components/tree/tree.svelte';
+  import Tree from '$lib/components/shared-components/tree/Tree.svelte';
   import { type TreeNode } from '$lib/utils/tree-utils';
 
   interface Props {