archy/packages/app/src/components/content/ContentPanel.vue

<template>
  <Transition name="panel">
    <aside
      v-if="panelOpen"
      class="path-glass-card overflow-hidden flex flex-col"
      :class="isMobile
        ? 'fixed inset-0 z-30'
        : 'w-80 xl:w-96 shrink-0'"
    >
      <!-- Mobile header -->
      <div
        v-if="isMobile"
        class="p-3 flex items-center justify-between shrink-0"
        :style="isDark
          ? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
          : 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'"
      >
        <h3 class="text-sm font-bold" :class="isDark ? 'text-white/90' : 'text-gray-900'">
          {{ panelTitle }}
        </h3>
        <button
          class="p-2 rounded-lg transition-colors"
          :class="isDark
            ? 'text-white/70 hover:bg-white/10'
            : 'text-gray-500 hover:bg-black/5'"
          @click="closePanel"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Tab bar (when multiple tabs available) -->
      <div
        v-if="availableTabs.length > 1 && !hasDetailOpen"
        class="flex items-center gap-1 px-3 pt-3 pb-1 shrink-0 overflow-x-auto scrollbar-hide"
      >
        <button
          v-for="tab in availableTabs"
          :key="tab"
          class="text-[10px] px-2.5 py-1.5 rounded-lg font-medium whitespace-nowrap transition-all duration-150"
          :class="activeTab === tab
            ? 'nav-tab-active'
            : isDark
              ? 'text-white/40 hover:text-white/70 hover:bg-white/5'
              : 'text-gray-500 hover:text-gray-800 hover:bg-black/5'"
          @click="setActiveTab(tab)"
        >
          {{ tabLabel(tab) }}
        </button>
      </div>

      <!-- Content area -->
      <div class="flex-1 min-h-0">
        <!-- Detail views (override tab content) -->
        <FilmDetail
          v-if="selectedFilm"
          :film="selectedFilm"
          @back="closeFilmDetail"
        />
        <BookDetail
          v-else-if="selectedBook"
          :book="selectedBook"
          @back="closeBookDetail"
        />
        <TVSeriesDetail
          v-else-if="selectedTVSeries"
          :series="selectedTVSeries"
          @back="closeTVSeriesDetail"
        />
        <SongDetail
          v-else-if="selectedSong"
          :song="selectedSong"
          @back="closeSongDetail"
        />
        <PodcastDetail
          v-else-if="selectedPodcast"
          :podcast="selectedPodcast"
          @back="closePodcastDetail"
        />
        <ArticleDetail
          v-else-if="selectedArticle"
          :article="selectedArticle"
          @back="closeArticleDetail"
        />

        <!-- Grid views by active tab -->
        <FilmGrid
          v-else-if="activeTab === 'film'"
          :films="panelFilms"
          :title="panelTitle"
          @select-film="openFilmDetail"
        />
        <BookGrid
          v-else-if="activeTab === 'book'"
          :books="panelBooks"
          :title="panelTitle"
          @select-book="openBookDetail"
        />
        <TVSeriesGrid
          v-else-if="activeTab === 'tvshow'"
          :series="panelTVSeries"
          :title="panelTitle"
          @select-series="openTVSeriesDetail"
        />
        <SongGrid
          v-else-if="activeTab === 'song'"
          :songs="panelSongs"
          :title="panelTitle"
          @select-song="openSongDetail"
        />
        <PodcastGrid
          v-else-if="activeTab === 'podcast'"
          :podcasts="panelPodcasts"
          :title="panelTitle"
          @select-podcast="openPodcastDetail"
        />
        <NewsGrid
          v-else-if="activeTab === 'news'"
          :articles="panelWebResults"
          :title="panelTitle"
          :query="panelQuery"
          variant="news"
        />
        <NewsGrid
          v-else-if="activeTab === 'websites'"
          :articles="panelWebsites"
          :title="panelTitle"
          :query="panelQuery"
          variant="websites"
        />
        <MagazineGrid
          v-else-if="activeTab === 'magazine'"
          :sections="panelMagazineSections"
          :title="panelTitle"
          :query="panelQuery"
          :hero-image="panelMagazineHeroImage ?? undefined"
        />
      </div>
    </aside>
  </Transition>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useContentPanel, type ContentTab } from '@/composables/useContentPanel'
import FilmGrid from './FilmGrid.vue'
import FilmDetail from './FilmDetail.vue'
import BookGrid from './BookGrid.vue'
import BookDetail from './BookDetail.vue'
import TVSeriesGrid from './TVSeriesGrid.vue'
import TVSeriesDetail from './TVSeriesDetail.vue'
import SongGrid from './SongGrid.vue'
import SongDetail from './SongDetail.vue'
import PodcastGrid from './PodcastGrid.vue'
import PodcastDetail from './PodcastDetail.vue'
import NewsGrid from './NewsGrid.vue'
import ArticleDetail from './ArticleDetail.vue'
import MagazineGrid from './MagazineGrid.vue'

const { isDark } = useTheme()
const {
  panelOpen,
  panelFilms,
  panelBooks,
  panelTVSeries,
  panelSongs,
  panelPodcasts,
  panelWebResults,
  panelWebsites,
  panelMagazineSections,
  panelMagazineHeroImage,
  panelTitle,
  panelQuery,
  activeTab,
  availableTabs,
  selectedFilm,
  selectedBook,
  selectedTVSeries,
  selectedSong,
  selectedPodcast,
  selectedArticle,
  setActiveTab,
  openFilmDetail,
  closeFilmDetail,
  openBookDetail,
  closeBookDetail,
  openTVSeriesDetail,
  closeTVSeriesDetail,
  openSongDetail,
  closeSongDetail,
  openPodcastDetail,
  closePodcastDetail,
  closeArticleDetail,
  closePanel,
} = useContentPanel()

const hasDetailOpen = computed(() =>
  !!(selectedFilm.value || selectedBook.value || selectedTVSeries.value || selectedSong.value || selectedPodcast.value || selectedArticle.value)
)

const windowWidth = ref(window.innerWidth)
const isMobile = computed(() => windowWidth.value < 1024)

function onResize() {
  windowWidth.value = window.innerWidth
}

const TAB_LABELS: Record<ContentTab, string> = {
  film: 'Films',
  book: 'Books',
  tvshow: 'TV',
  image: 'Images',
  song: 'Music',
  podcast: 'Podcasts',
  news: 'News',
  websites: 'Web',
  magazine: 'Brief',
}

function tabLabel(tab: ContentTab): string {
  return TAB_LABELS[tab] ?? tab
}

onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

<style scoped>
.panel-enter-active {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel-leave-active {
  transition: all 0.2s ease-in;
}
.panel-enter-from {
  opacity: 0;
  transform: translateX(20px);
}
.panel-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>