From d44398033a4f0352e9f6dd46cacbc9e09b015593 Mon Sep 17 00:00:00 2001
From: indigo <indigoo@gmail.com>
Date: Mon, 22 Jun 2026 10:04:55 +0800
Subject: [PATCH] Add shot table column lock with two-pane horizontal scroll

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>
---
 .../components/asset/AssetTableToolbar.vue    |   1 +
 .../src/components/asset/TaskStatusFilter.vue | 243 +++++++++---------
 frontend/src/components/layout/AppLayout.vue  |   2 +-
 frontend/src/components/shot/ShotBrowser.vue  |  26 +-
 .../src/components/shot/ShotTableToolbar.vue  |  17 +-
 .../src/components/shot/ShotsDataTable.vue    | 162 +++++++++++-
 frontend/src/components/ui/table/Table.vue    |   2 +-
 .../src/views/project/ProjectShotsView.vue    |   4 +-
 8 files changed, 311 insertions(+), 146 deletions(-)

diff --git a/frontend/src/components/asset/AssetTableToolbar.vue b/frontend/src/components/asset/AssetTableToolbar.vue
index 59b5ad1..6fc9ef5 100644
--- a/frontend/src/components/asset/AssetTableToolbar.vue
+++ b/frontend/src/components/asset/AssetTableToolbar.vue
@@ -91,6 +91,7 @@
         <!-- Task Status Filter (only for list view) -->
         <TaskStatusFilter
           v-if="viewMode === 'list'"
+          :all-task-types="allTaskTypes"
           :project-id="projectId"
           @filter-changed="$emit('task-status-filter-changed', $event)"
         />
diff --git a/frontend/src/components/asset/TaskStatusFilter.vue b/frontend/src/components/asset/TaskStatusFilter.vue
index 80d806a..9c086d7 100644
--- a/frontend/src/components/asset/TaskStatusFilter.vue
+++ b/frontend/src/components/asset/TaskStatusFilter.vue
@@ -1,149 +1,136 @@
 <template>
-  <div class="flex items-center gap-2">
-    <Select v-model="selectedFilter" @update:model-value="handleFilterChange">
-      <SelectTrigger class="w-[200px]">
-        <SelectValue placeholder="Filter by task status" />
-      </SelectTrigger>
-      <SelectContent>
-        <SelectItem value="all">All Tasks</SelectItem>
-        <SelectGroup>
-          <SelectLabel>Modeling</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`modeling:${status.id}`"
-            :value="`modeling:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status.id as any" />
-              <span>Modeling - {{ status.name }}</span>
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button variant="outline" size="sm" class="h-8 border-dashed">
+        <ListFilter class="mr-2 h-4 w-4" />
+        Task Status
+        <Badge
+          v-if="selectedFilters.length > 0"
+          variant="secondary"
+          class="ml-2 rounded-sm px-1 font-normal"
+        >
+          {{ selectedFilters.length }}
+        </Badge>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-[220px] p-0" align="start">
+      <Command>
+        <CommandInput placeholder="Search task status..." />
+        <CommandList>
+          <CommandEmpty>No status found.</CommandEmpty>
+
+          <!-- All Tasks Option -->
+          <CommandGroup>
+            <CommandItem value="all" @select="clearAllFilters">
+              <div
+                :class="[
+                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                  selectedFilters.length === 0
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50 [&_svg]:invisible'
+                ]"
+              >
+                <Check class="h-4 w-4" />
+              </div>
+              <span>All Tasks</span>
+            </CommandItem>
+          </CommandGroup>
+
+          <!-- Task Type Groups -->
+          <CommandGroup v-for="taskType in allTaskTypes" :key="taskType">
+            <CommandSeparator />
+            <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+              {{ formatTaskType(taskType) }}
             </div>
