Refactor/shadcn

app/@modal/(...)preview/[id]/modal.tsx

@@ -18,7 +18,7 @@ export function Modal({ children }: { children: React.ReactNode }) {
       <DialogContent
         showCloseButton={false}
         onInteractOutside={(event: any) => event.preventDefault()}
-        className="h-full w-full rounded-none max-w-full sm:rounded-md sm:shadow-xl"
+        className="inset-0 top-0 left-0 h-dvh w-full max-h-none max-w-none translate-x-0 translate-y-0 gap-0 overflow-hidden rounded-none p-0 ring-0 shadow-none sm:max-w-none sm:rounded-none"
       >
         {children}
       </DialogContent>

app/admin/page.tsx

@@ -248,25 +248,34 @@ export default async function Admin() {
             <SectionHeading
               title={t('Dashboard.recentUploads')}
               action={
-                <Button asChild variant="outline" className="rounded-full">
-                  <Link href="/admin/list">
-                    {t('Dashboard.openImageManagement')}
-                    <ArrowRight />
-                  </Link>
-                </Button>
+                <Button
+                  render={
+                    <Link href="/admin/list">
+                      {t('Dashboard.openImageManagement')}
+                      <ArrowRight />
+                    </Link>
+                  }
+                  nativeButton={false}
+                  variant="outline"
+                  className="rounded-full"
+                />
               }
             />
 
             {dashboard.recentUploads.length === 0 ? (
               <div className="mt-6 rounded-[1.35rem] border border-dashed border-border/80 bg-background/60 px-5 py-10 text-center">
                 <p className="text-sm text-muted-foreground">{t('Dashboard.recentUploadsEmpty')}</p>
                 <div className="mt-5">
-                  <Button asChild className="rounded-full">
-                    <Link href="/admin/upload">
-                      {t('Link.upload')}
-                      <ArrowRight />
-                    </Link>
-                  </Button>
+                  <Button
+                    render={
+                      <Link href="/admin/upload">
+                        {t('Link.upload')}
+                        <ArrowRight />
+                      </Link>
+                    }
+                    nativeButton={false}
+                    className="rounded-full"
+                  />
                 </div>
               </div>
             ) : (
@@ -386,12 +395,17 @@ export default async function Admin() {
           <SectionHeading
             title={t('Dashboard.albumBreakdown')}
             action={
-              <Button asChild variant="ghost" className="rounded-full">
-                <Link href="/admin/album">
-                  {t('Link.album')}
-                  <ArrowRight />
-                </Link>
-              </Button>
+              <Button
+                render={
+                  <Link href="/admin/album">
+                    {t('Link.album')}
+                    <ArrowRight />
+                  </Link>
+                }
+                nativeButton={false}
+                variant="ghost"
+                className="rounded-full"
+              />
             }
           />
 

app/admin/settings/authenticator/page.tsx

@@ -109,11 +109,13 @@ export default function Authenticator() {
                 </AlertDescription>
               </Alert>
               <Dialog>
-                <DialogTrigger asChild>
-                  <Button className="cursor-pointer w-36" variant="destructive">
-                    {t('Button.removeTwoFactor')}
-                  </Button>
-                </DialogTrigger>
+                <DialogTrigger
+                  render={
+                    <Button className="cursor-pointer w-36" variant="destructive">
+                      {t('Button.removeTwoFactor')}
+                    </Button>
+                  }
+                />
                 <DialogContent className="sm:max-w-[425px]">
                   <DialogHeader>
                     <DialogTitle>{t('Tips.confirmRemoveTwoFactor')}</DialogTitle>
@@ -219,4 +221,4 @@ export default function Authenticator() {
       }
     </div>
   )
-}
+}

app/admin/settings/passkey/page.tsx

@@ -172,15 +172,17 @@ export default function PasskeySettings() {
                     </div>
 
                     <Dialog>
-                      <DialogTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="text-red-600 hover:text-red-700"
-                        >
-                          <TrashIcon className="h-4 w-4" />
-                        </Button>
-                      </DialogTrigger>
+                      <DialogTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-red-600 hover:text-red-700"
+                          >
+                            <TrashIcon className="h-4 w-4" />
+                          </Button>
+                        }
+                      />
                       <DialogContent className="sm:max-w-[425px]">
                         <DialogHeader>
                           <DialogTitle>{t('deletePasskey')}</DialogTitle>
@@ -229,4 +231,4 @@ export default function PasskeySettings() {
       )}
     </div>
   )
-}
+}

