From a2dd6c05e6798fa9e2f16662b4b07dd9ef14321b Mon Sep 17 00:00:00 2001
From: Jonas Plum <cugu@users.noreply.github.com>
Date: Wed, 7 Aug 2024 22:18:59 +0200
Subject: [PATCH] feat: mobile ui (#1096)

---
 migrations/8_dashboardview.go                 |  43 ++++
 migrations/migrations.go                      |   1 +
 ui/index.html                                 |   2 +-
 ui/src/components/TanView.vue                 |   7 +-
 ui/src/components/dashboard/OpenTasks.vue     |  46 +++--
 ui/src/components/dashboard/OpenTickets.vue   |  13 +-
 .../components/dashboard/TicketOverTime.vue   |   2 +-
 ui/src/components/dashboard/TicketTypes.vue   |   2 +-
 ui/src/components/input/DynamicInput.vue      |   3 -
 ui/src/components/layout/ColumnBody.vue       |   5 +
 .../components/layout/ColumnBodyContainer.vue |  13 ++
 ui/src/components/layout/ColumnHeader.vue     |  25 +++
 .../{common => layout}/PanelListElement.vue   |   2 +-
 .../ResourceListElement.vue                   |   0
 ui/src/components/layout/SideBar.vue          | 113 ++++++-----
 ui/src/components/layout/ThreeColumn.vue      |  28 ++-
 ui/src/components/layout/TwoColumn.vue        |  18 +-
 .../components/reaction/ReactionDisplay.vue   |  51 ++---
 ui/src/components/reaction/ReactionForm.vue   |   2 +-
 ui/src/components/reaction/ReactionList.vue   |  50 +++--
 ui/src/components/reaction/ReactionNew.vue    |  28 +--
 ui/src/components/ticket/TicketActionBar.vue  | 150 +++++++-------
 ui/src/components/ticket/TicketCloseBar.vue   |   5 +-
 ui/src/components/ticket/TicketDisplay.vue    | 185 ++++++++++--------
 ui/src/components/ticket/TicketHeader.vue     |   8 +-
 ui/src/components/ticket/TicketList.vue       | 161 +++++++--------
 ui/src/components/ticket/TicketListList.vue   |   4 +-
 ui/src/components/ticket/TicketTab.vue        |   7 +-
 ui/src/components/ticket/link/TicketLinks.vue |   9 +-
 ui/src/components/ticket/task/TicketTasks.vue |  16 +-
 .../ticket/timeline/TicketTimelineItem.vue    |   2 +-
 ui/src/components/ui/accordion/Accordion.vue  |  19 --
 .../ui/accordion/AccordionContent.vue         |  25 ---
 .../components/ui/accordion/AccordionItem.vue |  22 ---
 .../ui/accordion/AccordionTrigger.vue         |  33 ----
 ui/src/components/ui/accordion/index.ts       |   4 -
 ui/src/components/ui/avatar/Avatar.vue        |  25 ---
 .../components/ui/avatar/AvatarFallback.vue   |  11 --
 ui/src/components/ui/avatar/AvatarImage.vue   |   9 -
 ui/src/components/ui/avatar/index.ts          |  24 ---
 ui/src/components/ui/calendar/Calendar.vue    |  69 -------
 .../components/ui/calendar/CalendarCell.vue   |  30 ---
 .../ui/calendar/CalendarCellTrigger.vue       |  42 ----
 .../components/ui/calendar/CalendarGrid.vue   |  25 ---
 .../ui/calendar/CalendarGridBody.vue          |  11 --
 .../ui/calendar/CalendarGridHead.vue          |  11 --
 .../ui/calendar/CalendarGridRow.vue           |  22 ---
 .../ui/calendar/CalendarHeadCell.vue          |  25 ---
 .../components/ui/calendar/CalendarHeader.vue |  25 ---
 .../ui/calendar/CalendarHeading.vue           |  28 ---
 .../ui/calendar/CalendarNextButton.vue        |  37 ----
 .../ui/calendar/CalendarPrevButton.vue        |  37 ----
 ui/src/components/ui/calendar/index.ts        |  12 --
 .../components/ui/collapsible/Collapsible.vue |  15 --
 .../ui/collapsible/CollapsibleContent.vue     |  14 --
 .../ui/collapsible/CollapsibleTrigger.vue     |  11 --
 ui/src/components/ui/collapsible/index.ts     |   3 -
 .../ui/resizable/ResizableHandle.vue          |  43 ----
 .../ui/resizable/ResizablePanelGroup.vue      |  30 ---
 ui/src/components/ui/resizable/index.ts       |   3 -
 .../components/ui/scroll-area/ScrollArea.vue  |  30 ---
 .../components/ui/scroll-area/ScrollBar.vue   |  35 ----
 ui/src/components/ui/scroll-area/index.ts     |   2 -
 ui/src/components/ui/switch/Switch.vue        |  44 -----
 ui/src/components/ui/switch/index.ts          |   1 -
 ui/src/views/DashboardView.vue                | 182 +++++++++--------
 ui/src/views/ReactionView.vue                 |   9 +-
 ui/src/views/TicketView.vue                   |  14 +-
 68 files changed, 668 insertions(+), 1315 deletions(-)
 create mode 100644 migrations/8_dashboardview.go
 create mode 100644 ui/src/components/layout/ColumnBody.vue
 create mode 100644 ui/src/components/layout/ColumnBodyContainer.vue
 create mode 100644 ui/src/components/layout/ColumnHeader.vue
 rename ui/src/components/{common => layout}/PanelListElement.vue (67%)
 rename ui/src/components/{common => layout}/ResourceListElement.vue (100%)
 delete mode 100644 ui/src/components/ui/accordion/Accordion.vue
 delete mode 100644 ui/src/components/ui/accordion/AccordionContent.vue
 delete mode 100644 ui/src/components/ui/accordion/AccordionItem.vue
 delete mode 100644 ui/src/components/ui/accordion/AccordionTrigger.vue
 delete mode 100644 ui/src/components/ui/accordion/index.ts
 delete mode 100644 ui/src/components/ui/avatar/Avatar.vue
 delete mode 100644 ui/src/components/ui/avatar/AvatarFallback.vue
 delete mode 100644 ui/src/components/ui/avatar/AvatarImage.vue
 delete mode 100644 ui/src/components/ui/avatar/index.ts
 delete mode 100644 ui/src/components/ui/calendar/Calendar.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarCell.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarCellTrigger.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarGrid.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarGridBody.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarGridHead.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarGridRow.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarHeadCell.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarHeader.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarHeading.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarNextButton.vue
 delete mode 100644 ui/src/components/ui/calendar/CalendarPrevButton.vue
 delete mode 100644 ui/src/components/ui/calendar/index.ts
 delete mode 100644 ui/src/components/ui/collapsible/Collapsible.vue
 delete mode 100644 ui/src/components/ui/collapsible/CollapsibleContent.vue
 delete mode 100644 ui/src/components/ui/collapsible/CollapsibleTrigger.vue
 delete mode 100644 ui/src/components/ui/collapsible/index.ts
 delete mode 100644 ui/src/components/ui/resizable/ResizableHandle.vue
 delete mode 100644 ui/src/components/ui/resizable/ResizablePanelGroup.vue
 delete mode 100644 ui/src/components/ui/resizable/index.ts
 delete mode 100644 ui/src/components/ui/scroll-area/ScrollArea.vue
 delete mode 100644 ui/src/components/ui/scroll-area/ScrollBar.vue
 delete mode 100644 ui/src/components/ui/scroll-area/index.ts
 delete mode 100644 ui/src/components/ui/switch/Switch.vue
 delete mode 100644 ui/src/components/ui/switch/index.ts

diff --git a/migrations/8_dashboardview.go b/migrations/8_dashboardview.go
new file mode 100644
index 0000000..b2fdb47
--- /dev/null
+++ b/migrations/8_dashboardview.go
@@ -0,0 +1,43 @@
+package migrations
+
+import (
+	"github.com/pocketbase/dbx"
+	"github.com/pocketbase/pocketbase/daos"
+	"github.com/pocketbase/pocketbase/tools/types"
+)
+
+const dashboardCountsViewUpdateQuery = `SELECT id, count FROM (
+  SELECT 'users' as id, COUNT(users.id) as count FROM users
+  UNION
+  SELECT 'tickets' as id, COUNT(tickets.id) as count FROM tickets
+  UNION
+  SELECT 'tasks' as id, COUNT(tasks.id) as count FROM tasks
+  UNION 
+  SELECT 'reactions' as id, COUNT(reactions.id) as count FROM reactions
+) as counts;`
+
+func dashboardCountsViewUpdateUp(db dbx.Builder) error {
+	dao := daos.New(db)
+
+	collection, err := dao.FindCollectionByNameOrId(dashboardCountsViewName)
+	if err != nil {
+		return err
+	}
+
+	collection.Options = types.JsonMap{"query": dashboardCountsViewUpdateQuery}
+
+	return dao.SaveCollection(collection)
+}
+
+func dashboardCountsViewUpdateDown(db dbx.Builder) error {
+	dao := daos.New(db)
+
+	collection, err := dao.FindCollectionByNameOrId(dashboardCountsViewName)
+	if err != nil {
+		return err
+	}
+
+	collection.Options = types.JsonMap{"query": dashboardCountsViewQuery}
+
+	return dao.SaveCollection(collection)
+}
diff --git a/migrations/migrations.go b/migrations/migrations.go
index 7fbedc1..f541468 100644
--- a/migrations/migrations.go
+++ b/migrations/migrations.go
@@ -12,4 +12,5 @@ func Register() {
 	migrations.Register(reactionsUp, reactionsDown, "1700000005_reactions.go")
 	migrations.Register(systemuserUp, systemuserDown, "1700000006_systemuser.go")
 	migrations.Register(searchViewUp, searchViewDown, "1700000007_search_view.go")
+	migrations.Register(dashboardCountsViewUpdateUp, dashboardCountsViewUpdateDown, "1700000008_dashboardview.go")
 }
diff --git a/ui/index.html b/ui/index.html
index eb40416..de3d68a 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -7,7 +7,7 @@
     <title>Catalyst</title>
   </head>
   <body>
-    <div id="app" class="h-screen w-screen"></div>
+    <div id="app" class="h-screen w-screen overflow-hidden"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/ui/src/components/TanView.vue b/ui/src/components/TanView.vue
index 7dca086..335048e 100644
--- a/ui/src/components/TanView.vue
+++ b/ui/src/components/TanView.vue
@@ -7,17 +7,16 @@ defineProps<{
   isPending: boolean
   isError: boolean
   error: Error | null
-  value: any
 }>()
 </script>
 
 <template>
-  <div v-if="isPending" class="flex justify-center">
-    <LoaderCircle class="h-16 w-16 animate-spin text-primary" />
+  <div v-if="isPending" class="flex h-full w-full">
+    <LoaderCircle class="m-auto h-16 w-16 animate-spin text-primary" />
   </div>
   <Alert v-else-if="isError" variant="destructive" class="mb-4">
     <AlertTitle>Error</AlertTitle>
     <AlertDescription>{{ error }}</AlertDescription>
   </Alert>
-  <slot v-else-if="value" />
+  <slot v-else />
 </template>
diff --git a/ui/src/components/dashboard/OpenTasks.vue b/ui/src/components/dashboard/OpenTasks.vue
index 8f49e3e..da7ae83 100644
--- a/ui/src/components/dashboard/OpenTasks.vue
+++ b/ui/src/components/dashboard/OpenTasks.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import PanelListElement from '@/components/common/PanelListElement.vue'
+import TanView from '@/components/TanView.vue'
+import PanelListElement from '@/components/layout/PanelListElement.vue'
 import { buttonVariants } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 
@@ -32,24 +33,31 @@ const {
 <template>
   <div class="flex flex-col gap-2">
     <Card>
-      <div v-if="tasks && tasks.length === 0" class="p-2 text-center text-sm text-gray-500">
-        No open tasks
-      </div>
-      <PanelListElement v-else v-for="task in tasks" :key="task.id" class="pr-1">
-        <span>{{ task.name }}</span>
-        <RouterLink
-          :to="{
-            name: 'tickets',
-            params: { type: task.expand.ticket.type, id: task.expand.ticket.id }
-          }"
-          :class="cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'ml-auto h-8')"
-        >
-          <span class="flex flex-row items-center text-sm text-gray-500">
-            Go to {{ task.expand.ticket.name }}
-            <ChevronRight class="ml-2 h-4 w-4" />
-          </span>
-        </RouterLink>
-      </PanelListElement>
+      <TanView :isError="isError" :isPending="isPending" :error="error">
+        <div v-if="tasks && tasks.length === 0" class="p-2 text-center text-sm text-gray-500">
+          No open tasks
+        </div>
+        <PanelListElement v-else v-for="task in tasks" :key="task.id" class="pr-1">
+          <span>{{ task.name }}</span>
+          <RouterLink
+            :to="{
+              name: 'tickets',
+              params: { type: task.expand.ticket.type, id: task.expand.ticket.id }
+            }"
+            :class="
+              cn(
+                buttonVariants({ variant: 'outline', size: 'sm' }),
+                'h-8 w-full sm:ml-auto sm:w-auto'
+              )
+            "
+          >
+            <span class="flex flex-row items-center text-sm text-gray-500">
+              Go to {{ task.expand.ticket.name }}
+              <ChevronRight class="ml-2 h-4 w-4" />
+            </span>
+          </RouterLink>
+        </PanelListElement>
+      </TanView>
     </Card>
   </div>
 </template>