-          </SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Surfacing</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`surfacing:${status.id}`"
-            :value="`surfacing:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status as any" />
-              <span>Surfacing - {{ status.name }}</span>
-            </div>
-          </SelectItem>
-        </SelectGroup>
-        <SelectGroup>
-          <SelectLabel>Rigging</SelectLabel>
-          <SelectItem 
-            v-for="status in allStatuses" 
-            :key="`rigging:${status.id}`"
-            :value="`rigging:${status.id}`"
-          >
-            <div class="flex items-center gap-2">
-              <TaskStatusBadge :status="status as any" />
-              <span>Rigging - {{ status.name }}</span>
-            </div>
-          </SelectItem>
-        </SelectGroup>
-      </SelectContent>
-    </Select>
-    
-    <Button 
-      v-if="selectedFilter && selectedFilter !== 'all'" 
-      variant="ghost" 
-      size="sm" 
-      @click="clearFilter"
-      class="h-8 px-2"
-    >
-      <X class="h-4 w-4" />
-    </Button>
-  </div>
+            <CommandItem
+              v-for="status in allStatuses"
+              :key="`${taskType}:${status.id}`"
+              :value="`${taskType}:${status.id}`"
+              @select="toggleFilter(`${taskType}:${status.id}`)"
+            >
+              <div
+                :class="[
+                  'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                  selectedFilters.includes(`${taskType}:${status.id}`)
+                    ? 'bg-primary text-primary-foreground'
+                    : 'opacity-50 [&_svg]:invisible'
+                ]"
+              >
+                <Check class="h-4 w-4" />
+              </div>
+              <div class="flex items-center gap-2">
+                <TaskStatusBadge :status="status as any" />
+              </div>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </PopoverContent>
+  </Popover>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import { X } from 'lucide-vue-next'
+import { ListFilter, Check } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import TaskStatusBadge from '@/components/task/TaskStatusBadge.vue'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/components/ui/command'
+import TaskStatusBadge from '@/components/status/TaskStatusBadge.vue'
 import { TaskStatus } from '@/services/asset'
-import { customTaskStatusService, type CustomTaskStatus, type SystemTaskStatus } from '@/services/customTaskStatus'
 import { useTaskStatusesStore } from '@/stores/taskStatuses'
 
 interface Props {
+  allTaskTypes: string[]
   projectId?: number
 }
 
-interface Emits {
-  (e: 'filter-changed', filter: string): void
-}
-
 const props = defineProps<Props>()
-const emit = defineEmits<Emits>()
 
-// Use the shared task statuses store
+const emit = defineEmits<{
+  'filter-changed': [filter: string]
+}>()
+
 const taskStatusesStore = useTaskStatusesStore()
+const selectedFilters = ref<string[]>([])
 
-const selectedFilter = ref('all')
-
-// Get loading state from store
-const isLoading = computed(() => {
-  return props.projectId ? taskStatusesStore.isLoading(props.projectId) : false
-})
-
-// System status options (fallback if no project ID)
 const defaultStatusOptions = [
   { id: TaskStatus.NOT_STARTED, name: 'Not Started', color: '', is_system: true },
   { id: TaskStatus.IN_PROGRESS, name: 'In Progress', color: '', is_system: true },
   { id: TaskStatus.SUBMITTED, name: 'Submitted', color: '', is_system: true },
   { id: TaskStatus.APPROVED, name: 'Approved', color: '', is_system: true },
-  { id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true }
+  { id: TaskStatus.RETAKE, name: 'Retake', color: '', is_system: true },
 ]
 
