refactor: 💄 Redesign sidebar instance header

components/instance/small-card.vue

@@ -0,0 +1,41 @@
+<template>
+    <Card class="grid grid-cols-[auto_1fr] gap-2">
+        <Avatar :src="instance.thumbnail?.url ??
+            'https://cdn.versia.pub/branding/icon.svg'
+            " :name="instance.title" />
+        <div class="grid text-sm leading-tight *:line-clamp-1">
+            <span class="truncate font-semibold">
+                {{
+                    instance.domain
+                }}
+            </span>
+            <span class="line-clamp-3 text-xs">
+                {{
+                    instance.versia_version || instance.version
+                }}
+            </span>
+
+        </div>
+        <h1 class="line-clamp-1 text-sm font-semibold col-span-2">
+            {{
+                instance.title
+            }}
+        </h1>
+        <p class="line-clamp-5 text-xs col-span-2">
+            {{
+                instance.description
+            }}
+        </p>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Instance } from "@versia/client/schemas";
+import type z from "zod";
+import Avatar from "../profiles/avatar.vue";
+import { Card } from "../ui/card";
+
+const { instance } = defineProps<{
+    instance: z.infer<typeof Instance>;
+}>();
+</script>

components/sidebars/instance/instance-header.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import Avatar from "~/components/profiles/avatar.vue";
+import InstanceSmallCard from "~/components/instance/small-card.vue";
 import {
     SidebarHeader,
     SidebarMenu,
-    SidebarMenuButton,
     SidebarMenuItem,
 } from "~/components/ui/sidebar";
-import * as m from "~/paraglide/messages.js";
 
 const instance = useInstance();
 </script>
@@ -16,32 +14,7 @@ const instance = useInstance();
         <SidebarMenu>
             <SidebarMenuItem>
                 <NuxtLink href="/">
-                    <SidebarMenuButton size="lg">
+                    <InstanceSmallCard v-if="instance" :instance="instance" />
-                        <Avatar
-                            class="size-8"
-                            :src="
-                                instance?.thumbnail?.url ??
-                                'https://cdn.versia.pub/branding/icon.svg'
-                            "
-                            :name="instance?.title"
-                        />
-                        <div
-                            class="grid flex-1 text-left text-sm leading-tight"
-                        >
-                            <span class="truncate font-semibold">
-                                {{
-                                    instance?.title ??
-                                    m.short_zippy_felix_kick()
-                                }}
-                            </span>
-                            <span class="truncate text-xs">
-                                {{
-                                    instance?.description ??
-                                    m.top_active_ocelot_cure()
-                                }}
-                            </span>
-                        </div>
-                    </SidebarMenuButton>
                 </NuxtLink>
             </SidebarMenuItem>
         </SidebarMenu>