From 48acd4de0471629e440448ff637e425eebf6db0a Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 20:22:14 +0200
Subject: [PATCH 01/14] feat: add modal prop to ApplicationLayout and create
 UserSettingsPage

---
 .../@modal/(.)users/[userId]/settings/page.tsx       |  3 +++
 src/app/(dashboard)/layout.tsx                       | 12 ++++++++----
 src/app/(dashboard)/users/[userId]/settings/page.tsx |  3 +++
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(dashboard)/@modal/(.)users/[userId]/settings/page.tsx
 create mode 100644 src/app/(dashboard)/users/[userId]/settings/page.tsx

diff --git a/src/app/(dashboard)/@modal/(.)users/[userId]/settings/page.tsx b/src/app/(dashboard)/@modal/(.)users/[userId]/settings/page.tsx
new file mode 100644
index 00000000..9be742b3
--- /dev/null
+++ b/src/app/(dashboard)/@modal/(.)users/[userId]/settings/page.tsx
@@ -0,0 +1,3 @@
+import {UserSettingsPage} from "@edition/user/pages/UserSettingsPage";
+
+export default UserSettingsPage
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 714ecb0d..c740179c 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -26,9 +26,10 @@ interface ApplicationLayoutProps {
     children: React.ReactNode
     bar: React.ReactNode
     tab: React.ReactNode
+    modal: React.ReactNode
 }
 
-const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab}) => {
+const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab, modal}) => {
 
     const client = useApolloClient()
     const pathname = usePathname()
@@ -83,9 +84,12 @@ const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, bar, tab
                 </Flex>
             }>
                 <Layout showLayoutSplitter={false} pr={0.7} layoutGap={"0"} topContent={<>{bar}</>}>
-                    <Layout>
-                        <>{children}</>
-                    </Layout>
+                    <>
+                        <Layout>
+                            <>{children}</>
+                        </Layout>
+                        {modal}
+                    </>
                 </Layout>
             </Layout>
         </ApplicationMiddlewareComponent>
diff --git a/src/app/(dashboard)/users/[userId]/settings/page.tsx b/src/app/(dashboard)/users/[userId]/settings/page.tsx
new file mode 100644
index 00000000..9be742b3
--- /dev/null
+++ b/src/app/(dashboard)/users/[userId]/settings/page.tsx
@@ -0,0 +1,3 @@
+import {UserSettingsPage} from "@edition/user/pages/UserSettingsPage";
+
+export default UserSettingsPage

From e90aa4dc9e31da573ad8d87f645dff5f046b0c63 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 20:22:21 +0200
Subject: [PATCH 02/14] feat: create Default component as a placeholder

---
 src/app/(dashboard)/@modal/default.tsx | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/app/(dashboard)/@modal/default.tsx

diff --git a/src/app/(dashboard)/@modal/default.tsx b/src/app/(dashboard)/@modal/default.tsx
new file mode 100644
index 00000000..cd2081a3
--- /dev/null
+++ b/src/app/(dashboard)/@modal/default.tsx
@@ -0,0 +1,3 @@
+export default function Default() {
+    return null
+}

From fb5c3cba081cca8abfbb5650cf12070e4600e521 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 21:21:47 +0200
Subject: [PATCH 03/14] feat: create UserSettingsPage component for user
 profile management

---
 .../ce/src/user/pages/UserSettingsPage.tsx    | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/packages/ce/src/user/pages/UserSettingsPage.tsx

