Reduce codebase duplication and complexity

- Disable SSR (was enabled globally but disabled on every route)
- Extract shared Card types to app/types/card.ts (7 duplicates → 1)
- Extract useViewData composable from useKanban + useListView (~150 lines saved)
- Extract useMutation composable to DRY 65 try/catch/toast blocks
- Merge ColumnConfigModal + ListColumnConfigModal into ViewConfigModal (~400 lines saved)
- Move OpenAPI spec from 2535-line inline JS to server/assets/openapi.json
- Extract enrichCardsWithMetadata server utility (3 endpoints deduplicated)
- Extract ViewHeader component from board + list page headers (~80 lines saved)

Author: ThomasLohner

app/components/ListColumnConfigModal.vue

@@ -3,14 +3,15 @@ const draggable = defineAsyncComponent(() => import('vuedraggable'))
 
 interface ColumnItem {
   id: string
-  name: string
+  name?: string
   color?: string | null
   position?: number
+  field?: string
 }
 
 const props = defineProps<{
+  mode: 'board' | 'list'
   columns: ColumnItem[]
-  boardId: string
   availableColumns?: ColumnItem[]
   canAddColumns?: boolean
   tags?: Array<{ id: string, name: string, color: string }>
@@ -22,7 +23,7 @@ const props = defineProps<{
 const open = defineModel<boolean>('open', { default: false })
 
 const emit = defineEmits<{
-  'add': [name: string, color?: string]
+  'add': [nameOrField: string, color?: string]
   'update': [columnId: string, updates: { name?: string, color?: string }]
   'delete': [columnId: string]
   'reorder': [columns: { id: string, position: number }[]]
@@ -32,7 +33,35 @@ const emit = defineEmits<{
   'delete-view': []
 }>()
 
-// Local state — buffered until Save
+// ─── List-mode field metadata ───
+const ALL_FIELDS = [
+  { field: 'done', label: 'Done', icon: 'i-lucide-circle-check-big' },
+  { field: 'ticketId', label: 'Ticket ID', icon: 'i-lucide-hash' },
+  { field: 'title', label: 'Title', icon: 'i-lucide-type' },
+  { field: 'status', label: 'Status', icon: 'i-lucide-circle-dot' },
+  { field: 'assignee', label: 'Assignee', icon: 'i-lucide-user' },
+  { field: 'priority', label: 'Priority', icon: 'i-lucide-signal' },
+  { field: 'tags', label: 'Tags', icon: 'i-lucide-tag' },
+  { field: 'dueDate', label: 'Due Date', icon: 'i-lucide-calendar' },
+  { field: 'createdAt', label: 'Created', icon: 'i-lucide-calendar-plus' },
+  { field: 'updatedAt', label: 'Updated', icon: 'i-lucide-calendar-clock' },
+  { field: 'description', label: 'Description', icon: 'i-lucide-text' }
+]
+
+const activeFields = computed(() => new Set(localColumns.value.map(c => c.field)))
+const availableFields = computed(() =>
+  ALL_FIELDS.filter(f => !activeFields.value.has(f.field))
+)
+
+function fieldLabel(field: string) {
+  return ALL_FIELDS.find(f => f.field === field)?.label || field
+}
+
+function fieldIcon(field: string) {
+  return ALL_FIELDS.find(f => f.field === field)?.icon || 'i-lucide-columns-3'
+}
+
+// ─── Local state — buffered until Save ───
 const localColumns = ref<ColumnItem[]>([])
 const localTagFilters = ref<Set<string>>(new Set())
 const editName = ref('')
@@ -73,11 +102,12 @@ function onDragEnd() {
   // Just reorder locally — emitted on save
 }
 
+// ─── Board-mode: new column ───
 const newColumnName = ref('')
 const newColumnColor = ref('#6366f1')
 const newColorOpen = ref(false)
 
-function addColumn() {
+function addBoardColumn() {
   if (!newColumnName.value.trim()) return
   emit('add', newColumnName.value.trim(), newColumnColor.value)
   newColumnName.value = ''
@@ -92,6 +122,7 @@ function pickColor(colId: string, color: string) {
   emit('update', colId, { color })
 }
 
+// ─── Tag filter toggle ───
 function toggleTagFilter(tagId: string) {
   const next = new Set(localTagFilters.value)
   if (next.has(tagId)) {
@@ -102,7 +133,7 @@ function toggleTagFilter(tagId: string) {
   localTagFilters.value = next
 }
 
-// Dirty detection
+// ─── Dirty detection ───
 const isDirty = computed(() => {
   if (editName.value.trim() !== snapshotName.value) return true
   const currentOrder = localColumns.value.map(c => c.id)
@@ -115,7 +146,7 @@ const isDirty = computed(() => {
   return false
 })
 
-// Save — emit only what changed
+// ─── Save — emit only what changed ───
 function save() {
   if (!isDirty.value) {
     open.value = false
@@ -160,7 +191,7 @@ function discardAndClose() {
   open.value = false
 }
 
-// Delete — CardModal-style: button → inline confirmation
+// ─── Delete view — inline confirmation ───
 const showDeleteConfirm = ref(false)
 const deleteConfirmName = ref('')
 const deletingView = ref(false)
@@ -179,7 +210,7 @@ function handleDeleteView() {
 <template>
   <UModal
     v-model:open="open"
-    :title="viewName !== undefined ? undefined : 'Board Settings'"
+    :title="viewName !== undefined ? undefined : (mode === 'board' ? 'Board Settings' : 'List Settings')"
     :ui="viewName !== undefined ? { header: 'hidden', body: 'pt-0 sm:pt-0', footer: 'p-0 sm:p-0' } : { footer: 'p-0 sm:p-0' }"
   >
     <template #body>
@@ -190,7 +221,7 @@ function handleDeleteView() {
             <input
               v-model="editName"
               type="text"
-              placeholder="Board name..."
+              :placeholder="mode === 'board' ? 'Board name...' : 'List name...'"
               class="w-full text-[16px] font-semibold text-zinc-900 dark:text-zinc-100 placeholder-zinc-300 dark:placeholder-zinc-600 bg-transparent border-0 border-b border-transparent focus:border-zinc-200 dark:focus:border-zinc-700 rounded-none outline-none! ring-0! tracking-[-0.01em] leading-snug py-2 transition-colors"
               @keydown.enter="($event.target as HTMLInputElement).blur()"
             >
@@ -202,7 +233,9 @@ function handleDeleteView() {
             name="i-lucide-columns-3"
             class="text-[13px] text-zinc-400 dark:text-zinc-500"
           />
-          <span class="text-[12px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-[0.08em]">Columns</span>
+          <span class="text-[12px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-[0.08em]">
+            {{ mode === 'board' ? 'Columns' : 'Active Columns' }}
+          </span>
         </div>
         <ClientOnly>
           <draggable
@@ -222,30 +255,41 @@ function handleDeleteView() {
                   name="i-lucide-grip-vertical"
                   class="drag-handle text-zinc-300 dark:text-zinc-600 hover:text-zinc-500 dark:hover:text-zinc-400 cursor-grab active:cursor-grabbing text-[15px] shrink-0 transition-colors"
                 />
-                <UPopover
-                  v-if="canAddColumns"
-                  v-model:open="colorPopoverOpen[col.id]"
-                >
-                  <button
-                    type="button"
-                    class="w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10 dark:ring-white/10 hover:ring-2 hover:ring-indigo-400 transition-all cursor-pointer"
+                <!-- Board mode: color dot (editable if canAddColumns) -->
+                <template v-if="mode === 'board'">
+                  <UPopover
+                    v-if="canAddColumns"
+                    v-model:open="colorPopoverOpen[col.id]"
+                  >
+                    <button
+                      type="button"
+                      class="w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10 dark:ring-white/10 hover:ring-2 hover:ring-indigo-400 transition-all cursor-pointer"
+                      :style="{ backgroundColor: col.color || '#a1a1aa' }"
+                    />
+                    <template #content>
+                      <div class="p-2">
+                        <ColorPicker
+                          :model-value="col.color || '#a1a1aa'"
+                          @update:model-value="pickColor(col.id, $event)"
+                        />
+                      </div>
+                    </template>
+                  </UPopover>
+                  <div
+                    v-else
+                    class="w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10 dark:ring-white/10"
                     :style="{ backgroundColor: col.color || '#a1a1aa' }"
                   />
-                  <template #content>
-                    <div class="p-2">
-                      <ColorPicker
-                        :model-value="col.color || '#a1a1aa'"
-                        @update:model-value="pickColor(col.id, $event)"
-                      />
-                    </div>
-                  </template>
-                </UPopover>
-                <div
-                  v-else
-                  class="w-3.5 h-3.5 rounded-full shrink-0 ring-1 ring-black/10 dark:ring-white/10"
-                  :style="{ backgroundColor: col.color || '#a1a1aa' }"
+                </template>
+                <!-- List mode: field icon -->
+                <UIcon
+                  v-if="mode === 'list'"
+                  :name="fieldIcon(col.field || '')"
+                  class="text-[14px] text-zinc-400 dark:text-zinc-500 shrink-0"
                 />
-                <span class="text-[14px] font-medium flex-1">{{ col.name }}</span>
+                <span class="text-[14px] font-medium flex-1">
+                  {{ mode === 'board' ? col.name : fieldLabel(col.field || '') }}
+                </span>
                 <div class="flex items-center gap-0.5 opacity-0 sm:group-hover:opacity-100 max-sm:opacity-60 transition-opacity">
                   <UTooltip text="Remove column">
                     <UButton
@@ -264,10 +308,11 @@ function handleDeleteView() {
 
         <USeparator class="my-2" />
 
+        <!-- Board mode: add new column -->
         <form
-          v-if="canAddColumns"
+          v-if="mode === 'board' && canAddColumns"
           class="flex items-center gap-2"
-          @submit.prevent="addColumn"
+          @submit.prevent="addBoardColumn"
         >
           <UPopover v-model:open="newColorOpen">
             <button
@@ -295,7 +340,8 @@ function handleDeleteView() {
           />
         </form>
 
-        <template v-if="availableColumns?.length">
+        <!-- Board mode: available columns to link -->
+        <template v-if="mode === 'board' && availableColumns?.length">
           <USeparator class="my-2" />
           <div class="flex items-center gap-1.5 mb-1">
             <UIcon
@@ -324,6 +370,36 @@ function handleDeleteView() {
           </div>
         </template>
 
+        <!-- List mode: available fields -->
+        <template v-if="mode === 'list' && availableFields.length">
+          <div class="flex items-center gap-1.5 mb-1">
+            <UIcon
+              name="i-lucide-plus-circle"
+              class="text-[13px] text-zinc-400 dark:text-zinc-500"
+            />
+            <span class="text-[12px] font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-[0.08em]">Available Fields</span>
+          </div>
+          <div
+            v-for="f in availableFields"
+            :key="f.field"
+            class="flex items-center gap-2 px-2 py-2 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors group"
+          >
+            <UIcon
+              :name="f.icon"
+              class="text-[14px] text-zinc-300 dark:text-zinc-600 shrink-0"
+            />
+            <span class="text-[14px] font-medium flex-1 text-zinc-400 dark:text-zinc-500">{{ f.label }}</span>
+            <UButton
+              icon="i-lucide-plus"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="emit('add', f.field)"
+            />
+          </div>
+        </template>
+
+        <!-- Tag filters (shared) -->
         <template v-if="tags?.length">
           <USeparator class="my-2" />
           <div class="flex items-center gap-1.5 mb-1">