From 48204fa90d910ecb146d13dcf670325d9ae59a9d Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 12:49:29 +0200
Subject: [PATCH 1/8] Open close categories

---
 src/components/view/Sidebar.tsx | 39 +++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index 1376658..1157d0c 100644
--- a/src/components/view/Sidebar.tsx
+++ b/src/components/view/Sidebar.tsx
@@ -1,6 +1,7 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/app/protocol";
-import { HashIcon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon } from "lucide-react";
+import { useState } from "react";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   switch (kind) {
@@ -11,17 +12,37 @@ export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   }
 }
 
+export function RenderCategory({ channel }: { channel: Channel }) {
+  if (channel.kind !== "category") return null;
+
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <div
+        className="w-full px-2 py-1 rounded-md select-none cursor-default text-sm text-foreground/70 flex items-center"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {channel.name}
+        {open ? (
+          <ChevronDown className="p-1 shrink" />
+        ) : (
+          <ChevronUp className="p-1 shrink" />
+        )}
+      </div>
+      {open && (
+        <div className="pt-0.5 w-full flex flex-col gap-1">
+          <RenderChannels channels={channel.channels} />
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function RenderChannels({ channels }: { channels: Channel[] }) {
   return channels.map((channel) =>
     channel.kind === "category" ? (
-      <div>
-        <div className="w-full px-0.5 py-1 rounded-md select-none cursor-default text-sm text-foreground/70">
-          {channel.name}
-        </div>
-        <div className="pl-2 pr-1.5 pt-0.5 w-full flex flex-col gap-1">
-          <RenderChannels channels={channel.channels} />
-        </div>
-      </div>
+      <RenderCategory channel={channel} />
     ) : (
       <div className="w-full hover:bg-accent px-2.5 py-1.5 rounded-md flex gap-2.5 items-center select-none cursor-default text-sm text-foreground/70">
         <ChannelIcon kind={channel.kind} />

From 202a70ca52e54251701eb2f7b949a3a935ce3473 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 13:18:55 +0200
Subject: [PATCH 2/8] Improved sidebar

---
 src/App.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cbb8fb0..aebbbd0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,10 +37,14 @@ export default function App() {
           <>
             <ServerList appRef={appRef} />
             <ResizablePanelGroup orientation="horizontal" className="h-screen">
-              <ResizablePanel defaultSize="420px">
-                <Sidebar appRef={appRef} />
-              </ResizablePanel>
-              <ResizableHandle withHandle />
+              {appRef.current.server?.meta && (
+                <>
+                  <ResizablePanel defaultSize="500px" maxSize="350px">
+                    <Sidebar appRef={appRef} />
+                  </ResizablePanel>
+                  <ResizableHandle withHandle />
+                </>
+              )}
               <ResizablePanel defaultSize="100%">
                 <div className="h-screen"></div>
               </ResizablePanel>

From e71a95313ebdb06e58010149782185a532ca94fc Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 13:52:55 +0200
Subject: [PATCH 3/8] Fixed sidebar shrink

---
 src/App.tsx                        | 7 ++++++-
 src/components/view/serverList.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index aebbbd0..ece7587 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,7 +39,12 @@ export default function App() {
             <ResizablePanelGroup orientation="horizontal" className="h-screen">
               {appRef.current.server?.meta && (
                 <>
-                  <ResizablePanel defaultSize="500px" maxSize="350px">
+                  <ResizablePanel
+                    defaultSize="500px"
+                    maxSize="350px"
+                    className="shrink-0"
+                    groupResizeBehavior="preserve-pixel-size"
+                  >
                     <Sidebar appRef={appRef} />
                   </ResizablePanel>
                   <ResizableHandle withHandle />
diff --git a/src/components/view/serverList.tsx b/src/components/view/serverList.tsx
index 2ff8bc8..2624c7b 100644
--- a/src/components/view/serverList.tsx
+++ b/src/components/view/serverList.tsx
@@ -10,7 +10,7 @@ export default function ServerList({
   if (!appRef.current) return null;
 
   return (
-    <aside className="bg-card w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border">
+    <aside className="bg-card w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border shrink-0">
       {Object.entries(appRef.current.serverList).map(([hostname, server]) => {
         return (
           <img

From 021f71889c434b3f12bb0c4f159ac81d83e6c8f8 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 14:29:10 +0200
Subject: [PATCH 4/8] Sidebar profile

---
 src/App.tsx                     | 27 +++++++++++++--------------
 src/components/view/Sidebar.tsx | 24 ++++++++++++++----------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ece7587..5cab589 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,21 +35,20 @@ export default function App() {
           <NewProfilePage appRef={appRef} />
         ) : (
           <>
-            <ServerList appRef={appRef} />
             <ResizablePanelGroup orientation="horizontal" className="h-screen">
-              {appRef.current.server?.meta && (
-                <>
-                  <ResizablePanel
-                    defaultSize="500px"
-                    maxSize="350px"
-                    className="shrink-0"
-                    groupResizeBehavior="preserve-pixel-size"
-                  >
-                    <Sidebar appRef={appRef} />
-                  </ResizablePanel>
-                  <ResizableHandle withHandle />
-                </>
-              )}
+              <ResizablePanel
+                defaultSize="600px"
+                maxSize="400px"
+                minSize="4rem"
+                groupResizeBehavior="preserve-pixel-size"
+              >
+                <div className="flex">
+                  <ServerList appRef={appRef} />
+                  <Sidebar appRef={appRef} />
+                </div>
+              </ResizablePanel>
+              <ResizableHandle withHandle />
+
               <ResizablePanel defaultSize="100%">
                 <div className="h-screen"></div>
               </ResizablePanel>
diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index 1157d0c..07934d6 100644
--- a/src/components/view/Sidebar.tsx
+++ b/src/components/view/Sidebar.tsx
@@ -58,16 +58,20 @@ export default function Sidebar({
   appRef: React.RefObject<Enclave | null>;
 }) {
   return (
-    appRef.current?.server?.meta && (
-      <div className="h-screen">
-        <header className="px-3 pt-2.5 pb-2.5 text-lg font-semibold border-b border-b-border">
-          <h1>{appRef.current.server.meta.name}</h1>
-        </header>
+    <div className="h-screen relative w-full @container">
+      {appRef.current?.server?.meta && (
+        <>
+          <header className="px-3 pt-2.5 pb-2.5 text-lg font-semibold border-b border-b-border">
+            <h1>{appRef.current.server.meta.name}</h1>
+          </header>
 
-        <section className="px-1.5 pt-3.5 w-full flex flex-col gap-1">
-          <RenderChannels channels={appRef.current.server.meta.channels} />
-        </section>
-      </div>
-    )
+          <section className="px-1.5 pt-3.5 w-full flex flex-col gap-1">
+            <RenderChannels channels={appRef.current.server.meta.channels} />
+          </section>
+        </>
+      )}
+
+      <div className="absolute -left-16 right-16 bottom-0 h-24 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden" />
+    </div>
   );
 }

From 07c61f78919e9b2f020776a955545e066547bbfd Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 14:52:10 +0200
Subject: [PATCH 5/8] sidebar profile card

---
 src/components/ui/avatar.tsx    | 107 ++++++++++++++++++++++++++++++++
 src/components/ui/card.tsx      | 103 ++++++++++++++++++++++++++++++
 src/components/view/Sidebar.tsx |  26 +++++++-
 3 files changed, 233 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/avatar.tsx
 create mode 100644 src/components/ui/card.tsx

diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..e92a2f4
--- /dev/null
+++ b/src/components/ui/avatar.tsx
@@ -0,0 +1,107 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..4458dae
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index 07934d6..64d87ea 100644
--- a/src/components/view/Sidebar.tsx
+++ b/src/components/view/Sidebar.tsx
@@ -1,7 +1,10 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/app/protocol";
-import { ChevronDown, ChevronUp, HashIcon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon, SettingsIcon } from "lucide-react";
 import { useState } from "react";
+import { Card, CardTitle } from "../ui/card";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   switch (kind) {
@@ -44,7 +47,7 @@ export function RenderChannels({ channels }: { channels: Channel[] }) {
     channel.kind === "category" ? (
       <RenderCategory channel={channel} />
     ) : (
-      <div className="w-full hover:bg-accent px-2.5 py-1.5 rounded-md flex gap-2.5 items-center select-none cursor-default text-sm text-foreground/70">
+      <div className="w-full hover:bg-accent px-2.5 py-1.5 rounded-md flex gap-2.5 items-center select-none cursor-default text-sm text-muted-foreground">
         <ChannelIcon kind={channel.kind} />
         {channel.name}
       </div>
@@ -71,7 +74,24 @@ export default function Sidebar({
         </>
       )}
 
-      <div className="absolute -left-16 right-16 bottom-0 h-24 w-[calc(100%+4rem-2rem)] z-10 ml-4 mb-4 @max-[150px]:hidden" />
+      <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 overflow-hidden gap-2.5 items-center">
+            <Avatar className="h-full w-auto aspect-square">
+              <AvatarImage src="https://avatars.githubusercontent.com/u/103524696?v=4" />
+            </Avatar>
+            <div className="flex flex-col">
+              <span>Klesti Selimaj</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">
+              <SettingsIcon className="size-5.5" />
+            </Button>
+          </div>
+        </Card>
+      </div>
     </div>
   );
 }

From 35e8d58fdbca242b2f9250e3be26ddd8704544c2 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 14:59:28 +0200
Subject: [PATCH 6/8] Updated settings icon

---
 src/components/view/Sidebar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index 64d87ea..46e2c76 100644
--- a/src/components/view/Sidebar.tsx
+++ b/src/components/view/Sidebar.tsx
@@ -1,8 +1,8 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/app/protocol";
-import { ChevronDown, ChevronUp, HashIcon, SettingsIcon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon, Settings2Icon } from "lucide-react";
 import { useState } from "react";
-import { Card, CardTitle } from "../ui/card";
+import { Card } from "../ui/card";
 import { Avatar, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
 
@@ -87,7 +87,7 @@ export default function Sidebar({
           </div>
           <div className="ml-auto flex items-center text-muted-foreground">
             <Button variant="ghost" className="size-10">
-              <SettingsIcon className="size-5.5" />
+              <Settings2Icon className="size-5.5" />
             </Button>
           </div>
         </Card>

From 630a23b0bda038e898166f5047064201215b764b Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 18:24:44 +0200
Subject: [PATCH 7/8] Account and avatar

---
 src-tauri/src/commands/accounts.rs     |  1 +
 src/app/app.ts                         |  8 +++-
 src/components/view/NewProfileView.tsx | 52 +++++++++++++++++++++++++-
 src/components/view/Sidebar.tsx        | 41 +++++++++++---------
 src/components/view/serverList.tsx     |  2 +-
 src/lib/accounts.ts                    |  1 +
 6 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/src-tauri/src/commands/accounts.rs b/src-tauri/src/commands/accounts.rs
index c5ff008..18043f1 100644
--- a/src-tauri/src/commands/accounts.rs
+++ b/src-tauri/src/commands/accounts.rs
@@ -6,6 +6,7 @@ use tauri::{AppHandle, Manager};
 #[serde(rename_all = "camelCase")]
 pub struct Account {
     pub display_name: String,
+    pub avatar: Option<String>,
     pub private_key: String,
 }
 
diff --git a/src/app/app.ts b/src/app/app.ts
index 8eb46a6..62f033d 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -5,7 +5,7 @@ import { sha512 } from "@noble/hashes/sha2.js";
 import { base58 } from "@scure/base";
 
 import axios from "axios";
-import { AccountsFile, getAccounts } from "@/lib/accounts";
+import { Account, AccountsFile, getAccounts } from "@/lib/accounts";
 
 ed.hashes.sha512 = sha512;
 
@@ -38,6 +38,10 @@ export default class Enclave {
     this.accounts = await getAccounts();
   }
 
+  public getAccount(): Account | null {
+    return this.accounts?.accounts[this.accounts.activeAccount] || null;
+  }
+
   public async connectToServer(hostname: string, isSecure: boolean) {
     if (this.server) {
       this.server.disconnect();
@@ -87,7 +91,7 @@ export default class Enclave {
   public getClientSecretKey() {
     if (!this.accounts) return null;
 
-    const account = this.accounts?.accounts[this.accounts.activeAccount];
+    const account = this.getAccount();
 
     return account ? base58.decode(account.privateKey) : null;
   }
diff --git a/src/components/view/NewProfileView.tsx b/src/components/view/NewProfileView.tsx
index 49dba06..a5c06d8 100644
--- a/src/components/view/NewProfileView.tsx
+++ b/src/components/view/NewProfileView.tsx
@@ -7,6 +7,16 @@ import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { saveAccounts } from "@/lib/accounts";
 import Enclave from "@/app/app";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+
+function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error("Failed to read image"));
+    reader.readAsDataURL(file);
+  });
+}
 
 export function NewProfilePage({
   appRef,
@@ -14,9 +24,28 @@ export function NewProfilePage({
   appRef: React.RefObject<Enclave | null>;
 }) {
   const [displayName, setDisplayName] = useState("");
+  const [avatar, setAvatar] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
+  async function handleAvatarChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      setError("Please select an image file");
+      return;
+    }
+
+    try {
+      const dataUrl = await readFileAsDataUrl(file);
+      setAvatar(dataUrl);
+      setError(null);
+    } catch {
+      setError("Failed to load image");
+    }
+  }
+
   async function handleCreate() {
     const name = displayName.trim();
     if (!name) {
@@ -42,6 +71,7 @@ export function NewProfilePage({
       const newAccount = {
         displayName: name,
         privateKey: base58.encode(secretKey),
+        avatar: avatar ?? undefined,
       };
 
       appRef.current.accounts.activeAccount =
@@ -54,11 +84,13 @@ export function NewProfilePage({
       setError(e instanceof Error ? e.message : "Failed to create profile");
     } finally {
       setSubmitting(false);
+
+      window.location.reload();
     }
   }
 
   return (
-    <div className="flex h-screen items-center justify-center">
+    <div className="flex h-screen w-full items-center justify-center">
       <div className="w-full max-w-sm space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-2xl font-semibold">Create your profile</h1>
@@ -68,6 +100,24 @@ export function NewProfilePage({
           </p>
         </div>
 
+        <div className="flex flex-col items-center gap-3">
+          <label htmlFor="avatar-upload" className="cursor-pointer">
+            <div className="h-20 w-20 overflow-hidden rounded-full border border-border bg-muted flex items-center justify-center hover:opacity-80 transition-opacity">
+              <Avatar className="h-full w-auto aspect-square">
+                {avatar && <AvatarImage src={avatar} />}
+                <AvatarFallback>{displayName[0] || "J"}</AvatarFallback>
+              </Avatar>
+            </div>
+          </label>
+          <input
+            id="avatar-upload"
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleAvatarChange}
+          />
+        </div>
+
         <div className="space-y-2">
           <Label htmlFor="display-name">Display name</Label>
           <Input
diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index 46e2c76..c42e1a2 100644
--- a/src/components/view/Sidebar.tsx
+++ b/src/components/view/Sidebar.tsx
@@ -3,7 +3,7 @@ import { Channel, ChannelKind } from "@/app/protocol";
 import { ChevronDown, ChevronUp, HashIcon, Settings2Icon } from "lucide-react";
 import { useState } from "react";
 import { Card } from "../ui/card";
-import { Avatar, AvatarImage } from "../ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { Button } from "../ui/button";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
@@ -60,6 +60,8 @@ 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 && (
@@ -74,24 +76,27 @@ export default function Sidebar({
         </>
       )}
 
-      <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 overflow-hidden gap-2.5 items-center">
-            <Avatar className="h-full w-auto aspect-square">
-              <AvatarImage src="https://avatars.githubusercontent.com/u/103524696?v=4" />
-            </Avatar>
-            <div className="flex flex-col">
-              <span>Klesti Selimaj</span>
-              <span className="text-muted-foreground">Online</span>
+      {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>
-          <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 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>
   );
 }
diff --git a/src/components/view/serverList.tsx b/src/components/view/serverList.tsx
index 2624c7b..ae84df4 100644
--- a/src/components/view/serverList.tsx
+++ b/src/components/view/serverList.tsx
@@ -10,7 +10,7 @@ export default function ServerList({
   if (!appRef.current) return null;
 
   return (
-    <aside className="bg-card w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border shrink-0">
+    <aside className="w-16 h-screen p-2 flex flex-col gap-2.5 border-r border-r-border shrink-0">
       {Object.entries(appRef.current.serverList).map(([hostname, server]) => {
         return (
           <img
diff --git a/src/lib/accounts.ts b/src/lib/accounts.ts
index 8d2a20d..f9ff4ac 100644
--- a/src/lib/accounts.ts
+++ b/src/lib/accounts.ts
@@ -2,6 +2,7 @@ import { invoke } from "@tauri-apps/api/core";
 
 export interface Account {
   displayName: string;
+  avatar?: string;
   privateKey: string;
 }
 

From 55ce17a962ca02632ed16dd8a63c96b39870735b Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 19 Aug 2026 18:46:05 +0200
Subject: [PATCH 8/8] Account card

---
 src/App.tsx                         |  2 +-
 src/components/view/AccountCard.tsx | 51 +++++++++++++++++++++++++++++
 src/components/view/Sidebar.tsx     | 32 +++---------------
 3 files changed, 56 insertions(+), 29 deletions(-)
 create mode 100644 src/components/view/AccountCard.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 5cab589..3f7d97e 100644
--- a/src/App.tsx
+++ b/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} />
diff --git a/src/components/view/AccountCard.tsx b/src/components/view/AccountCard.tsx
new file mode 100644
index 0000000..2fefd43
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index c42e1a2..a76b0f7 100644
--- a/src/components/view/Sidebar.tsx
+++ b/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 { 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>
   );
 }