app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next/types'
-import { Source_Serif_4, Source_Sans_3 } from 'next/font/google'
+import { Source_Serif_4, Source_Sans_3, Inter } from 'next/font/google'
 
 import { ThemeProvider } from '~/app/providers/next-ui-providers'
 import { ToasterProviders } from '~/app/providers/toaster-providers'
@@ -13,6 +13,7 @@
 import { getLocale, getMessages } from 'next-intl/server'
 import { ConfigStoreProvider } from '~/app/providers/config-store-providers'
 import Script from 'next/script'
+import { cn } from "~/lib/utils";
 
 const sourceSerif4 = Source_Serif_4({
   subsets: ['latin'],
@@ -21,12 +22,7 @@
   weight: ['400', '600', '700'],
 })
 
-const sourceSans3 = Source_Sans_3({
-  subsets: ['latin'],
-  variable: '--font-sans',
-  display: 'swap',
-  weight: ['400', '500', '600'],
-})
+const inter = Inter({subsets:['latin'],variable:'--font-sans'})
 
 type ConfigItem = {
   id: string;
@@ -101,7 +97,7 @@
   const umamiAnalytics = data?.find((item: ConfigItem) => item.config_key === 'umami_analytics')?.config_value
 
   return (
-    <html className={`overflow-y-auto scrollbar-hide ${sourceSerif4.variable} ${sourceSans3.variable}`} lang={locale} suppressHydrationWarning>
+    <html className={cn("overflow-y-auto", "scrollbar-hide", sourceSerif4.variable, "font-sans", inter.variable)} lang={locale} suppressHydrationWarning>
     <head>
       <link rel="manifest" href="/manifest.json" />
       <meta name="theme-color" content="#2d2518" />

components.json

@@ -1,21 +1,25 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "base-mira",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "style/globals.css",
-    "baseColor": "zinc",
+    "baseColor": "neutral",
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "hugeicons",
+  "rtl": false,
   "aliases": {
     "components": "~/components",
     "utils": "~/lib/utils",
     "ui": "~/components/ui",
     "lib": "~/lib",
     "hooks": "~/hooks"
   },
-  "iconLibrary": "lucide"
-}
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

components/admin/album/album-add-sheet.tsx

@@ -66,8 +66,7 @@ export default function AlbumAddSheet(props : Readonly<HandleProps>) {
       <SheetContent side="left" className="w-full overflow-y-auto scrollbar-hide" onInteractOutside={(event: any) => event.preventDefault()}>
         <SheetHeader>
           <SheetTitle>{t('Album.addAlbum')}</SheetTitle>
-          <SheetDescription asChild>
-            <div className="text-muted-foreground space-y-2 text-sm">
+          <SheetDescription render={<div className="space-y-2 text-sm" />}>
               <label
                 htmlFor="name"
                 className="block overflow-hidden rounded-md border border-input px-3 py-2 shadow-sm focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
@@ -219,7 +218,6 @@ export default function AlbumAddSheet(props : Readonly<HandleProps>) {
                 {loading && <ReloadIcon className="mr-2 h-4 w-4 animate-spin"/>}
                 {t('Album.submit')}
               </Button>
-            </div>
           </SheetDescription>
         </SheetHeader>
       </SheetContent>

components/admin/album/album-list.tsx

@@ -133,20 +133,22 @@ export default function AlbumList(props : Readonly<HandleProps>) {
               }}>
                 <AnimatedIconTrigger>
                   {({ iconRef, triggerProps }) => (
-                    <DialogTrigger asChild>
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        aria-label={t('Album.deleteAlbum')}
-                        {...mergeAnimatedTriggerProps({
-                          onClick: () => {
-                            setAlbum(album)
-                          },
-                        }, triggerProps)}
-                      >
-                        <DeleteIcon ref={iconRef} />
-                      </Button>
-                    </DialogTrigger>
+                    <DialogTrigger
+                      render={
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          aria-label={t('Album.deleteAlbum')}
+                          {...mergeAnimatedTriggerProps({
+                            onClick: () => {
+                              setAlbum(album)
+                            },
+                          }, triggerProps)}
+                        >
+                          <DeleteIcon ref={iconRef} />
+                        </Button>
+                      }
+                    />
                   )}
                 </AnimatedIconTrigger>
                 <DialogContent className="sm:max-w-[425px]">

components/admin/list/image-batch-delete-sheet.tsx

@@ -122,15 +122,17 @@ export default function ImageBatchDeleteSheet(props : Readonly<ImageServerHandle
             ))
           }
           <Dialog>
