enclave-chat/enclave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Account card

Browse Source
This commit is contained in:
selimaj-dev
2026-08-19 18:46:05 +02:00
parent 630a23b0bd
commit 55ce17a962
3 changed files with 56 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -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
+51
View File
@@ -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
+4 -28
View File
@@ -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 { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
import { Button } from "../ui/button";
import AccountCard from "./AccountCard";
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 && (
<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>
)}
<AccountCard appRef={appRef} />
</div>
);
}