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: ♻️ Improve sidebar and background design

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-02-09 19:39:05 +01:00
parent 9b5187207b
commit 9ba59cfd21
No known key found for this signature in database
26 changed files with 52 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/composer/file-preview.vue
View file

@ -14,16 +14,16 @@
<DropdownMenuSeparator />
<DropdownMenuItem @click="editName">
<TextCursorInput class="mr-2 h-4 w-4" />
<TextCursorInput class="mr-2 size-4" />
<span>Rename</span>
</DropdownMenuItem>
<DropdownMenuItem @click="editCaption">
<Captions class="mr-2 h-4 w-4" />
<DropdownMenuItem @click="editCaption">
<Captions class="mr-2 size-4" />
<span>Add caption</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="emit('remove')">
<Delete class="mr-2 h-4 w-4" />
<Delete class="mr-2 size-4" />
<span>Remove</span>
</DropdownMenuItem>
</DropdownMenuContent>
@ -123,4 +123,4 @@ const formatBytes = (bytes: number) => {
const i = Math.floor(Math.log(bytes) / Math.log(k));
return `${Number.parseFloat((bytes / k ** i).toFixed(digitsAfterPoint))} ${sizes[i]}`;
};
</script>
</script>

4
components/graphics/square-pattern.vue
View file

@ -1,5 +1,5 @@
<template>
<svg class="absolute inset-0 h-full w-full stroke-primary/[0.07] [mask-image:radial-gradient(100%_100%_at_top_right,hsl(var(--primary-foreground)),transparent)] pointer-events-none"
<svg class="absolute inset-x-0 top-0 h-full w-full stroke-primary/[0.07] [mask-image:radial-gradient(100%_100%_at_top_right,hsl(var(--primary-foreground)),transparent)] pointer-events-none"
aria-hidden="true">
<defs>
<pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
@ -16,4 +16,4 @@
<script lang="ts" setup>
</script>
</script>

2
components/notes/content.vue
View file

