indigo
d44398033a
Add a lock toggle to the shot table toolbar that freezes the checkbox, thumbnail, and shot name columns. When locked, the table splits into a fixed left pane and a horizontally scrollable right pane so the scrollbar spans only the movable columns. Constrain the table to fill the viewport height so the scrollbar stays at the screen bottom, and add min-w-0 to the layout to keep horizontal overflow inside the table instead of the page. Also fix the asset Task Status filter to render task type groups by using the object-aware TaskStatusBadge. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
<template>
|
|
<SidebarProvider>
|
|
<div class="flex h-screen w-full">
|
|
<!-- Main Sidebar -->
|
|
<AppSidebar />
|
|
|
|
<!-- Main Content Area -->
|
|
<SidebarInset class="flex-1 flex flex-col min-w-0">
|
|
<!-- Header -->
|
|
<AppHeader />
|
|
|
|
<!-- Content Area -->
|
|
<main class="flex-1 flex overflow-hidden">
|
|
<!-- Main Content -->
|
|
<div class="flex-1 overflow-auto">
|
|
<router-view />
|
|
</div>
|
|
|
|
<!-- Detail Panel (conditionally shown) -->
|
|
<div
|
|
v-if="showDetailPanel"
|
|
class="w-80 border-l bg-background overflow-auto"
|
|
>
|
|
<slot name="detail-panel">
|
|
<!-- Default detail panel content -->
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-semibold mb-4">Details</h3>
|
|
<p class="text-muted-foreground">Select an item to view details</p>
|
|
</div>
|
|
</slot>
|
|
</div>
|
|
</main>
|
|
</SidebarInset>
|
|
</div>
|
|
</SidebarProvider>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar'
|
|
import AppSidebar from './AppSidebar.vue'
|
|
import AppHeader from './AppHeader.vue'
|
|
|
|
// Show detail panel based on route or store state
|
|
const route = useRoute()
|
|
const showDetailPanel = computed(() => {
|
|
// Show detail panel for certain routes or when an item is selected
|
|
return route.meta?.showDetailPanel || false
|
|
})
|
|
</script> |