Move store-connected components out of ui/ into components/music and lint the ui boundary

web-player/eslint.config.js

@@ -48,6 +48,34 @@ export default ts.config(
 			'@typescript-eslint/no-unused-expressions': 'off'
 		}
 	},
+	{
+		files: ['src/lib/components/ui/**'],
+		rules: {
+			'no-restricted-imports': [
+				'error',
+				{
+					patterns: [
+						{
+							group: ['../*'],
+							message: 'Use $lib/... instead of relative parent imports.'
+						},
+						{
+							group: [
+								'$lib/player/*',
+								'$lib/data/*',
+								'$lib/server/*',
+								'$lib/components/music/*',
+								'$lib/components/shell/*',
+								'$lib/components/player/*'
+							],
+							message:
+								'components/ui is the presentation layer: it cannot depend on app state, data or other component layers.'
+						}
+					]
+				}
+			]
+		}
+	},
 	{
 		ignores: ['build/', '.svelte-kit/', 'static/', 'src/lib/api/schema.d.ts']
 	}

web-player/src/lib/components/music/AlbumContextMenu.svelte

@@ -5,7 +5,7 @@
 	import { fetchAlbumTracks } from '$lib/data/albums';
 	import type { Menu } from '$lib/state/menu.svelte';
 	import type { Playlist } from '$lib/types';
-	import ContextMenu from './ContextMenu.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 
 	interface Props {
 		menu: Menu<string>;

web-player/src/lib/components/music/TrackContextMenu.svelte

@@ -3,7 +3,7 @@
 	import { player } from '$lib/player/player.svelte';
 	import type { Menu } from '$lib/state/menu.svelte';
 	import type { Playlist, Track } from '$lib/types';
-	import ContextMenu from './ContextMenu.svelte';
+	import ContextMenu from '$lib/components/ui/overlay/ContextMenu.svelte';
 
 	interface Props {
 		menu: Menu<Track>;

web-player/src/lib/components/music/TrackList.svelte

@@ -25,8 +25,8 @@
 	import { player } from '$lib/player/player.svelte';
 	import { fmtTime, fmtDate } from '$lib/utils/format';
 	import { pressable } from '$lib/actions/pressable';
-	import MediaIdentity from './MediaIdentity.svelte';
-	import EqBars from './EqBars.svelte';
+	import MediaIdentity from '$lib/components/ui/media/MediaIdentity.svelte';
+	import EqBars from '$lib/components/ui/media/EqBars.svelte';
 	import IconButton from '$lib/components/ui/primitives/IconButton.svelte';
 
 	interface RowAction {

web-player/src/routes/(app)/+page.svelte

@@ -16,8 +16,8 @@
 	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 PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
-	import TrackContextMenu from '$lib/components/ui/overlay/TrackContextMenu.svelte';
+	import PlayAllButton from '$lib/components/music/PlayAllButton.svelte';
+	import TrackContextMenu from '$lib/components/music/TrackContextMenu.svelte';
 	import { createMenu } from '$lib/state/menu.svelte';
 	import { HOME_CONTINUE_LIMIT } from '$lib/config';
 

web-player/src/routes/(app)/albums/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { albumCover } from '$lib/utils/hrefs';
 	import { player } from '$lib/player/player.svelte';
-	import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
+	import PlayAllButton from '$lib/components/music/PlayAllButton.svelte';
 	import X from '@lucide/svelte/icons/x';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Page from '$lib/components/ui/layout/Page.svelte';
@@ -14,7 +14,7 @@
 	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 TrackList from '$lib/components/music/TrackList.svelte';
 	import { albumMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();

web-player/src/routes/(app)/explore/+page.svelte

@@ -20,8 +20,8 @@
 	import { genreHref, playlistCover } from '$lib/utils/hrefs';
 	import { createMenu } from '$lib/state/menu.svelte';
 	import { createPagedList } from '$lib/state/pagedList.svelte';
-	import TrackContextMenu from '$lib/components/ui/overlay/TrackContextMenu.svelte';
-	import AlbumContextMenu from '$lib/components/ui/overlay/AlbumContextMenu.svelte';
+	import TrackContextMenu from '$lib/components/music/TrackContextMenu.svelte';
+	import AlbumContextMenu from '$lib/components/music/AlbumContextMenu.svelte';
 	import { genreInfo, genreTiles } from '$lib/data/genres';
 	import {
 		type SearchFilter,

web-player/src/routes/(app)/library/+page.svelte

@@ -9,7 +9,7 @@
 	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
 	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import ConfirmDialog from '$lib/components/ui/overlay/ConfirmDialog.svelte';
-	import TrackList from '$lib/components/ui/media/TrackList.svelte';
+	import TrackList from '$lib/components/music/TrackList.svelte';
 
 	let { data } = $props();
 

web-player/src/routes/(app)/liked/+page.svelte

@@ -2,14 +2,14 @@
 	import Heart from '@lucide/svelte/icons/heart';
 	import X from '@lucide/svelte/icons/x';
 	import { player } from '$lib/player/player.svelte';
-	import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
+	import PlayAllButton from '$lib/components/music/PlayAllButton.svelte';
 	import { liked } from '$lib/player/liked.svelte';
 	import { plural } from '$lib/utils/format';
 	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';
+	import TrackList from '$lib/components/music/TrackList.svelte';
 
 	const tracks = $derived(liked.list);
 	const listTracks = $derived(tracks.map((track) => ({ ...track, date: track.likedAt })));

web-player/src/routes/(app)/mixes/[id]/+page.svelte

@@ -9,11 +9,11 @@
 	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 TrackContextMenu from '$lib/components/ui/overlay/TrackContextMenu.svelte';
+	import TrackList from '$lib/components/music/TrackList.svelte';
+	import TrackContextMenu from '$lib/components/music/TrackContextMenu.svelte';
 	import { createMenu } from '$lib/state/menu.svelte';
 	import type { Track } from '$lib/types';
-	import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
+	import PlayAllButton from '$lib/components/music/PlayAllButton.svelte';
 
 	let { data, form } = $props();
 

web-player/src/routes/(app)/playlists/[id]/+page.svelte

@@ -3,7 +3,7 @@
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import X from '@lucide/svelte/icons/x';
 	import { player } from '$lib/player/player.svelte';
-	import PlayAllButton from '$lib/components/ui/media/PlayAllButton.svelte';
+	import PlayAllButton from '$lib/components/music/PlayAllButton.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';
@@ -13,7 +13,7 @@
 	import Button from '$lib/components/ui/primitives/Button.svelte';
 	import BackLink from '$lib/components/ui/primitives/BackLink.svelte';
 	import EmptyState from '$lib/components/ui/primitives/EmptyState.svelte';
-	import TrackList from '$lib/components/ui/media/TrackList.svelte';
+	import TrackList from '$lib/components/music/TrackList.svelte';
 	import { playlistMeta } from '$lib/utils/format';
 
 	let { data, form } = $props();