diff --git a/ui/src/components/dashboard/OpenTickets.vue b/ui/src/components/dashboard/OpenTickets.vue
index 7e90e54..06e14e9 100644
--- a/ui/src/components/dashboard/OpenTickets.vue
+++ b/ui/src/components/dashboard/OpenTickets.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PanelListElement from '@/components/common/PanelListElement.vue'
+import PanelListElement from '@/components/layout/PanelListElement.vue'
 import { buttonVariants } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Separator } from '@/components/ui/separator'
@@ -42,16 +42,21 @@ const age = (ticket: Ticket) =>
       </div>
       <PanelListElement v-else v-for="ticket in tickets" :key="ticket.id" class="gap-2 pr-1">
         <span>{{ ticket.name }}</span>
-        <Separator orientation="vertical" class="h-4" />
+        <Separator orientation="vertical" class="hidden h-4 sm:block" />
         <span class="text-sm text-muted-foreground">{{ ticket.expand.type.singular }}</span>
-        <Separator orientation="vertical" class="h-4" />
+        <Separator orientation="vertical" class="hidden h-4 sm:block" />
         <span class="text-sm text-muted-foreground">Open since {{ age(ticket) }} days</span>
         <RouterLink
           :to="{
             name: 'tickets',
             params: { type: ticket.type, id: ticket.id }
           }"
-          :class="cn(buttonVariants({ variant: 'outline', size: 'sm' }), 'ml-auto h-8')"
+          :class="
+            cn(
+              buttonVariants({ variant: 'outline', size: 'sm' }),
+              'h-8 w-full sm:ml-auto sm:w-auto'
+            )
+          "
         >
           <span class="flex flex-row items-center text-sm text-gray-500">
             Go to {{ ticket.name }}
diff --git a/ui/src/components/dashboard/TicketOverTime.vue b/ui/src/components/dashboard/TicketOverTime.vue
index 7266f08..a86b5df 100644
--- a/ui/src/components/dashboard/TicketOverTime.vue
+++ b/ui/src/components/dashboard/TicketOverTime.vue
@@ -43,7 +43,7 @@ const ticketsPerWeek = computed(() => {
 </script>
 
 <template>
-  <TanView :isError="isError" :isPending="isPending" :error="error" :value="tickets">
+  <TanView :isError="isError" :isPending="isPending" :error="error">
     <LineChart class="h-40" :data="ticketsPerWeek" index="week" :categories="['count']" />
   </TanView>
 </template>
diff --git a/ui/src/components/dashboard/TicketTypes.vue b/ui/src/components/dashboard/TicketTypes.vue
index c97aa07..a9c2bae 100644
--- a/ui/src/components/dashboard/TicketTypes.vue
+++ b/ui/src/components/dashboard/TicketTypes.vue
@@ -30,7 +30,7 @@ const namedTypes = computed(() => {
 </script>
 
 <template>
-  <TanView :isError="isError" :isPending="isPending" :error="error" :value="namedTypes">
+  <TanView :isError="isError" :isPending="isPending" :error="error">
     <div v-if="namedTypes" class="flex flex-1 items-center">
       <DonutChart index="plural" type="donut" category="count" :data="namedTypes" />
     </div>
diff --git a/ui/src/components/input/DynamicInput.vue b/ui/src/components/input/DynamicInput.vue
index 96e7828..7127d13 100644
--- a/ui/src/components/input/DynamicInput.vue
+++ b/ui/src/components/input/DynamicInput.vue
@@ -3,9 +3,6 @@ import ShortCut from '@/components/ShortCut.vue'
 
 import { ref } from 'vue'
 
-// import { Textarea } from '@/components/ui/textarea'
-// import { Input } from '@/components/ui/input'
-
 const model = defineModel({
   type: String
 })
diff --git a/ui/src/components/layout/ColumnBody.vue b/ui/src/components/layout/ColumnBody.vue
new file mode 100644
index 0000000..10f6d78
--- /dev/null
+++ b/ui/src/components/layout/ColumnBody.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="flex flex-1 items-start justify-start overflow-y-auto overflow-x-hidden">
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/layout/ColumnBodyContainer.vue b/ui/src/components/layout/ColumnBodyContainer.vue
new file mode 100644
index 0000000..02e9d3d
--- /dev/null
+++ b/ui/src/components/layout/ColumnBodyContainer.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+defineProps<{
+  small?: boolean
+}>()
+</script>
+
+<template>
+  <div :class="cn('mx-auto flex w-full max-w-[72rem] gap-4 p-4', small && 'max-w-[47rem]')">
+    <slot />
+  </div>
+</template>
diff --git a/ui/src/components/layout/ColumnHeader.vue b/ui/src/components/layout/ColumnHeader.vue
new file mode 100644
index 0000000..0e24994
--- /dev/null
+++ b/ui/src/components/layout/ColumnHeader.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Separator } from '@/components/ui/separator'
+
+import { cn } from '@/lib/utils'
+
+defineProps<{
+  title?: string
+  nowrap?: boolean
+  hideSeparator?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex min-h-14 flex-wrap items-center gap-2 bg-background p-2', nowrap && 'flex-nowrap')
+    "
+  >
+    <h1 v-if="title" class="text-xl font-bold">
+      {{ title }}
+    </h1>
+    <slot />
+  </div>
+  <Separator v-if="!hideSeparator" />
+</template>
diff --git a/ui/src/components/common/PanelListElement.vue b/ui/src/components/layout/PanelListElement.vue
similarity index 67%
rename from ui/src/components/common/PanelListElement.vue
rename to ui/src/components/layout/PanelListElement.vue
index 6cb5ec1..152f4db 100644
--- a/ui/src/components/common/PanelListElement.vue
+++ b/ui/src/components/layout/PanelListElement.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'flex w-full items-center border-t px-2 py-1 first:rounded-t first:border-none last:rounded-b',
+        'flex w-full flex-col items-start border-t px-2 py-1 first:rounded-t first:border-none last:rounded-b sm:flex-row sm:items-center',
         props.class
       )
     "
diff --git a/ui/src/components/common/ResourceListElement.vue b/ui/src/components/layout/ResourceListElement.vue
similarity index 100%
rename from ui/src/components/common/ResourceListElement.vue
rename to ui/src/components/layout/ResourceListElement.vue
diff --git a/ui/src/components/layout/SideBar.vue b/ui/src/components/layout/SideBar.vue
index ac4d7e6..d0f77e4 100644
--- a/ui/src/components/layout/SideBar.vue
+++ b/ui/src/components/layout/SideBar.vue
@@ -8,57 +8,78 @@ import { Separator } from '@/components/ui/separator'
 
 import { Menu } from 'lucide-vue-next'
 
+import { cn } from '@/lib/utils'
 import { useCatalystStore } from '@/store/catalyst'
 
 const catalystStore = useCatalystStore()
 </script>
 
 <template>
-  <div class="flex h-[57px] items-center border-b bg-background">
-    <CatalystLogo
-      class="size-8"
-      :class="{ 'flex-1': catalystStore.sidebarCollapsed, 'mx-3': !catalystStore.sidebarCollapsed }"
-    />
-    <h1 class="text-xl font-bold" v-if="!catalystStore.sidebarCollapsed">Catalyst</h1>
-  </div>
-  <NavList
-    :is-collapsed="catalystStore.sidebarCollapsed"
-    :links="[
-      {
-        title: 'Dashboard',
-        icon: 'PanelsTopLeft',
-        variant: 'ghost',
-        to: '/dashboard'
-      }
-    ]"
-  />
-  <Separator />
-  <IncidentNav :is-collapsed="catalystStore.sidebarCollapsed" />
-
-  <div class="flex-1" />
-
-  <Separator />
-  <NavList
-    :is-collapsed="catalystStore.sidebarCollapsed"
-    :links="[
-      {
-        title: 'Reactions',
-        icon: 'Zap',
-        variant: 'ghost',
-        to: '/reactions'
-      }
-    ]"
-  />
-  <Separator />
-  <UserDropDown :is-collapsed="catalystStore.sidebarCollapsed" />
-  <Separator />
-  <Button
-    variant="ghost"
-    @click="catalystStore.toggleSidebar()"
-    size="sm"
-    class="m-2 justify-start px-3.5"
+  <div
+    :class="
+      cn(
+        'flex min-w-48 shrink-0 flex-col border-r bg-popover', // transition-all duration-300 ease-in-out',
+        catalystStore.sidebarCollapsed && 'min-w-[50px]'
+      )
+    "
   >
-    <Menu class="size-4" />
-    <span v-if="!catalystStore.sidebarCollapsed" class="ml-2">Toggle Sidebar</span>
-  </Button>
+    <div class="flex h-[57px] items-center border-b bg-background">
+      <CatalystLogo
+        class="size-8"
+        :class="{
+          'flex-1': catalystStore.sidebarCollapsed,
+          'mx-3': !catalystStore.sidebarCollapsed
+        }"
+      />
+      <h1 class="text-xl font-bold" v-if="!catalystStore.sidebarCollapsed">Catalyst</h1>
+    </div>
+    <NavList
+      :is-collapsed="catalystStore.sidebarCollapsed"
+      :links="[
+        {
+          title: 'Dashboard',
+          icon: 'PanelsTopLeft',
+          variant: 'ghost',
+          to: '/dashboard'
+        }
+      ]"
+    />
+    <Separator />
+    <IncidentNav :is-collapsed="catalystStore.sidebarCollapsed" />
+
+    <div class="flex-1" />
+
+    <Separator />
+    <NavList
+      :is-collapsed="catalystStore.sidebarCollapsed"
+      :links="[
+        {
+          title: 'Reactions',
+          icon: 'Zap',
+          variant: 'ghost',
+          to: '/reactions'
+        }
+      ]"
+    />
+    <Separator />
+    <UserDropDown :is-collapsed="catalystStore.sidebarCollapsed" />
+    <Separator />
+    <div :class="cn('flex h-14 items-center px-3', !catalystStore.sidebarCollapsed && 'px-2')">
+      <Button
+        variant="ghost"
+        @click="catalystStore.toggleSidebar()"
+        size="default"
+        :class="
+          cn(
+            'p-0',
+            catalystStore.sidebarCollapsed && 'w-9',
+            !catalystStore.sidebarCollapsed && 'w-full justify-start px-3'
+          )
+        "
+      >
+        <Menu class="size-4" />
+        <span v-if="!catalystStore.sidebarCollapsed" class="ml-2">Toggle Sidebar</span>
+      </Button>
+    </div>
+  </div>
 </template>
