clear session from the list, once removed

apps/login/app/(login)/accounts/page.tsx

@@ -1,10 +1,9 @@
 import { Session } from "@zitadel/server";
 import { listSessions, server } from "#/lib/zitadel";
-import Alert from "#/ui/Alert";
 import { getAllSessionIds } from "#/utils/cookies";
 import { UserPlusIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
-import SessionItem from "#/ui/SessionItem";
+import SessionsList from "#/ui/SessionsList";
 
 async function loadSessions(): Promise<Session[]> {
   const ids = await getAllSessionIds();
@@ -30,24 +29,7 @@ export default async function Page() {
       <p className="ztdl-p mb-6 block">Use your ZITADEL Account</p>
 
       <div className="flex flex-col w-full space-y-2">
-        {sessions ? (
-          sessions
-            .filter((session) => session?.factors?.user?.loginName)
-            .map((session, index) => {
-              return (
-                <SessionItem
-                  session={session}
-                  reload={async () => {
-                    "use server";
-                    sessions = sessions.filter((s) => s.id !== session.id);
-                  }}
-                  key={"session-" + index}
-                />
-              );
-            })
-        ) : (
-          <Alert>No Sessions available!</Alert>
-        )}
+        <SessionsList sessions={sessions} />
         <Link href="/username">
           <div className="flex flex-row items-center py-3 px-4 hover:bg-black/10 dark:hover:bg-white/10 rounded-md transition-all">
             <div className="w-8 h-8 mr-4 flex flex-row justify-center items-center rounded-full bg-black/5 dark:bg-white/5">

apps/login/ui/SessionsList.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Session } from "@zitadel/server";
+import SessionItem from "./SessionItem";
+import Alert from "./Alert";
+import { useEffect, useState } from "react";
+
+type Props = {
+  sessions: Session[];
+};
+
+export default function SessionsList({ sessions }: Props) {
+  const [list, setList] = useState<Session[]>(sessions);
+
+  return sessions ? (
+    <div className="flex flex-col">
+      {list
+        .filter((session) => session?.factors?.user?.loginName)
+        .map((session, index) => {
+          return (
+            <SessionItem
+              session={session}
+              reload={() => {
+                setList(list.filter((s) => s.id !== session.id));
+              }}
+              key={"session-" + index}
+            />
+          );
+        })}
+    </div>
+  ) : (
+    <Alert>No Sessions available!</Alert>
+  );
+}