(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>
+  );
+}