refactor: ♻️ Improve sidebar and background design

components/composer/file-preview.vue

@@ -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" />
+                <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>

components/graphics/square-pattern.vue

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

components/notes/content.vue

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

components/notes/menu.vue

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

components/notifications/follow-request.vue

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

components/oauth/login.vue

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

components/preferences/emojis/emoji.vue

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

components/profiles/profile-actions.vue

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

components/settings/oidc.vue

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

components/sidebars/left-sidebar.vue

@@ -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: [
         {

components/sidebars/right-sidebar.vue

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

components/sidebars/sidebar.vue

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

components/ui/button/index.ts

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

components/ui/card/Card.vue

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

components/ui/checkbox/Checkbox.vue

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

components/ui/command/CommandInput.vue

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

components/ui/dropdown-menu/DropdownMenuLabel.vue

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

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

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

components/ui/select/SelectScrollDownButton.vue

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

components/ui/select/SelectScrollUpButton.vue

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

components/ui/sidebar/Sidebar.vue

@@ -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
+    <aside
-    v-if="collapsible === 'none'"
+        :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground p-1', props.class)"
-    :class="cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)"
+        v-bind="$attrs" data-component="sidebar">
-    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">
         <slot />
-      </div>
+    </aside>
-    </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>
 </template>

components/ui/sidebar/SidebarInset.vue

@@ -7,24 +7,24 @@ const props = defineProps<{
     class?: HTMLAttributes["class"];
 }>();
 
-const backgroundImage = useSetting(SettingIds.BackgroundURL);
+const bgSetting = useSetting(SettingIds.BackgroundURL);
-
+const bgImage = computed(() =>
-const canParseUrl = URL.canParse;
+    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,
+        backgroundImage: `url('${bgImage}')`,
-        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,
     }">
         <!-- 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>

components/ui/sidebar/SidebarTrigger.vue

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

components/ui/switch/Switch.vue

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

layouts/app.vue

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

settings.ts

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