Account card

src/App.tsx

@@ -29,7 +29,7 @@ export default function App() {
 
   return (
     <ThemeProvider attribute="class" defaultTheme="system">
-      <main className="size-screen flex">
+      <main className="size-screen flex select-none cursor-default">
         {appRef.current?.accounts &&
         appRef.current.accounts.accounts.length === 0 ? (
           <NewProfilePage appRef={appRef} />

src/components/view/AccountCard.tsx

@@ -0,0 +1,51 @@
+import { Card } from "../ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { CopyIcon, Settings2Icon } from "lucide-react";
+import { Button } from "../ui/button";
+import Enclave from "@/app/app";
+import { base58 } from "@scure/base";
+import * as ed from "@noble/ed25519";
+
+export default function AccountCard({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave | null>;
+}) {
+  const account = appRef.current?.getAccount();
+
+  if (!account) return null;
+
+  return (
+    <div className="absolute -left-16 right-16 bottom-0 h-20 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden">
+      <Card className="px-3 py-3 h-full w-full flex flex-row">
+        <div className="flex gap-2.5 items-center">
+          <Avatar className="h-full w-auto aspect-square">
+            <AvatarImage src={account.avatar} />
+            <AvatarFallback>{account.displayName[0]}</AvatarFallback>
+          </Avatar>
+          <div className="flex flex-col">
+            <span
+              className="flex items-center gap-1.5 cursor-pointer"
+              onClick={() => {
+                navigator.clipboard.writeText(
+                  base58.encode(
+                    ed.getPublicKey(base58.decode(account.privateKey)),
+                  ),
+                );
+              }}
+            >
+              {account.displayName}
+              <CopyIcon className="text-muted-foreground size-3" />
+            </span>
+            <span className="text-muted-foreground">Online</span>
+          </div>
+        </div>
+        <div className="ml-auto flex items-center text-muted-foreground">
+          <Button variant="ghost" className="size-10">
+            <Settings2Icon className="size-5.5" />
+          </Button>
+        </div>
+      </Card>
+    </div>
+  );
+}

src/components/view/Sidebar.tsx

@@ -1,10 +1,8 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/app/protocol";
-import { ChevronDown, ChevronUp, HashIcon, Settings2Icon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon } from "lucide-react";
 import { useState } from "react";
-import { Card } from "../ui/card";
+import AccountCard from "./AccountCard";
-import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Button } from "../ui/button";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   switch (kind) {
@@ -23,7 +21,7 @@ export function RenderCategory({ channel }: { channel: Channel }) {
   return (
     <div>
       <div
-        className="w-full px-2 py-1 rounded-md select-none cursor-default text-sm text-foreground/70 flex items-center"
+        className="w-full px-2 py-1 rounded-md cursor-default text-sm text-foreground/70 flex items-center"
         onClick={() => setOpen((v) => !v)}
       >
         {channel.name}
@@ -60,8 +58,6 @@ export default function Sidebar({
 }: {
   appRef: React.RefObject<Enclave | null>;
 }) {
-  const account = appRef.current?.getAccount();
-
   return (
     <div className="h-screen relative w-full @container">
       {appRef.current?.server?.meta && (
@@ -76,27 +72,7 @@ export default function Sidebar({
         </>
       )}
 
-      {account && (
+      <AccountCard appRef={appRef} />
-        <div className="absolute -left-16 right-16 bottom-0 h-20 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden">
-          <Card className="px-3 py-3 h-full w-full flex flex-row">
-            <div className="flex gap-2.5 items-center">
-              <Avatar className="h-full w-auto aspect-square">
-                <AvatarImage src={account.avatar} />
-                <AvatarFallback>{account.displayName[0]}</AvatarFallback>
-              </Avatar>
-              <div className="flex flex-col">
-                <span>{account.displayName}</span>
-                <span className="text-muted-foreground">Online</span>
-              </div>
-            </div>
-            <div className="ml-auto flex items-center text-muted-foreground">
-              <Button variant="ghost" className="size-10">
-                <Settings2Icon className="size-5.5" />
-              </Button>
-            </div>
-          </Card>
-        </div>
-      )}
     </div>
   );
 }