chore(M004/S01): auto-commit after complete-slice

frontend/src/components/explore-view/explore-view.ts

@@ -0,0 +1,42 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { designTokens } from '../../styles/tokens.css';
+
+@customElement('explore-view')
+export class ExploreView extends LitElement {
+    static override styles = [
+        designTokens,
+        css`
+            :host {
+                display: block;
+                padding: 24px;
+            }
+
+            h1 {
+                margin: 0 0 16px;
+                font-size: 1.5rem;
+                color: var(--yj-text-primary);
+            }
+
+            .placeholder {
+                color: var(--yj-text-secondary);
+            }
+        `,
+    ];
+
+    override render() {
+        return html`
+            <h1>Explore</h1>
+            <p class="placeholder">
+                Search MusicBrainz to discover artists, albums, and
+                tracks.
+            </p>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'explore-view': ExploreView;
+    }
+}

frontend/src/components/sidebar/app-sidebar.ts

@@ -5,7 +5,7 @@ import { designTokens } from '../../styles/tokens.css';
 
 import type { DragActiveDetail } from '@utils/drag-controller';
 
-type View = 'home' | 'playlists' | 'artists' | 'genres' | 'albums' | 'tracks' | 'settings';
+type View = 'home' | 'playlists' | 'artists' | 'genres' | 'albums' | 'tracks' | 'explore' | 'settings';
 
 interface NavItem {
     id: View;
@@ -148,6 +148,7 @@ export class AppSidebar extends LitElement {
         { id: 'genres', label: 'Genres', icon: 'masks-theater' },
         { id: 'albums', label: 'Albums', icon: 'compact-disc' },
         { id: 'tracks', label: 'Tracks', icon: 'music' },
+        { id: 'explore', label: 'Explore', icon: 'globe' },
         { id: 'settings', label: 'Settings', icon: 'gear' },
     ];