wip: ui

2024-09-14 09:13:31 +00:00 · 2023-10-09 11:30:52 +07:00 · 2023-10-09 11:30:52 +07:00 · 140b8a47bf
commit 140b8a47bf
parent ced23341d2
19 changed files with 105 additions and 171 deletions
--- a/src-tauri/tauri.windows.conf.json
+++ b/src-tauri/tauri.windows.conf.json
@ -27,7 +27,7 @@
        "fileDropEnabled": true,
        "transparent": true,
        "windowEffects": {
-          "effects": ["mica"]
+          "effects": ["micaLight", "micaDark"]
        }
      }
    ]
--- a/src/app/space/components/toggle.tsx
+++ b/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" />
--- a/src/app/space/components/widgetList.tsx
+++ b/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">
--- a/src/app/space/index.tsx
+++ b/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">
-      {!widgets ? (
-        <div className="flex shrink-0 grow-0 basis-[400px] flex-col">
-          <div className="flex w-full flex-1 items-center justify-center p-3">
+    <div className="h-full w-full">
+      <VList className="scrollbar-hide h-full w-full" horizontal>
+        {!widgets ? (
+          <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))
-      )}
-      <ToggleWidgetList />
+        ) : (
+          widgets.map((widget) => renderItem(widget))
+        )}
+        <ToggleWidgetList />
+      </VList>
    </div>
  );
 }
--- a/src/shared/accounts/active.tsx
+++ b/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="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>
+      <div className="aspect-square h-full w-full animate-pulse rounded-lg bg-white/10" />
    );
  }

  return (
-    <div className="flex h-16 items-center justify-between border-l-2 border-transparent px-3 pb-1">
-      <Link to={`/users/${db.account.pubkey}`} className="flex items-center gap-1.5">
+    <div className="flex flex-col gap-1">
+      <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">
-          <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>
+        <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" />
      </Link>
-      <div className="inline-flex divide-x divide-white/5 rounded-lg border-t border-white/5 bg-white/10">
-        <Link
-          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 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">
+        <HorizontalDotsIcon className="h-5 w-5" />
      </div>
    </div>
  );
--- a/src/shared/composer/modal.tsx
+++ b/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-4 w-4" />
+          <ComposeIcon className="h-5 w-5 text-black dark:text-white" />
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
--- a/src/shared/layouts/app.tsx
+++ b/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">
--- a/src/shared/navigation.tsx
+++ b/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>
  );
 }
--- a/src/shared/notes/child.tsx
+++ b/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">
--- a/src/shared/notes/kinds/file.tsx
+++ b/src/shared/notes/kinds/file.tsx
@ -40,13 +40,7 @@ export function FileNote(props: { event?: NDKEvent }) {
          crossorigin=""
          className="player"
        >
-          <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src="https://thumbnail.video/api/get?url=${url}&seconds=1"
-              alt={url}
-            />
-          </MediaProvider>
+          <MediaProvider />
          <DefaultAudioLayout
            icons={defaultLayoutIcons}
            smallLayoutWhen="(width < 500) or (height < 380)"
--- a/src/shared/notes/kinds/unknown.tsx
+++ b/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="inline-flex flex-col gap-1 rounded-md bg-white/10 px-2 py-2 backdrop-blur-xl">
-        <span className="text-sm font-medium leading-none text-white/50">
-          Unknown kind: {props.event.kind}
+    <div className="mt-2 flex w-full flex-col gap-2">
+      <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 text-zinc-500 dark:text-zinc-400">
+          Kind: {props.event.kind}
        </span>
-        <p className="text-sm leading-none text-white">
-          Lume isn&apos;t fully support this kind
+        <p className="text-sm text-zinc-800 dark:text-zinc-200">
+          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>
--- a/src/shared/notes/preview/link.tsx
+++ b/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>
            </>
          )}
--- a/src/shared/notes/preview/video.tsx
+++ b/src/shared/notes/preview/video.tsx
@ -18,13 +18,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
          muted={true}
          className="player"
        >
-          <MediaProvider>
-            <Poster
-              className="vds-poster"
-              src={`https://thumbnail.video/api/get?url=${url}&seconds=1`}
-              alt={url}
-            />
-          </MediaProvider>
+          <MediaProvider />
          <DefaultAudioLayout
            icons={defaultLayoutIcons}
            smallLayoutWhen="(width < 500) or (height < 380)"
--- a/src/shared/notes/stats.tsx
+++ b/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">
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+    <div className="mt-3 flex w-full flex-wrap gap-2">
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
          {compactNumber.format(data.reactions)}
-        </span>{' '}
-        reactions
-      </p>
-      <span className="text-white/50">·</span>
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reactions</div>
+      </div>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
          {compactNumber.format(data.reposts)}
-        </span>{' '}
-        reposts
-      </p>
-      <span className="text-white/50">·</span>
-      <p className="text-white/50">
-        <span className="font-semibold text-white">
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Reposts</div>
+      </div>
+      <div className="flex flex-1 flex-col rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-900">
+        <div className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
          {compactNumber.format(data.zaps)}
-        </span>{' '}
-        zaps
-      </p>
+        </div>
+        <div className="text-sm text-zinc-500 dark:text-zinc-300">Zaps</div>
+      </div>
    </div>
  );
 }
--- a/src/shared/titleBar.tsx
+++ b/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
-      data-tauri-drag-region
-      className="flex h-11 w-full shrink-0 items-center justify-between overflow-hidden px-3"
-    >
+    <div 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"
--- a/src/shared/user.tsx
+++ b/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">
-            <span className="text-zinc-500 dark:text-zinc-300">{createdAt}</span>
-            <span className="text-zinc-500 dark:text-zinc-300">·</span>
-            <span className="text-zinc-500 dark:text-zinc-300">
-              {displayNpub(pubkey, 16)}
-            </span>
+          <div className="inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-300">
+            <span>{createdAt}</span>
+            <span>·</span>
+            <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
--- a/src/shared/widgets/local/thread.tsx
+++ b/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="rounded-xl bg-zinc-100 px-3 pt-3 dark:bg-zinc-900">
+          <div className="h-min w-full px-3">
+            <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>
--- a/src/shared/widgets/local/user.tsx
+++ b/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>
-                {data.map((item) => renderItem(item))}
-                <div className="h-16" />
-              </WVList>
+              <WVList>{data.map((item) => renderItem(item))}</WVList>
            )}
          </div>
        </div>
--- a/src/shared/widgets/wrapper.tsx
+++ b/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}