diff --git a/ui/src/components/layout/ThreeColumn.vue b/ui/src/components/layout/ThreeColumn.vue
index e299b6b..aa2203b 100644
--- a/ui/src/components/layout/ThreeColumn.vue
+++ b/ui/src/components/layout/ThreeColumn.vue
@@ -3,29 +3,37 @@ import SideBar from '@/components/layout/SideBar.vue'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
 import { cn } from '@/lib/utils'
-import { useCatalystStore } from '@/store/catalyst'
 
-const catalystStore = useCatalystStore()
+defineProps<{
+  showDetails?: boolean
+}>()
 </script>
 
 <template>
   <TooltipProvider :delay-duration="0">
     <div class="flex h-full flex-row items-stretch bg-muted/40">
+      <SideBar />
       <div
         :class="
           cn(
-            'flex min-w-48 flex-col border-r bg-popover', // transition-all duration-300 ease-in-out',
-            catalystStore.sidebarCollapsed && 'min-w-[50px]'
+            'w-full flex-initial border-r sm:w-72',
+            !showDetails && 'flex',
+            showDetails && 'hidden sm:flex'
           )
         "
       >
-        <SideBar />
+        <div class="flex h-full w-full flex-col">
+          <slot name="list" />
+        </div>
       </div>
-      <div class="w-72 flex-initial border-r">
-        <slot name="list" />
-      </div>
-      <div class="flex-1">
-        <slot name="single" />
+      <div
+        :class="
+          cn('flex-1 overflow-hidden', !showDetails && 'hidden sm:flex', showDetails && 'flex')
+        "
+      >
+        <div class="flex h-full w-full flex-1 flex-col">
+          <slot name="single" />
+        </div>
       </div>
     </div>
   </TooltipProvider>
diff --git a/ui/src/components/layout/TwoColumn.vue b/ui/src/components/layout/TwoColumn.vue
index b468e88..0c752d1 100644
--- a/ui/src/components/layout/TwoColumn.vue
+++ b/ui/src/components/layout/TwoColumn.vue
@@ -1,27 +1,15 @@
 <script lang="ts" setup>
 import SideBar from '@/components/layout/SideBar.vue'
 import { TooltipProvider } from '@/components/ui/tooltip'
-
-import { cn } from '@/lib/utils'
-import { useCatalystStore } from '@/store/catalyst'
-
-const catalystStore = useCatalystStore()
 </script>
 
 <template>
   <TooltipProvider :delay-duration="0">
     <div class="flex h-full flex-row items-stretch bg-muted/40">
-      <div
-        :class="
-          cn(
-            'flex min-w-48 flex-col border-r bg-popover', // transition-all duration-300 ease-in-out',
-            catalystStore.sidebarCollapsed && 'min-w-[50px]'
-          )
-        "
-      >
-        <SideBar />
+      <SideBar />
+      <div class="flex h-full w-full flex-col">
+        <slot />
       </div>
-      <slot />
     </div>
   </TooltipProvider>
 </template>
diff --git a/ui/src/components/reaction/ReactionDisplay.vue b/ui/src/components/reaction/ReactionDisplay.vue
index ee5d4e5..be8176d 100644
--- a/ui/src/components/reaction/ReactionDisplay.vue
+++ b/ui/src/components/reaction/ReactionDisplay.vue
@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import TanView from '@/components/TanView.vue'
 import DeleteDialog from '@/components/common/DeleteDialog.vue'
+import ColumnBody from '@/components/layout/ColumnBody.vue'
+import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import ReactionForm from '@/components/reaction/ReactionForm.vue'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/toast'
 
+import { ChevronLeft } from 'lucide-vue-next'
+
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
@@ -72,28 +76,29 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <TanView :isError="isError" :isPending="isPending" :error="error" :value="reaction">
-    <div class="flex h-full flex-1 flex-col overflow-hidden">
-      <div class="flex items-center bg-background px-4 py-2">
-        <div class="ml-auto">
-          <DeleteDialog
-            v-if="reaction"
-            collection="reactions"
-            :id="reaction.id"
-            :name="reaction.name"
-            :singular="'Reaction'"
-            :to="{ name: 'reactions' }"
-            :queryKey="['reactions']"
-          />
-        </div>
+  <TanView :isError="isError" :isPending="isPending" :error="error">
+    <ColumnHeader>
+      <Button @click="router.push({ name: 'reactions' })" variant="outline" class="sm:hidden">
+        <ChevronLeft class="mr-2 size-4" />
+        Back
+      </Button>
+      <div class="ml-auto">
+        <DeleteDialog
+          v-if="reaction"
+          collection="reactions"
+          :id="reaction.id"
+          :name="reaction.name"
+          :singular="'Reaction'"
+          :to="{ name: 'reactions' }"
+          :queryKey="['reactions']"
+        />
       </div>
-      <Separator />
+    </ColumnHeader>
 
-      <ScrollArea v-if="reaction" class="flex-1">
-        <div class="flex max-w-[640px] flex-col gap-4 p-4">
-          <ReactionForm :reaction="reaction" @submit="updateReactionMutation.mutate" />
-        </div>
-      </ScrollArea>
-    </div>
+    <ColumnBody v-if="reaction">
+      <ColumnBodyContainer small>
+        <ReactionForm :reaction="reaction" @submit="updateReactionMutation.mutate" />
+      </ColumnBodyContainer>
+    </ColumnBody>
   </TanView>
 </template>
