From d0af308e7183c81034250c4f92fa6e826a6c41a2 Mon Sep 17 00:00:00 2001
From: Suliman Abdulrazzaq <suliman9000a@gmail.com>
Date: Sat, 8 Aug 2026 21:23:03 +0300
Subject: [PATCH] feat(ui): highlight current client session

---
 ui/src/client/Clients.tsx   | 11 ++++++++---
 ui/src/tests/client.test.ts |  8 +++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/ui/src/client/Clients.tsx b/ui/src/client/Clients.tsx
index 2f0e9639b..829b18992 100644
--- a/ui/src/client/Clients.tsx
+++ b/ui/src/client/Clients.tsx
@@ -26,7 +26,7 @@ import {useStores} from '../stores';
 import {TokenConfirmDialog} from '../common/TokenConfirmDialog';
 
 const Clients = observer(() => {
-    const {clientStore} = useStores();
+    const {clientStore, currentUser} = useStores();
     const [toDeleteClient, setToDeleteClient] = useState<IClient>();
     const [toUpdateClient, setToUpdateClient] = useState<IClient>();
     const [toElevateClient, setToElevateClient] = useState<IClient>();
@@ -73,6 +73,7 @@ const Clients = observer(() => {
                                     lastUsed={client.lastUsed}
                                     elevatedUntil={client.elevatedUntil}
                                     expiresAt={client.expiresAt}
+                                    current={client.id === currentUser.user.clientId}
                                     fEdit={() => setToUpdateClient(client)}
                                     fDelete={() => setToDeleteClient(client)}
                                     fElevate={() => setToElevateClient(client)}
@@ -132,6 +133,7 @@ interface IRowProps {
     lastUsed: string | null;
     elevatedUntil?: string;
     expiresAt: string | null;
+    current: boolean;
     fEdit: VoidFunction;
     fDelete: VoidFunction;
     fElevate: VoidFunction;
@@ -143,12 +145,15 @@ const Row = ({
     lastUsed,
     elevatedUntil,
     expiresAt,
+    current,
     fEdit,
     fDelete,
     fElevate,
 }: IRowProps) => (
-    <TableRow>
-        <TableCell>{name}</TableCell>
+    <TableRow selected={current} aria-current={current ? 'true' : undefined}>
+        <TableCell>
+            <span className="name">{name}</span> {current ? <i> (current)</i> : ''}
+        </TableCell>
         <TableCell align="right" title={elevatedUntil}>
             <RemainingTime
                 until={
diff --git a/ui/src/tests/client.test.ts b/ui/src/tests/client.test.ts
index 1c8103ec8..3b935a733 100644
--- a/ui/src/tests/client.test.ts
+++ b/ui/src/tests/client.test.ts
@@ -18,7 +18,7 @@ afterAll(async () => await gotify.close());
 const waitForClient =
     (name: string, row: number): (() => Promise<void>) =>
     async () => {
-        await waitForExists(page, $table.cell(row, ClientCol.Name), name);
+        await waitForExists(page, $table.cell(row, ClientCol.Name) + ' .name', name);
     };
 
 interface ClientFields {
@@ -94,6 +94,12 @@ describe('Client', () => {
         expect(await innerText(page, $table.cell(2, ClientCol.Name))).toBe('phone');
         expect(await innerText(page, $table.cell(3, ClientCol.Name))).toBe('desktop app');
     });
+    it('highlights only the current session', async () => {
+        const currentSession = `${$table.rows()}[aria-current="true"]`;
+
+        page.waitForSelector(currentSession);
+        expect(await innerText(page, `${currentSession} td:first-child`)).toContain('chrome');
+    });
     it('shows expires after for new clients', async () => {
         expect(await innerText(page, $table.cell(2, ClientCol.ExpiresIn))).toBe('-');
         expect(await innerText(page, $table.cell(3, ClientCol.ExpiresIn))).toBe('59m');