feat: mobile ui (#1096)

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>

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>

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>