wip: ui

src-tauri/tauri.windows.conf.json

@@ -27,7 +27,7 @@
         "fileDropEnabled": true,
         "transparent": true,
         "windowEffects": {
-          "effects": ["mica"]
+          "effects": ["micaLight", "micaDark"]
         }
       }
     ]

src/app/space/components/toggle.tsx

@@ -9,7 +9,7 @@ export function ToggleWidgetList() {
   const setWidget = useWidgets((state) => state.setWidget);
 
   return (
-    <div className="flex h-full shrink-0 grow-0 basis-[400px] items-center justify-center">
+    <div className="flex h-full w-[420px] items-center justify-center border-r border-zinc-100 dark:border-zinc-900">
       <div className="relative">
         <div className="absolute -top-44 left-1/2 -translate-x-1/2 transform">
           <HandArrowDownIcon className="text-zinc-100 dark:text-zinc-900" />

src/app/space/components/widgetList.tsx

@@ -101,7 +101,7 @@ export function WidgetList({ params }: { params: Widget }) {
   );
 
   return (
-    <div className="relative h-full shrink-0 grow-0 basis-[400px]">
+    <div className="h-full w-[420px] border-r border-zinc-100 dark:border-zinc-900">
       <TitleBar id={params.id} title="Add widget" />
       <div className="scrollbar-hide h-full overflow-y-auto pb-20">
         <div className="flex flex-col gap-6 px-3">

src/app/space/index.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect } from 'react';
+import { VList } from 'virtua';
 
 import { ToggleWidgetList } from '@app/space/components/toggle';
 import { WidgetList } from '@app/space/components/widgetList';
@@ -84,17 +85,17 @@ export function SpaceScreen() {
   }, [fetchWidgets]);
 
   return (
-    <div className="scrollbar-hide inline-flex h-full w-full min-w-full flex-nowrap items-start divide-x divide-zinc-200 overflow-x-auto overflow-y-hidden dark:divide-zinc-800">
+    <div className="h-full w-full">
-      {!widgets ? (
+      <VList className="scrollbar-hide h-full w-full" horizontal>
-        <div className="flex shrink-0 grow-0 basis-[400px] flex-col">
+        {!widgets ? (
-          <div className="flex w-full flex-1 items-center justify-center p-3">
+          <div className="flex h-full w-full flex-col items-center justify-center">
             <LoaderIcon className="h-5 w-5 animate-spin text-zinc-900 dark:text-zinc-100" />
           </div>
-        </div>
+        ) : (
-      ) : (
+          widgets.map((widget) => renderItem(widget))
-        widgets.map((widget) => renderItem(widget))
+        )}
-      )}
+        <ToggleWidgetList />
-      <ToggleWidgetList />
+      </VList>
     </div>
   );
 }

src/shared/accounts/active.tsx

@@ -4,16 +4,14 @@ import { Link } from 'react-router-dom';
 
 import { useStorage } from '@libs/storage/provider';
 
-import { SettingsIcon } from '@shared/icons';
+import { HorizontalDotsIcon } from '@shared/icons';
 import { Image } from '@shared/image';
-import { Logout } from '@shared/logout';
 
 import { useActivities } from '@stores/activities';
 
 import { useNostr } from '@utils/hooks/useNostr';
 import { useProfile } from '@utils/hooks/useProfile';
 import { sendNativeNotification } from '@utils/notification';
