From 7fcf0645dabbdc7aac895766e7bec61d82797ce4 Mon Sep 17 00:00:00 2001
From: XShine555 <xshine555@gmail.com>
Date: Tue, 22 Sep 2026 14:16:25 +0200
Subject: [PATCH] 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.
---
 .../lib/components/layout/MobileHeader.svelte | 10 +++----
 .../src/lib/components/layout/Sidebar.svelte  |  6 ++---
 .../src/lib/components/layout/TopBar.svelte   |  8 +++---
 .../lib/components/player/PlayerBar.svelte    |  4 +--
 .../lib/components/player/PlayerDock.svelte   |  2 +-
 .../src/lib/components/player/Queue.svelte    |  6 ++---
 .../lib/components/player/TrackInfo.svelte    |  8 +++---
 .../player/TransportControls.svelte           |  2 +-
 .../ui/{ => forms}/AlbumForm.svelte           |  6 ++---
 .../ui/{ => forms}/CoverForm.svelte           |  6 ++---
 .../ui/{ => forms}/ImageDropzone.svelte       |  0
 .../ui/{ => forms}/PlaylistForm.svelte        |  8 +++---
 .../components/ui/{ => layout}/Page.svelte    |  0
 .../ui/{ => layout}/PageHeader.svelte         |  0
 .../ui/{ => layout}/SectionHeading.svelte     |  0
 .../ui/{ => media}/ArtistLink.svelte          |  0
 .../components/ui/{ => media}/Artwork.svelte  |  0
 .../components/ui/{ => media}/Avatar.svelte   |  0
 .../components/ui/{ => media}/EqBars.svelte   |  0
 .../ui/{ => media}/ExplicitBadge.svelte       |  0
 .../components/ui/{ => media}/ListRow.svelte  |  0
 .../ui/{ => media}/MediaCard.svelte           |  0
 .../ui/{ => media}/MediaIdentity.svelte       |  0
 .../ui/{ => media}/PlayButton.svelte          |  0
 .../ui/{ => media}/TrackList.svelte           |  2 +-
 .../ui/{ => overlay}/AccountMenu.svelte       |  0
 .../ui/{ => overlay}/ConfirmDialog.svelte     |  2 +-
 .../ui/{ => overlay}/ContextMenu.svelte       |  2 +-
 .../ui/{ => overlay}/GlassMenu.svelte         |  0
 .../ui/{ => overlay}/MenuItem.svelte          |  0
 .../components/ui/{ => overlay}/Modal.svelte  |  2 +-
 .../ui/{ => primitives}/Alert.svelte          |  0
 .../ui/{ => primitives}/BackLink.svelte       |  0
 .../ui/{ => primitives}/Button.svelte         |  0
 .../ui/{ => primitives}/Checkbox.svelte       |  0
 .../ui/{ => primitives}/Chip.svelte           |  0
 .../ui/{ => primitives}/EmptyState.svelte     |  0
 .../ui/{ => primitives}/Field.svelte          |  0
 .../ui/{ => primitives}/IconButton.svelte     |  0
 .../ui/{ => primitives}/InfiniteScroll.svelte |  0
 .../ui/{ => primitives}/Input.svelte          |  0
 .../ui/{ => primitives}/Logo.svelte           |  0
 .../{ => primitives}/SegmentedControl.svelte  |  0
 .../ui/{ => primitives}/Slider.svelte         |  0
 .../ui/{ => primitives}/Surface.svelte        |  0
 .../ui/{ => primitives}/Textarea.svelte       |  0
 web-player/src/lib/state/menus.svelte.ts      |  2 +-
 .../src/routes/(app)/albums/+page.svelte      | 14 +++++-----
 .../src/routes/(app)/albums/[id]/+page.svelte | 22 ++++++++--------
 .../src/routes/(app)/explore/+page.svelte     | 26 +++++++++----------
 .../src/routes/(app)/library/+page.svelte     | 10 +++----
 .../src/routes/(app)/liked/+page.svelte       | 10 +++----
 .../src/routes/(app)/mixes/[id]/+page.svelte  | 16 ++++++------
 .../src/routes/(app)/playlists/+page.svelte   | 10 +++----
 .../routes/(app)/playlists/[id]/+page.svelte  | 18 ++++++-------
 .../src/routes/(app)/u/[id]/+page.svelte      | 14 +++++-----
 .../src/routes/(app)/upload/+page.svelte      | 18 ++++++-------
 web-player/src/routes/+error.svelte           |  2 +-
 web-player/src/routes/+layout.svelte          |  4 +--
 web-player/src/routes/+page.svelte            | 18 ++++++-------
 web-player/src/routes/login/+page.svelte      |  4 +--
 61 files changed, 131 insertions(+), 131 deletions(-)
 rename web-player/src/lib/components/ui/{ => forms}/AlbumForm.svelte (92%)
 rename web-player/src/lib/components/ui/{ => forms}/CoverForm.svelte (93%)
 rename web-player/src/lib/components/ui/{ => forms}/ImageDropzone.svelte (100%)
 rename web-player/src/lib/components/ui/{ => forms}/PlaylistForm.svelte (91%)
 rename web-player/src/lib/components/ui/{ => layout}/Page.svelte (100%)
 rename web-player/src/lib/components/ui/{ => layout}/PageHeader.svelte (100%)
 rename web-player/src/lib/components/ui/{ => layout}/SectionHeading.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ArtistLink.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/Artwork.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/Avatar.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/EqBars.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ExplicitBadge.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/ListRow.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/MediaCard.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/MediaIdentity.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/PlayButton.svelte (100%)
 rename web-player/src/lib/components/ui/{ => media}/TrackList.svelte (98%)
 rename web-player/src/lib/components/ui/{ => overlay}/AccountMenu.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/ConfirmDialog.svelte (93%)
 rename web-player/src/lib/components/ui/{ => overlay}/ContextMenu.svelte (98%)
 rename web-player/src/lib/components/ui/{ => overlay}/GlassMenu.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/MenuItem.svelte (100%)
 rename web-player/src/lib/components/ui/{ => overlay}/Modal.svelte (97%)
 rename web-player/src/lib/components/ui/{ => primitives}/Alert.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/BackLink.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Button.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Checkbox.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Chip.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/EmptyState.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Field.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/IconButton.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/InfiniteScroll.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Input.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Logo.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/SegmentedControl.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Slider.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Surface.svelte (100%)
 rename web-player/src/lib/components/ui/{ => primitives}/Textarea.svelte (100%)

