wip: polish

src/shared/titleBar.tsx

@@ -1,20 +1,36 @@
 import { useStorage } from '@libs/storage/provider';
 
 import { CancelIcon } from '@shared/icons';
+import { User } from '@shared/user';
 
 import { useWidgets } from '@stores/widgets';
 
-export function TitleBar({ id, title }: { id?: string; title: string }) {
+export function TitleBar({ id, title }: { id?: string; title?: string }) {
   const { db } = useStorage();
   const remove = useWidgets((state) => state.removeWidget);
 
   return (
     <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 tracking-wide text-neutral-900 dark:text-neutral-100">
-        {title}
-      </h3>
-      {id ? (
+      {id === '9999' ? (
+        <div className="isolate flex -space-x-2">
+          {db.account.circles
+            ?.slice(0, 4)
+            .map((item) => <User key={item} pubkey={item} variant="ministacked" />)}
+          {db.account.circles?.length > 4 ? (
+            <div className="inline-flex h-6 w-6  items-center justify-center rounded-full bg-neutral-200 text-neutral-900 ring-1 ring-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-neutral-700">
+              <span className="text-xs font-medium">
+                +{db.account.circles?.length - 4}
+              </span>
+            </div>
+          ) : null}
+        </div>
+      ) : (
+        <h3 className="text-sm font-medium tracking-wide text-neutral-900 dark:text-neutral-100">
+          {title}
+        </h3>
+      )}
+      {id !== '9999' ? (
         <button
           type="button"
           onClick={() => remove(db, id)}