diff --git a/src/packages/ce/src/user/pages/UserSettingsPage.tsx b/src/packages/ce/src/user/pages/UserSettingsPage.tsx
new file mode 100644
index 00000000..920ae4ba
--- /dev/null
+++ b/src/packages/ce/src/user/pages/UserSettingsPage.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import React from "react";
+import {notFound, useParams, useRouter} from "next/navigation";
+import {useService, useStore} from "@code0-tech/pictor";
+import {User} from "@code0-tech/sagittarius-graphql-types";
+import {UserEditDialogComponent} from "@edition/user/components/UserEditDialogComponent";
+import {UserService} from "@edition/user/services/User.service";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
+
+export const UserSettingsPage: React.FC = () => {
+
+    const params = useParams()
+    const router = useRouter()
+    const currentSession = useUserSession()
+    const userService = useService(UserService)
+    const userStore = useStore(UserService)
+
+    const userIndex = decodeURIComponent(String(params.userId)) as unknown as (number | '@me')
+    const isMe = userIndex === "@me"
+    const userId: User['id'] | undefined = isMe
+        ? currentSession?.user?.id
+        : `gid://sagittarius/User/${userIndex}`
+
+    const currentUser = React.useMemo(
+        () => userService.getById(currentSession?.user?.id),
+        [userStore, currentSession]
+    )
+
+    const isSelf = isMe || (!!currentUser && userId === currentUser.id)
+
+    if (currentUser && !isSelf && !currentUser.admin) {
+        notFound()
+    }
+
+    return <UserEditDialogComponent userId={userId}
+                                    open={true}
+                                    onOpenChange={(open) => {
+                                        if (open) return
+                                        const [nav] = performance.getEntriesByType("navigation") as PerformanceNavigationTiming[]
+                                        const openedDirectly = !nav || new URL(nav.name).pathname === window.location.pathname
+                                        if (openedDirectly) router.push(isMe ? "/users/@me" : "/")
+                                        else router.back()
+                                    }}/>
+}

From a224769b3cf6859d18fa194be31682f48da1de23 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 21:22:31 +0200
Subject: [PATCH 04/14] feat: update UsersPage to navigate to user settings on
 selection

---
 src/packages/ce/src/user/pages/UsersPage.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/packages/ce/src/user/pages/UsersPage.tsx b/src/packages/ce/src/user/pages/UsersPage.tsx
index 1787d966..6a0bd983 100644
--- a/src/packages/ce/src/user/pages/UsersPage.tsx
+++ b/src/packages/ce/src/user/pages/UsersPage.tsx
@@ -17,17 +17,16 @@ import {
 } from "@code0-tech/pictor";
 import {UserService} from "@edition/user/services/User.service";
 import Link from "next/link";
-import {notFound} from "next/navigation";
+import {notFound, useRouter} from "next/navigation";
 import {UserDataTableComponent} from "@edition/user/components/UserDataTableComponent";
 import {DataTableFilterProps, DataTableSortProps} from "@code0-tech/pictor/dist/components/data-table/DataTable";
 import {UserDataTableFilterInputComponent} from "@edition/user/components/UserDataTableFilterInputComponent";
-import {UserEditDialogComponent} from "@edition/user/components/UserEditDialogComponent";
 import {IconMinus, IconSortAscending, IconSortDescending} from "@tabler/icons-react";
 import {useUserSession} from "@edition/user/hooks/User.session.hook";
