wip: ui

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">
-      {!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>
   );
 }