Categorize components/ui into primitives, overlay, media, forms and layout

Splits the flat 38-component ui/ folder into primitives/ (generic
controls), overlay/ (menus/modals), media/ (music-domain display
components), forms/ (composite entity forms) and layout/ (page
scaffolding), and updates every import path accordingly.

web-player/src/lib/components/layout/MobileHeader.svelte

@@ -3,11 +3,11 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Folder from '@lucide/svelte/icons/folder';
 	import LogIn from '@lucide/svelte/icons/log-in';
-	import MenuItem from '../ui/MenuItem.svelte';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import MenuItem from '../ui/overlay/MenuItem.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 
 	interface Props {
 		user: SessionUser | null;

web-player/src/lib/components/layout/Sidebar.svelte

@@ -4,9 +4,9 @@
 	import { liked } from '$lib/player/liked.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
-	import ListRow from '../ui/ListRow.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Logo from '../ui/Logo.svelte';
+	import ListRow from '../ui/media/ListRow.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Logo from '../ui/primitives/Logo.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
 
 	interface SidebarPlaylist {

web-player/src/lib/components/layout/TopBar.svelte

@@ -7,10 +7,10 @@
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
 	import ChevronLeft from '@lucide/svelte/icons/chevron-left';
-	import AccountMenu from '../ui/AccountMenu.svelte';
-	import Avatar from '../ui/Avatar.svelte';
-	import IconButton from '../ui/IconButton.svelte';
-	import Button from '../ui/Button.svelte';
+	import AccountMenu from '../ui/overlay/AccountMenu.svelte';
+	import Avatar from '../ui/media/Avatar.svelte';
+	import IconButton from '../ui/primitives/IconButton.svelte';
+	import Button from '../ui/primitives/Button.svelte';
 
 	interface Props {
 		user: SessionUser | null;

web-player/src/lib/components/player/PlayerBar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import TrackInfo from './TrackInfo.svelte';
 	import TransportControls from './TransportControls.svelte';
-	import Slider from '$lib/components/ui/Slider.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Slider from '$lib/components/ui/primitives/Slider.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { fmtTime } from '$lib/utils/format';

web-player/src/lib/components/player/PlayerDock.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import PlayerBar from './PlayerBar.svelte';
 	import TabsBar from '../layout/TabsBar.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import type { SessionUser } from '$lib/types';
 

web-player/src/lib/components/player/Queue.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import { fmtTime } from '$lib/utils/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';

web-player/src/lib/components/player/TrackInfo.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import ExplicitBadge from '$lib/components/ui/ExplicitBadge.svelte';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
-	import IconButton from '$lib/components/ui/IconButton.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import ExplicitBadge from '$lib/components/ui/media/ExplicitBadge.svelte';
+	import ArtistLink from '$lib/components/ui/media/ArtistLink.svelte';
+	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 	import Heart from '@lucide/svelte/icons/heart';
 
 	interface Props {

web-player/src/lib/components/player/TransportControls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import Repeat from '@lucide/svelte/icons/repeat';
 

web-player/src/lib/components/ui/forms/AlbumForm.svelte

@@ -2,9 +2,9 @@
 	import { untrack } from 'svelte';
 	import Disc3 from '@lucide/svelte/icons/disc-3';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
 	import { ALBUM_EARLIEST_YEAR } from '$lib/config';
 
 	interface Props {

web-player/src/lib/components/ui/forms/CoverForm.svelte

@@ -3,9 +3,9 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ImageDropzone from './ImageDropzone.svelte';
-	import Button from './Button.svelte';
-	import Field from './Field.svelte';
-	import Alert from './Alert.svelte';
+	import Button from '../primitives/Button.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Alert from '../primitives/Alert.svelte';
 
 	interface Props {
 		action: string;

web-player/src/lib/components/ui/forms/PlaylistForm.svelte

@@ -2,10 +2,10 @@
 	import { untrack } from 'svelte';
 	import Music from '@lucide/svelte/icons/music';
 	import CoverForm from './CoverForm.svelte';
-	import Field from './Field.svelte';
-	import Input from './Input.svelte';
-	import Textarea from './Textarea.svelte';
-	import SegmentedControl from './SegmentedControl.svelte';
+	import Field from '../primitives/Field.svelte';
+	import Input from '../primitives/Input.svelte';
+	import Textarea from '../primitives/Textarea.svelte';
+	import SegmentedControl from '../primitives/SegmentedControl.svelte';
 
 	const NAME_MAX_LENGTH = 60;
 	const DESCRIPTION_MAX_LENGTH = 300;

web-player/src/lib/components/ui/media/TrackList.svelte

@@ -36,7 +36,7 @@
 	import { pressable } from '$lib/actions/pressable';
 	import MediaIdentity from './MediaIdentity.svelte';
 	import EqBars from './EqBars.svelte';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface RowAction {
 		action?: string;

web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Modal from './Modal.svelte';
-	import Button from './Button.svelte';
+	import Button from '../primitives/Button.svelte';
 
 	interface Props {
 		open: boolean;

web-player/src/lib/components/ui/overlay/ContextMenu.svelte

@@ -21,7 +21,7 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import MediaIdentity from './MediaIdentity.svelte';
+	import MediaIdentity from '../media/MediaIdentity.svelte';
 	import GlassMenu from './GlassMenu.svelte';
 	import MenuItem from './MenuItem.svelte';
 

web-player/src/lib/components/ui/overlay/Modal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import X from '@lucide/svelte/icons/x';
-	import IconButton from './IconButton.svelte';
+	import IconButton from '../primitives/IconButton.svelte';
 
 	interface Props {
 		open: boolean;