From e628c99498b295770a9f472d2f56f437a3cf1c93 Mon Sep 17 00:00:00 2001
From: indigo <indigoo@gmail.com>
Date: Sat, 18 Jul 2026 10:15:04 +0800
Subject: [PATCH] Sticky table headers, layout parity, and reuse My Tasks on
 the shared table/toolbar

Shot/Asset/Task data tables now keep their header row pinned while scrolling
(both the locked two-pane and single-table modes), matching a common data-
table expectation that was missing everywhere.

Brings Asset and Task browsers to full structural parity with Shot's bounded-
height layout (fixed toolbar, internally-scrolling table) instead of their
previous page-scroll model with a sticky-positioned toolbar. AssetsDataTable
gained the synced frozen/movable-pane scrolling it was missing entirely;
TasksDataTable and both browsers/parent views got the same container model.

The global My Tasks page (/tasks) now reuses TaskTableToolbar and
TasksDataTable instead of its own ad hoc filter selects and TaskList,
including the detail panel, bulk status/assignment context menu, and sticky
header for free. Since it spans multiple projects, TaskTableToolbar gained
an optional Project filter (only rendered when a project list is passed in,
so the project-scoped Tasks page is unaffected); episode/assignee filters
populate once a specific project is chosen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/components/asset/AssetBrowser.vue     |  24 +-
 .../src/components/asset/AssetsDataTable.vue  |  46 +-
 .../src/components/shot/ShotsDataTable.vue    |   6 +-
 frontend/src/components/task/TaskBrowser.vue  | 100 ++--
 .../src/components/task/TaskTableToolbar.vue  |  57 ++-
 .../src/components/task/TasksDataTable.vue    |   6 +-
 frontend/src/views/TasksView.vue              | 437 ++++++++++++++----
 .../src/views/project/ProjectAssetsView.vue   |   6 +-
 .../src/views/project/ProjectTasksView.vue    |   6 +-
 9 files changed, 525 insertions(+), 163 deletions(-)

diff --git a/frontend/src/components/asset/AssetBrowser.vue b/frontend/src/components/asset/AssetBrowser.vue
index 6e3694f..f9f1a8f 100644
--- a/frontend/src/components/asset/AssetBrowser.vue
+++ b/frontend/src/components/asset/AssetBrowser.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="relative h-full">
-    <!-- Main Content (Full Width) -->
-    <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="relative h-full flex flex-col">
+    <!-- Main Content -->
+    <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">
         <AssetTableToolbar
           v-if="customTaskTypesLoaded"
           :view-mode="viewMode"
@@ -36,7 +36,7 @@
       </div>
       
       <!-- Loading State -->
-      <div v-if="isLoading" class="flex items-center justify-center py-12">
+      <div v-if="isLoading" class="flex items-center justify-center py-12 px-4 sm:px-6">
         <div class="flex items-center gap-2">
           <div
             class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"
@@ -46,7 +46,7 @@
       </div>
 
       <!-- Error State -->
-      <div v-else-if="error" class="text-center py-12">
+      <div v-else-if="error" class="text-center py-12 px-4 sm:px-6">
         <AlertCircle class="h-12 w-12 mx-auto text-destructive mb-4" />
         <h3 class="text-lg font-semibold mb-2">Failed to load assets</h3>
         <p class="text-muted-foreground mb-4">{{ error }}</p>
@@ -61,7 +61,7 @@
         v-else-if="
           filteredAssets.length === 0 && !searchQuery && !selectedCategory
         "
-        class="text-center py-12"
+        class="text-center py-12 px-4 sm:px-6"
       >
         <Package class="h-12 w-12 mx-auto text-muted-foreground mb-4" />
         <h3 class="text-lg font-semibold mb-2">No assets yet</h3>
@@ -75,7 +75,7 @@
       </div>
 
       <!-- No Results State -->
-      <div v-else-if="filteredAssets.length === 0" class="text-center py-12">
+      <div v-else-if="filteredAssets.length === 0" class="text-center py-12 px-4 sm:px-6">
         <Search class="h-12 w-12 mx-auto text-muted-foreground mb-4" />
         <h3 class="text-lg font-semibold mb-2">No assets found</h3>
         <p class="text-muted-foreground mb-4">
@@ -85,11 +85,11 @@
       </div>
 
       <!-- Assets Grid/List -->
-      <div v-else>
+      <div v-else class="flex-1 min-h-0">
         <!-- Grid View -->
         <div
           v-if="viewMode === 'grid'"
-          class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3"
+          class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 px-4 sm:px-6 h-full overflow-auto"
         >
           <AssetCard
             v-for="asset in filteredAssets"
