feat: mobile ui (#1096)

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>

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>

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>

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>