diff --git a/ui/src/components/reaction/ReactionForm.vue b/ui/src/components/reaction/ReactionForm.vue
index d7f8de0..821e9e4 100644
--- a/ui/src/components/reaction/ReactionForm.vue
+++ b/ui/src/components/reaction/ReactionForm.vue
@@ -239,7 +239,7 @@ const curlExample = computed(() => {
 </script>
 
 <template>
-  <form @submit="onSubmit" class="flex flex-col items-start gap-4">
+  <form @submit="onSubmit" class="flex w-full flex-col items-start gap-4">
     <FormField name="name" v-slot="{ componentField }" validate-on-input>
       <FormItem class="w-full">
         <FormLabel for="name" class="text-right">Name</FormLabel>
diff --git a/ui/src/components/reaction/ReactionList.vue b/ui/src/components/reaction/ReactionList.vue
index 319e91f..4f3c4bb 100644
--- a/ui/src/components/reaction/ReactionList.vue
+++ b/ui/src/components/reaction/ReactionList.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import TanView from '@/components/TanView.vue'
-import ResourceListElement from '@/components/common/ResourceListElement.vue'
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
+import ResourceListElement from '@/components/layout/ResourceListElement.vue'
 import { Button } from '@/components/ui/button'
-import { Separator } from '@/components/ui/separator'
 
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { onMounted } from 'vue'
@@ -63,32 +63,28 @@ onMounted(() => {
 </script>
 
 <template>
-  <TanView :isError="isError" :isPending="isPending" :error="error" :value="reactions">
-    <div class="flex h-screen flex-col">
-      <div class="flex items-center bg-background px-4 py-2">
-        <h1 class="text-xl font-bold">Reactions</h1>
-        <div class="ml-auto">
-          <Button variant="ghost" @click="openNew"> New Reaction</Button>
-        </div>
-      </div>
-      <Separator />
-      <div class="mt-2 flex flex-1 flex-col gap-2 p-4 pt-0">
-        <TransitionGroup name="list" appear>
-          <ResourceListElement
-            v-for="reaction in reactions"
-            :key="reaction.id"
-            :title="reaction.name"
-            :created="reaction.created"
-            :subtitle="subtitle(reaction)"
-            description=""
-            :active="route.params.id === reaction.id"
-            :to="{ name: 'reactions', params: { id: reaction.id } }"
-            :open="false"
-          >
-            {{ reaction.name }}
-          </ResourceListElement>
-        </TransitionGroup>
+  <TanView :isError="isError" :isPending="isPending" :error="error">
+    <ColumnHeader title="Reactions">
+      <div class="ml-auto">
+        <Button variant="ghost" @click="openNew">New Reaction</Button>
       </div>
+    </ColumnHeader>
+    <div class="mt-2 flex flex-1 flex-col gap-2 p-2 pt-0">
+      <TransitionGroup name="list" appear>
+        <ResourceListElement
+          v-for="reaction in reactions"
+          :key="reaction.id"
+          :title="reaction.name"
+          :created="reaction.created"
+          :subtitle="subtitle(reaction)"
+          description=""
+          :active="route.params.id === reaction.id"
+          :to="{ name: 'reactions', params: { id: reaction.id } }"
+          :open="false"
+        >
+          {{ reaction.name }}
+        </ResourceListElement>
+      </TransitionGroup>
     </div>
   </TanView>
 </template>
diff --git a/ui/src/components/reaction/ReactionNew.vue b/ui/src/components/reaction/ReactionNew.vue
index 6c67a91..2eb1d30 100644
--- a/ui/src/components/reaction/ReactionNew.vue
+++ b/ui/src/components/reaction/ReactionNew.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import ColumnBody from '@/components/layout/ColumnBody.vue'
+import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import ReactionForm from '@/components/reaction/ReactionForm.vue'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+
+import { ChevronLeft } from 'lucide-vue-next'
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { useRouter } from 'vue-router'
@@ -24,14 +28,16 @@ const addReactionMutation = useMutation({
 </script>
 
 <template>
-  <div class="flex h-full flex-1 flex-col overflow-hidden">
-    <div class="flex min-h-14 items-center bg-background px-4 py-2"></div>
-    <Separator />
+  <ColumnHeader>
+    <Button @click="router.push({ name: 'reactions' })" variant="outline" class="sm:hidden">
+      <ChevronLeft class="mr-2 size-4" />
+      Back
+    </Button>
+  </ColumnHeader>
 
-    <ScrollArea class="flex-1">
-      <div class="flex max-w-[640px] flex-col gap-4 p-4">
-        <ReactionForm @submit="addReactionMutation.mutate" />
-      </div>
-    </ScrollArea>
-  </div>
+  <ColumnBody>
+    <ColumnBodyContainer small>
+      <ReactionForm @submit="addReactionMutation.mutate" />
+    </ColumnBodyContainer>
+  </ColumnBody>
 </template>
diff --git a/ui/src/components/ticket/TicketActionBar.vue b/ui/src/components/ticket/TicketActionBar.vue
index 49e33a0..112b365 100644
--- a/ui/src/components/ticket/TicketActionBar.vue
+++ b/ui/src/components/ticket/TicketActionBar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import Icon from '@/components/Icon.vue'
 import DeleteDialog from '@/components/common/DeleteDialog.vue'
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import TicketCloseDialog from '@/components/ticket/TicketCloseDialog.vue'
 import TicketUserSelect from '@/components/ticket/TicketUserSelect.vue'
 import { Button } from '@/components/ui/button'
@@ -12,7 +13,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
-import { Check, CircleDot, Repeat } from 'lucide-vue-next'
+import { Check, ChevronLeft, CircleDot, Repeat } from 'lucide-vue-next'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
@@ -49,7 +50,7 @@ const changeTypeMutation = useMutation({
     }),
   onSuccess: (data: Ticket) => {
     queryClient.invalidateQueries({ queryKey: ['tickets'] })
-    router.push({ name: 'tickets', params: { type: data.type, id: props.ticket.id } })
+    // router.push({ name: 'tickets', params: { type: data.type, id: props.ticket.id } })
   },
   onError: handleError
 })
@@ -74,74 +75,81 @@ const closeTicketDialogOpen = ref(false)
 </script>
 
 <template>
-  <div class="flex items-center justify-between bg-background p-2">
-    <div class="flex items-center gap-2">
-      <Tooltip>
-        <TooltipTrigger as-child>
-          <div>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <Button variant="outline" :disabled="!ticket">
-                  <Icon :name="ticket.expand.type.icon" class="mr-2 size-4" />
-                  {{ ticket.expand.type.singular }}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  v-for="type in otherTypes"
-                  :key="type.id"
-                  class="cursor-pointer"
-                  @click="changeTypeMutation.mutate(type.id)"
-                >
-                  <Icon :name="type.icon" class="mr-2 size-4" />
-                  Convert to {{ type.singular }}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>Change Type</TooltipContent>
-      </Tooltip>
-      <TicketCloseDialog v-model="closeTicketDialogOpen" :ticket="ticket" />
-      <Tooltip>
-        <TooltipTrigger as-child>
-          <div>
-            <DropdownMenu>
-              <DropdownMenuTrigger as-child>
-                <Button variant="outline" :disabled="!ticket">
-                  <CircleDot v-if="ticket.open" class="mr-2 h-4 w-4" />
-                  <Check v-else class="mr-2 h-4 w-4" />
-                  {{ ticket?.open ? 'Open' : 'Closed' }}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent>
-                <DropdownMenuItem
-                  v-if="ticket.open"
-                  class="cursor-pointer"
-                  @click="closeTicketDialogOpen = true"
-                >
-                  <Check class="mr-2 size-4" />
-                  Close Ticket
-                </DropdownMenuItem>
-                <DropdownMenuItem v-else class="cursor-pointer" @click="closeTicketMutation.mutate">
-                  <Repeat class="mr-2 size-4" />
-                  Reopen Ticket
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>Change Status</TooltipContent>
-      </Tooltip>
-      <Tooltip>
-        <TooltipTrigger as-child>
-          <div>
-            <TicketUserSelect :key="ticket.owner" :uID="ticket.owner" :ticket="ticket" />
-          </div>
-        </TooltipTrigger>
-        <TooltipContent>Change User</TooltipContent>
-      </Tooltip>
-    </div>
+  <ColumnHeader>
+    <Button
+      @click="router.push({ name: 'tickets', params: { type: ticket.type } })"
+      variant="outline"
+      class="sm:hidden"
+    >
+      <ChevronLeft class="mr-2 size-4" />
+      Back
+    </Button>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="outline" :disabled="!ticket">
+                <Icon :name="ticket.expand.type.icon" class="mr-2 size-4" />
+                {{ ticket.expand.type.singular }}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                v-for="type in otherTypes"
+                :key="type.id"
+                class="cursor-pointer"
+                @click="changeTypeMutation.mutate(type.id)"
+              >
+                <Icon :name="type.icon" class="mr-2 size-4" />
+                Convert to {{ type.singular }}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>Change Type</TooltipContent>
+    </Tooltip>
+    <TicketCloseDialog v-model="closeTicketDialogOpen" :ticket="ticket" />
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <div>
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="outline" :disabled="!ticket">
+                <CircleDot v-if="ticket.open" class="mr-2 h-4 w-4" />
+                <Check v-else class="mr-2 h-4 w-4" />
+                {{ ticket?.open ? 'Open' : 'Closed' }}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem
+                v-if="ticket.open"
+                class="cursor-pointer"
+                @click="closeTicketDialogOpen = true"
+              >
+                <Check class="mr-2 size-4" />
+                Close Ticket
+              </DropdownMenuItem>
+              <DropdownMenuItem v-else class="cursor-pointer" @click="closeTicketMutation.mutate">
+                <Repeat class="mr-2 size-4" />
+                Reopen Ticket
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>Change Status</TooltipContent>
+    </Tooltip>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <div>
+          <TicketUserSelect :key="ticket.owner" :uID="ticket.owner" :ticket="ticket" />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent>Change User</TooltipContent>
+    </Tooltip>
+    <div class="-mx-1 flex-1" />
     <DeleteDialog
       v-if="ticket"
       :collection="'tickets'"
@@ -151,5 +159,5 @@ const closeTicketDialogOpen = ref(false)
       :to="{ name: 'tickets' }"
       :queryKey="['tickets']"
     />
-  </div>
+  </ColumnHeader>
 </template>
diff --git a/ui/src/components/ticket/TicketCloseBar.vue b/ui/src/components/ticket/TicketCloseBar.vue
index ac52d33..6562a3e 100644
--- a/ui/src/components/ticket/TicketCloseBar.vue
+++ b/ui/src/components/ticket/TicketCloseBar.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 
@@ -38,7 +39,7 @@ const closeButtonDisabled = false // computed(() => !props.ticket.open || messag
 </script>
 
 <template>
-  <div class="flex items-center justify-between gap-2 bg-background p-2">
+  <ColumnHeader nowrap hideSeparator>
     <Input v-if="ticket.open" v-model="resolution" placeholder="Closing reason" />
     <div v-else class="flex-1">
       <p class="ml-2 text-gray-500">Closed: {{ ticket.resolution }}</p>
@@ -56,5 +57,5 @@ const closeButtonDisabled = false // computed(() => !props.ticket.open || messag
           : 'Reopen ' + props.ticket.expand.type.singular
       }}
     </Button>
-  </div>
+  </ColumnHeader>
 </template>
diff --git a/ui/src/components/ticket/TicketDisplay.vue b/ui/src/components/ticket/TicketDisplay.vue
index 9a6d2cd..b105e2f 100644
--- a/ui/src/components/ticket/TicketDisplay.vue
+++ b/ui/src/components/ticket/TicketDisplay.vue
@@ -2,6 +2,8 @@
 import TanView from '@/components/TanView.vue'
 import JSONSchemaFormFields from '@/components/form/JSONSchemaFormFields.vue'
 import DynamicMDEditor from '@/components/input/DynamicMDEditor.vue'
+import ColumnBody from '@/components/layout/ColumnBody.vue'
+import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
 import StatusIcon from '@/components/ticket/StatusIcon.vue'
 import TicketActionBar from '@/components/ticket/TicketActionBar.vue'
 import TicketCloseBar from '@/components/ticket/TicketCloseBar.vue'
@@ -15,14 +17,13 @@ import TicketTimeline from '@/components/ticket/timeline/TicketTimeline.vue'
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 import { Edit } from 'lucide-vue-next'
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import { pb } from '@/lib/pocketbase'
@@ -100,87 +101,97 @@ const updateDescription = (value: string) => (message.value = value)
 </script>
 
 <template>
-  <TanView :isError="isError" :isPending="isPending" :error="error" :value="ticket">
-    <div v-if="ticket" class="flex h-full flex-col">
-      <TicketActionBar :ticket="ticket" />
-      <Separator />
-      <div class="flex w-full max-w-7xl flex-1 flex-col overflow-hidden xl:m-auto xl:flex-row">
-        <div class="flex flex-1 flex-col gap-4 px-4 pt-4">
-          <TicketHeader :ticket="ticket" />
-          <Card class="relative p-4">
-            <Button v-if="!editMode" variant="outline" class="float-right h-8 gap-2" @click="edit">
-              <Edit class="h-3.5 w-3.5" />
-              <span>Edit</span>
-            </Button>
-            <DynamicMDEditor
-              :modelValue="ticket.description"
-              @update:modelValue="updateDescription"
-              v-model:edit="editMode"
-              autofocus
-              placeholder="Type a description..."
-              @save="editDescriptionMutation.mutate"
-              class="min-h-14"
-            />
-          </Card>
-          <Separator />
-          <Tabs default-value="timeline" class="flex flex-1 flex-col overflow-hidden">
-            <TabsList>
-              <TabsTrigger value="timeline">
-                Timeline
-                <Badge
-                  v-if="
-                    ticket.expand.timeline_via_ticket &&
-                    ticket.expand.timeline_via_ticket.length > 0
-                  "
-                  variant="outline"
-                  class="ml-2"
-                >
-                  {{
-                    ticket.expand.timeline_via_ticket ? ticket.expand.timeline_via_ticket.length : 0
-                  }}
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="tasks">
-                Tasks
-                <Badge
-                  v-if="ticket.expand.tasks_via_ticket && ticket.expand.tasks_via_ticket.length > 0"
-                  variant="outline"
-                  class="ml-2"
-                >
-                  {{ ticket.expand.tasks_via_ticket ? ticket.expand.tasks_via_ticket.length : 0 }}
-                  <StatusIcon :status="taskStatus" class="size-6" />
-                </Badge>
-              </TabsTrigger>
-              <TabsTrigger value="comments">
-                Comments
-                <Badge
-                  v-if="
-                    ticket.expand.comments_via_ticket &&
-                    ticket.expand.comments_via_ticket.length > 0
-                  "
-                  variant="outline"
-                  class="ml-2"
-                >
-                  {{
-                    ticket.expand.comments_via_ticket ? ticket.expand.comments_via_ticket.length : 0
-                  }}
-                </Badge>
-              </TabsTrigger>
-            </TabsList>
-            <TicketTab value="timeline">
-              <TicketTimeline :ticket="ticket" :timeline="ticket.expand.timeline_via_ticket" />
-            </TicketTab>
-            <TicketTab value="tasks">
-              <TicketTasks :ticket="ticket" :tasks="ticket.expand.tasks_via_ticket" />
-            </TicketTab>
-            <TicketTab value="comments">
-              <TicketComments :ticket="ticket" :comments="ticket.expand.comments_via_ticket" />
-            </TicketTab>
-          </Tabs>
-          <Separator class="xl:hidden" />
-        </div>
-        <ScrollArea>
-          <div class="flex flex-initial flex-col gap-4 p-4 xl:w-96">
+  <TanView :isError="isError" :isPending="isPending" :error="error">
+    <template v-if="ticket">
+      <TicketActionBar :ticket="ticket" class="shrink-0" />
+      <ColumnBody>
+        <ColumnBodyContainer class="flex-col gap-4 xl:flex-row">
+          <div class="flex flex-1 flex-col gap-4">
+            <TicketHeader :ticket="ticket" />
+            <Card class="relative p-4">
+              <Button
+                v-if="!editMode"
+                variant="outline"
+                class="float-right h-8 gap-2"
+                @click="edit"
+              >
+                <Edit class="h-3.5 w-3.5" />
+                <span>Edit</span>
+              </Button>
+              <DynamicMDEditor
+                :modelValue="ticket.description"
+                @update:modelValue="updateDescription"
+                v-model:edit="editMode"
+                autofocus
+                placeholder="Type a description..."
+                @save="editDescriptionMutation.mutate"
+                class="min-h-14"
+              />
+            </Card>
+            <Separator />
+            <Tabs default-value="timeline" class="flex flex-1 flex-col">
+              <TabsList>
+                <TabsTrigger value="timeline">
+                  Timeline
+                  <Badge
+                    v-if="
+                      ticket.expand.timeline_via_ticket &&
+                      ticket.expand.timeline_via_ticket.length > 0
+                    "
+                    variant="outline"
+                    class="ml-2 hidden sm:inline-flex"
+                  >
+                    {{
+                      ticket.expand.timeline_via_ticket
+                        ? ticket.expand.timeline_via_ticket.length
+                        : 0
+                    }}
+                  </Badge>
+                </TabsTrigger>
+                <TabsTrigger value="tasks">
+                  Tasks
+                  <Badge
+                    v-if="
+                      ticket.expand.tasks_via_ticket && ticket.expand.tasks_via_ticket.length > 0
+                    "
+                    variant="outline"
+                    class="ml-2 hidden sm:inline-flex"
+                  >
+                    {{ ticket.expand.tasks_via_ticket ? ticket.expand.tasks_via_ticket.length : 0 }}
+                    <StatusIcon :status="taskStatus" class="size-6" />
+                  </Badge>
+                </TabsTrigger>
+                <TabsTrigger value="comments">
+                  Comments
+                  <Badge
+                    v-if="
+                      ticket.expand.comments_via_ticket &&
+                      ticket.expand.comments_via_ticket.length > 0
+                    "
+                    variant="outline"
+                    class="ml-2 hidden sm:inline-flex"
+                  >
+                    {{
+                      ticket.expand.comments_via_ticket
+                        ? ticket.expand.comments_via_ticket.length
+                        : 0
+                    }}
+                  </Badge>
+                </TabsTrigger>
+              </TabsList>
+              <TicketTab value="timeline">
+                <TicketTimeline :ticket="ticket" :timeline="ticket.expand.timeline_via_ticket" />
+              </TicketTab>
+              <TicketTab value="tasks">
+                <TicketTasks :ticket="ticket" :tasks="ticket.expand.tasks_via_ticket" />
+              </TicketTab>
+              <TicketTab value="comments">
+                <TicketComments :ticket="ticket" :comments="ticket.expand.comments_via_ticket" />
+              </TicketTab>
+            </Tabs>
+            <Separator class="xl:hidden" />
+          </div>
+          <div class="flex flex-col gap-4 xl:w-96 xl:flex-initial">
             <div>
               <div class="flex h-10 flex-row items-center justify-between text-muted-foreground">
                 <span class="text-sm font-semibold"> Details </span>
@@ -196,10 +207,10 @@ const updateDescription = (value: string) => (message.value = value)
             <Separator />
             <TicketFiles :ticket="ticket" :files="ticket.expand.files_via_ticket" />
           </div>
-        </ScrollArea>
-      </div>
+        </ColumnBodyContainer>
+      </ColumnBody>
       <Separator />
-      <TicketCloseBar :ticket="ticket" />
-    </div>
+      <TicketCloseBar :ticket="ticket" class="shrink-0" />
+    </template>
   </TanView>
 </template>
diff --git a/ui/src/components/ticket/TicketHeader.vue b/ui/src/components/ticket/TicketHeader.vue
index 0bc6f84..df030bf 100644
--- a/ui/src/components/ticket/TicketHeader.vue
+++ b/ui/src/components/ticket/TicketHeader.vue
@@ -38,13 +38,13 @@ const updateName = (value: string) => {
     <DynamicInput :modelValue="ticket.name" @update:modelValue="updateName" class="-mx-1" />
   </span>
 
-  <div class="flex flex-row space-x-2 px-1 text-xs">
-    <div class="flex items-center gap-1 text-muted-foreground">
+  <div class="flex flex-col items-stretch gap-1 text-xs text-muted-foreground md:h-4 md:flex-row">
+    <div>
       Created:
       {{ format(new Date(ticket.created), 'PPpp') }}
     </div>
-    <Separator orientation="vertical" />
-    <div class="flex items-center gap-1 text-muted-foreground">
+    <Separator orientation="vertical" class="hidden md:block" />
+    <div>
       Updated:
       {{ format(new Date(ticket.updated), 'PPpp') }}
     </div>
diff --git a/ui/src/components/ticket/TicketList.vue b/ui/src/components/ticket/TicketList.vue
index 10dd8fb..c5c3131 100644
--- a/ui/src/components/ticket/TicketList.vue
+++ b/ui/src/components/ticket/TicketList.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import TicketListList from '@/components/ticket/TicketListList.vue'
 import TicketNewDialog from '@/components/ticket/TicketNewDialog.vue'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
@@ -14,7 +15,6 @@ import {
   PaginationNext,
   PaginationPrev
 } from '@/components/ui/pagination'
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
@@ -106,7 +106,7 @@ watch(
     if (!route.params.id && ticketItems.value && ticketItems.value.items.length > 0) {
       router.push({
         name: 'tickets',
-        params: { type: props.selectedType.id, id: ticketItems.value.items[0].id }
+        params: { type: props.selectedType.id }
       })
     }
   }
@@ -121,90 +121,81 @@ watch([tab, props.selectedType, page, perPage], () => refetch())
 </script>
 
 <template>
-  <div class="flex h-screen flex-col">
-    <div class="flex items-center bg-background px-4 py-2">
-      <h1 class="text-xl font-bold">
-        {{ selectedType?.plural }}
-      </h1>
-      <div class="ml-auto">
-        <TicketNewDialog :selectedType="selectedType" />
-      </div>
+  <ColumnHeader :title="selectedType?.plural">
+    <div class="ml-auto">
+      <TicketNewDialog :selectedType="selectedType" />
+    </div>
+  </ColumnHeader>
+  <Tabs v-model="tab" class="flex flex-1 flex-col overflow-hidden">
+    <div class="flex items-center justify-between px-2 pt-2">
+      <TabsList>
+        <TabsTrigger value="all">All</TabsTrigger>
+        <TabsTrigger value="open">Open</TabsTrigger>
+        <TabsTrigger value="closed">Closed</TabsTrigger>
+      </TabsList>
+      <!-- Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
+        <ListFilter class="h-3.5 w-3.5" />
+        <span class="sr-only sm:not-sr-only">Filter</span>
+      </Button-->
+    </div>
+    <div class="p-2">
+      <form>
+        <div class="relative flex flex-row items-center">
+          <Input v-model="searchValue" placeholder="Search" @keydown.enter.prevent class="pl-8" />
+          <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2">
+            <Search class="size-4 text-muted-foreground" />
+          </span>
+        </div>
+      </form>
     </div>
     <Separator />
-    <Tabs v-model="tab" class="flex flex-1 flex-col overflow-hidden">
-      <div class="flex items-center justify-between px-4 pt-2">
-        <TabsList>
-          <TabsTrigger value="all">All</TabsTrigger>
-          <TabsTrigger value="open">Open</TabsTrigger>
-          <TabsTrigger value="closed">Closed</TabsTrigger>
-        </TabsList>
-        <!-- Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
-          <ListFilter class="h-3.5 w-3.5" />
-          <span class="sr-only sm:not-sr-only">Filter</span>
-        </Button-->
-      </div>
-      <div class="px-4 py-2">
-        <form>
-          <div class="relative flex flex-row items-center">
-            <Input v-model="searchValue" placeholder="Search" @keydown.enter.prevent class="pl-8" />
-            <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2">
-              <Search class="size-4 text-muted-foreground" />
-            </span>
-          </div>
-        </form>
-      </div>
-      <Separator />
-      <div v-if="isPending" class="flex h-full w-full items-center justify-center">
-        <LoaderCircle class="h-16 w-16 animate-spin text-primary" />
-      </div>
-      <Alert v-else-if="isError" variant="destructive" class="mb-4 h-screen w-screen">
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>{{ error }}</AlertDescription>
-      </Alert>
-      <ScrollArea v-else-if="ticketItems" class="flex-1">
-        <TicketListList :tickets="ticketItems.items" />
-      </ScrollArea>
-      <Separator />
-      <div class="my-2 flex items-center justify-center">
-        <span class="text-xs text-muted-foreground">
-          {{ ticketItems ? ticketItems.items.length : '?' }} of
-          {{ ticketItems ? ticketItems.totalItems : '?' }} tickets
-        </span>
-      </div>
-      <div class="mb-4 flex items-center justify-center">
-        <Pagination
-          v-slot="{ page }"
-          :total="ticketItems ? ticketItems.totalItems : 0"
-          :itemsPerPage="perPage"
-          :sibling-count="0"
-          :default-page="1"
-          @update:page="page = $event"
-        >
-          <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-            <PaginationFirst />
-            <PaginationPrev />
+    <div v-if="isPending" class="flex h-full w-full items-center justify-center">
+      <LoaderCircle class="h-16 w-16 animate-spin text-primary" />
+    </div>
+    <Alert v-else-if="isError" variant="destructive" class="mb-2 h-screen w-screen">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>{{ error }}</AlertDescription>
+    </Alert>
+    <div v-else-if="ticketItems" class="flex-1 overflow-y-auto overflow-x-hidden">
+      <TicketListList :tickets="ticketItems.items" />
+    </div>
+    <Separator />
+    <div class="my-2 flex items-center justify-center">
+      <span class="text-xs text-muted-foreground">
+        {{ ticketItems ? ticketItems.items.length : '?' }} of
+        {{ ticketItems ? ticketItems.totalItems : '?' }} tickets
+      </span>
+    </div>
+    <div class="mb-2 flex items-center justify-center">
+      <Pagination
+        v-slot="{ page }"
+        :total="ticketItems ? ticketItems.totalItems : 0"
+        :itemsPerPage="perPage"
+        :sibling-count="0"
+        :default-page="1"
+        @update:page="page = $event"
+      >
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst />
+          <PaginationPrev />
 
-            <template v-for="(item, index) in items">
-              <PaginationListItem
-                v-if="item.type === 'page'"
-                :key="index"
-                :value="item.value"
-                as-child
-              >
-                <Button
-                  class="h-10 w-10 p-0"
-                  :variant="item.value === page ? 'default' : 'outline'"
-                >
-                  {{ item.value }}
-                </Button>
-              </PaginationListItem>
-              <PaginationEllipsis v-else :key="item.type" :index="index" />
-            </template>
-            <PaginationNext />
-            <PaginationLast />
-          </PaginationList>
-        </Pagination>
-      </div>
-    </Tabs>
-  </div>
+          <template v-for="(item, index) in items">
+            <PaginationListItem
+              v-if="item.type === 'page'"
+              :key="index"
+              :value="item.value"
+              as-child
+            >
+              <Button class="h-10 w-10 p-0" :variant="item.value === page ? 'default' : 'outline'">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+          <PaginationNext />
+          <PaginationLast />
+        </PaginationList>
+      </Pagination>
+    </div>
+  </Tabs>
 </template>
diff --git a/ui/src/components/ticket/TicketListList.vue b/ui/src/components/ticket/TicketListList.vue
index 0395d53..7fdb045 100644
--- a/ui/src/components/ticket/TicketListList.vue
+++ b/ui/src/components/ticket/TicketListList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import ResourceListElement from '@/components/common/ResourceListElement.vue'
+import ResourceListElement from '@/components/layout/ResourceListElement.vue'
 
 import { useRoute } from 'vue-router'
 
@@ -13,7 +13,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="mt-2 flex w-full flex-1 flex-col gap-2 p-4 pt-0">
+  <div class="mt-2 flex w-full flex-1 flex-col gap-2 p-2 pt-0">
     <ResourceListElement
       v-for="item of tickets"
       :key="item.id"
diff --git a/ui/src/components/ticket/TicketTab.vue b/ui/src/components/ticket/TicketTab.vue
index 62ab85a..488deac 100644
--- a/ui/src/components/ticket/TicketTab.vue
+++ b/ui/src/components/ticket/TicketTab.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import { TabsContent } from '@/components/ui/tabs'
 
@@ -12,10 +11,8 @@ defineProps<{
   <TabsContent :value="value" class="flex-1 overflow-hidden">
     <div class="flex h-full flex-col overflow-hidden">
       <Separator class="mt-2" />
-      <ScrollArea class="flex-1">
-        <slot />
-        <div class="h-4" />
-      </ScrollArea>
+      <slot />
+      <div class="h-4" />
     </div>
   </TabsContent>
 </template>
diff --git a/ui/src/components/ticket/link/TicketLinks.vue b/ui/src/components/ticket/link/TicketLinks.vue
index 4134b31..27ed95f 100644
--- a/ui/src/components/ticket/link/TicketLinks.vue
+++ b/ui/src/components/ticket/link/TicketLinks.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import DeleteDialog from '@/components/common/DeleteDialog.vue'
-import PanelListElement from '@/components/common/PanelListElement.vue'
+import PanelListElement from '@/components/layout/PanelListElement.vue'
 import TicketPanel from '@/components/ticket/TicketPanel.vue'
 import LinkAddDialog from '@/components/ticket/link/LinkAddDialog.vue'
 import { Button } from '@/components/ui/button'
@@ -28,7 +28,12 @@ const dialogOpen = ref(false)
     >
       No links added yet.
     </div>
-    <PanelListElement v-for="link in links" :key="link.id" :title="link.url" class="pr-1">
+    <PanelListElement
+      v-for="link in links"
+      :key="link.id"
+      :title="link.url"
+      class="flex-row items-center pr-1"
+    >
       <a :href="link.url" target="_blank" class="flex flex-1 items-center overflow-hidden">
         <span class="mr-2 text-blue-500 underline">
           {{ link.name }}
diff --git a/ui/src/components/ticket/task/TicketTasks.vue b/ui/src/components/ticket/task/TicketTasks.vue
index 2528552..c146517 100644
--- a/ui/src/components/ticket/task/TicketTasks.vue
+++ b/ui/src/components/ticket/task/TicketTasks.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import DeleteDialog from '@/components/common/DeleteDialog.vue'
-import PanelListElement from '@/components/common/PanelListElement.vue'
 import UserSelect from '@/components/common/UserSelect.vue'
 import DynamicInput from '@/components/input/DynamicInput.vue'
+import PanelListElement from '@/components/layout/PanelListElement.vue'
 import TaskAddDialog from '@/components/ticket/task/TaskAddDialog.vue'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
@@ -67,12 +67,14 @@ const updateTaskName = (id: string, name: string) => updateTaskNameMutation.muta
     </Card>
     <Card v-else>
       <PanelListElement v-for="task in tasks" :key="task.id" class="pr-1">
-        <Checkbox :checked="!task.open" class="mr-2" @click="check(task)" />
-        <DynamicInput
-          :modelValue="task.name"
-          @update:modelValue="updateTaskName(task.id, $event)"
-          class="mr-2 flex-1"
-        />
+        <div class="flex flex-row items-center">
+          <Checkbox :checked="!task.open" class="mr-2" @click="check(task)" />
+          <DynamicInput
+            :modelValue="task.name"
+            @update:modelValue="updateTaskName(task.id, $event)"
+            class="mr-2 flex-1"
+          />
+        </div>
         <div class="ml-auto flex items-center">
           <UserSelect v-if="!task.expand.owner" @update:modelValue="update(task.id, $event)">
             <Button variant="outline" role="combobox" class="h-8">
diff --git a/ui/src/components/ticket/timeline/TicketTimelineItem.vue b/ui/src/components/ticket/timeline/TicketTimelineItem.vue
index 2cec5fa..975fadf 100644
--- a/ui/src/components/ticket/timeline/TicketTimelineItem.vue
+++ b/ui/src/components/ticket/timeline/TicketTimelineItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import PanelListElement from '@/components/common/PanelListElement.vue'
 import DynamicMDEditor from '@/components/input/DynamicMDEditor.vue'
+import PanelListElement from '@/components/layout/PanelListElement.vue'
 import { Button } from '@/components/ui/button'
 import {
   Dialog,
diff --git a/ui/src/components/ui/accordion/Accordion.vue b/ui/src/components/ui/accordion/Accordion.vue
deleted file mode 100644
index 8f96e3a..0000000
--- a/ui/src/components/ui/accordion/Accordion.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import {
-  AccordionRoot,
-  type AccordionRootEmits,
-  type AccordionRootProps,
-  useForwardPropsEmits
-} from 'radix-vue'
-
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AccordionRoot v-bind="forwarded">
-    <slot />
-  </AccordionRoot>
-</template>
diff --git a/ui/src/components/ui/accordion/AccordionContent.vue b/ui/src/components/ui/accordion/AccordionContent.vue
deleted file mode 100644
index 73560b5..0000000
--- a/ui/src/components/ui/accordion/AccordionContent.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionContent
-    v-bind="delegatedProps"
-    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-  >
-    <div :class="cn('pb-4 pt-0', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>
diff --git a/ui/src/components/ui/accordion/AccordionItem.vue b/ui/src/components/ui/accordion/AccordionItem.vue
deleted file mode 100644
index a12a461..0000000
--- a/ui/src/components/ui/accordion/AccordionItem.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
-    <slot />
-  </AccordionItem>
-</template>
diff --git a/ui/src/components/ui/accordion/AccordionTrigger.vue b/ui/src/components/ui/accordion/AccordionTrigger.vue
deleted file mode 100644
index f43c2c8..0000000
--- a/ui/src/components/ui/accordion/AccordionTrigger.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-          props.class
-        )
-      "
-    >
-      <slot />
-      <!-- slot name="icon">
-        <ChevronDown class="h-4 w-4 shrink-0 transition-transform duration-200" />
-      </slot-->
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>
diff --git a/ui/src/components/ui/accordion/index.ts b/ui/src/components/ui/accordion/index.ts
deleted file mode 100644
index 9340ac0..0000000
--- a/ui/src/components/ui/accordion/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/ui/src/components/ui/avatar/Avatar.vue b/ui/src/components/ui/avatar/Avatar.vue
deleted file mode 100644
index 2e6281f..0000000
--- a/ui/src/components/ui/avatar/Avatar.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { type AvatarVariants, avatarVariant } from '.'
-import { AvatarRoot } from 'radix-vue'
-import type { HTMLAttributes } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = withDefaults(
-  defineProps<{
-    class?: HTMLAttributes['class']
-    size?: AvatarVariants['size']
-    shape?: AvatarVariants['shape']
-  }>(),
-  {
-    size: 'sm',
-    shape: 'circle'
-  }
-)
-</script>
-
-<template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-    <slot />
-  </AvatarRoot>
-</template>
diff --git a/ui/src/components/ui/avatar/AvatarFallback.vue b/ui/src/components/ui/avatar/AvatarFallback.vue
deleted file mode 100644
index a671a21..0000000
--- a/ui/src/components/ui/avatar/AvatarFallback.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
-
-const props = defineProps<AvatarFallbackProps>()
-</script>
-
-<template>
-  <AvatarFallback v-bind="props">
-    <slot />
-  </AvatarFallback>
-</template>
diff --git a/ui/src/components/ui/avatar/AvatarImage.vue b/ui/src/components/ui/avatar/AvatarImage.vue
deleted file mode 100644
index 43499fa..0000000
--- a/ui/src/components/ui/avatar/AvatarImage.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'radix-vue'
-
-const props = defineProps<AvatarImageProps>()
-</script>
-
-<template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
-</template>
diff --git a/ui/src/components/ui/avatar/index.ts b/ui/src/components/ui/avatar/index.ts
deleted file mode 100644
index 69f0162..0000000
--- a/ui/src/components/ui/avatar/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-
-export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-  {
-    variants: {
-      size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl'
-      },
-      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md'
-      }
-    }
-  }
-)
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/ui/src/components/ui/calendar/Calendar.vue b/ui/src/components/ui/calendar/Calendar.vue
deleted file mode 100644
index 390c688..0000000
--- a/ui/src/components/ui/calendar/Calendar.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts" setup>
-import {
-  CalendarCell,
-  CalendarCellTrigger,
-  CalendarGrid,
-  CalendarGridBody,
-  CalendarGridHead,
-  CalendarGridRow,
-  CalendarHeadCell,
-  CalendarHeader,
-  CalendarHeading,
-  CalendarNextButton,
-  CalendarPrevButton
-} from '.'
-import {
-  CalendarRoot,
-  type CalendarRootEmits,
-  type CalendarRootProps,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<CalendarRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <CalendarRoot v-slot="{ grid, weekDays }" :class="cn('p-3', props.class)" v-bind="forwarded">
-    <CalendarHeader>
-      <CalendarPrevButton />
-      <CalendarHeading />
-      <CalendarNextButton />
-    </CalendarHeader>
-
-    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
-      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
-        <CalendarGridHead>
-          <CalendarGridRow>
-            <CalendarHeadCell v-for="day in weekDays" :key="day">
-              {{ day }}
-            </CalendarHeadCell>
-          </CalendarGridRow>
-        </CalendarGridHead>
-        <CalendarGridBody>
-          <CalendarGridRow
-            v-for="(weekDates, index) in month.rows"
-            :key="`weekDate-${index}`"
-            class="mt-2 w-full"
-          >
-            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
-              <CalendarCellTrigger :day="weekDate" :month="month.value" />
-            </CalendarCell>
-          </CalendarGridRow>
-        </CalendarGridBody>
-      </CalendarGrid>
-    </div>
-  </CalendarRoot>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarCell.vue b/ui/src/components/ui/calendar/CalendarCell.vue
deleted file mode 100644
index 761b18f..0000000
--- a/ui/src/components/ui/calendar/CalendarCell.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts" setup>
-import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarCell
-    :class="
-      cn(
-        'relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50',
-        props.class
-      )
-    "
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCell>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarCellTrigger.vue b/ui/src/components/ui/calendar/CalendarCellTrigger.vue
deleted file mode 100644
index 00d44f0..0000000
--- a/ui/src/components/ui/calendar/CalendarCellTrigger.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { buttonVariants } from '@/components/ui/button'
-
-import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarCellTrigger
-    :class="
-      cn(
-        buttonVariants({ variant: 'ghost' }),
-        'h-9 w-9 p-0 font-normal',
-        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-        // Selected
-        'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-        // Disabled
-        'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-        // Unavailable
-        'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-        // Outside months
-        'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
-        props.class
-      )
-    "
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCellTrigger>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarGrid.vue b/ui/src/components/ui/calendar/CalendarGrid.vue
deleted file mode 100644
index 385cb31..0000000
--- a/ui/src/components/ui/calendar/CalendarGrid.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarGrid
-    :class="cn('w-full border-collapse space-y-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGrid>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarGridBody.vue b/ui/src/components/ui/calendar/CalendarGridBody.vue
deleted file mode 100644
index 23d71ce..0000000
--- a/ui/src/components/ui/calendar/CalendarGridBody.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
-
-const props = defineProps<CalendarGridBodyProps>()
-</script>
-
-<template>
-  <CalendarGridBody v-bind="props">
-    <slot />
-  </CalendarGridBody>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarGridHead.vue b/ui/src/components/ui/calendar/CalendarGridHead.vue
deleted file mode 100644
index f8101a3..0000000
--- a/ui/src/components/ui/calendar/CalendarGridHead.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
-
-const props = defineProps<CalendarGridHeadProps>()
-</script>
-
-<template>
-  <CalendarGridHead v-bind="props">
-    <slot />
-  </CalendarGridHead>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarGridRow.vue b/ui/src/components/ui/calendar/CalendarGridRow.vue
deleted file mode 100644
index 5dd576a..0000000
--- a/ui/src/components/ui/calendar/CalendarGridRow.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
-    <slot />
-  </CalendarGridRow>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarHeadCell.vue b/ui/src/components/ui/calendar/CalendarHeadCell.vue
deleted file mode 100644
index 7d68ae8..0000000
--- a/ui/src/components/ui/calendar/CalendarHeadCell.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeadCell
-    :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarHeadCell>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarHeader.vue b/ui/src/components/ui/calendar/CalendarHeader.vue
deleted file mode 100644
index 86a3227..0000000
--- a/ui/src/components/ui/calendar/CalendarHeader.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeader
-    :class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarHeader>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarHeading.vue b/ui/src/components/ui/calendar/CalendarHeading.vue
deleted file mode 100644
index bfe4948..0000000
--- a/ui/src/components/ui/calendar/CalendarHeading.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarHeading
-    v-slot="{ headingValue }"
-    :class="cn('text-sm font-medium', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot :heading-value>
-      {{ headingValue }}
-    </slot>
-  </CalendarHeading>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarNextButton.vue b/ui/src/components/ui/calendar/CalendarNextButton.vue
deleted file mode 100644
index 66aeb2e..0000000
--- a/ui/src/components/ui/calendar/CalendarNextButton.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import { buttonVariants } from '@/components/ui/button'
-
-import { ChevronRight } from 'lucide-vue-next'
-
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarNext
-    :class="
-      cn(
-        buttonVariants({ variant: 'outline' }),
-        'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        props.class
-      )
-    "
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <ChevronRight class="h-4 w-4" />
-    </slot>
-  </CalendarNext>
-</template>
diff --git a/ui/src/components/ui/calendar/CalendarPrevButton.vue b/ui/src/components/ui/calendar/CalendarPrevButton.vue
deleted file mode 100644
index d191856..0000000
--- a/ui/src/components/ui/calendar/CalendarPrevButton.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import { buttonVariants } from '@/components/ui/button'
-
-import { ChevronLeft } from 'lucide-vue-next'
-
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <CalendarPrev
-    :class="
-      cn(
-        buttonVariants({ variant: 'outline' }),
-        'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        props.class
-      )
-    "
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <ChevronLeft class="h-4 w-4" />
-    </slot>
-  </CalendarPrev>
-</template>
diff --git a/ui/src/components/ui/calendar/index.ts b/ui/src/components/ui/calendar/index.ts
deleted file mode 100644
index 5239a1b..0000000
--- a/ui/src/components/ui/calendar/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { default as Calendar } from './Calendar.vue'
-export { default as CalendarCell } from './CalendarCell.vue'
-export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
-export { default as CalendarGrid } from './CalendarGrid.vue'
-export { default as CalendarGridBody } from './CalendarGridBody.vue'
-export { default as CalendarGridHead } from './CalendarGridHead.vue'
-export { default as CalendarGridRow } from './CalendarGridRow.vue'
-export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
-export { default as CalendarHeader } from './CalendarHeader.vue'
-export { default as CalendarHeading } from './CalendarHeading.vue'
-export { default as CalendarNextButton } from './CalendarNextButton.vue'
-export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/ui/src/components/ui/collapsible/Collapsible.vue b/ui/src/components/ui/collapsible/Collapsible.vue
deleted file mode 100644
index 52bff5f..0000000
--- a/ui/src/components/ui/collapsible/Collapsible.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleRootProps>()
-const emits = defineEmits<CollapsibleRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
-    <slot :open="open" />
-  </CollapsibleRoot>
-</template>
diff --git a/ui/src/components/ui/collapsible/CollapsibleContent.vue b/ui/src/components/ui/collapsible/CollapsibleContent.vue
deleted file mode 100644
index 92acb77..0000000
--- a/ui/src/components/ui/collapsible/CollapsibleContent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleContentProps>()
-</script>
-
-<template>
-  <CollapsibleContent
-    v-bind="props"
-    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
-  >
-    <slot />
-  </CollapsibleContent>
-</template>
diff --git a/ui/src/components/ui/collapsible/CollapsibleTrigger.vue b/ui/src/components/ui/collapsible/CollapsibleTrigger.vue
deleted file mode 100644
index 4a43463..0000000
--- a/ui/src/components/ui/collapsible/CollapsibleTrigger.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
-
-const props = defineProps<CollapsibleTriggerProps>()
-</script>
-
-<template>
-  <CollapsibleTrigger v-bind="props">
-    <slot />
-  </CollapsibleTrigger>
-</template>
diff --git a/ui/src/components/ui/collapsible/index.ts b/ui/src/components/ui/collapsible/index.ts
deleted file mode 100644
index 4930f4c..0000000
--- a/ui/src/components/ui/collapsible/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
-export { default as CollapsibleContent } from './CollapsibleContent.vue'
diff --git a/ui/src/components/ui/resizable/ResizableHandle.vue b/ui/src/components/ui/resizable/ResizableHandle.vue
deleted file mode 100644
index 531fa36..0000000
--- a/ui/src/components/ui/resizable/ResizableHandle.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import { GripVertical } from 'lucide-vue-next'
-
-import {
-  SplitterResizeHandle,
-  type SplitterResizeHandleEmits,
-  type SplitterResizeHandleProps,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<
-  SplitterResizeHandleProps & { class?: HTMLAttributes['class']; withHandle?: boolean }
->()
-const emits = defineEmits<SplitterResizeHandleEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SplitterResizeHandle
-    v-bind="forwarded"
-    :class="
-      cn(
-        'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]>div]:rotate-90 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0',
-        props.class
-      )
-    "
-  >
-    <template v-if="props.withHandle">
-      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical class="h-2.5 w-2.5" />
-      </div>
-    </template>
-  </SplitterResizeHandle>
-</template>
diff --git a/ui/src/components/ui/resizable/ResizablePanelGroup.vue b/ui/src/components/ui/resizable/ResizablePanelGroup.vue
deleted file mode 100644
index 331b47d..0000000
--- a/ui/src/components/ui/resizable/ResizablePanelGroup.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import {
-  SplitterGroup,
-  type SplitterGroupEmits,
-  type SplitterGroupProps,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<SplitterGroupEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SplitterGroup
-    v-bind="forwarded"
-    :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)"
-  >
-    <slot />
-  </SplitterGroup>
-</template>
diff --git a/ui/src/components/ui/resizable/index.ts b/ui/src/components/ui/resizable/index.ts
deleted file mode 100644
index 22a0a8a..0000000
--- a/ui/src/components/ui/resizable/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
-export { default as ResizableHandle } from './ResizableHandle.vue'
-export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/ui/src/components/ui/scroll-area/ScrollArea.vue b/ui/src/components/ui/scroll-area/ScrollArea.vue
deleted file mode 100644
index 91ed804..0000000
--- a/ui/src/components/ui/scroll-area/ScrollArea.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import ScrollBar from './ScrollBar.vue'
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  type ScrollAreaRootProps,
-  ScrollAreaViewport
-} from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
-      <slot />
-    </ScrollAreaViewport>
-    <ScrollBar />
-    <ScrollAreaCorner />
-  </ScrollAreaRoot>
-</template>
diff --git a/ui/src/components/ui/scroll-area/ScrollBar.vue b/ui/src/components/ui/scroll-area/ScrollBar.vue
deleted file mode 100644
index 8772d50..0000000
--- a/ui/src/components/ui/scroll-area/ScrollBar.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = withDefaults(
-  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    orientation: 'vertical'
-  }
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <ScrollAreaScrollbar
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'flex touch-none select-none transition-colors',
-        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
-        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
-        props.class
-      )
-    "
-  >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaScrollbar>
-</template>
diff --git a/ui/src/components/ui/scroll-area/index.ts b/ui/src/components/ui/scroll-area/index.ts
deleted file mode 100644
index 2bd4fae..0000000
--- a/ui/src/components/ui/scroll-area/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ScrollArea } from './ScrollArea.vue'
-export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/ui/src/components/ui/switch/Switch.vue b/ui/src/components/ui/switch/Switch.vue
deleted file mode 100644
index 85e99ba..0000000
--- a/ui/src/components/ui/switch/Switch.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import {
-  SwitchRoot,
-  type SwitchRootEmits,
-  type SwitchRootProps,
-  SwitchThumb,
-  useForwardPropsEmits
-} from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
-
-import { cn } from '@/lib/utils'
-
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<SwitchRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <SwitchRoot
-    v-bind="forwarded"
-    :class="
-      cn(
-        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        props.class
-      )
-    "
-  >
-    <SwitchThumb
-      :class="
-        cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
-        )
-      "
-    />
-  </SwitchRoot>
-</template>
diff --git a/ui/src/components/ui/switch/index.ts b/ui/src/components/ui/switch/index.ts
deleted file mode 100644
index 87b4b17..0000000
--- a/ui/src/components/ui/switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Switch } from './Switch.vue'
diff --git a/ui/src/views/DashboardView.vue b/ui/src/views/DashboardView.vue
index eee93c4..07be9e6 100644
--- a/ui/src/views/DashboardView.vue
+++ b/ui/src/views/DashboardView.vue
@@ -3,10 +3,11 @@ import OpenTasks from '@/components/dashboard/OpenTasks.vue'
 import OpenTickets from '@/components/dashboard/OpenTickets.vue'
 import TicketOverTime from '@/components/dashboard/TicketOverTime.vue'
 import TicketTypes from '@/components/dashboard/TicketTypes.vue'