@ -15,7 +15,7 @@
maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`,
}">
<div :class="[
'prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline',
'prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline hover:prose-a:underline',
$style.content,
]" v-html="content" v-render-emojis="emojis"></div>
<div v-if="isOverflowing && collapsed"

5
components/notes/menu.vue
View file

@ -4,7 +4,6 @@ import {
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
@ -86,8 +85,6 @@ const _delete = async () => {
<slot />
</DropdownMenuTrigger>
<DropdownMenuContent class="min-w-56">
<DropdownMenuLabel>{{ m.many_misty_parakeet_fall() }}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem v-if="authorIsMe" as="button" @click="emit('edit')">
<Pencil class="mr-2 size-4" />
@ -141,4 +138,4 @@ const _delete = async () => {
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</template>
</template>

8
components/notifications/follow-request.vue
View file

@ -25,13 +25,11 @@
<Check class="size-4" />
</div>
<div v-else class="grid grid-cols-2 p-2 gap-2">
<Button variant="outline" size="sm" @click="accept">
<Button variant="secondary" size="sm" @click="accept" :title="m.slow_these_kestrel_sail()">
<Check />
{{ m.slow_these_kestrel_sail() }}
</Button>
<Button variant="ghost" size="sm" @click="reject">
<Button variant="ghost" size="sm" @click="reject" :title="m.weary_steep_yak_embrace()">
<X />
{{ m.weary_steep_yak_embrace() }}
</Button>
</div>
</template>
@ -84,4 +82,4 @@ const reject = async () => {
relationship.value = data;
loading.value = false;
};
</script>
</script>

4
components/oauth/login.vue
View file

@ -111,7 +111,7 @@ const issuerRedirectUrl = (issuerId: string) => {
</FormItem>
</FormField>
<Button :disabled="isLoading" type="submit">
<Loader v-if="isLoading" class="mr-2 h-4 w-4 animate-spin" />
<Loader v-if="isLoading" class="mr-2 size-4 animate-spin" />
{{ m.fuzzy_sea_moth_absorb() }}
</Button>
</div>
@ -135,4 +135,4 @@ const issuerRedirectUrl = (issuerId: string) => {
</Button>
</div>
</div>
</template>
</template>

13
components/preferences/emojis/emoji.vue
View file

@ -22,20 +22,17 @@
</CardFooter>
</Card>
<DropdownMenuContent class="min-w-48">
<DropdownMenuLabel class="font-mono">{{ emoji.shortcode }}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem @click="editName">
<TextCursorInput class="mr-2 h-4 w-4" />
<TextCursorInput class="mr-2 size-4" />
{{ m.cuddly_such_swallow_hush() }}
</DropdownMenuItem>
<!-- <DropdownMenuItem @click="editCaption">
<Captions class="mr-2 h-4 w-4" />
<Captions class="mr-2 size-4" />
<span>Add caption</span>
</DropdownMenuItem>
<DropdownMenuSeparator /> -->
<DropdownMenuItem @click="_delete">
<Delete class="mr-2 h-4 w-4" />
<Delete class="mr-2 size-4" />
{{ m.tense_quick_cod_favor() }}
</DropdownMenuItem>
</DropdownMenuContent>
@ -60,8 +57,6 @@ import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import * as m from "~/paraglide/messages.js";
@ -133,4 +128,4 @@ const _delete = async () => {
}
}
};
</script>
</script>

5
components/profiles/profile-actions.vue
View file

@ -4,8 +4,6 @@
<slot />
</DropdownMenuTrigger>
<DropdownMenuContent class="min-w-56">
<DropdownMenuLabel>{{ m.spicy_loved_giraffe_empower() }}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem as="button" @click="copyText(account.username)">
<AtSign class="mr-2 size-4" />
@ -70,7 +68,6 @@ import {
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
@ -128,4 +125,4 @@ const refresh = async () => {
toast.success(m.many_cool_fox_love());
};
</script>
</script>

2
components/settings/oidc.vue
View file

@ -9,7 +9,7 @@
<div v-for="provider of ssoConfig?.providers" :key="provider.id"
class="flex items-center justify-between p-4 bg-dark-700 rounded">
<div class="flex items-center gap-4">
<Avatar :src="provider.icon" :alt="provider.name" class="h-8 w-8" />
<Avatar :src="provider.icon" :alt="provider.name" class="size-8" />
<span class="font-semibold text-gray-300">{{ provider.name }}</span>
</div>
<div>

7
components/sidebars/left-sidebar.vue
View file

@ -1,5 +1,5 @@
<template>
<Sidebar :variant="(sidebarStyle.value as 'sidebar' | 'floating' | 'inset')" collapsible="icon">
<Sidebar collapsible="none" class="hidden md:flex">
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
@ -136,13 +136,10 @@ import {
SidebarRail,
} from "~/components/ui/sidebar";
import * as m from "~/paraglide/messages.js";
import { type EnumSetting, SettingIds } from "~/settings";
import Avatar from "../profiles/avatar.vue";
import { Button } from "../ui/button";
import AccountSwitcher from "./account-switcher.vue";
const sidebarStyle = useSetting(SettingIds.SidebarStyle) as Ref<EnumSetting>;
const data = {
navMain: [
{
@ -209,4 +206,4 @@ const data = {
const instance = useInstance();
const { $pwa } = useNuxtApp();
</script>
</script>

4
components/sidebars/right-sidebar.vue
View file

@ -1,5 +1,5 @@
<template>
<Sidebar variant="inset" collapsible="none" side="right" class="[--sidebar-width:24rem] hidden lg:flex">
<Sidebar side="right" collapsible="none" class="w-96 hidden lg:flex">
<SidebarContent class="p-2 overflow-y-auto">
<NotificationsTimeline />
</SidebarContent>
@ -10,4 +10,4 @@
<script lang="ts" setup>
import NotificationsTimeline from "../timelines/notifications.vue";
import { Sidebar, SidebarContent, SidebarRail } from "../ui/sidebar";
</script>
</script>

2
components/sidebars/sidebar.vue
View file

@ -20,7 +20,7 @@ const showTimelines = computed(
<template>
<SidebarProvider>
<LeftSidebar />
<SidebarInset :class="cn('relative !overflow-y-auto !h-svh', !isMd && 'pt-4')">
<SidebarInset :class="cn('relative overflow-y-auto overflow-x-hidden', !isMd && 'pt-4')">
<header v-if="showTimelines" class="flex h-16 items-center bg-background/80 backdrop-blur-2xl sticky top-0 inset-x-0 z-10 p-4">
<Timelines />
</header>

2
components/ui/button/index.ts
View file

@ -2,7 +2,7 @@ import { type VariantProps, cva } from "class-variance-authority";
export { default as Button } from "./Button.vue";
export const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {

2
components/ui/card/Card.vue
View file

@ -13,7 +13,7 @@ const props = withDefaults(
<template>
<Primitive :as="props.as" :as-child="props.asChild" :class="cn(
'rounded-lg border bg-card/20 backdrop-blur-xl text-card-foreground shadow-sm',
'rounded-lg border bg-card/90 backdrop-blur-xl text-card-foreground shadow-sm',
props.class,
)
" data-component="card">

4
components/ui/checkbox/Checkbox.vue
View file

@ -24,11 +24,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
</script>
<template>
<CheckboxRoot v-bind="forwarded" :class="cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
<CheckboxRoot v-bind="forwarded" :class="cn('peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
props.class)">
<CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
<slot>
<Check class="h-4 w-4" />
<Check class="size-4" />
</slot>
</CheckboxIndicator>
</CheckboxRoot>

2
components/ui/command/CommandInput.vue
View file

@ -29,7 +29,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<div class="flex items-center border-b px-3" cmdk-input-wrapper>
<Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
<Search class="mr-2 size-4 shrink-0 opacity-50" />
<ComboboxInput v-bind="{ ...forwardedProps, ...$attrs }" auto-focus
:class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
</div>

10
components/ui/dropdown-menu/DropdownMenuLabel.vue
View file

@ -24,10 +24,8 @@ const forwardedProps = useForwardProps(delegatedProps);
</script>
<template>
<DropdownMenuLabel
v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
>
<slot />
</DropdownMenuLabel>
<DropdownMenuLabel v-bind="forwardedProps"
:class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
<slot />
</DropdownMenuLabel>
</template>

2
components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
View file

@ -30,6 +30,6 @@ const forwardedProps = useForwardProps(delegatedProps);
)"
>
<slot />
<ChevronRight class="ml-auto h-4 w-4" />
<ChevronRight class="ml-auto size-4" />
</DropdownMenuSubTrigger>
</template>

2
components/ui/select/SelectScrollDownButton.vue
View file

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
<slot>
<ChevronDown class="h-4 w-4" />
<ChevronDown class="size-4" />
</slot>
</SelectScrollDownButton>
</template>

2
components/ui/select/SelectScrollUpButton.vue
View file

@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
<template>
<SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
<slot>
<ChevronUp class="h-4 w-4" />
<ChevronUp class="size-4" />
</slot>
</SelectScrollUpButton>
</template>

75
components/ui/sidebar/Sidebar.vue
View file

@ -1,9 +1,6 @@
<script setup lang="ts">
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import Sheet from "~/components/ui/sheet/Sheet.vue";
import SheetContent from "~/components/ui/sheet/SheetContent.vue";
import { SIDEBAR_WIDTH_MOBILE, useSidebar } from "./utils";
defineOptions({
inheritAttrs: false,
@ -22,76 +19,12 @@ const props = withDefaults(
collapsible: "offcanvas",
},
);
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
</script>
<template>
<aside
v-if="collapsible === 'none'"
:class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
v-bind="$attrs"
data-component="sidebar"
>
<slot />
</aside>
<Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
:side="side"
class="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
:style="{
'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
}"
as="aside"
>
<div class="flex h-full w-full flex-col">
<aside
:class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground p-1', props.class)"
v-bind="$attrs" data-component="sidebar">
<slot />
</div>
</SheetContent>
</Sheet>
<aside
v-else class="group peer hidden md:block"
:data-state="state"
:data-collapsible="state === 'collapsed' ? collapsible : ''"
:data-variant="variant"
:data-side="side"
data-component="sidebar"
>
<!-- This is what handles the sidebar gap on desktop -->
<div
:class="cn(
'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',
'group-data-[collapsible=offcanvas]:w-0',
'group-data-[side=right]:rotate-180',
variant === 'floating' || variant === 'inset'
? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
)"
/>
<div
:class="cn(
'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
side === 'left'
? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
// Adjust the padding for floating and inset variants.
variant === 'floating' || variant === 'inset'
? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
: 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
props.class,
)"
v-bind="$attrs"
>
<div
data-sidebar="sidebar"
class="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
>
<slot />
</div>
</div>
</aside>
</aside>
</template>

18
components/ui/sidebar/SidebarInset.vue
View file

@ -7,24 +7,24 @@ const props = defineProps<{
class?: HTMLAttributes["class"];
}>();
const backgroundImage = useSetting(SettingIds.BackgroundURL);
const canParseUrl = URL.canParse;
const bgSetting = useSetting(SettingIds.BackgroundURL);
const bgImage = computed(() =>
bgSetting.value.value && URL.canParse(bgSetting.value.value as string)
? bgSetting.value.value
: "/images/banner.webp",
);
</script>
<template>
<main :class="cn(
'relative flex min-h-svh max-w-full flex-1 flex-col bg-background',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:overflow-hidden md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow bg-cover bg-center bg-no-repeat',
props.class,
)" :style="{
backgroundImage: canParseUrl(backgroundImage.value as string) ? `url(${backgroundImage.value})` : undefined,
backgroundSize: canParseUrl(backgroundImage.value as string) ? 'cover' : undefined,
backgroundPosition: canParseUrl(backgroundImage.value as string) ? 'center' : undefined,
backgroundRepeat: canParseUrl(backgroundImage.value as string) ? 'no-repeat' : undefined,
backgroundImage: `url('${bgImage}')`,
}">
<!-- Overlay for the background image -->
<div v-if="canParseUrl(backgroundImage.value as string)" class="absolute -z-10 inset-0 bg-black/20" />
<div class="absolute -z-10 inset-0 bg-black/20" />
<slot />
</main>
</template>

2
components/ui/sidebar/SidebarTrigger.vue
View file

@ -17,7 +17,7 @@ const { toggleSidebar } = useSidebar();
data-sidebar="trigger"
variant="ghost"
size="icon"
:class="cn('h-7 w-7', props.class)"
:class="cn('size-7', props.class)"
@click="toggleSidebar"
>
<PanelLeft />

2
components/ui/switch/Switch.vue
View file

@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
)"
>
<SwitchThumb
:class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
:class="cn('pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5')"
>
<slot name="thumb" />
</SwitchThumb>

2
layouts/app.vue
View file

@ -1,6 +1,5 @@
<template>
<Sidebar>
<SquarePattern v-if="!canParseUrl(backgroundImage.value as string)" />
<slot v-if="!route.meta.requiresAuth || identity" />
<Card v-else class="shadow-none bg-transparent border-none p-4 max-w-md mx-auto">
<CardHeader class="text-center gap-y-4">
@ -22,7 +21,6 @@
<script setup lang="ts">
import ComposerDialog from "~/components/composer/dialog.vue";
import SquarePattern from "~/components/graphics/square-pattern.vue";
import MobileNavbar from "~/components/navigation/mobile-navbar.vue";
import Sidebar from "~/components/sidebars/sidebar.vue";
import { Button } from "~/components/ui/button";

22
settings.ts
View file

@ -86,7 +86,6 @@ export enum SettingIds {
BackgroundURL = "background-url",
NotificationsSidebar = "notifications-sidebar",
AvatarShape = "avatar-shape",
SidebarStyle = "sidebar-style",
DefaultVisibility = "default-visibility",
}
@ -162,27 +161,6 @@ export const settings = (): Record<SettingIds, Setting> => {
],
page: SettingPages.Behaviour,
} as EnumSetting,
[SettingIds.SidebarStyle]: {
title: m.deft_seemly_donkey_slide,
description: m.wide_least_samuel_conquer,
type: SettingType.Enum,
value: "inset",
options: [
{
value: "inset",
label: m.fluffy_north_crow_blink,
},
{
value: "sidebar",
label: m.day_polite_newt_loop,
},
{
value: "floating",
label: m.jolly_mad_jackdaw_assure,
},
],
page: SettingPages.Appearance,
} as EnumSetting,
[SettingIds.AvatarShape]: {
title: m.fit_cool_bulldog_dine,
description: m.agent_misty_firefox_arise,