add logout all accounts button

very well coded 👌

src/assets/locales/en.json

@@ -535,7 +535,12 @@
           "text": "This action is irreversible. All data will be deleted and nothing can be recovered.",
           "title": "Delete account"
         },
-        "title": "Actions"
+        "title": "Actions",
+        "logoutAllDevices": {
+          "title": "End All Sessions",
+          "text": "This will sign you out from all devices linked to your account.",
+          "button": "Log Out of All Devices"
+        }
       },
       "devices": {
         "deviceNameLabel": "Device name",

src/pages/parts/settings/AccountActionsPart.tsx

@@ -10,6 +10,8 @@ import { useAuthData } from "@/hooks/auth/useAuthData";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useAuthStore } from "@/stores/auth";
 
+import { signOutAllDevices } from "./DeviceListPart";
+
 export function AccountActionsPart() {
   const { t } = useTranslation();
   const url = useBackendUrl();
@@ -29,6 +31,29 @@ export function AccountActionsPart() {
   return (
     <div>
       <Heading2 border>{t("settings.account.actions.title")}</Heading2>
+
+      {/* Logout All Devices Section */}
+      <SolidSettingsCard
+        paddingClass="px-6 py-12 mb-10"
+        className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"
+      >
+        <div>
+          <Heading3>
+            {" "}
+            {t("settings.account.actions.logoutAllDevices.title")}
+          </Heading3>
+          <p className="text-type-text">
+            {t("settings.account.actions.logoutAllDevices.text")}
+          </p>
+        </div>
+        <div className="flex justify-start lg:justify-end items-center">
+          <Button theme="danger" onClick={signOutAllDevices}>
+            {t("settings.account.actions.logoutAllDevices.button")}
+          </Button>
+        </div>
+      </SolidSettingsCard>
+
+      {/* Delete Account Section */}
       <SolidSettingsCard
         paddingClass="px-6 py-12"
         className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12"

src/pages/parts/settings/AccountEditPart.tsx

@@ -73,7 +73,7 @@ export function AccountEditPart(props: {
               onChange={(value) => props.setDeviceName(value)}
             />
             <div className="flex space-x-3">
-              <Button theme="danger" onClick={logout}>
+              <Button className="logout-button" theme="danger" onClick={logout}>
                 {t("settings.account.accountDetails.logoutButton")}
               </Button>
             </div>

src/pages/parts/settings/DeviceListPart.tsx

@@ -13,6 +13,14 @@ import { Heading2 } from "@/components/utils/Text";
 import { useBackendUrl } from "@/hooks/auth/useBackendUrl";
 import { useAuthStore } from "@/stores/auth";
 
+export const signOutAllDevices = () => {
+  const buttons = document.querySelectorAll(".logout-button");
+
+  buttons.forEach((button) => {
+    (button as HTMLElement).click();
+  });
+};
+
 export function Device(props: {
   name: string;
   id: string;
@@ -41,7 +49,12 @@ export function Device(props: {
         <p className="text-white">{props.name}</p>
       </div>
       {!props.isCurrent ? (
-        <Button theme="danger" loading={result.loading} onClick={exec}>
+        <Button
+          theme="danger"
+          className="logout-button"
+          loading={result.loading}
+          onClick={exec}
+        >
           {t("settings.account.devices.removeDevice")}
         </Button>
       ) : null}