+import ColumnBody from '@/components/layout/ColumnBody.vue'
+import ColumnBodyContainer from '@/components/layout/ColumnBodyContainer.vue'
+import ColumnHeader from '@/components/layout/ColumnHeader.vue'
 import TwoColumn from '@/components/layout/TwoColumn.vue'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Separator } from '@/components/ui/separator'
 
 import { ExternalLink } from 'lucide-vue-next'
 
@@ -46,96 +47,91 @@ onMounted(() => {
 
 <template>
   <TwoColumn>
-    <div class="flex h-screen flex-1 flex-col">
-      <div class="flex h-14 min-h-14 items-center bg-background px-4 py-2">
-        <h1 class="text-xl font-bold">Dashboard</h1>
-      </div>
-      <Separator class="shrink-0" />
-      <ScrollArea>
-        <div
-          class="m-auto grid max-w-7xl grid-cols-1 grid-rows-[100px_100px_100px_100px] gap-4 p-4 md:grid-cols-2 md:grid-rows-[100px_100px] xl:grid-cols-4 xl:grid-rows-[100px]"
-        >
-          <Card>
-            <CardHeader>
-              <CardTitle>{{ count('tasks') }}</CardTitle>
-              <CardDescription>Tasks</CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>{{ count('tickets') }}</CardTitle>
-              <CardDescription>Tickets</CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle>{{ count('users') }}</CardTitle>
-              <CardDescription>Users</CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle></CardTitle>
-              <CardDescription></CardDescription>
-            </CardHeader>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle> Catalyst</CardTitle>
-            </CardHeader>
-            <CardContent class="flex flex-1 flex-col gap-1">
-              <a
-                href="https://catalyst-soar.com/docs/category/catalyst-handbook"
-                target="_blank"
-                class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
-              >
-                Open Catalyst Handbook
-                <ExternalLink class="ml-2 h-4 w-4" />
-              </a>
-              <a
-                href="/_/"
-                target="_blank"
-                class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
-              >
-                Open Admin Interface
-                <ExternalLink class="ml-2 h-4 w-4" />
-              </a>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader>
-              <CardTitle> Tickets by Type</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <TicketTypes />
-            </CardContent>
-          </Card>
-          <Card class="xl:col-span-2">
-            <CardHeader>
-              <CardTitle>Tickets Per Week</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <TicketOverTime />
-            </CardContent>
-          </Card>
-          <Card class="xl:col-span-2">
-            <CardHeader>
-              <CardTitle>Your Open Tickets</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <OpenTickets />
-            </CardContent>
-          </Card>
-          <Card class="xl:col-span-2">
-            <CardHeader>
-              <CardTitle>Your Open Tasks</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <OpenTasks />
-            </CardContent>
-          </Card>
-        </div>
-      </ScrollArea>
-    </div>
+    <ColumnHeader title="Dashboard" />
+    <ColumnBody>
+      <ColumnBodyContainer
+        class="grid grid-cols-1 grid-rows-[100px_100px_100px_100px] md:grid-cols-2 md:grid-rows-[100px_100px] xl:grid-cols-4 xl:grid-rows-[100px]"
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle>{{ count('tasks') }}</CardTitle>
+            <CardDescription>Tasks</CardDescription>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>{{ count('tickets') }}</CardTitle>
+            <CardDescription>Tickets</CardDescription>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>{{ count('users') }}</CardTitle>
+            <CardDescription>Users</CardDescription>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>{{ count('reactions') }}</CardTitle>
+            <CardDescription>Reactions</CardDescription>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle> Catalyst</CardTitle>
+          </CardHeader>
+          <CardContent class="flex flex-1 flex-col gap-1">
+            <a
+              href="https://catalyst.security-brewery.com/docs/category/catalyst-handbook"
+              target="_blank"
+              class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
+            >
+              Open Catalyst Handbook
+              <ExternalLink class="ml-2 h-4 w-4" />
+            </a>
+            <a
+              href="/_/"
+              target="_blank"
+              class="flex items-center rounded border p-2 text-blue-500 hover:bg-accent"
+            >
+              Open Admin Interface
+              <ExternalLink class="ml-2 h-4 w-4" />
+            </a>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle> Tickets by Type</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TicketTypes />
+          </CardContent>
+        </Card>
+        <Card class="xl:col-span-2">
+          <CardHeader>
+            <CardTitle>Tickets Per Week</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TicketOverTime />
+          </CardContent>
+        </Card>
+        <Card class="xl:col-span-2">
+          <CardHeader>
+            <CardTitle>Your Open Tickets</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <OpenTickets />
+          </CardContent>
+        </Card>
+        <Card class="xl:col-span-2">
+          <CardHeader>
+            <CardTitle>Your Open Tasks</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <OpenTasks />
+          </CardContent>
+        </Card>
+      </ColumnBodyContainer>
+    </ColumnBody>
   </TwoColumn>
 </template>
diff --git a/ui/src/views/ReactionView.vue b/ui/src/views/ReactionView.vue
index 56349f9..f34fb31 100644
--- a/ui/src/views/ReactionView.vue
+++ b/ui/src/views/ReactionView.vue
@@ -1,4 +1,5 @@
-<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
+<script setup lang="ts">
+import ColumnBody from '@/components/layout/ColumnBody.vue'
 import ThreeColumn from '@/components/layout/ThreeColumn.vue'
 import ReactionDisplay from '@/components/reaction/ReactionDisplay.vue'
 import ReactionList from '@/components/reaction/ReactionList.vue'
@@ -22,14 +23,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <ThreeColumn>
+  <ThreeColumn :show-details="!!id">
     <template #list>
       <ReactionList />
     </template>
     <template #single>
-      <div v-if="!id" class="flex h-full w-full items-center justify-center text-lg text-gray-500">
+      <ColumnBody v-if="!id" class="items-center justify-center text-lg text-gray-500">
         No reaction selected
-      </div>
+      </ColumnBody>
       <ReactionNew v-else-if="id === 'new'" key="new" />
       <ReactionDisplay v-else :key="id" :id="id" />
     </template>
diff --git a/ui/src/views/TicketView.vue b/ui/src/views/TicketView.vue
index 6ffb157..c8717c4 100644
--- a/ui/src/views/TicketView.vue
+++ b/ui/src/views/TicketView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import TanView from '@/components/TanView.vue'
+import ColumnBody from '@/components/layout/ColumnBody.vue'
 import ThreeColumn from '@/components/layout/ThreeColumn.vue'
 import TicketDisplay from '@/components/ticket/TicketDisplay.vue'
 import TicketList from '@/components/ticket/TicketList.vue'
@@ -41,20 +42,17 @@ onMounted(() => {
 </script>
 
 <template>
-  <ThreeColumn>
+  <ThreeColumn :show-details="!!id">
     <template #list>
-      <TanView :isError="isError" :isPending="isPending" :error="error" :value="selectedType">
+      <TanView :isError="isError" :isPending="isPending" :error="error">
         <TicketList v-if="selectedType" :key="selectedType.id" :selectedType="selectedType" />
       </TanView>
     </template>
     <template #single>
-      <TanView :isError="isError" :isPending="isPending" :error="error" :value="selectedType">
-        <div
-          v-if="!id"
-          class="flex h-full w-full items-center justify-center text-lg text-gray-500"
-        >
+      <TanView :isError="isError" :isPending="isPending" :error="error">
+        <ColumnBody v-if="!id" class="items-center justify-center text-lg text-gray-500">
           No ticket selected
-        </div>
+        </ColumnBody>
         <TicketDisplay v-else-if="selectedType" :key="id" :selectedType="selectedType" />
       </TanView>
     </template>