From 97733c18eeda953bee525ed49caf7fb61ff562f4 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 10 Jul 2025 03:58:45 +0200
Subject: [PATCH] refactor: :lipstick: Redesign sidebar instance header

---
 components/instance/small-card.vue            | 41 +++++++++++++++++++
 .../sidebars/instance/instance-header.vue     | 31 +-------------
 2 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 components/instance/small-card.vue

diff --git a/components/instance/small-card.vue b/components/instance/small-card.vue
new file mode 100644
index 0000000..305dc75
--- /dev/null
+++ b/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>
diff --git a/components/sidebars/instance/instance-header.vue b/components/sidebars/instance/instance-header.vue
index 50e23f8..35c57c7 100644
--- a/components/sidebars/instance/instance-header.vue
+++ b/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">
-                        <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>
+                    <InstanceSmallCard v-if="instance" :instance="instance" />
                 </NuxtLink>
             </SidebarMenuItem>
         </SidebarMenu>