RepoDructor/components/MainContainer.client.vue

<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">
          <SearchFilter
            :results-count="filteredCount"
            @search="$emit('search', $event)"
          />
          <PlaybackControls
            @shuffle-changed="$emit('shuffle-changed', $event)"
            @repeat-changed="$emit('repeat-changed', $event)"
          />
          <SettingsMenu />
        </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 PlaybackControls from './PlaybackControls.client.vue'
import SearchFilter from './SearchFilter.client.vue'
import SettingsMenu from './SettingsMenu.client.vue'

const props = defineProps({
  currentTrack: {
    type: Object,
    default: null
  },
  isPlaying: {
    type: Boolean,
    default: false
  },
  filteredCount: {
    type: Number,
    default: null
  }
})

defineEmits(['shuffle-changed', 'repeat-changed', 'search'])

// Computed property to determine if there's an active track
const hasActiveTrack = computed(() => !!props.currentTrack)
</script>

<style scoped>
.main-container {
  /* Parametrized viewport sizing */
  --app-vertical-margin: 10px; /* Top/bottom margin between both components */
  --playback-controls-height: 40px; /* Compact but not tiny */
  --tracklist-height: calc(100vh - (var(--app-vertical-margin) * 2) - var(--playback-controls-height));

  /* Container takes full viewport minus vertical margins */
  height: calc(100vh - (var(--app-vertical-margin) * 2));
  margin-top: var(--app-vertical-margin);
  margin-bottom: var(--app-vertical-margin);
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
  /* Keep shadows visible and allow backdrop to show through */
  overflow: visible;
  z-index: 1; /* Ensure content sits above Aurora background */
}

.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: visible;
  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;
  flex-wrap: nowrap;
  column-gap: 12px;
}

.app-title {
  flex: 1 1 auto;
  min-width: 0; /* allow text ellipsis */
}

.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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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: 10px;
  align-items: center;
  flex: 0 0 auto;
}

/* Avoid hover transforms causing layout shifts in header controls */
.header-controls :deep(.base-button.icon:hover),
.header-controls :deep(.theme-toggle:hover),
.header-controls :deep(.icon-button:hover .icon) {
  transform: none !important;
}

.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: 680px) {
  /* Hide subtitle to keep header inline on narrow screens */
  .subtitle {
    display: none;
  }
}

@media (max-width: 520px) {
  .main-container {
    padding: 15px;
    padding-bottom: 0;
    /* Keep same parametrized behavior on mobile */
    height: calc(100vh - (var(--app-vertical-margin) * 2));
  }
  
  .header-content {
    flex-direction: column;
    gap: 12px;
    padding: 12px 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>