diff --git a/web-player/src/lib/components/layout/MobileHeader.svelte b/web-player/src/lib/components/layout/MobileHeader.svelte
index 3629bba..e219c10 100644
--- a/web-player/src/lib/components/layout/MobileHeader.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/layout/Sidebar.svelte b/web-player/src/lib/components/layout/Sidebar.svelte
index b66d032..d80d5d6 100644
--- a/web-player/src/lib/components/layout/Sidebar.svelte
+++ b/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 {
diff --git a/web-player/src/lib/components/layout/TopBar.svelte b/web-player/src/lib/components/layout/TopBar.svelte
index ed28306..667faac 100644
--- a/web-player/src/lib/components/layout/TopBar.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/player/PlayerBar.svelte b/web-player/src/lib/components/player/PlayerBar.svelte
index 33e5152..6b85a1e 100644
--- a/web-player/src/lib/components/player/PlayerBar.svelte
+++ b/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';
diff --git a/web-player/src/lib/components/player/PlayerDock.svelte b/web-player/src/lib/components/player/PlayerDock.svelte
index 5eece8e..b50154a 100644
--- a/web-player/src/lib/components/player/PlayerDock.svelte
+++ b/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';
 
diff --git a/web-player/src/lib/components/player/Queue.svelte b/web-player/src/lib/components/player/Queue.svelte
index 1f07249..86c1375 100644
--- a/web-player/src/lib/components/player/Queue.svelte
+++ b/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';
diff --git a/web-player/src/lib/components/player/TrackInfo.svelte b/web-player/src/lib/components/player/TrackInfo.svelte
index 101787b..78fc802 100644
--- a/web-player/src/lib/components/player/TrackInfo.svelte
+++ b/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 {
diff --git a/web-player/src/lib/components/player/TransportControls.svelte b/web-player/src/lib/components/player/TransportControls.svelte
index 61ec0c9..e2b7a7b 100644
--- a/web-player/src/lib/components/player/TransportControls.svelte
+++ b/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';
 
diff --git a/web-player/src/lib/components/ui/AlbumForm.svelte b/web-player/src/lib/components/ui/forms/AlbumForm.svelte
similarity index 92%
rename from web-player/src/lib/components/ui/AlbumForm.svelte
rename to web-player/src/lib/components/ui/forms/AlbumForm.svelte
index 79f7691..3442c45 100644
--- a/web-player/src/lib/components/ui/AlbumForm.svelte
+++ b/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 {
diff --git a/web-player/src/lib/components/ui/CoverForm.svelte b/web-player/src/lib/components/ui/forms/CoverForm.svelte
similarity index 93%
rename from web-player/src/lib/components/ui/CoverForm.svelte
rename to web-player/src/lib/components/ui/forms/CoverForm.svelte
index cde587a..e298bc6 100644
--- a/web-player/src/lib/components/ui/CoverForm.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/ui/ImageDropzone.svelte b/web-player/src/lib/components/ui/forms/ImageDropzone.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ImageDropzone.svelte
rename to web-player/src/lib/components/ui/forms/ImageDropzone.svelte
diff --git a/web-player/src/lib/components/ui/PlaylistForm.svelte b/web-player/src/lib/components/ui/forms/PlaylistForm.svelte
similarity index 91%
rename from web-player/src/lib/components/ui/PlaylistForm.svelte
rename to web-player/src/lib/components/ui/forms/PlaylistForm.svelte
index c9944b1..1ef7642 100644
--- a/web-player/src/lib/components/ui/PlaylistForm.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/ui/Page.svelte b/web-player/src/lib/components/ui/layout/Page.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Page.svelte
rename to web-player/src/lib/components/ui/layout/Page.svelte
diff --git a/web-player/src/lib/components/ui/PageHeader.svelte b/web-player/src/lib/components/ui/layout/PageHeader.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/PageHeader.svelte
rename to web-player/src/lib/components/ui/layout/PageHeader.svelte
diff --git a/web-player/src/lib/components/ui/SectionHeading.svelte b/web-player/src/lib/components/ui/layout/SectionHeading.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/SectionHeading.svelte
rename to web-player/src/lib/components/ui/layout/SectionHeading.svelte
diff --git a/web-player/src/lib/components/ui/ArtistLink.svelte b/web-player/src/lib/components/ui/media/ArtistLink.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ArtistLink.svelte
rename to web-player/src/lib/components/ui/media/ArtistLink.svelte
diff --git a/web-player/src/lib/components/ui/Artwork.svelte b/web-player/src/lib/components/ui/media/Artwork.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Artwork.svelte
rename to web-player/src/lib/components/ui/media/Artwork.svelte
diff --git a/web-player/src/lib/components/ui/Avatar.svelte b/web-player/src/lib/components/ui/media/Avatar.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Avatar.svelte
rename to web-player/src/lib/components/ui/media/Avatar.svelte
diff --git a/web-player/src/lib/components/ui/EqBars.svelte b/web-player/src/lib/components/ui/media/EqBars.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/EqBars.svelte
rename to web-player/src/lib/components/ui/media/EqBars.svelte
diff --git a/web-player/src/lib/components/ui/ExplicitBadge.svelte b/web-player/src/lib/components/ui/media/ExplicitBadge.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ExplicitBadge.svelte
rename to web-player/src/lib/components/ui/media/ExplicitBadge.svelte
diff --git a/web-player/src/lib/components/ui/ListRow.svelte b/web-player/src/lib/components/ui/media/ListRow.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/ListRow.svelte
rename to web-player/src/lib/components/ui/media/ListRow.svelte
diff --git a/web-player/src/lib/components/ui/MediaCard.svelte b/web-player/src/lib/components/ui/media/MediaCard.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MediaCard.svelte
rename to web-player/src/lib/components/ui/media/MediaCard.svelte
diff --git a/web-player/src/lib/components/ui/MediaIdentity.svelte b/web-player/src/lib/components/ui/media/MediaIdentity.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MediaIdentity.svelte
rename to web-player/src/lib/components/ui/media/MediaIdentity.svelte
diff --git a/web-player/src/lib/components/ui/PlayButton.svelte b/web-player/src/lib/components/ui/media/PlayButton.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/PlayButton.svelte
rename to web-player/src/lib/components/ui/media/PlayButton.svelte
diff --git a/web-player/src/lib/components/ui/TrackList.svelte b/web-player/src/lib/components/ui/media/TrackList.svelte
similarity index 98%
rename from web-player/src/lib/components/ui/TrackList.svelte
rename to web-player/src/lib/components/ui/media/TrackList.svelte
index 46b6243..d48589f 100644
--- a/web-player/src/lib/components/ui/TrackList.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/ui/AccountMenu.svelte b/web-player/src/lib/components/ui/overlay/AccountMenu.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/AccountMenu.svelte
rename to web-player/src/lib/components/ui/overlay/AccountMenu.svelte
diff --git a/web-player/src/lib/components/ui/ConfirmDialog.svelte b/web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
similarity index 93%
rename from web-player/src/lib/components/ui/ConfirmDialog.svelte
rename to web-player/src/lib/components/ui/overlay/ConfirmDialog.svelte
index c1c4188..233bba7 100644
--- a/web-player/src/lib/components/ui/ConfirmDialog.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/ui/ContextMenu.svelte b/web-player/src/lib/components/ui/overlay/ContextMenu.svelte
similarity index 98%
rename from web-player/src/lib/components/ui/ContextMenu.svelte
rename to web-player/src/lib/components/ui/overlay/ContextMenu.svelte
index c011305..664f21c 100644
--- a/web-player/src/lib/components/ui/ContextMenu.svelte
+++ b/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';
 
diff --git a/web-player/src/lib/components/ui/GlassMenu.svelte b/web-player/src/lib/components/ui/overlay/GlassMenu.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/GlassMenu.svelte
rename to web-player/src/lib/components/ui/overlay/GlassMenu.svelte
diff --git a/web-player/src/lib/components/ui/MenuItem.svelte b/web-player/src/lib/components/ui/overlay/MenuItem.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/MenuItem.svelte
rename to web-player/src/lib/components/ui/overlay/MenuItem.svelte
diff --git a/web-player/src/lib/components/ui/Modal.svelte b/web-player/src/lib/components/ui/overlay/Modal.svelte
similarity index 97%
rename from web-player/src/lib/components/ui/Modal.svelte
rename to web-player/src/lib/components/ui/overlay/Modal.svelte
index 1102471..c304c61 100644
--- a/web-player/src/lib/components/ui/Modal.svelte
+++ b/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;
diff --git a/web-player/src/lib/components/ui/Alert.svelte b/web-player/src/lib/components/ui/primitives/Alert.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Alert.svelte
rename to web-player/src/lib/components/ui/primitives/Alert.svelte
diff --git a/web-player/src/lib/components/ui/BackLink.svelte b/web-player/src/lib/components/ui/primitives/BackLink.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/BackLink.svelte
rename to web-player/src/lib/components/ui/primitives/BackLink.svelte
diff --git a/web-player/src/lib/components/ui/Button.svelte b/web-player/src/lib/components/ui/primitives/Button.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Button.svelte
rename to web-player/src/lib/components/ui/primitives/Button.svelte
diff --git a/web-player/src/lib/components/ui/Checkbox.svelte b/web-player/src/lib/components/ui/primitives/Checkbox.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Checkbox.svelte
rename to web-player/src/lib/components/ui/primitives/Checkbox.svelte
diff --git a/web-player/src/lib/components/ui/Chip.svelte b/web-player/src/lib/components/ui/primitives/Chip.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Chip.svelte
rename to web-player/src/lib/components/ui/primitives/Chip.svelte
diff --git a/web-player/src/lib/components/ui/EmptyState.svelte b/web-player/src/lib/components/ui/primitives/EmptyState.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/EmptyState.svelte
rename to web-player/src/lib/components/ui/primitives/EmptyState.svelte
diff --git a/web-player/src/lib/components/ui/Field.svelte b/web-player/src/lib/components/ui/primitives/Field.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Field.svelte
rename to web-player/src/lib/components/ui/primitives/Field.svelte
diff --git a/web-player/src/lib/components/ui/IconButton.svelte b/web-player/src/lib/components/ui/primitives/IconButton.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/IconButton.svelte
rename to web-player/src/lib/components/ui/primitives/IconButton.svelte
diff --git a/web-player/src/lib/components/ui/InfiniteScroll.svelte b/web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/InfiniteScroll.svelte
rename to web-player/src/lib/components/ui/primitives/InfiniteScroll.svelte
diff --git a/web-player/src/lib/components/ui/Input.svelte b/web-player/src/lib/components/ui/primitives/Input.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Input.svelte
rename to web-player/src/lib/components/ui/primitives/Input.svelte
diff --git a/web-player/src/lib/components/ui/Logo.svelte b/web-player/src/lib/components/ui/primitives/Logo.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Logo.svelte
rename to web-player/src/lib/components/ui/primitives/Logo.svelte
diff --git a/web-player/src/lib/components/ui/SegmentedControl.svelte b/web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/SegmentedControl.svelte
rename to web-player/src/lib/components/ui/primitives/SegmentedControl.svelte
diff --git a/web-player/src/lib/components/ui/Slider.svelte b/web-player/src/lib/components/ui/primitives/Slider.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Slider.svelte
rename to web-player/src/lib/components/ui/primitives/Slider.svelte
diff --git a/web-player/src/lib/components/ui/Surface.svelte b/web-player/src/lib/components/ui/primitives/Surface.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Surface.svelte
rename to web-player/src/lib/components/ui/primitives/Surface.svelte
diff --git a/web-player/src/lib/components/ui/Textarea.svelte b/web-player/src/lib/components/ui/primitives/Textarea.svelte
similarity index 100%
rename from web-player/src/lib/components/ui/Textarea.svelte
rename to web-player/src/lib/components/ui/primitives/Textarea.svelte
diff --git a/web-player/src/lib/state/menus.svelte.ts b/web-player/src/lib/state/menus.svelte.ts
index c2959b0..305c7ea 100644
--- a/web-player/src/lib/state/menus.svelte.ts
+++ b/web-player/src/lib/state/menus.svelte.ts
@@ -1,4 +1,4 @@
-import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+import { contextMenuPosition, type MenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 import { player, toQueueItem, type ApiTrackLike } from '../player/player.svelte';
 
 export type TrackMenuState = { track: ApiTrackLike } & MenuPosition;
diff --git a/web-player/src/routes/(app)/albums/+page.svelte b/web-player/src/routes/(app)/albums/+page.svelte
index 237f9ae..aaf0870 100644
--- a/web-player/src/routes/(app)/albums/+page.svelte
+++ b/web-player/src/routes/(app)/albums/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Plus from '@lucide/svelte/icons/plus';
 	import Disc from '@lucide/svelte/icons/disc-3';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/albums/[id]/+page.svelte b/web-player/src/routes/(app)/albums/[id]/+page.svelte
index 055f9a3..4915104 100644
--- a/web-player/src/routes/(app)/albums/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/albums/[id]/+page.svelte
@@ -6,17 +6,17 @@
 	import Pause from '@lucide/svelte/icons/pause';
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import AlbumForm from '$lib/components/ui/AlbumForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import AlbumForm from '$lib/components/ui/forms/AlbumForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/explore/+page.svelte b/web-player/src/routes/(app)/explore/+page.svelte
index 3147b33..860b4f4 100644
--- a/web-player/src/routes/(app)/explore/+page.svelte
+++ b/web-player/src/routes/(app)/explore/+page.svelte
@@ -3,22 +3,22 @@
 	import { player, toQueueItem } from '$lib/player/player.svelte';
 	import { fetchAlbumQueueItems } from '$lib/data/albums';
 	import { fmtTime, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import InfiniteScroll from '$lib/components/ui/InfiniteScroll.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PlayButton from '$lib/components/ui/PlayButton.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import Chip from '$lib/components/ui/Chip.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import InfiniteScroll from '$lib/components/ui/primitives/InfiniteScroll.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PlayButton from '$lib/components/ui/media/PlayButton.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import Chip from '$lib/components/ui/primitives/Chip.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
 	import { searchHref } from '$lib/state/navigation.svelte';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
-	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/ContextMenu.svelte';
+	import ContextMenu, { contextMenuPosition } from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import ListEnd from '@lucide/svelte/icons/list-end';
 	import { appendUnique } from '$lib/data/collections';
diff --git a/web-player/src/routes/(app)/library/+page.svelte b/web-player/src/routes/(app)/library/+page.svelte
index 48f937d..1dc9858 100644
--- a/web-player/src/routes/(app)/library/+page.svelte
+++ b/web-player/src/routes/(app)/library/+page.svelte
@@ -4,11 +4,11 @@
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	let { data } = $props();
 
diff --git a/web-player/src/routes/(app)/liked/+page.svelte b/web-player/src/routes/(app)/liked/+page.svelte
index c462761..0a110db 100644
--- a/web-player/src/routes/(app)/liked/+page.svelte
+++ b/web-player/src/routes/(app)/liked/+page.svelte
@@ -4,11 +4,11 @@
 	import { player, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
 	import { plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 
 	const tracks = $derived(liked.list);
 	const listTracks = $derived(tracks.map((track) => ({ ...track, addedAt: track.likedAt })));
diff --git a/web-player/src/routes/(app)/mixes/[id]/+page.svelte b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
index b58c271..fc77fc9 100644
--- a/web-player/src/routes/(app)/mixes/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/mixes/[id]/+page.svelte
@@ -10,14 +10,14 @@
 		toQueueItem
 	} from '$lib/player/player.svelte';
 	import { fmtTime, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import BackLink from '$lib/components/ui/BackLink.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { mixItemTrack } from '$lib/data/mixes';
diff --git a/web-player/src/routes/(app)/playlists/+page.svelte b/web-player/src/routes/(app)/playlists/+page.svelte
index 415d2f3..b4e0f83 100644
--- a/web-player/src/routes/(app)/playlists/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import { createPlaylistModal } from '$lib/state/playlists.svelte';
 	import { fmtDurationLong, plural, playlistMeta } from '$lib/utils/format';
 
diff --git a/web-player/src/routes/(app)/playlists/[id]/+page.svelte b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
index 5028998..0bd6168 100644
--- a/web-player/src/routes/(app)/playlists/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/playlists/[id]/+page.svelte
@@ -6,15 +6,15 @@
 	import SquarePencil from '@lucide/svelte/icons/square-pen';
 	import Trash from '@lucide/svelte/icons/trash';
 	import { player, toQueueItems, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import ConfirmDialog from '$lib/components/ui/ConfirmDialog.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/TrackList.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import TrackList from '$lib/components/ui/media/TrackList.svelte';
 	import { playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/u/[id]/+page.svelte b/web-player/src/routes/(app)/u/[id]/+page.svelte
index 2f2f804..1c57924 100644
--- a/web-player/src/routes/(app)/u/[id]/+page.svelte
+++ b/web-player/src/routes/(app)/u/[id]/+page.svelte
@@ -2,13 +2,13 @@
 	import { untrack } from 'svelte';
 	import { enhance } from '$app/forms';
 	import ListMusic from '@lucide/svelte/icons/list-music';
-	import Page from '$lib/components/ui/Page.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import Avatar from '$lib/components/ui/Avatar.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Avatar from '$lib/components/ui/media/Avatar.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
 	import { plural, playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();
diff --git a/web-player/src/routes/(app)/upload/+page.svelte b/web-player/src/routes/(app)/upload/+page.svelte
index 98bc20b..80ce79d 100644
--- a/web-player/src/routes/(app)/upload/+page.svelte
+++ b/web-player/src/routes/(app)/upload/+page.svelte
@@ -4,15 +4,15 @@
 	import Music from '@lucide/svelte/icons/music';
 	import ImageIcon from '@lucide/svelte/icons/image';
 	import Check from '@lucide/svelte/icons/check';
-	import Page from '$lib/components/ui/Page.svelte';
-	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import Surface from '$lib/components/ui/Surface.svelte';
-	import ImageDropzone from '$lib/components/ui/ImageDropzone.svelte';
-	import Alert from '$lib/components/ui/Alert.svelte';
-	import Field from '$lib/components/ui/Field.svelte';
-	import Input from '$lib/components/ui/Input.svelte';
-	import Checkbox from '$lib/components/ui/Checkbox.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import PageHeader from '$lib/components/ui/layout/PageHeader.svelte';
+	import Surface from '$lib/components/ui/primitives/Surface.svelte';
+	import ImageDropzone from '$lib/components/ui/forms/ImageDropzone.svelte';
+	import Alert from '$lib/components/ui/primitives/Alert.svelte';
+	import Field from '$lib/components/ui/primitives/Field.svelte';
+	import Input from '$lib/components/ui/primitives/Input.svelte';
+	import Checkbox from '$lib/components/ui/primitives/Checkbox.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 
 	type Status = 'idle' | 'uploading' | 'done' | 'error';
 	type StepState = 'idle' | 'active' | 'done';
diff --git a/web-player/src/routes/+error.svelte b/web-player/src/routes/+error.svelte
index 6913cf3..6597497 100644
--- a/web-player/src/routes/+error.svelte
+++ b/web-player/src/routes/+error.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import Button from '$lib/components/ui/Button.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
 </script>
 
 <div class="animate-enter mx-auto my-[14vh] max-w-prose-sm text-center">
diff --git a/web-player/src/routes/+layout.svelte b/web-player/src/routes/+layout.svelte
index 530f756..ff77a72 100644
--- a/web-player/src/routes/+layout.svelte
+++ b/web-player/src/routes/+layout.svelte
@@ -9,8 +9,8 @@
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
 	import TopBar from '$lib/components/layout/TopBar.svelte';
 	import MobileHeader from '$lib/components/layout/MobileHeader.svelte';
-	import Modal from '$lib/components/ui/Modal.svelte';
-	import PlaylistForm from '$lib/components/ui/PlaylistForm.svelte';
+	import Modal from '$lib/components/ui/overlay/Modal.svelte';
+	import PlaylistForm from '$lib/components/ui/forms/PlaylistForm.svelte';
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
 	import { liked } from '$lib/player/liked.svelte';
diff --git a/web-player/src/routes/+page.svelte b/web-player/src/routes/+page.svelte
index 1047400..686e113 100644
--- a/web-player/src/routes/+page.svelte
+++ b/web-player/src/routes/+page.svelte
@@ -16,15 +16,15 @@
 	import { mergeRecentlyPlayed } from '$lib/data/recentlyPlayed';
 	import { mixItemTrack } from '$lib/data/mixes';
 	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/utils/format';
-	import Page from '$lib/components/ui/Page.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import MediaCard from '$lib/components/ui/MediaCard.svelte';
-	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import ListRow from '$lib/components/ui/ListRow.svelte';
-	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
-	import EmptyState from '$lib/components/ui/EmptyState.svelte';
-	import Button from '$lib/components/ui/Button.svelte';
-	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
+	import Page from '$lib/components/ui/layout/Page.svelte';
+	import Artwork from '$lib/components/ui/media/Artwork.svelte';
+	import MediaCard from '$lib/components/ui/media/MediaCard.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
+	import ListRow from '$lib/components/ui/media/ListRow.svelte';
+	import SectionHeading from '$lib/components/ui/layout/SectionHeading.svelte';
+	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/state/menus.svelte';
 	import { HOME_CONTINUE_LIMIT, HOME_POPULAR_MAX } from '$lib/config';
diff --git a/web-player/src/routes/login/+page.svelte b/web-player/src/routes/login/+page.svelte
index 32427e4..26f0586 100644
--- a/web-player/src/routes/login/+page.svelte
+++ b/web-player/src/routes/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import Logo from '$lib/components/ui/Logo.svelte';
+	import Button from '$lib/components/ui/primitives/Button.svelte';
+	import Logo from '$lib/components/ui/primitives/Logo.svelte';
 
 	let { data } = $props();