(feat): add native notifications

(feat): add navbar profile popover
(fix): chat input box click area to slim
(qol): format

apps/web/src/components/modals/profile.tsx

@@ -0,0 +1,34 @@
+import type { User } from "@tensamin/user/context";
+import { Avatar, AvatarFallback, AvatarImage } from "@tensamin/ui";
+import Text from "@tensamin/markdown/text";
+
+export default function Profile({ user }: { user: User }) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2  items-center">
+        <Avatar className="size-10">
+          <AvatarImage src={user.avatar} />
+          <AvatarFallback className="text-lg">
+            {user.display.slice(0, 2).toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+        <div className="flex flex-col">
+          <p className="text-lg font-semibold">{user.display}</p>
+          <p className="text-muted-foreground">{user.username}</p>
+        </div>
+      </div>
+      <Text value={user.about || ""} />
+      <div className="flex flex-col">
+        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+          iota: {user.iota_id}
+        </p>
+        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+          user: {user.user_id}
+        </p>
+        <p className="text-muted-foreground text-xs overflow-hidden text-ellipsis whitespace-nowrap">
+          pub key: {user.public_key}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/navbar.tsx

@@ -1,7 +1,8 @@
-import { Button } from "@tensamin/ui";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
 import {
   ArrowLeft,
   ChevronDown,
+  ChevronUp,
   House,
   Phone,
   Settings,
@@ -17,6 +18,7 @@ import { useState } from "react";
 import { SidebarTrigger, useSidebar } from "@tensamin/ui";
 import { WindowControls as Controls } from "@tensamin/ui";
 import { useSession } from "@tensamin/storage/session";
+import Profile from "./modals/profile";
 
 export default function Navbar({ forMobile }: { forMobile: boolean }) {
   const navigate = useNavigate();
@@ -33,6 +35,8 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
 
   const [selectOpen, setSelectOpen] = useState(false);
 
+  const [userInfoOpen, setUserInfoOpen] = useState(false);
+
   return (
     <div
       data-tauri-drag-region
@@ -69,16 +73,27 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
           <Wrapper
             userId={id}
             component={(user) => (
-              <Button
-                variant="link"
-                className="px-0! text-foreground"
-                style={{
-                  textDecorationLine: "none",
-                }}
-              >
-                <p className="font-medium text-md">{user?.display}</p>
-                <ChevronDown />
-              </Button>
+              <>
+                <Popover open={userInfoOpen} onOpenChange={setUserInfoOpen}>
+                  <PopoverTrigger
+                    render={
+                      <Button
+                        variant="link"
+                        className="px-0! text-foreground"
+                        style={{
+                          textDecorationLine: "none",
+                        }}
+                      >
+                        <p className="font-medium text-md">{user?.display}</p>
+                        {userInfoOpen ? <ChevronUp /> : <ChevronDown />}
+                      </Button>
+                    }
+                  />
+                  <PopoverContent side="bottom">
+                    <Profile user={user} />
+                  </PopoverContent>
+                </Popover>
+              </>
             )}
             loading={<Skeleton className="ml-3 w-40 h-5" />}
           />