versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: 💄 Redesign sidebar instance header

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-07-10 03:58:45 +02:00
parent 5ef26f03a4
commit 97733c18ee
No known key found for this signature in database
2 changed files with 43 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
components/instance/small-card.vue Normal file
View file

@ -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>

31
components/sidebars/instance/instance-header.vue
View file

@ -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>