-// Combine system and custom statuses
 const allStatuses = computed(() => {
-  if (!props.projectId) {
-    return defaultStatusOptions
-  }
-  
+  if (!props.projectId) return defaultStatusOptions
+
   const statusData = taskStatusesStore.getProjectStatuses(props.projectId)
-  if (!statusData) {
-    return defaultStatusOptions
-  }
-  
-  // Convert system statuses to the format expected by TaskStatusBadge
-  const systemStatusList = statusData.system_statuses.map(status => ({
-    id: status.id,
-    name: status.name,
-    color: status.color,
-    is_system: status.is_system
+  if (!statusData) return defaultStatusOptions
+
+  const systemStatusList = statusData.system_statuses.map(s => ({
+    id: s.id, name: s.name, color: s.color, is_system: s.is_system,
   }))
-  
-  // Convert custom statuses to the format expected by TaskStatusBadge
-  const customStatusList = statusData.statuses.map(status => ({
-    id: status.id,
-    name: status.name,
-    color: status.color,
-    is_system: false
+  const customStatusList = statusData.statuses.map(s => ({
+    id: s.id, name: s.name, color: s.color, is_system: false,
   }))
-  
   return [...systemStatusList, ...customStatusList]
 })
 
-// Load custom statuses when component mounts or projectId changes
 const loadStatuses = async () => {
-  if (!props.projectId) {
-    return
-  }
-  
+  if (!props.projectId) return
   try {
     await taskStatusesStore.fetchProjectStatuses(props.projectId)
   } catch (error) {
@@ -151,25 +138,25 @@ const loadStatuses = async () => {
   }
 }
 
-onMounted(() => {
-  loadStatuses()
-})
+onMounted(loadStatuses)
+watch(() => props.projectId, loadStatuses)
 
-watch(() => props.projectId, () => {
-  loadStatuses()
-})
-
-const handleFilterChange = (filter: any) => {
-  if (!filter) return
-  const filterStr = String(filter)
-  selectedFilter.value = filterStr
-  // Convert "all" to empty string for the API
-  const apiFilter = filterStr === 'all' ? '' : filterStr
+const toggleFilter = (filter: string) => {
+  const index = selectedFilters.value.indexOf(filter)
+  if (index > -1) {
+    selectedFilters.value.splice(index, 1)
+  } else {
+    selectedFilters.value.push(filter)
+  }
+  const apiFilter = selectedFilters.value.length > 0 ? selectedFilters.value.join(',') : ''
   emit('filter-changed', apiFilter)
 }
 
-const clearFilter = () => {
-  selectedFilter.value = 'all'
+const clearAllFilters = () => {
+  selectedFilters.value = []
   emit('filter-changed', '')
 }
-</script>
\ No newline at end of file
+
+const formatTaskType = (taskType: string) =>
+  taskType.charAt(0).toUpperCase() + taskType.slice(1)
+</script>
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index 140fab0..7035fe2 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -5,7 +5,7 @@
       <AppSidebar />
       
       <!-- Main Content Area -->
-      <SidebarInset class="flex-1 flex flex-col">
+      <SidebarInset class="flex-1 flex flex-col min-w-0">
         <!-- Header -->
         <AppHeader />
         
diff --git a/frontend/src/components/shot/ShotBrowser.vue b/frontend/src/components/shot/ShotBrowser.vue
index f6a9570..1e34366 100644
--- a/frontend/src/components/shot/ShotBrowser.vue
+++ b/frontend/src/components/shot/ShotBrowser.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="relative h-full">
+  <div class="relative h-full flex flex-col">
     <!-- Main Content -->
-    <div class="space-y-4">
-      <!-- Toolbar - Sticky -->
-      <div class="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
+    <div class="flex flex-col flex-1 min-h-0">
+      <!-- Toolbar -->
+      <div class="flex-shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-4 px-4 sm:px-6 pt-4 sm:pt-6 mb-4">
         <ShotTableToolbar
           :view-mode="viewMode"
           :episode-filter="episodeFilter"
@@ -14,12 +14,14 @@
           :project-id="projectId"
           :selected-shot="selectedShot"
           :is-detail-panel-enabled="isDetailPanelEnabled"
+          :is-columns-locked="lockColumns"
           @update:view-mode="viewMode = $event"
           @update:episode-filter="handleEpisodeFilterChange"
           @update:search="searchQuery = $event"
           @update:column-visibility="handleColumnVisibilityChange"
           @task-status-filter-changed="handleTaskStatusFilter"
           @toggle-detail-panel="toggleDetailPanelEnabled"
+          @toggle-column-lock="toggleColumnLock"
           @bulk-create="showBulkCreateDialog = true"
           @create-shot="showCreateDialog = true"
         />
@@ -76,11 +78,11 @@
     </div>
 
     <!-- Shots Grid/List/Table -->
-    <div v-else>
+    <div v-else class="flex-1 min-h-0">
       <!-- Grid View -->
       <div 
-        v-if="viewMode === 'grid'" 
-        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6"
+        v-if="viewMode === 'grid'"
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 px-4 sm:px-6 h-full overflow-auto"
       >
         <ShotCard
           v-for="shot in filteredShots"
@@ -93,7 +95,7 @@
       </div>
 
       <!-- List View -->
-      <div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6">
+      <div v-else-if="viewMode === 'list'" class="space-y-2 px-4 sm:px-6 h-full overflow-auto">
         <div 
           v-for="shot in filteredShots"
           :key="shot.id"
@@ -148,6 +150,7 @@
         :sorting="sorting"
         :column-visibility="columnVisibility"
         :all-task-types="allTaskTypes"
+        :lock-columns="lockColumns"
         @update:sorting="sorting = $event"
         @update:column-visibility="handleColumnVisibilityChange"
         @update:rowSelection="handleRowSelectionChange"
@@ -395,6 +398,13 @@ const columnVisibilityStore = useColumnVisibilityStore()
 const columnVisibility = ref<VisibilityState>({})
 const rowSelection = ref<Record<string, boolean>>({})
 
+// Lock (freeze) the first columns (select/thumbnail/name) for horizontal scroll
+const lockColumns = ref(localStorage.getItem('shot-columns-locked') === 'true')
+const toggleColumnLock = () => {
+  lockColumns.value = !lockColumns.value
+  localStorage.setItem('shot-columns-locked', String(lockColumns.value))
+}
+
 // Computed for selected count
 const selectedCount = computed(() => {
   return Object.keys(rowSelection.value).length
diff --git a/frontend/src/components/shot/ShotTableToolbar.vue b/frontend/src/components/shot/ShotTableToolbar.vue
index 29ec7e2..3170d60 100644
--- a/frontend/src/components/shot/ShotTableToolbar.vue
+++ b/frontend/src/components/shot/ShotTableToolbar.vue
@@ -208,6 +208,19 @@
           <PanelRightOpen v-else class="h-4 w-4" />
         </Button>
 
+        <!-- Lock First Columns Toggle Button (only for table view) -->
+        <Button
+          v-if="viewMode === 'table'"
+          @click="$emit('toggle-column-lock')"
+          :variant="isColumnsLocked ? 'default' : 'outline'"
+          size="sm"
+          :class="['h-8 w-8 p-0', isColumnsLocked ? 'bg-primary text-primary-foreground hover:bg-primary/90' : '']"
+          :title="isColumnsLocked ? 'Unlock columns' : 'Lock first columns'"
+        >
+          <Lock v-if="isColumnsLocked" class="h-4 w-4" />
+          <Unlock v-else class="h-4 w-4" />
+        </Button>
+
         <!-- Clear Filters -->
         <Button
           v-if="hasFilters"
@@ -250,7 +263,7 @@
 import { computed } from 'vue'
 import { 
   LayoutGrid, List, Table2, Search, Film, Plus, Layers,
-  PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX
+  PanelRightClose, PanelRightOpen, Check, X, Settings2, ListTodo, ListX, Lock, Unlock
 } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -284,6 +297,7 @@ interface Props {
   projectId: number
   selectedShot: Shot | null
   isDetailPanelEnabled: boolean
+  isColumnsLocked: boolean
 }
 
 const props = defineProps<Props>()
@@ -295,6 +309,7 @@ const emit = defineEmits<{
   'update:column-visibility': [value: VisibilityState]
   'task-status-filter-changed': [value: string]
   'toggle-detail-panel': []
+  'toggle-column-lock': []
   'toggle-task-columns': []
   'bulk-create': []
   'create-shot': []
diff --git a/frontend/src/components/shot/ShotsDataTable.vue b/frontend/src/components/shot/ShotsDataTable.vue
index 4ddf607..468cb8b 100644
--- a/frontend/src/components/shot/ShotsDataTable.vue
+++ b/frontend/src/components/shot/ShotsDataTable.vue
@@ -1,7 +1,107 @@
 <template>
-  <div class="space-y-2 px-4">
-    <div class="rounded-md border">
-      <Table>
+  <div class="px-4 h-full flex flex-col">
+    <div class="rounded-md border flex-1 min-h-0 overflow-hidden">
+      <!-- Locked: two-pane layout (fixed left pane + horizontally scrollable right pane) -->
+      <template v-if="lockColumns">
+        <div v-if="hasRows" class="flex h-full">
+          <!-- Left pane: frozen columns (no horizontal scroll, vertical scroll hidden + synced) -->
+          <div ref="leftPane" class="flex-shrink-0 h-full overflow-y-auto scrollbar-hide border-r" @scroll="onLeftScroll">
+            <table class="caption-bottom text-sm">
+              <TableHeader>
+                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                  <TableHead
+                    v-for="header in frozenHeaders(headerGroup)"
+                    :key="header.id"
+                    :style="frozenWidth(header.column.id)"
+                    :class="header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : ''"
+                    @click="header.column.getCanSort() ? header.column.toggleSorting() : null"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="row in table.getRowModel().rows"
+                  :key="row.id"
+                  :data-state="row.getIsSelected() ? 'selected' : undefined"
+                  class="cursor-pointer hover:bg-muted/50 h-12"
+                  :class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
+                  @click="handleRowClick(row.original, $event, row)"
+                  @dblclick="emit('row-dblclick', row.original)"
+                  @mousedown="handleMouseDown"
+                  @mouseup="handleMouseUp"
+                >
+                  <TableCell
+                    v-for="cell in frozenCells(row)"
+                    :key="cell.id"
+                    :style="frozenWidth(cell.column.id)"
+                  >
+                    <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </table>
+          </div>
+
+          <!-- Right pane: movable columns (own horizontal scrollbar, only shown when needed) -->
+          <div ref="rightPane" class="flex-1 min-w-0 h-full overflow-auto" @scroll="onRightScroll">
+            <table class="min-w-full caption-bottom text-sm">
+              <TableHeader>
+                <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+                  <TableHead
+                    v-for="header in movableHeaders(headerGroup)"
+                    :key="header.id"
+                    :class="[
+                      header.column.getCanSort() ? 'cursor-pointer select-none hover:bg-muted/50' : '',
+                      header.column.id === 'actions' ? 'w-12' : '',
+                      allTaskTypes.includes(header.column.id) ? 'w-[140px]' : '',
+                    ]"
+                    @click="header.column.getCanSort() ? header.column.toggleSorting() : null"
+                  >
+                    <FlexRender
+                      v-if="!header.isPlaceholder"
+                      :render="header.column.columnDef.header"
+                      :props="header.getContext()"
+                    />
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="row in table.getRowModel().rows"
+                  :key="row.id"
+                  :data-state="row.getIsSelected() ? 'selected' : undefined"
+                  class="cursor-pointer hover:bg-muted/50 h-12"
+                  :class="{ 'bg-muted/30': row.getIsSelected(), 'table-row-selectable': true, 'selecting': isRangeSelecting }"
+                  @click="handleRowClick(row.original, $event, row)"
+                  @dblclick="emit('row-dblclick', row.original)"
+                  @mousedown="handleMouseDown"
+                  @mouseup="handleMouseUp"
+                >
+                  <TableCell
+                    v-for="cell in movableCells(row)"
+                    :key="cell.id"
+                    v-memo="[cell.getValue(), cell.column.getIsVisible()]"
+                  >
+                    <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </table>
+          </div>
+        </div>
+        <div v-else class="h-24 flex items-center justify-center text-sm text-muted-foreground">
+          No results.
+        </div>
+      </template>
+
+      <!-- Unlocked: standard single table -->
+      <Table v-else>
         <TableHeader>
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <TableHead
@@ -31,7 +131,7 @@
               :key="row.id"
               :data-state="row.getIsSelected() ? 'selected' : undefined"
               class="cursor-pointer hover:bg-muted/50"
-              :class="{ 
+              :class="{
                 'bg-muted/30': row.getIsSelected(),
                 'table-row-selectable': true,
                 'selecting': isRangeSelecting
@@ -69,13 +169,15 @@
 
 <script setup lang="ts">
 
-import { ref, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 import {
   FlexRender,
   getCoreRowModel,
   getSortedRowModel,
   useVueTable,
   type ColumnDef,
+  type HeaderGroup,
+  type Row,
   type SortingState,
   type VisibilityState,
 } from '@tanstack/vue-table'
@@ -95,10 +197,51 @@ interface Props {
   sorting: SortingState
   columnVisibility: VisibilityState
   allTaskTypes: string[]
+  lockColumns?: boolean
 }
 
 const props = defineProps<Props>()
 
+// Frozen (locked) columns and their fixed widths (px), in column order.
+const FROZEN: Record<string, number> = {
+  select: 48,
+  thumbnail: 96,
+  name: 200,
+}
+
+const isFrozen = (id: string) => id in FROZEN
+
+const frozenWidth = (id: string) => {
+  const w = FROZEN[id]
+  return w ? { width: `${w}px`, minWidth: `${w}px` } : undefined
+}
+
+// Column partitioning for the two-pane (locked) layout. Movable headers/cells
+// respect column visibility; frozen ones are always shown.
+const frozenHeaders = (group: HeaderGroup<Shot>) =>
+  group.headers.filter((h) => isFrozen(h.column.id) && h.column.getIsVisible())
+const movableHeaders = (group: HeaderGroup<Shot>) =>
+  group.headers.filter((h) => !isFrozen(h.column.id) && h.column.getIsVisible())
+const frozenCells = (row: Row<Shot>) =>
+  row.getVisibleCells().filter((c) => isFrozen(c.column.id))
+const movableCells = (row: Row<Shot>) =>
+  row.getVisibleCells().filter((c) => !isFrozen(c.column.id))
+
+const hasRows = computed(() => table.getRowModel().rows.length > 0)
+
+// Sync vertical scroll between the two panes (right pane owns the scrollbars).
+const leftPane = ref<HTMLElement>()
+const rightPane = ref<HTMLElement>()
+let syncing = false
+const syncScroll = (from?: HTMLElement, to?: HTMLElement) => {
+  if (syncing || !from || !to) return
+  syncing = true
+  to.scrollTop = from.scrollTop
+  requestAnimationFrame(() => { syncing = false })
+}
+const onRightScroll = () => syncScroll(rightPane.value, leftPane.value)
+const onLeftScroll = () => syncScroll(leftPane.value, rightPane.value)
+
 const emit = defineEmits<{
   'update:sorting': [sorting: SortingState]
   'update:columnVisibility': [visibility: VisibilityState]
@@ -280,4 +423,13 @@ watch(
   -ms-user-select: text;
   user-select: text;
 }
+
+/* Hide the left pane's vertical scrollbar (its scroll is synced from the right pane) */
+.scrollbar-hide {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
 </style>
diff --git a/frontend/src/components/ui/table/Table.vue b/frontend/src/components/ui/table/Table.vue
index 26c7c45..ab3cdd8 100644
--- a/frontend/src/components/ui/table/Table.vue
+++ b/frontend/src/components/ui/table/Table.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div class="relative w-full overflow-auto">
+  <div class="relative w-full h-full overflow-auto">
     <table :class="cn('w-full caption-bottom text-sm', props.class)">
       <slot />
     </table>
diff --git a/frontend/src/views/project/ProjectShotsView.vue b/frontend/src/views/project/ProjectShotsView.vue
index f49f491..9ad785d 100644
--- a/frontend/src/views/project/ProjectShotsView.vue
+++ b/frontend/src/views/project/ProjectShotsView.vue
@@ -13,9 +13,9 @@
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto">
+    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
       <!-- Shot Browser -->
-      <div v-if="projectId">
+      <div v-if="projectId" class="flex-1 min-h-0 flex flex-col">
         <ShotBrowser 
           :project-id="projectId" 
           :selected-episode-id="selectedEpisodeId ?? undefined"