DorianandClaude Opus 4.6
48dd7a9c68
Desktop (>= 1024px): - Content grid and detail pane shown side-by-side when a detail is selected - Three-column layout: chat | grid | detail - Grid takes 45% width, detail fills remaining space Mobile (< 1024px): - Bottom tab bar with "Chat" and "Content" tabs - Only one view visible at a time - Auto-switches to Content tab when panel opens - Orange dot indicator on Content tab when content is available Extracted reusable components: - ContentGridView: all grid renderers in one component - DetailView: all detail views in one component - CloseButton: reusable close/dismiss button Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
23 lines
671 B
Vue
23 lines
671 B
Vue
<template>
|
|
<button
|
|
class="absolute top-3 right-3 z-10 p-2 rounded-lg path-glass-icon transition-colors"
|
|
:class="isDark
|
|
? 'text-white/70 hover:bg-white/10'
|
|
: 'text-gray-500 hover:bg-black/5 hover:text-gray-800'"
|
|
title="Close"
|
|
aria-label="Close"
|
|
@click="$emit('click')"
|
|
>
|
|
<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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTheme } from '@/composables/useTheme'
|
|
|
|
const { isDark } = useTheme()
|
|
defineEmits<{ click: [] }>()
|
|
</script>
|