@@ -117,7 +117,7 @@
           @update:rowSelection="handleRowSelectionChange"
           @row-click="handleRowClick"
         />
-        <div v-else class="flex items-center justify-center py-12">
+        <div v-else class="flex items-center justify-center py-12 px-4 sm:px-6">
           <div class="flex items-center gap-2">
             <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
             <span class="text-muted-foreground">Loading table...</span>
diff --git a/frontend/src/components/asset/AssetsDataTable.vue b/frontend/src/components/asset/AssetsDataTable.vue
index bbaf9e6..64cde7d 100644
--- a/frontend/src/components/asset/AssetsDataTable.vue
+++ b/frontend/src/components/asset/AssetsDataTable.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="space-y-4 px-4">
-    <div class="rounded-md border">
+  <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">
-          <!-- Left pane: frozen columns, no horizontal scroll -->
-          <div class="flex-shrink-0 border-r">
+        <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>
+              <TableHeader class="sticky top-0 z-10 bg-background">
                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                   <TableHead
                     v-for="header in frozenHeaders(headerGroup)"
@@ -29,7 +29,7 @@
                   v-for="row in table.getRowModel().rows"
                   :key="row.id"
                   :data-state="row.getIsSelected() ? 'selected' : undefined"
-                  class="cursor-pointer hover:bg-muted/50"
+                  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)"
                   @mousedown="handleMouseDown"
@@ -47,10 +47,10 @@
             </table>
           </div>
 
-          <!-- Right pane: movable columns, own horizontal scrollbar -->
-          <div class="flex-1 min-w-0 overflow-x-auto">
+          <!-- 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>
+              <TableHeader class="sticky top-0 z-10 bg-background">
                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                   <TableHead
                     v-for="header in movableHeaders(headerGroup)"
@@ -75,7 +75,7 @@
                   v-for="row in table.getRowModel().rows"
                   :key="row.id"
                   :data-state="row.getIsSelected() ? 'selected' : undefined"
-                  class="cursor-pointer hover:bg-muted/50"
+                  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)"
                   @mousedown="handleMouseDown"
@@ -100,7 +100,7 @@
 
       <!-- Unlocked: standard single table -->
       <Table v-else>
-        <TableHeader>
+        <TableHeader class="sticky top-0 z-10 bg-background">
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <TableHead
               v-for="header in headerGroup.headers"
@@ -225,6 +225,19 @@ const movableCells = (row: Row<Asset>) =>
 
 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]
@@ -405,4 +418,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>
\ No newline at end of file
diff --git a/frontend/src/components/shot/ShotsDataTable.vue b/frontend/src/components/shot/ShotsDataTable.vue
index 468cb8b..b1e2ac4 100644
--- a/frontend/src/components/shot/ShotsDataTable.vue
+++ b/frontend/src/components/shot/ShotsDataTable.vue
@@ -7,7 +7,7 @@
           <!-- 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>
+              <TableHeader class="sticky top-0 z-10 bg-background">
                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                   <TableHead
                     v-for="header in frozenHeaders(headerGroup)"
@@ -51,7 +51,7 @@
           <!-- 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>
+              <TableHeader class="sticky top-0 z-10 bg-background">
                 <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                   <TableHead
                     v-for="header in movableHeaders(headerGroup)"
@@ -102,7 +102,7 @@
 
       <!-- Unlocked: standard single table -->
       <Table v-else>
-        <TableHeader>
+        <TableHeader class="sticky top-0 z-10 bg-background">
           <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
             <TableHead
               v-for="header in headerGroup.headers"
diff --git a/frontend/src/components/task/TaskBrowser.vue b/frontend/src/components/task/TaskBrowser.vue
index 0d185da..62ad5bb 100644
--- a/frontend/src/components/task/TaskBrowser.vue
+++ b/frontend/src/components/task/TaskBrowser.vue
@@ -1,57 +1,59 @@
 <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">
         <TaskTableToolbar
