feat: mobile ui (#1096)

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>