Implement Lucide Vue icon system and UI improvements

- Replace emoji icons with professional SVG icons from Lucide Vue
- Add collapsible MusicControls with compact top-right collapse button
- Improve icon system with dynamic sizing and proper prop handling
- Disable SSR to prevent hydration issues with audio APIs
- Update IconButton to support both emoji strings and SVG components
- Optimize bottom positioning for expanded vs collapsed states
- Document new icon system in DESIGN_SYSTEM.md

components/MainContainer.client.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="main-container">
+    <!-- Header Section -->
+    <header class="app-header glass">
+      <div class="header-content">
+        <div class="app-title">
+          <h1 class="title-text">
+            <Music :size="32" class="title-icon" />
+            RepoDructor
+          </h1>
+          <p class="subtitle">Music Player</p>
+        </div>
+        
+        <div class="header-controls">
+          <PlaybackControls 
+            @shuffle-changed="$emit('shuffle-changed', $event)"
+            @repeat-changed="$emit('repeat-changed', $event)"
+          />
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="main-content">
+      <div class="content-wrapper">
+        <slot />
+      </div>
+    </main>
+
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Music } from 'lucide-vue-next'
+import ThemeToggle from './ThemeToggle.client.vue'
+import PlaybackControls from './PlaybackControls.client.vue'
+
+const props = defineProps({
+  currentTrack: {
+    type: Object,
+    default: null
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['shuffle-changed', 'repeat-changed'])
+
+// Computed property to determine if there's an active track
+const hasActiveTrack = computed(() => !!props.currentTrack)
+</script>
+
+<style scoped>
+.main-container {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  padding-bottom: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.app-header {
+  margin-bottom: 15px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.app-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, 
+    transparent 0%, 
+    var(--accent-primary) 25%, 
+    var(--accent-secondary) 75%, 
+    transparent 100%
+  );
+}
+
+.header-content {
+  padding: 16px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.app-title {
+  flex: 1;
+}
+
+.title-text {
+  font-size: 2rem;
+  font-weight: 700;
+  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin: 0;
+  animation: glow-text 3s ease-in-out infinite alternate;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  color: var(--accent-primary);
+  flex-shrink: 0;
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin: 4px 0 0 0;
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+.header-controls {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0; /* Allow flex child to shrink */
+}
+
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  animation: fadeInUp 0.6s ease-out;
+  min-height: 0; /* Allow flex child to shrink */
+}
+
+
+/* Animations */
+@keyframes glow-text {
+  0% { 
+    filter: brightness(1) drop-shadow(0 0 5px rgba(59, 130, 246, 0.3)); 
+  }
+  100% { 
+    filter: brightness(1.2) drop-shadow(0 0 15px rgba(139, 92, 246, 0.5)); 
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 0.7; }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .main-container {
+    padding: 15px;
+    padding-bottom: 0;
+    height: 92vh;
+  }
+  
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    text-align: center;
+  }
+  
+  .app-title {
+    flex: none;
+  }
+  
+  .title-text {
+    font-size: 1.8rem;
+  }
+  
+  .subtitle {
+    font-size: 0.85rem;
+  }
+  
+  .header-controls {
+    justify-content: center;
+    gap: 12px;
+  }
+  
+  .content-wrapper {
+    gap: 12px;
+  }
+  
+}
+
+@media (max-width: 480px) {
+  .main-container {
+    padding: 10px;
+    padding-bottom: 120px;
+  }
+  
+  .header-content {
+    padding: 12px;
+    gap: 12px;
+  }
+  
+  .title-text {
+    font-size: 1.6rem;
+  }
+  
+  .subtitle {
+    font-size: 0.8rem;
+  }
+  
+  .header-controls {
+    gap: 8px;
+  }
+  
+  .content-wrapper {
+    gap: 12px;
+  }
+}
+
+/* Performance optimization */
+.main-container {
+  will-change: scroll-position;
+}
+
+.app-header {
+  will-change: backdrop-filter;
+}
+
+/* Smooth scrolling */
+@media (prefers-reduced-motion: no-preference) {
+  .main-container {
+    scroll-behavior: smooth;
+  }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .title-text {
+    background: none;
+    -webkit-text-fill-color: var(--text-primary);
+    color: var(--text-primary);
+  }
+  
+  .app-header::before {
+    background: var(--accent-primary);
+  }
+}
+</style>