-            <DialogTrigger asChild>
-              <Button
-                className="cursor-pointer"
-                disabled={data.length === 0}
-                aria-label={t('Button.delete')}
-              >
-                {t('Button.delete')}
-              </Button>
-            </DialogTrigger>
+            <DialogTrigger
+              render={
+                <Button
+                  className="cursor-pointer"
+                  disabled={data.length === 0}
+                  aria-label={t('Button.delete')}
+                >
+                  {t('Button.delete')}
+                </Button>
+              }
+            />
             <DialogContent className="sm:max-w-[425px]">
               <DialogHeader>
                 <DialogTitle>{t('List.confirmDelete')}</DialogTitle>

components/admin/list/list-props.tsx

@@ -300,16 +300,18 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
           <Popover>
             <AnimatedIconTrigger>
               {({ iconRef, triggerProps }) => (
-                <PopoverTrigger asChild>
-                  <Button
-                    className="flex sm:hidden cursor-pointer"
-                    variant="outline"
-                    size="icon"
-                    {...mergeAnimatedTriggerProps({}, triggerProps)}
-                  >
-                    <CircleChevronDownIcon ref={iconRef} />
-                  </Button>
-                </PopoverTrigger>
+                <PopoverTrigger
+                  render={
+                    <Button
+                      className="flex sm:hidden cursor-pointer"
+                      variant="outline"
+                      size="icon"
+                      {...mergeAnimatedTriggerProps({}, triggerProps)}
+                    >
+                      <CircleChevronDownIcon ref={iconRef} />
+                    </Button>
+                  }
+                />
               )}
             </AnimatedIconTrigger>
             <PopoverContent className="w-80">
@@ -424,20 +426,22 @@ export default function ListProps(props : Readonly<ImageServerHandleProps>) {
               </div>
               <div className="space-x-1">
                 <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      className="cursor-pointer"
-                      onClick={() => {
-                        setImage(image)
-                        setImageAlbum(image.album_value)
-                      }}
-                      aria-label={t('List.bindAlbum')}
-                    >
-                      <Replace size={20} />
-                    </Button>
-                  </AlertDialogTrigger>
+                  <AlertDialogTrigger
+                    render={
+                      <Button
+                        variant="outline"
+                        size="icon"
+                        className="cursor-pointer"
+                        onClick={() => {
+                          setImage(image)
+                          setImageAlbum(image.album_value)
+                        }}
+                        aria-label={t('List.bindAlbum')}
+                      >
+                        <Replace size={20} />
+                      </Button>
+                    }
+                  />
                   <AlertDialogContent>
                     <AlertDialogHeader>
                       <AlertDialogTitle>{t('List.bindAlbum')}</AlertDialogTitle>

components/album/floating-filter-ball.tsx

@@ -326,9 +326,11 @@ export default function FloatingFilterBall({
 
   return (
     <Popover open={isOpen} onOpenChange={setIsOpen}>
-      <PopoverTrigger asChild onClick={handleClick}>
-        {BallButton}
-      </PopoverTrigger>
+      <PopoverTrigger
+        render={BallButton}
+        nativeButton={false}
+        onClick={handleClick}
+      />
       <PopoverContent 
         className="w-72" 
         side="left"