-        v-model:status-filter="statusFilter"
-        v-model:type-filter="typeFilter"
-        v-model:episode-filter="episodeFilter"
-        v-model:assignee-filter="assigneeFilter"
-        v-model:context-filter="contextFilter"
-        v-model:search="searchQuery"
-        v-model:my-tasks-filter="myTasksFilter"
-        :column-visibility="columnVisibility"
-        :episodes="episodes"
-        :assignees="assignees"
-        :task-types="taskTypes"
-        :current-user-id="currentUserId"
-        :is-detail-panel-enabled="isDetailPanelEnabled"
-        @update:column-visibility="updateColumnVisibility"
-        @toggle-detail-panel="toggleDetailPanelEnabled"
-      />
-    </div>
-
-    <!-- Task Count / Selection Count -->
-    <div class="flex items-center justify-between px-4 sm:px-6">
-      <div class="text-sm text-muted-foreground">
-        <span v-if="selectedCount > 0" class="font-medium text-foreground">
-          {{ selectedCount }} {{ selectedCount === 1 ? 'task' : 'tasks' }} selected
-        </span>
-        <span v-else-if="filteredTasks.length === tasks.length">
-          {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
-        </span>
-        <span v-else>
-          {{ filteredTasks.length }} of {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
-        </span>
+          v-model:status-filter="statusFilter"
+          v-model:type-filter="typeFilter"
+          v-model:episode-filter="episodeFilter"
+          v-model:assignee-filter="assigneeFilter"
+          v-model:context-filter="contextFilter"
+          v-model:search="searchQuery"
+          v-model:my-tasks-filter="myTasksFilter"
+          :column-visibility="columnVisibility"
+          :episodes="episodes"
+          :assignees="assignees"
+          :task-types="taskTypes"
+          :current-user-id="currentUserId"
+          :is-detail-panel-enabled="isDetailPanelEnabled"
+          @update:column-visibility="updateColumnVisibility"
+          @toggle-detail-panel="toggleDetailPanelEnabled"
+        />
       </div>
-    </div>
 
-    <!-- Data Table -->
-    <TasksDataTable
-      :tasks="filteredTasks"
-      :column-visibility="columnVisibility"
-      :project-id="projectId"
-      :is-loading="isLoading"
-      @row-click="handleRowClick"
-      @row-double-click="handleRowDoubleClick"
-      @context-menu="handleContextMenu"
-      @selection-change="handleSelectionChange"
-      @update:column-visibility="updateColumnVisibility"
-      @status-updated="handleStatusUpdated"
-      @bulk-status-change="(_, status) => handleBulkStatusUpdate(status)"
-    />
+      <!-- Task Count / Selection Count -->
+      <div class="flex-shrink-0 flex items-center justify-between px-4 sm:px-6 mb-2">
+        <div class="text-sm text-muted-foreground">
+          <span v-if="selectedCount > 0" class="font-medium text-foreground">
+            {{ selectedCount }} {{ selectedCount === 1 ? 'task' : 'tasks' }} selected
+          </span>
+          <span v-else-if="filteredTasks.length === tasks.length">
+            {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
+          </span>
+          <span v-else>
+            {{ filteredTasks.length }} of {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
+          </span>
+        </div>
+      </div>
+
+      <!-- Data Table -->
+      <div class="flex-1 min-h-0">
+        <TasksDataTable
+          :tasks="filteredTasks"
+          :column-visibility="columnVisibility"
+          :project-id="projectId"
+          :is-loading="isLoading"
+          @row-click="handleRowClick"
+          @row-double-click="handleRowDoubleClick"
+          @context-menu="handleContextMenu"
+          @selection-change="handleSelectionChange"
+          @update:column-visibility="updateColumnVisibility"
+          @status-updated="handleStatusUpdated"
+          @bulk-status-change="(_, status) => handleBulkStatusUpdate(status)"
+        />
+      </div>
     </div>
 
     <!-- Task Detail Panel (Desktop + Mobile) -->
diff --git a/frontend/src/components/task/TaskTableToolbar.vue b/frontend/src/components/task/TaskTableToolbar.vue
index 1d7a330..e869671 100644
--- a/frontend/src/components/task/TaskTableToolbar.vue
+++ b/frontend/src/components/task/TaskTableToolbar.vue
@@ -92,6 +92,49 @@
         </PopoverContent>
       </Popover>
 
+      <!-- Project Filter (only shown when a cross-project task list is passed in, e.g. My Tasks) -->
+      <Popover v-if="projects && projects.length > 0">
+        <PopoverTrigger as-child>
+          <Button variant="outline" size="sm" class="h-8 border-dashed">
+            <FolderOpen class="mr-2 h-4 w-4" />
+            Project
+            <Badge
+              v-if="projectFilter !== null"
+              variant="secondary"
+              class="ml-2 rounded-sm px-1 font-normal"
+            >
+              1
+            </Badge>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[200px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder="Search project..." />
+            <CommandList>
+              <CommandEmpty>No project found.</CommandEmpty>
+              <CommandGroup>
+                <CheckableCommandItem
+                  value="all"
+                  :model-value="projectFilter === null"
+                  @update:model-value="$emit('update:project-filter', null)"
+                >
+                  <span>All Projects</span>
+                </CheckableCommandItem>
+                <CheckableCommandItem
+                  v-for="project in projects"
+                  :key="project.id"
+                  :value="project.id.toString()"
+                  :model-value="projectFilter === project.id"
+                  @update:model-value="$emit('update:project-filter', project.id)"
+                >
+                  <span>{{ project.name }}</span>
+                </CheckableCommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
       <!-- Episode Filter -->
       <Popover v-if="episodes.length > 0">
         <PopoverTrigger as-child>
@@ -205,7 +248,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { Search, ListFilter, Tag, Film, Package, User } from 'lucide-vue-next'
+import { Search, ListFilter, Tag, Film, Package, User, FolderOpen } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
@@ -229,6 +272,7 @@ import ClearFiltersButton from '@/components/shared/ClearFiltersButton.vue'
 import { useDebouncedSearch } from '@/composables/useDebouncedSearch'
 import type { VisibilityState } from '@tanstack/vue-table'
 import type { Episode } from '@/services/episode'
+import type { Project } from '@/services/project'
 
 interface Props {
   statusFilter: string[]
@@ -244,6 +288,10 @@ interface Props {
   myTasksFilter: boolean
   currentUserId: number | null
   isDetailPanelEnabled: boolean
+  // Cross-project task lists (e.g. My Tasks) pass a project list + filter; the
+  // project-scoped Tasks page omits these and the filter stays hidden.
+  projects?: Project[]
+  projectFilter?: number | null
 }
 
 const props = defineProps<Props>()
@@ -257,6 +305,7 @@ const emit = defineEmits<{
   'update:search': [value: string]
   'update:column-visibility': [value: VisibilityState]
   'update:my-tasks-filter': [value: boolean]
+  'update:project-filter': [value: number | null]
   'toggle-detail-panel': []
 }>()
 
@@ -298,7 +347,8 @@ const hasFilters = computed(() => {
     props.assigneeFilter.length > 0 ||
     props.contextFilter !== 'all' ||
     props.search !== '' ||
-    props.myTasksFilter
+    props.myTasksFilter ||
+    (props.projectFilter ?? null) !== null
   )
 })
 
@@ -348,5 +398,8 @@ const clearFilters = () => {
   emit('update:context-filter', 'all')
   emit('update:search', '')
   emit('update:my-tasks-filter', false)
+  if (props.projects) {
+    emit('update:project-filter', null)
+  }
 }
 </script>
diff --git a/frontend/src/components/task/TasksDataTable.vue b/frontend/src/components/task/TasksDataTable.vue
index 7c5e6ae..8934b21 100644
--- a/frontend/src/components/task/TasksDataTable.vue
+++ b/frontend/src/components/task/TasksDataTable.vue
@@ -1,7 +1,8 @@
 <template>
-  <div class="rounded-md border">
+  <div class="px-4 h-full flex flex-col">
+    <div class="rounded-md border flex-1 min-h-0 overflow-hidden">
     <Table>
-      <TableHeader>
+      <TableHeader class="sticky top-0 z-10 bg-background">
         <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
           <TableHead
             v-for="header in headerGroup.headers"
@@ -60,6 +61,7 @@
         </template>
       </TableBody>
     </Table>
+    </div>
   </div>
 </template>
 
diff --git a/frontend/src/views/TasksView.vue b/frontend/src/views/TasksView.vue
index 9cc195a..2c91c9b 100644
--- a/frontend/src/views/TasksView.vue
+++ b/frontend/src/views/TasksView.vue
@@ -1,124 +1,277 @@
 <template>
   <div class="h-full flex flex-col">
-    <!-- Header - Shot Task Style -->
-    <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 items-center justify-between">
+    <!-- Header -->
+    <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">
+      <div class="flex items-center justify-between mb-4">
         <div>
           <h1 class="text-2xl font-semibold">My Tasks</h1>
           <p class="text-sm text-muted-foreground mt-1">
             View and track your assigned tasks across all projects
           </p>
         </div>
-        <div class="flex items-center gap-4">
-          <div class="text-sm text-muted-foreground">
-            <span class="font-semibold">{{ tasks.length }}</span> total tasks
-            <span v-if="overdueTasks.length > 0" class="ml-4 text-destructive font-semibold">
-              {{ overdueTasks.length }} overdue
-            </span>
-          </div>
+        <div class="text-sm text-muted-foreground whitespace-nowrap">
+          <span class="font-semibold">{{ tasks.length }}</span> total
+          <span v-if="overdueTasks.length > 0" class="ml-3 text-destructive font-semibold">
+            {{ overdueTasks.length }} overdue
+          </span>
         </div>
       </div>
 
-      <!-- Filter Toolbar -->
-      <div class="flex flex-wrap gap-2 mt-4">
-        <!-- Project Filter -->
-        <Select v-model="selectedProjectId" @update:model-value="handleProjectChange">
-          <SelectTrigger class="w-[250px] h-8">
-            <SelectValue placeholder="All Projects" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All Projects</SelectItem>
-            <SelectItem v-for="project in projects" :key="project.id" :value="String(project.id)">
-              {{ project.name }}
-            </SelectItem>
-          </SelectContent>
-        </Select>
+      <TaskTableToolbar
+        v-model:status-filter="statusFilter"
+        v-model:type-filter="typeFilter"
+        v-model:episode-filter="episodeFilter"
+        v-model:assignee-filter="assigneeFilter"
+        v-model:context-filter="contextFilter"
+        v-model:search="searchQuery"
+        v-model:my-tasks-filter="myTasksFilter"
+        v-model:project-filter="selectedProjectId"
+        :column-visibility="columnVisibility"
+        :episodes="episodes"
+        :assignees="assignees"
+        :task-types="taskTypes"
+        :projects="projects"
+        :current-user-id="currentUserId"
+        :is-detail-panel-enabled="isDetailPanelEnabled"
+        @update:column-visibility="updateColumnVisibility"
+        @toggle-detail-panel="toggleDetailPanelEnabled"
+      />
+    </div>
 
-        <!-- Status Filter -->
-        <Select v-model="selectedStatus" @update:model-value="handleStatusChange">
-          <SelectTrigger class="w-[200px] h-8">
-            <SelectValue placeholder="All Statuses" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all">All Statuses</SelectItem>
-            <SelectItem value="not_started">Not Started</SelectItem>
-            <SelectItem value="in_progress">In Progress</SelectItem>
-            <SelectItem value="submitted">Submitted</SelectItem>
-            <SelectItem value="approved">Approved</SelectItem>
-            <SelectItem value="retake">Retake</SelectItem>
-          </SelectContent>
-        </Select>
+    <!-- Task Count / Selection Count -->
+    <div class="flex-shrink-0 flex items-center justify-between px-4 sm:px-6 mb-2">
+      <div class="text-sm text-muted-foreground">
+        <span v-if="selectedCount > 0" class="font-medium text-foreground">
+          {{ selectedCount }} {{ selectedCount === 1 ? 'task' : 'tasks' }} selected
+        </span>
+        <span v-else-if="filteredTasks.length === tasks.length">
+          {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
+        </span>
+        <span v-else>
+          {{ filteredTasks.length }} of {{ tasks.length }} {{ tasks.length === 1 ? 'task' : 'tasks' }}
+        </span>
       </div>
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto px-4 sm:px-6 pb-6">
-      <!-- Task List -->
-      <div v-if="isLoading" class="flex items-center justify-center py-12">
+    <div class="flex-1 min-h-0">
+      <div v-if="isLoading" class="flex items-center justify-center py-12 px-4 sm:px-6">
         <div class="flex items-center gap-2">
           <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
           <span class="text-muted-foreground">Loading tasks...</span>
         </div>
       </div>
-      <div v-else-if="tasks.length === 0" class="text-center py-12">
+      <div v-else-if="filteredTasks.length === 0" class="text-center py-12 px-4 sm:px-6">
         <ListTodo class="h-12 w-12 mx-auto text-muted-foreground mb-4" />
         <h3 class="text-lg font-semibold mb-2">No tasks found</h3>
         <p class="text-muted-foreground">
-          {{ selectedProjectId !== 'all' || selectedStatus !== 'all' ? 'Try adjusting your filters' : 'No tasks assigned to you' }}
+          {{ hasFilters ? 'Try adjusting your filters' : 'No tasks assigned to you' }}
         </p>
       </div>
-      <TaskList v-else @task-selected="handleTaskSelected" :tasks="tasks" />
+      <TasksDataTable
+        v-else
+        :tasks="filteredTasks"
+        :column-visibility="columnVisibility"
+        :project-id="activeProjectId"
+        :is-loading="isLoading"
+        @row-click="handleRowClick"
+        @row-double-click="handleRowDoubleClick"
+        @context-menu="handleContextMenu"
+        @selection-change="handleSelectionChange"
+        @update:column-visibility="updateColumnVisibility"
+        @status-updated="handleStatusUpdated"
+        @bulk-status-change="(_, status) => handleBulkStatusUpdate(status)"
+      />
     </div>
 
-    <!-- Task Detail Panel -->
-    <TaskDetailPanel
-      v-if="selectedTask"
-      :task-id="selectedTask.id"
-      @close="handleClosePanel"
-      @task-updated="handleTaskUpdated"
+    <!-- Task Detail Panel (Desktop + Mobile) -->
+    <DetailPanelOverlay
+      :visible="!!showPanel"
+      v-model:mobile-open="showMobileDetail"
+    >
+      <TaskDetailPanel
+        v-if="selectedTask"
+        :task-id="selectedTask?.id || 0"
+        :is-open="true"
+        @close="closeDetailPanel"
+        @task-updated="handleTaskUpdated"
+      />
+    </DetailPanelOverlay>
+
+    <!-- Context Menu for Bulk Actions -->
+    <TaskBulkActionsMenu
+      v-model:open="showContextMenu"
+      :position="contextMenuPosition"
+      :selected-count="selectedCount"
+      :selected-tasks="selectedTasks"
+      :project-members="projectMembers"
+      @status-selected="handleBulkStatusUpdate"
+      @assignee-selected="handleBulkAssignment"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, watch, onMounted } from 'vue'
 import { ListTodo } from 'lucide-vue-next'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import TaskList from '@/components/task/TaskList.vue'
+import type { VisibilityState } from '@tanstack/vue-table'
+import DetailPanelOverlay from '@/components/shared/DetailPanelOverlay.vue'
+import TaskTableToolbar from '@/components/task/TaskTableToolbar.vue'
 import TaskDetailPanel from '@/components/task/TaskDetailPanel.vue'
+import TaskBulkActionsMenu from '@/components/task/TaskBulkActionsMenu.vue'
+import TasksDataTable from '@/components/task/TasksDataTable.vue'
 import { taskService, type TaskListItem } from '@/services/task'
-import { projectService, type Project } from '@/services/project'
+import { TaskStatus } from '@/services/asset'
+import { episodeService, type Episode } from '@/services/episode'
+import { projectService, type Project, type ProjectMember } from '@/services/project'
+import { useAuthStore } from '@/stores/auth'
+import { useDetailPanel } from '@/composables/useDetailPanel'
+import { useToast } from '@/components/ui/toast/use-toast'
 
-const router = useRouter()
+const { toast } = useToast()
+const authStore = useAuthStore()
+
+// Detail panel composable
+const {
+  isDetailPanelEnabled,
+  selectedEntity: selectedTask,
+  showMobileDetail,
+  showPanel,
+  toggleDetailPanelEnabled,
+  closeDetailPanel,
+  selectEntity: selectTask
+} = useDetailPanel<TaskListItem>({
+  isDialogOpen: () => showContextMenu.value,
+  sessionStorageKey: 'myTasksView.detailPanelEnabled'
+})
 
 // State
 const tasks = ref<TaskListItem[]>([])
 const projects = ref<Project[]>([])
-const selectedProjectId = ref<string>('all')
-const selectedStatus = ref<string>('all')
+const episodes = ref<Episode[]>([])
+const projectMembers = ref<ProjectMember[]>([])
 const isLoading = ref(false)
-const selectedTask = ref<TaskListItem | null>(null)
+const selectedProjectId = ref<number | null>(null)
+
+// Context menu state
+const showContextMenu = ref(false)
+const contextMenuPosition = ref({ x: 0, y: 0 })
+
+// Filters (client-side, matching TaskBrowser.vue's project-scoped Tasks page)
+const statusFilter = ref<string[]>([])
+const typeFilter = ref<string[]>([])
+const episodeFilter = ref<number | null>(null)
+const assigneeFilter = ref<number[]>([])
+const contextFilter = ref<'all' | 'shots' | 'assets'>('all')
+const searchQuery = ref('')
+const myTasksFilter = ref(false)
+
+// Table state
+const columnVisibility = ref<VisibilityState>({})
+
+// Selection state
+const selectedTaskIds = ref<Set<number>>(new Set())
 
 // Computed
+const currentUserId = computed(() => authStore.user?.id || null)
+const activeProjectId = computed(() => selectedProjectId.value ?? 0)
+
 const overdueTasks = computed(() => {
   const now = new Date()
   return tasks.value.filter(task => {
     if (!task.deadline) return false
     const deadline = new Date(task.deadline)
-    return deadline < now && task.status !== 'approved'
+    return deadline < now && task.status !== TaskStatus.APPROVED
   })
 })
 
+const assignees = computed(() => {
+  const uniqueAssignees = new Map<number, { id: number; name: string }>()
+  projectMembers.value.forEach((member) => {
+    uniqueAssignees.set(member.user_id, {
+      id: member.user_id,
+      name: `${member.user_first_name} ${member.user_last_name}`,
+    })
+  })
+  return Array.from(uniqueAssignees.values())
+})
+
+const taskTypes = computed(() => {
+  const types = new Set<string>()
+  tasks.value.forEach((task) => types.add(task.task_type))
+  return Array.from(types).sort()
+})
+
+const selectedTasks = computed(() => {
+  return filteredTasks.value.filter(task => selectedTaskIds.value.has(task.id))
+})
+
+const selectedCount = computed(() => selectedTaskIds.value.size)
+
+const hasFilters = computed(() => {
+  return (
+    statusFilter.value.length > 0 ||
+    typeFilter.value.length > 0 ||
+    episodeFilter.value !== null ||
+    assigneeFilter.value.length > 0 ||
+    contextFilter.value !== 'all' ||
+    searchQuery.value !== '' ||
+    myTasksFilter.value
+  )
+})
+
+const filteredTasks = computed(() => {
+  let filtered = tasks.value
+
+  if (searchQuery.value) {
+    const query = searchQuery.value.toLowerCase()
+    filtered = filtered.filter(
+      (task) =>
+        task.name.toLowerCase().includes(query) ||
+        task.shot_name?.toLowerCase().includes(query) ||
+        task.asset_name?.toLowerCase().includes(query)
+    )
+  }
+
+  if (statusFilter.value.length > 0) {
+    filtered = filtered.filter((task) => statusFilter.value.includes(task.status))
+  }
+
+  if (typeFilter.value.length > 0) {
+    filtered = filtered.filter((task) => typeFilter.value.includes(task.task_type))
+  }
+
+  if (episodeFilter.value !== null) {
+    filtered = filtered.filter((task) => task.episode_id === episodeFilter.value)
+  }
+
+  if (assigneeFilter.value.length > 0) {
+    filtered = filtered.filter((task) =>
+      task.assigned_user_id ? assigneeFilter.value.includes(task.assigned_user_id) : false
+    )
+  }
+
+  if (contextFilter.value === 'shots') {
+    filtered = filtered.filter((task) => task.shot_id !== null && task.shot_id !== undefined)
+  } else if (contextFilter.value === 'assets') {
+    filtered = filtered.filter((task) => task.asset_id !== null && task.asset_id !== undefined)
+  }
+
+  return filtered
+})
+
 // Methods
 async function fetchMyTasks() {
   isLoading.value = true
   try {
-    const projectId = selectedProjectId.value === 'all' ? undefined : parseInt(selectedProjectId.value)
-    const status = selectedStatus.value === 'all' ? undefined : selectedStatus.value
-    tasks.value = await taskService.getMyTasks(projectId, status)
+    tasks.value = await taskService.getMyTasks(selectedProjectId.value ?? undefined)
   } catch (error) {
     console.error('Failed to fetch my tasks:', error)
+    toast({
+      title: 'Failed to load tasks',
+      description: error instanceof Error ? error.message : 'An error occurred',
+      variant: 'destructive',
+    })
   } finally {
     isLoading.value = false
   }
@@ -132,28 +285,156 @@ async function fetchProjects() {
   }
 }
 
-function handleProjectChange() {
+// Episode/assignee filters are project-scoped, so only populate them when a single
+// project is selected (the toolbar already hides these filters when the list is empty).
+async function fetchProjectScopedFilters() {
+  if (selectedProjectId.value === null) {
+    episodes.value = []
+    projectMembers.value = []
+    return
+  }
+
+  const projectId = selectedProjectId.value
+  try {
+    const [episodesResponse, membersResponse] = await Promise.all([
+      episodeService.getEpisodes(projectId),
+      projectService.getProjectMembers(projectId),
+    ])
+    episodes.value = episodesResponse
+    projectMembers.value = membersResponse
+  } catch (error) {
+    console.error('Failed to fetch project-scoped filters:', error)
+    episodes.value = []
+    projectMembers.value = []
+  }
+}
+
+const handleRowClick = () => {
+  // Row click is reserved for selection; only double-click opens the detail panel
+  // (matches TaskBrowser.vue's convention for the project-scoped Tasks table).
+}
+
+const handleRowDoubleClick = (task: TaskListItem) => {
+  selectTask(task)
+  if (isDetailPanelEnabled.value && window.innerWidth < 1024) {
+    showMobileDetail.value = true
+  }
+}
+
+const handleTaskUpdated = () => {
   fetchMyTasks()
 }
 
-function handleStatusChange() {
+const handleStatusUpdated = (taskId: number, newStatus: string) => {
+  const taskIndex = tasks.value.findIndex((t) => t.id === taskId)
+  if (taskIndex !== -1) {
+    const updatedTasks = [...tasks.value]
+    updatedTasks[taskIndex] = {
+      ...updatedTasks[taskIndex],
+      status: newStatus as TaskStatus,
+    }
+    tasks.value = updatedTasks
+  }
+}
+
+const handleSelectionChange = (taskIds: number[]) => {
+  selectedTaskIds.value = new Set(taskIds)
+}
+
+const handleContextMenu = (event: MouseEvent, _tasks: TaskListItem[]) => {
+  contextMenuPosition.value = { x: event.clientX, y: event.clientY }
+  showContextMenu.value = true
+}
+
+const closeContextMenu = () => {
+  showContextMenu.value = false
+}
+
+const handleBulkStatusUpdate = async (status: string) => {
+  try {
+    const taskIds = selectedTasks.value.map(task => task.id)
+    if (taskIds.length === 0) return
+
+    isLoading.value = true
+    const result = await taskService.bulkUpdateStatus(taskIds, status)
+
+    toast({
+      title: 'Success',
+      description: `${result.success_count} ${result.success_count === 1 ? 'task' : 'tasks'} updated`,
+    })
+
+    await fetchMyTasks()
+    closeContextMenu()
+  } catch (error) {
+    console.error('Failed to update task status:', error)
+    toast({
+      title: 'Error',
+      description: 'Failed to update tasks. Please try again.',
+      variant: 'destructive',
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const handleBulkAssignment = async (userId: number) => {
+  try {
+    const taskIds = selectedTasks.value.map(task => task.id)
+    if (taskIds.length === 0) return
+
+    isLoading.value = true
+    const result = await taskService.bulkAssignTasks(taskIds, userId)
+
+    toast({
+      title: 'Success',
+      description: `${result.success_count} ${result.success_count === 1 ? 'task' : 'tasks'} assigned`,
+    })
+
+    await fetchMyTasks()
+    closeContextMenu()
+  } catch (error) {
+    console.error('Failed to assign tasks:', error)
+    toast({
+      title: 'Error',
+      description: 'Failed to assign tasks. Please try again.',
+      variant: 'destructive',
+    })
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const updateColumnVisibility = (visibility: VisibilityState) => {
+  columnVisibility.value = visibility
+  sessionStorage.setItem('myTasksView.columnVisibility', JSON.stringify(visibility))
+}
+
+function loadColumnVisibility() {
+  const saved = sessionStorage.getItem('myTasksView.columnVisibility')
+  if (saved) {
+    try {
+      columnVisibility.value = JSON.parse(saved)
+    } catch (error) {
+      console.error('Failed to parse saved column visibility:', error)
+    }
+  }
+}
+
+// Clear selection when filters change
+watch([statusFilter, typeFilter, episodeFilter, assigneeFilter, contextFilter, searchQuery], () => {
+  selectedTaskIds.value = new Set()
+})
+
+// Refetch when the project filter changes (episode/assignee filters are project-scoped)
+watch(selectedProjectId, () => {
+  episodeFilter.value = null
   fetchMyTasks()
-}
-
-function handleTaskSelected(task: any) {
-  selectedTask.value = task
-}
-
-function handleClosePanel() {
-  selectedTask.value = null
-}
-
-function handleTaskUpdated() {
-  fetchMyTasks()
-}
+  fetchProjectScopedFilters()
+})
 
 // Lifecycle
 onMounted(async () => {
+  loadColumnVisibility()
   await Promise.all([fetchMyTasks(), fetchProjects()])
 })
 </script>
diff --git a/frontend/src/views/project/ProjectAssetsView.vue b/frontend/src/views/project/ProjectAssetsView.vue
index eb2cb11..e498037 100644
--- a/frontend/src/views/project/ProjectAssetsView.vue
+++ b/frontend/src/views/project/ProjectAssetsView.vue
@@ -18,8 +18,10 @@
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto">
-      <AssetBrowser :project-id="projectId" />
+    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
+      <div class="flex-1 min-h-0 flex flex-col">
+        <AssetBrowser :project-id="projectId" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/project/ProjectTasksView.vue b/frontend/src/views/project/ProjectTasksView.vue
index 02a7c31..bdd144a 100644
--- a/frontend/src/views/project/ProjectTasksView.vue
+++ b/frontend/src/views/project/ProjectTasksView.vue
@@ -13,12 +13,12 @@
     </div>
 
     <!-- Content -->
-    <div class="flex-1 overflow-auto">
+    <div class="flex-1 overflow-hidden flex flex-col min-h-0">
       <!-- Task Browser -->
-      <div v-if="projectId">
+      <div v-if="projectId" class="flex-1 min-h-0 flex flex-col">
         <TaskBrowser :project-id="projectId" />
       </div>
-      
+
       <div v-else class="p-4 sm:p-6">
         <!-- No project selected -->
         <Card>