feat: update styles

furumi-node-player/client/src/FurumiPlayer.tsx

@@ -26,7 +26,7 @@ import {
 } from './store/slices/queueSlice'
 import { attachAudioPlayback } from './audioPlaybackService'
 import { fmt } from './utils'
-import { Header } from './components/Header'
+import { Header } from './components/header'
 import { MainPanel, type Crumb } from './components/MainPanel'
 import { PlayerBar } from './components/PlayerBar'
 import type { Track } from './types'

furumi-node-player/client/src/components/header/Header.tsx

@@ -1,4 +1,5 @@
-import { SearchDropdown } from './SearchDropdown'
+import { SearchDropdown } from '../SearchDropdown'
+import styles from './header.module.css'
 
 type SearchResultItem = {
   result_type: string
@@ -19,8 +20,8 @@ export function Header({
   onSearchSelect,
 }: HeaderProps) {
   return (
-    <header className="header">
-      <div className="header-logo">
+    <header className={styles.header}>
+      <div className={styles.headerLogo}>
         <button className="btn-menu">&#9776;</button>
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
           <circle cx="9" cy="18" r="3" />
@@ -28,7 +29,7 @@ export function Header({
           <path d="M12 18V6l9-3v3" />
         </svg>
         Furumi
-        <span className="header-version">v</span>
+        <span className={styles.headerVersion}>v</span>
       </div>
       <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
         <div className="search-wrap">

furumi-node-player/client/src/components/header/header.module.css

@@ -0,0 +1,35 @@
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1.5rem;
+    background: var(--bg-panel);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+    z-index: 10;
+}
+
+.headerLogo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: #ffffff;
+}
+
+.headerLogo svg {
+    width: 22px;
+    height: 22px;
+}
+
+.headerVersion {
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    margin-left: 0.25rem;
+    font-weight: 500;
+    text-decoration: none;
+}

furumi-node-player/client/src/components/header/index.ts

@@ -0,0 +1 @@
+export * from './Header'

furumi-node-player/client/src/furumi-player.css

@@ -31,40 +31,6 @@
   --danger: #f87171;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1.5rem;
-  background: var(--bg-panel);
-  border-bottom: 1px solid var(--border);
-  flex-shrink: 0;
-  z-index: 10;
-}
-
-.header-logo {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-weight: 700;
-  font-size: 1.1rem;
-}
-
-.header-logo svg {
-  width: 22px;
-  height: 22px;
-}
-
-.header-version {
-  font-size: 0.7rem;
-  color: var(--text-muted);
-  background: rgba(255, 255, 255, 0.05);
-  padding: 0.1rem 0.4rem;
-  border-radius: 4px;
-  margin-left: 0.25rem;
-  font-weight: 500;
-  text-decoration: none;
-}
 
 .btn-menu {
   display: none;