-import { displayNpub } from '@utils/shortenKey';
 
 export function ActiveAccount() {
   const { db } = useStorage();
@@ -52,38 +50,22 @@ export function ActiveAccount() {
 
   if (status === 'loading') {
     return (
-      <div className="inline-flex h-16 items-center gap-2.5 border-l-2 border-transparent px-3 pb-2">
+      <div className="aspect-square h-full w-full animate-pulse rounded-lg bg-white/10" />
-        <div className="relative h-10 w-10 shrink-0 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-        <div className="h-2.5 w-2/3 animate-pulse rounded bg-white/10 backdrop-blur-xl" />
-      </div>
     );
   }
 
   return (
-    <div className="flex h-16 items-center justify-between border-l-2 border-transparent px-3 pb-1">
+    <div className="flex flex-col gap-1">
-      <Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
+      <Link to={`/users/${db.account.pubkey}`} className="relative inline-block">
         <Image
           src={user?.picture || user?.image}
           alt={db.account.npub}
-          className="h-9 w-9 shrink-0 rounded-lg object-cover"
+          className="aspect-square h-full w-full rounded-lg"
         />
-        <div className="flex flex-col items-start">
+        <span className="absolute bottom-0 right-0 block h-2 w-2 rounded-full bg-green-400 ring-2 ring-zinc-50 dark:ring-zinc-950" />
-          <div className="max-w-[10rem] truncate text-sm font-semibold text-white">
-            {user?.name || user?.display_name || user?.displayName}
-          </div>
-          <div className="max-w-[7rem] truncate text-sm text-white/50">
-            {user?.nip05 || displayNpub(db.account.pubkey, 12)}
-          </div>
-        </div>
       </Link>
-      <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">
+      <div className="inline-flex items-center justify-center rounded-md bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800">
-        <Link
+        <HorizontalDotsIcon className="h-5 w-5" />
-          to="/settings/"
-          className="inline-flex h-9 w-9 items-center justify-center rounded-l-lg hover:bg-white/10"
-        >
-          <SettingsIcon className="h-5 w-5 text-white" />
-        </Link>
-        <Logout />
       </div>
     </div>
   );

src/shared/composer/modal.tsx

@@ -28,10 +28,9 @@ export function ComposerModal() {
       <Dialog.Trigger asChild>
         <button
           type="button"
-          className="flex h-9 items-center gap-2 rounded-full bg-zinc-200 px-4 text-sm font-semibold text-zinc-900  hover:bg-interor-600 hover:text-white dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-interor-600"
+          className="flex aspect-square h-full w-full items-center justify-center rounded-lg bg-zinc-300 hover:bg-interor-600 dark:bg-zinc-700 dark:hover:bg-interor-600"
         >
-          New
+          <ComposeIcon className="h-5 w-5 text-black dark:text-white" />
-          <ComposeIcon className="h-4 w-4" />
         </button>
       </Dialog.Trigger>
       <Dialog.Portal>

src/shared/layouts/app.tsx

@@ -5,7 +5,7 @@ import { Navigation } from '@shared/navigation';
 
 export function AppLayout() {
   return (
-    <div className="flex h-screen w-screen flex-col">
+    <div className="flex h-screen w-screen flex-col bg-zinc-50 dark:bg-zinc-950">
       <WindowTitlebar />
       <div className="flex h-full min-h-0 w-full">
         <div data-tauri-drag-region className="h-full w-[64px] shrink-0 pt-2">

src/shared/navigation.tsx

@@ -1,13 +1,9 @@
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
-import { useStorage } from '@libs/storage/provider';
-
 import { ActiveAccount } from '@shared/accounts/active';
 import { ComposerModal } from '@shared/composer';
 import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
   ChatsIcon,
   CommunityIcon,
   ExploreIcon,
@@ -18,148 +14,117 @@ import {
 export function Navigation() {
   return (
     <div className="flex h-full w-full flex-col justify-between p-3">
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-1 flex-col gap-5">
         <NavLink
           to="/"
           preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+          className="inline-flex flex-col items-center justify-center"
         >
           {({ isActive }) => (
             <>
               <div
                 className={twMerge(
                   'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
-                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <HomeIcon className="h-6 w-6" />
-              </div>{' '}
-              <div
-                className={twMerge(
-                  '',
                   isActive
-                    ? 'text-black dark:text-white'
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
                     : 'text-black/50 dark:text-white/50'
                 )}
               >
-                Home
+                <HomeIcon className="h-6 w-6" />
               </div>
+              <div className="text-sm text-black dark:text-white">Home</div>
             </>
           )}
         </NavLink>
         <NavLink
           to="/chats"
           preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+          className="inline-flex flex-col items-center justify-center"
         >
           {({ isActive }) => (
             <>
               <div
                 className={twMerge(
                   'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
-                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <ChatsIcon className="h-6 w-6" />
-              </div>{' '}
-              <div
-                className={twMerge(
-                  '',
                   isActive
-                    ? 'text-black dark:text-white'
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
                     : 'text-black/50 dark:text-white/50'
                 )}
               >
-                Chats
+                <ChatsIcon className="h-6 w-6" />
               </div>
+              <div className="text-sm text-black dark:text-white">Chats</div>
             </>
           )}
         </NavLink>
         <NavLink
           to="/communities"
           preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+          className="inline-flex flex-col items-center justify-center"
         >
           {({ isActive }) => (
             <>
               <div
                 className={twMerge(
                   'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
-                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <CommunityIcon className="h-6 w-6" />
-              </div>{' '}
-              <div
-                className={twMerge(
-                  '',
                   isActive
-                    ? 'text-black dark:text-white'
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
                     : 'text-black/50 dark:text-white/50'
                 )}
               >
-                Groups
+                <CommunityIcon className="h-6 w-6" />
               </div>
+              <div className="text-sm text-black dark:text-white">Groups</div>
             </>
           )}
         </NavLink>
         <NavLink
           to="/relays"
           preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+          className="inline-flex flex-col items-center justify-center"
         >
           {({ isActive }) => (
             <>
               <div
                 className={twMerge(
                   'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
-                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <RelayIcon className="h-6 w-6" />
-              </div>{' '}
-              <div
-                className={twMerge(
-                  '',
                   isActive
-                    ? 'text-black dark:text-white'
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
                     : 'text-black/50 dark:text-white/50'
                 )}
               >
-                Relays
+                <RelayIcon className="h-6 w-6" />
               </div>
+              <div className="text-sm text-black dark:text-white">Relays</div>
             </>
           )}
         </NavLink>
         <NavLink
           to="/explore"
           preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center text-sm font-medium"
+          className="inline-flex flex-col items-center justify-center"
         >
           {({ isActive }) => (
             <>
               <div
                 className={twMerge(
                   'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
-                  isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
-                )}
-              >
-                <ExploreIcon className="h-6 w-6" />
-              </div>{' '}
-              <div
-                className={twMerge(
-                  '',
                   isActive
-                    ? 'text-black dark:text-white'
+                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
                     : 'text-black/50 dark:text-white/50'
                 )}
               >
-                Explore
+                <ExploreIcon className="h-6 w-6" />
               </div>
+              <div className="text-sm text-black dark:text-white">Explore</div>
             </>
           )}
         </NavLink>
       </div>
+      <div className="flex shrink-0 flex-col gap-3 p-1">
+        <ComposerModal />
+        <ActiveAccount />
+      </div>
     </div>
   );
 }

src/shared/notes/child.tsx

@@ -34,7 +34,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
   if (status === 'loading') {
     return (
       <>
-        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
         <div className="relative mb-5 overflow-hidden">
           <NoteSkeleton />
         </div>
@@ -46,7 +46,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
     const noteLink = `https://njump.me/${nip19.noteEncode(id)}`;
     return (
       <>
-        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+        <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.4rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
         <div className="relative mb-5 flex flex-col">
           <div className="relative z-10 flex items-start gap-3">
             <div className="inline-flex h-10 w-10 items-end justify-center rounded-lg bg-black pb-1">
@@ -78,7 +78,7 @@ export function ChildNote({ id, root }: { id: string; root?: string }) {
 
   return (
     <>
-      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-white/20 to-white/10" />
+      <div className="absolute bottom-0 left-[18px] h-[calc(100%-3.6rem)] w-0.5 bg-gradient-to-t from-black/20 to-black/10 dark:from-white/20 dark:to-white/10" />
       <div className="mb-6 flex flex-col">
         <User pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-4 flex items-start gap-3">

src/shared/notes/kinds/file.tsx

@@ -40,13 +40,7 @@ export function FileNote(props: { event?: NDKEvent }) {
           crossorigin=""
           className="player"
         >
-          <MediaProvider>
+          <MediaProvider />
-            <Poster
-              className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
-              alt={url}
-            />
-          </MediaProvider>
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"

src/shared/notes/kinds/unknown.tsx

@@ -2,16 +2,16 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 
 export function UnknownNote(props: { event?: NDKEvent }) {
   return (
-    <div className="flex w-full flex-col gap-2">
+    <div className="mt-2 flex w-full flex-col gap-2">
-      <div className="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2 backdrop-blur-xl">
+      <div className="inline-flex flex-col rounded-md bg-zinc-200 px-2 py-2 dark:bg-zinc-800">
-        <span className="text-sm font-medium leading-none text-white/50">
+        <span className="text-sm font-medium text-zinc-500 dark:text-zinc-400">
-          Unknown kind: {props.event.kind}
+          Kind: {props.event.kind}
         </span>
-        <p className="text-sm leading-none text-white">
+        <p className="text-sm text-zinc-800 dark:text-zinc-200">
-          Lume isn&apos;t fully support this kind
+          Unsupport kind on newsfeed
         </p>
       </div>
-      <div className="select-text whitespace-pre-line	break-all text-white">
+      <div className="select-text whitespace-pre-line	break-all text-zinc-800 dark:text-zinc-200">
         <p>{props.event.content.toString()}</p>
       </div>
     </div>

src/shared/notes/preview/link.tsx

@@ -31,7 +31,9 @@ export function LinkPreview({ urls }: { urls: string[] }) {
               <p className="text-sm text-white/50">
                 Can&apos;t fetch open graph, click to open webpage
               </p>
-              <span className="text-sm leading-none text-white">{domain.hostname}</span>
+              <span className="text-sm leading-none text-zinc-900 dark:text-zinc-100">
+                {domain.hostname}
+              </span>
             </div>
           ) : (
             <>
@@ -46,15 +48,17 @@ export function LinkPreview({ urls }: { urls: string[] }) {
                 />
               )}
               <div className="flex flex-col gap-1 border-t border-white/5 px-3 py-3">
-                <h5 className="line-clamp-1 text-base font-semibold text-white">
+                <h5 className="line-clamp-1 text-base font-semibold text-zinc-900 dark:text-zinc-100">
                   {data.title}
                 </h5>
                 {data.description && (
-                  <p className="line-clamp-3 break-all text-sm text-white/80">
+                  <p className="line-clamp-3 break-all text-sm text-zinc-500 dark:text-zinc-400">
                     {data.description}
                   </p>
                 )}
-                <span className="mt-2.5 text-sm text-white/80">{domain.hostname}</span>
+                <span className="mt-2.5 text-sm text-zinc-500 dark:text-zinc-400">
+                  {domain.hostname}
+                </span>
               </div>
             </>
           )}

src/shared/notes/preview/video.tsx

@@ -18,13 +18,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
           muted={true}
           className="player"
         >
-          <MediaProvider>
+          <MediaProvider />
-            <Poster
-              className="vds-poster"
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt={url}
-            />
-          </MediaProvider>
           <DefaultAudioLayout
             icons={defaultLayoutIcons}
             smallLayoutWhen="(width < 500) or (height < 380)"

src/shared/notes/stats.tsx

@@ -60,27 +60,25 @@ export function NoteStats({ id }: { id: string }) {
   }
 
   return (
-    <div className="flex h-11 items-center gap-3">
+    <div className="mt-3 flex w-full flex-wrap gap-2">
-      <p className="text-white/50">
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
-        <span className="font-semibold text-white">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
           {compactNumber.format(data.reactions)}
-        </span>{' '}
+        </div>
-        reactions
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
-      </p>
+      </div>
-      <span className="text-white/50">·</span>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
-      <p className="text-white/50">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-        <span className="font-semibold text-white">
           {compactNumber.format(data.reposts)}
-        </span>{' '}
+        </div>
-        reposts
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
-      </p>
+      </div>
-      <span className="text-white/50">·</span>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
-      <p className="text-white/50">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
-        <span className="font-semibold text-white">
           {compactNumber.format(data.zaps)}
-        </span>{' '}
+        </div>
-        zaps
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
-      </p>
+      </div>
     </div>
   );
 }

src/shared/titleBar.tsx

@@ -9,12 +9,11 @@ export function TitleBar({ id, title }: { id?: string; title: string }) {
   const remove = useWidgets((state) => state.removeWidget);
 
   return (
-    <div
+    <div className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3">
-      data-tauri-drag-region
-      className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
-    >
       <div className="w-6" />
-      <h3 className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</h3>
+      <h3 className="text-sm font-medium tracking-wide text-zinc-900 dark:text-zinc-100">
+        {title}
+      </h3>
       {id ? (
         <button
           type="button"

src/shared/user.tsx

@@ -283,16 +283,14 @@ export const User = memo(function User({
             />
           </Avatar.Fallback>
         </Avatar.Root>
-        <div className="flex flex-1 flex-col gap-2">
+        <div className="flex flex-1 flex-col">
           <h5 className="max-w-[15rem] truncate font-semibold text-zinc-900 dark:text-zinc-100">
             {user?.name || user?.display_name || user?.displayName || 'Anon'}
           </h5>
-          <div className="inline-flex items-center gap-2">
+          <div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300">
-            <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
+            <span>{createdAt}</span>
-            <span className="text-zinc-500 dark:text-zinc-300">·</span>
+            <span>·</span>
-            <span className="text-zinc-500 dark:text-zinc-300">
+            <span>{displayNpub(pubkey, 16)}</span>
-              {displayNpub(pubkey, 16)}
-            </span>
           </div>
         </div>
       </div>
@@ -310,7 +308,7 @@ export const User = memo(function User({
               loading="lazy"
               decoding="async"
               style={{ contentVisibility: 'auto' }}
-              className="h-10 w-10 rounded-lg border border-white/5"
+              className="h-10 w-10 rounded-lg border border-white/5 object-cover"
             />
             <Avatar.Fallback delayMs={300}>
               <img

src/shared/widgets/local/thread.tsx

@@ -52,8 +52,8 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
             </div>
           </div>
         ) : (
-          <div className="h-min w-full px-3 pt-1.5">
+          <div className="h-min w-full px-3">
-            <div className="rounded-xl bg-zinc-100 px-3 pt-3 dark:bg-zinc-900">
+            <div className="rounded-xl bg-zinc-100 px-3 py-3 dark:bg-zinc-900">
               <User pubkey={data.pubkey} time={data.created_at} variant="thread" />
               <div className="mt-2">{renderKind(data)}</div>
               <NoteActions
@@ -61,11 +61,11 @@ export function LocalThreadWidget({ params }: { params: Widget }) {
                 pubkey={data.pubkey}
                 extraButtons={false}
               />
-              <NoteStats id={params.content} />
             </div>
           </div>
         )}
         <div className="px-3">
+          <NoteStats id={params.content} />
           <NoteReplyForm id={params.content} pubkey={db.account.pubkey} />
           <RepliesList id={params.content} />
         </div>

src/shared/widgets/local/user.tsx

@@ -81,7 +81,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
   return (
     <WidgetWrapper>
       <TitleBar id={params.id} title={params.title} />
-      <div className="scrollbar-hide h-full overflow-y-auto pb-20">
+      <div className="scrollbar-hide h-full overflow-y-auto">
         <div className="px-3 pt-1.5">
           <UserProfile pubkey={params.content} />
         </div>
@@ -107,10 +107,7 @@ export function LocalUserWidget({ params }: { params: Widget }) {
                 </div>
               </div>
             ) : (
-              <WVList>
+              <WVList>{data.map((item) => renderItem(item))}</WVList>
-                {data.map((item) => renderItem(item))}
-                <div className="h-16" />
-              </WVList>
             )}
           </div>
         </div>

src/shared/widgets/wrapper.tsx

@@ -20,7 +20,10 @@ export function WidgetWrapper({
       }}
       minWidth={420}
       minHeight={'100vh'}
-      className={twMerge('relative shrink-0 grow-0', className)}
+      className={twMerge(
+        'h-full border-r border-zinc-100 pb-10 dark:border-zinc-900',
+        className
+      )}
       enable={{ right: true }}
     >
       {children}