-import {User} from "@code0-tech/sagittarius-graphql-types";
 
 export const UsersPage: React.FC = () => {
 
+    const router = useRouter()
     const currentSession = useUserSession()
     const userStore = useStore(UserService)
     const userService = useService(UserService)
@@ -35,7 +34,6 @@ export const UsersPage: React.FC = () => {
 
     const [filter, setFilter] = React.useState<DataTableFilterProps>({})
     const [sort, setSort] = React.useState<DataTableSortProps>({})
-    const [editUserId, setEditUserId] = React.useState<User['id'] | undefined>(undefined)
 
     if (currentUser && !currentUser.admin) {
         notFound()
@@ -131,11 +129,8 @@ export const UsersPage: React.FC = () => {
         </div>
         <Spacing spacing={"xl"}/>
         <UserDataTableComponent sort={sort} filter={filter}
-                                onSelect={(item) => setEditUserId(item?.id)}/>
-        <UserEditDialogComponent userId={editUserId}
-                                 open={editUserId !== undefined}
-                                 onOpenChange={(open) => {
-                                     if (!open) setEditUserId(undefined)
-                                 }}/>
+                                onSelect={(item) => {
+                                    if (item?.id) router.push(`/users/${item.id.split("/").pop()}/settings`)
+                                }}/>
     </div>
 }
\ No newline at end of file

From 9f7e3777c894e4de0e511579ffe80238336ef7bd Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 21:23:03 +0200
Subject: [PATCH 05/14] feat: update UserPage to link to user settings for
 profile editing

---
 src/packages/ce/src/user/pages/UserPage.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/packages/ce/src/user/pages/UserPage.tsx b/src/packages/ce/src/user/pages/UserPage.tsx
index 34b0cdd4..bb168afd 100644
--- a/src/packages/ce/src/user/pages/UserPage.tsx
+++ b/src/packages/ce/src/user/pages/UserPage.tsx
@@ -3,6 +3,7 @@
 import React from "react";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 import {useParams} from "next/navigation";
+import Link from "next/link";
 import {
     AuroraBackground,
     Avatar,
@@ -29,15 +30,17 @@ export const UserPage: React.FC = () => {
     const userService = useService(UserService)
     const userStore = useStore(UserService)
 
-    const userIndex = params.userId as any as number
-    const userId: User['id'] = `gid://sagittarius/User/${userIndex}`
-
     const currentSession = useUserSession()
     const currentUser = React.useMemo(
         () => userService.getById(currentSession?.user?.id),
         [userStore, currentSession]
     )
 
+    const userIndex = decodeURIComponent(String(params.userId ?? ""))
+    const userId: User['id'] = userIndex === "@me"
+        ? currentSession?.user?.id!
+        : `gid://sagittarius/User/${userIndex as any as number}`
+
     const user = React.useMemo(
         () => userService.getById(userId),
         [userStore, userId, userService]
@@ -74,7 +77,9 @@ export const UserPage: React.FC = () => {
                 {currentUser?.id === userId && (
                     <>
                         <Spacing spacing={"xs"}/>
-                        <Button w={"100%"} color={"tertiary"}>Edit Profile</Button>
+                        <Link href={"/users/@me/settings"} style={{width: "100%"}}>
+                            <Button w={"100%"} color={"tertiary"}>Edit Profile</Button>
+                        </Link>
                         <Spacing spacing={"xs"}/>
                         <Button color={"primary"} w={"100%"}>
                             Upgrade to Pro

From e454a54373c41637fa4a65a8425159b6d89394f4 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 21:23:36 +0200
Subject: [PATCH 06/14] feat: enhance UserEditDialogComponent to restrict admin
 and blocked fields for self-editing

---
 .../components/UserEditDialogComponent.tsx    | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/packages/ce/src/user/components/UserEditDialogComponent.tsx b/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
index 57c1ff87..5c83c125 100644
--- a/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
+++ b/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
@@ -30,6 +30,7 @@ import CardSection from "@code0-tech/pictor/dist/components/card/CardSection";
 import {Tab, TabContent, TabList, TabTrigger} from "@code0-tech/pictor/dist/components/tab/Tab";
 import {User, UsersUpdateInput} from "@code0-tech/sagittarius-graphql-types";
 import {UserService} from "@edition/user/services/User.service";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
 import {addIslandSuccessNotification} from "@code0-tech/pictor/dist/components/island/Island.hook";
 import {IconAt, IconBackground, IconLock, IconMail, IconSettings2, IconShieldLock} from "@tabler/icons-react";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
@@ -49,11 +50,14 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
     const userStore = useStore(UserService)
     const [, startTransition] = React.useTransition()
 
+    const currentSession = useUserSession()
     const user = React.useMemo(
         () => userService.getById(userId),
         [userStore, userId]
     )
 
+    const isSelf = !!user && !!currentSession?.user?.id && user.id === currentSession.user.id
+
     const initialValues = React.useMemo(() => ({
         firstname: user?.firstname ?? null,
         lastname: user?.lastname ?? null,
@@ -110,8 +114,10 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
             if (values.firstname !== (user?.firstname ?? null)) payload.firstname = values.firstname
             if (values.lastname !== (user?.lastname ?? null)) payload.lastname = values.lastname
             if (values.readme !== (user?.readme ?? null)) payload.readme = values.readme
-            if (values.admin !== (user?.admin ?? false)) payload.admin = values.admin
-            if (values.blocked !== (user?.blocked ?? false)) payload.blocked = values.blocked
+            if (!isSelf) {
+                if (values.admin !== (user?.admin ?? false)) payload.admin = values.admin
+                if (values.blocked !== (user?.blocked ?? false)) payload.blocked = values.blocked
+            }
             if (values.password) {
                 payload.password = values.password
                 payload.passwordRepeat = values.repeatPassword
@@ -185,12 +191,14 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
                                                 <Text size={"md"}>General</Text>
                                             </Button>
                                         </TabTrigger>
-                                        <TabTrigger value={"permissions"} w={"100%"} asChild>
-                                            <Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
-                                                <IconShieldLock size={13}/>
-                                                <Text size={"md"}>Access</Text>
-                                            </Button>
-                                        </TabTrigger>
+                                        {!isSelf && (
+                                            <TabTrigger value={"permissions"} w={"100%"} asChild>
+                                                <Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
+                                                    <IconShieldLock size={13}/>
+                                                    <Text size={"md"}>Access</Text>
+                                                </Button>
+                                            </TabTrigger>
+                                        )}
                                         <TabTrigger value={"security"} w={"100%"} asChild>
                                             <Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
                                                 <IconSettings2 opacity={0} size={13}/>
@@ -256,7 +264,7 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
                                                description={"A short bio or notes shown on the user's profile."}
                                                {...inputs.getInputProps("readme")}/>
                             </TabContent>
-                            <TabContent value={"permissions"} style={{overflow: "hidden"}}>
+                            <TabContent value={"permissions"} style={{overflow: "hidden", display: isSelf ? "none" : undefined}}>
                                 <Flex justify={"space-between"} align={"center"}>
                                     <Text size={"lg"} hierarchy={"primary"} display={"block"}>Access</Text>
                                     <Button paddingSize={"xxs"} color={"success"} variant={"none"}

From ab495bb281dba6b0d194e48affb2c531e7f1fc7e Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:27:17 +0200
Subject: [PATCH 07/14] feat: improve navigation handling in UserSettingsPage
 for better user experience

---
 .../ce/src/user/pages/UserSettingsPage.tsx      | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/packages/ce/src/user/pages/UserSettingsPage.tsx b/src/packages/ce/src/user/pages/UserSettingsPage.tsx
index 920ae4ba..a558351b 100644
--- a/src/packages/ce/src/user/pages/UserSettingsPage.tsx
+++ b/src/packages/ce/src/user/pages/UserSettingsPage.tsx
@@ -37,9 +37,18 @@ export const UserSettingsPage: React.FC = () => {
                                     open={true}
                                     onOpenChange={(open) => {
                                         if (open) return
-                                        const [nav] = performance.getEntriesByType("navigation") as PerformanceNavigationTiming[]
-                                        const openedDirectly = !nav || new URL(nav.name).pathname === window.location.pathname
-                                        if (openedDirectly) router.push(isMe ? "/users/@me" : "/")
-                                        else router.back()
+
+                                        const nav = (window as unknown as { navigation?: { entries(): { url: string }[], currentEntry?: { index: number } } }).navigation
+                                        if (!nav?.entries) {
+                                            router.back()
+                                            return
+                                        }
+
+                                        const index = nav.currentEntry?.index ?? 0
+                                        const previous = index > 0 ? nav.entries()[index - 1] : undefined
+                                        const previousIsSettings = !!previous && new URL(previous.url).pathname.endsWith("/settings")
+
+                                        if (previous && !previousIsSettings) router.back()
+                                        else router.push(isMe ? "/users/@me" : `/users/${userIndex}`)
                                     }}/>
 }

From 345f99d8e5ce9ec04876a2e27e441e0d0564e271 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:27:27 +0200
Subject: [PATCH 08/14] feat: add settings link to user menu in
 ApplicationBarView for easier access

---
 .../ce/src/application/views/ApplicationBarView.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/packages/ce/src/application/views/ApplicationBarView.tsx b/src/packages/ce/src/application/views/ApplicationBarView.tsx
index 45c7547f..304e3ac3 100644
--- a/src/packages/ce/src/application/views/ApplicationBarView.tsx
+++ b/src/packages/ce/src/application/views/ApplicationBarView.tsx
@@ -12,7 +12,7 @@ import {
     IconFolders,
     IconInbox,
     IconLogout,
-    IconSearch,
+    IconSearch, IconSettings,
     IconUser
 } from "@tabler/icons-react";
 import {ApplicationBreadcrumbView} from "@edition/application/views/ApplicationBreadcrumbView";
@@ -151,15 +151,20 @@ export const ApplicationBarView: React.FC = () => {
         }
 
         return <UserMenuComponent userId={currentSession.user?.id!!}>
-            <Link href={`/users/${userIndex}`}>
+            <Link href={`/users/@me`}>
                 <MenuItem>
                     <IconUser size={16}/>Profile
                 </MenuItem>
             </Link>
+            <Link href={`/users/@me/settings`}>
+                <MenuItem>
+                    <IconSettings size={16}/>Settings
+                </MenuItem>
+            </Link>
             <MenuSeparator/>
             <Link href={"/workspaces"}>
                 <MenuItem>
-                    <IconBuilding size={16}/>Organizations
+                    <IconBuilding size={16}/>Workspaces
                 </MenuItem>
             </Link>
             <Link href={`/namespace/${userNamespaceIndex}`}>

From 1ab3948a878b98449313879d9b3d4191fce79581 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:56:46 +0200
Subject: [PATCH 09/14] feat: update user session handling on logout to improve
 session management

---
 .../ce/src/user/services/User.service.ts         | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/packages/ce/src/user/services/User.service.ts b/src/packages/ce/src/user/services/User.service.ts
index ba5bf797..cb69a642 100644
--- a/src/packages/ce/src/user/services/User.service.ts
+++ b/src/packages/ce/src/user/services/User.service.ts
@@ -256,8 +256,20 @@ export class UserService extends ReactiveArrayService<User> {
             }
         })
 
-        if (result.data && result.data.usersLogout && result.data.usersLogout.userSession && result.data.usersLogout.userSession.user) {
-            this.deleteById(result.data.usersLogout.userSession.user.id)
+        const loggedOutSession = result.data?.usersLogout?.userSession
+        if (loggedOutSession && (result.data?.usersLogout?.errors?.length ?? 0) <= 0) {
+            const index = super.values().findIndex(user => user?.sessions?.nodes?.some(session => session?.id === loggedOutSession.id))
+            const user = index >= 0 ? super.values()[index] : undefined
+            if (user?.sessions) {
+                this.set(index, new View({
+                    ...user,
+                    sessions: {
+                        ...user.sessions,
+                        count: Math.max((user.sessions.count ?? 1) - 1, 0),
+                        nodes: (user.sessions.nodes ?? []).filter(session => session?.id !== loggedOutSession.id)
+                    }
+                }))
+            }
         }
 
         return result.data?.usersLogout ?? undefined

From 5eba72c14a135d42b447fa455acd72b07cc7e5a5 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:58:50 +0200
Subject: [PATCH 10/14] feat: add UserSessionsDataTableComponent for displaying
 user session data

---
 .../UserSessionsDataTableComponent.tsx        | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/packages/ce/src/user/components/UserSessionsDataTableComponent.tsx

diff --git a/src/packages/ce/src/user/components/UserSessionsDataTableComponent.tsx b/src/packages/ce/src/user/components/UserSessionsDataTableComponent.tsx
new file mode 100644
index 00000000..77136272
--- /dev/null
+++ b/src/packages/ce/src/user/components/UserSessionsDataTableComponent.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import React from "react";
+import {
+    DataTable,
+    DataTableColumn,
+    ScrollArea,
+    ScrollAreaScrollbar, ScrollAreaThumb,
+    ScrollAreaViewport,
+    Text,
+    useService,
+    useStore
+} from "@code0-tech/pictor";
+import {User, UserSession} from "@code0-tech/sagittarius-graphql-types";
+import {UserService} from "@edition/user/services/User.service";
+import {UserSessionsDataTableRowComponent} from "@edition/user/components/UserSessionsDataTableRowComponent";
+
+export interface UserSessionsDataTableComponentProps {
+    userId: User['id']
+}
+
+export const UserSessionsDataTableComponent: React.FC<UserSessionsDataTableComponentProps> = (props) => {
+
+    const {userId} = props
+
+    const userService = useService(UserService)
+    const userStore = useStore(UserService)
+
+    const sessions = React.useMemo(
+        () => (userService.getById(userId)?.sessions?.nodes ?? []).filter((session): session is UserSession => !!session && !!session.active),
+        [userStore, userId]
+    )
+
+    return <ScrollArea w={"100%"} h={"100%"} type={"scroll"}>
+        <ScrollAreaViewport>
+            <DataTable filter={{}}
+                       sort={{}}
+                       emptyComponent={<DataTableColumn>
+                           <Text>No sessions found for this user.</Text>
+                       </DataTableColumn>}
+                       data={sessions}>
+                {(session) => <UserSessionsDataTableRowComponent userId={userId} sessionId={session.id}/>}
+            </DataTable>
+        </ScrollAreaViewport>
+        <ScrollAreaScrollbar orientation={"vertical"}>
+            <ScrollAreaThumb/>
+        </ScrollAreaScrollbar>
+    </ScrollArea>
+}

From 397a9e14e2dccd61da5e6761c192c3d90c67fef1 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:59:03 +0200
Subject: [PATCH 11/14] feat: add UserSessionsDataTableRowComponent for
 displaying individual user session details

---
 .../UserSessionsDataTableRowComponent.tsx     | 75 +++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/packages/ce/src/user/components/UserSessionsDataTableRowComponent.tsx

diff --git a/src/packages/ce/src/user/components/UserSessionsDataTableRowComponent.tsx b/src/packages/ce/src/user/components/UserSessionsDataTableRowComponent.tsx
new file mode 100644
index 00000000..03f4d811
--- /dev/null
+++ b/src/packages/ce/src/user/components/UserSessionsDataTableRowComponent.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import React from "react";
+import {User, UserSession} from "@code0-tech/sagittarius-graphql-types";
+import {Button, DataTableColumn, Flex, Text, useService, useStore} from "@code0-tech/pictor";
+import {UserService} from "@edition/user/services/User.service";
+import {useUserSession} from "@edition/user/hooks/User.session.hook";
+import {formatDistanceToNow} from "date-fns";
+import {IconDeviceDesktop, IconLogout} from "@tabler/icons-react";
+import {addIslandSuccessNotification} from "@code0-tech/pictor/dist/components/island/Island.hook";
+
+export interface UserSessionsDataTableRowComponentProps {
+    userId: User['id']
+    sessionId: UserSession['id']
+}
+
+export const UserSessionsDataTableRowComponent: React.FC<UserSessionsDataTableRowComponentProps> = (props) => {
+
+    const {userId, sessionId} = props
+
+    const userService = useService(UserService)
+    const userStore = useStore(UserService)
+    const currentSession = useUserSession()
+
+    const session = React.useMemo(
+        () => userService.getById(userId)?.sessions?.nodes?.find(session => session?.id === sessionId) as UserSession | undefined,
+        [userStore, userId, sessionId]
+    )
+
+    const isCurrent = !!sessionId && sessionId === currentSession?.id
+
+    const logout = React.useCallback(() => {
+        if (!sessionId) return
+        userService.usersLogout({userSessionId: sessionId}).then(payload => {
+            if ((payload?.errors?.length ?? 0) <= 0) {
+                addIslandSuccessNotification({
+                    message: "Logged out session"
+                })
+            }
+        })
+    }, [sessionId])
+
+    if (!session) return null
+
+    return <>
+        <DataTableColumn pr={2.5}>
+            <Flex align={"center"} style={{gap: "0.7rem"}}>
+                <IconDeviceDesktop size={16}/>
+                <Flex style={{flexDirection: "column"}}>
+                    <Text size={"md"} hierarchy={"primary"}>
+                        {isCurrent ? "This device" : "Session"}
+                    </Text>
+                    {session.createdAt && (
+                        <Text size={"xs"} hierarchy={"tertiary"}>
+                            Created {formatDistanceToNow(new Date(session.createdAt), {addSuffix: true})}
+                        </Text>
+                    )}
+                </Flex>
+
+            </Flex>
+        </DataTableColumn>
+        <DataTableColumn pr={2.5}>
+            {session.updatedAt && (
+                <Text hierarchy={"tertiary"}>
+                    Last used {formatDistanceToNow(new Date(session.updatedAt), {addSuffix: true})}
+                </Text>
+            )}
+        </DataTableColumn>
+        <DataTableColumn>
+            <Button p={0.5} color={"secondary"} variant={"none"} onClick={logout}>
+                <IconLogout size={16}/>
+            </Button>
+        </DataTableColumn>
+    </>
+}

From d336fae4ec76c7c34e3f32cfa58037fc2a1630b2 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 22:59:17 +0200
Subject: [PATCH 12/14] feat: add sessions tab in UserEditDialogComponent to
 display active user sessions

---
 .../components/UserEditDialogComponent.tsx    | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/packages/ce/src/user/components/UserEditDialogComponent.tsx b/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
index 5c83c125..dbbb28c9 100644
--- a/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
+++ b/src/packages/ce/src/user/components/UserEditDialogComponent.tsx
@@ -35,6 +35,7 @@ import {addIslandSuccessNotification} from "@code0-tech/pictor/dist/components/i
 import {IconAt, IconBackground, IconLock, IconMail, IconSettings2, IconShieldLock} from "@tabler/icons-react";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 import {motion} from "framer-motion";
+import {UserSessionsDataTableComponent} from "@edition/user/components/UserSessionsDataTableComponent";
 
 export interface UserEditDialogComponentProps {
     userId?: User['id']
@@ -205,6 +206,12 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
                                                 <Text size={"md"}>Security</Text>
                                             </Button>
                                         </TabTrigger>
+                                        <TabTrigger value={"sessions"} w={"100%"} asChild>
+                                            <Button paddingSize={"xxs"} variant={"none"} justify={"start"}>
+                                                <IconSettings2 opacity={0} size={13}/>
+                                                <Text size={"md"}>Sessions</Text>
+                                            </Button>
+                                        </TabTrigger>
                                     </TabList>
                                     <DialogClose asChild style={{marginTop: "auto"}}>
                                         <Button paddingSize={"xxs"} w={"100%"} variant={"none"}
@@ -264,7 +271,8 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
                                                description={"A short bio or notes shown on the user's profile."}
                                                {...inputs.getInputProps("readme")}/>
                             </TabContent>
-                            <TabContent value={"permissions"} style={{overflow: "hidden", display: isSelf ? "none" : undefined}}>
+                            <TabContent value={"permissions"}
+                                        style={{overflow: "hidden", display: isSelf ? "none" : undefined}}>
                                 <Flex justify={"space-between"} align={"center"}>
                                     <Text size={"lg"} hierarchy={"primary"} display={"block"}>Access</Text>
                                     <Button paddingSize={"xxs"} color={"success"} variant={"none"}
@@ -322,6 +330,24 @@ export const UserEditDialogComponent: React.FC<UserEditDialogComponentProps> = (
                                                onChange={() => validate("repeatPassword")}
                                                {...inputs.getInputProps("repeatPassword")}/>
                             </TabContent>
+                            <TabContent value={"sessions"}
+                                        style={{
+                                            overflow: "hidden",
+                                            height: "100%",
+                                            display: "flex",
+                                            flexDirection: "column"
+                                        }}>
+                                <Flex justify={"space-between"} align={"center"}>
+                                    <Text size={"lg"} hierarchy={"primary"} display={"block"}>Sessions</Text>
+                                </Flex>
+                                <Spacing spacing={"xs"}/>
+                                <Text size={"md"} hierarchy={"tertiary"}>
+                                    Active sign-in sessions for @{user?.username ?? ""}. Log out a session to revoke
+                                    its access.
+                                </Text>
+                                <Spacing spacing={"md"}/>
+                                <UserSessionsDataTableComponent userId={userId}/>
+                            </TabContent>
                         </Card>
                     </Layout>
                 </Tab>

From 036d5686e1c287748789da9eb494f9e475f97085 Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 23:02:05 +0200
Subject: [PATCH 13/14] feat: update Edit Profile button to link to user
 settings page

---
 .../namespace/views/NamespaceOverviewPersonalLeftView.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/packages/ce/src/namespace/views/NamespaceOverviewPersonalLeftView.tsx b/src/packages/ce/src/namespace/views/NamespaceOverviewPersonalLeftView.tsx
index fbaba351..573e0ea6 100644
--- a/src/packages/ce/src/namespace/views/NamespaceOverviewPersonalLeftView.tsx
+++ b/src/packages/ce/src/namespace/views/NamespaceOverviewPersonalLeftView.tsx
@@ -86,9 +86,11 @@ export const NamespaceOverviewPersonalLeftView: React.FC = () => {
                     </Text>
                 </Flex>
                 <Spacing spacing={"xs"}/>
-                <Button w={"100%"} color={"tertiary"}>Edit Profile</Button>
+                <Link href={"/users/@me/settings"}>
+                    <Button w={"100%"} color={"tertiary"}>Edit Profile</Button>
+                </Link>
                 <Spacing spacing={"xs"}/>
-                <Button color={"primary"} w={"100%"}>
+                <Button disabled color={"primary"} w={"100%"}>
                     Upgrade to Pro
                     <AuroraBackground/>
                 </Button>

From 98d8f80443db403a269a8905428a3d4f5244244d Mon Sep 17 00:00:00 2001
From: nicosammito <nsammito@code0.tech>
Date: Fri, 17 Jul 2026 23:02:49 +0200
Subject: [PATCH 14/14] feat: update Edit Profile button to link to user
 settings page

---
 src/packages/ce/src/application/pages/ApplicationPage.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/packages/ce/src/application/pages/ApplicationPage.tsx b/src/packages/ce/src/application/pages/ApplicationPage.tsx
index 14af16d7..3f3bffb7 100644
--- a/src/packages/ce/src/application/pages/ApplicationPage.tsx
+++ b/src/packages/ce/src/application/pages/ApplicationPage.tsx
@@ -119,7 +119,9 @@ export const ApplicationPage = () => {
                     </Text>
                 </Flex>
                 <Spacing spacing={"xs"}/>
-                <Button w={"100%"} disabled color={"tertiary"}>Edit Profile</Button>
+                <Link href={"/users/@me/settings"}>
+                    <Button w={"100%"} color={"tertiary"}>Edit Profile</Button>
+                </Link>
                 <Spacing spacing={"xs"}/>
                 <Button color={"primary"} disabled w={"100%"}>
                     Upgrade to Pro