fix: show correct active workspace and truncate name

apps/web/i18n.json

@@ -2,7 +2,7 @@
   "version": 0,
   "locale": {
     "source": "en",
-    "targets": ["fr", "de", "es", "it", "nl", "ru"]
+    "targets": ["fr", "de", "es", "it", "nl"]
   },
   "buckets": {
     "po": {

apps/web/i18n.lock

@@ -10,7 +10,6 @@ checksums:
     "%248%2Fmonth/singular": 4667034934bb2bc3d569c70b94205b51
     1%20user/singular: 3b547431ab12f0fba84307e6a81109d8
     A%20powerful%2C%20flexible%20kanban%20app%20that%20helps%20you%20organise%20work%2C%20track%20progress%2C%20and%20deliver%20results%E2%80%94all%20in%20one%20place./singular: d405b83b0d631cb72f4347c10bcbb643
-    Account/singular: 01215c12fb1cdb93bd0c84c1382bef56
     Account%20deleted/singular: a25da96a1579c4491be0a95669ef18a4
     Activity/singular: 1948763de8e531483a798b68195e297e
     Activity%20logs/singular: 8b1f0bb96a905646ecfad1cfdfa42168
@@ -35,11 +34,6 @@ checksums:
     Already%20have%20an%20account%3F%20%3C0%3E%3C1%3ESign%20in%3C%2F1%3E%3C%2F0%3E/singular: 2959fd276248208b65cb27ed46b20135
     An%20error%20occurred%20while%20disconnecting%20your%20Trello%20account./singular: 0aa3973b860c1faf8d9123aebf567e40
     An%20unexpected%20error%20occurred.%20Please%20try%20again%20later./singular: 1b5749b0cca6a62d75a577bee6804074
-    API/singular: 01d9819514e27056dcc69463194b63d2
-    API%20key%20created/singular: 8dbb2b60a719b0d120e774d6666c8c45
-    API%20key%20name/singular: 2d8aeb08b2cce3b750a584bbc5ce6d1d
-    API%20key%20name%20cannot%20exceed%2030%20characters/singular: 3ea1c7d68e1074a75128017b097b727a
-    API%20key%20name%20is%20required/singular: 870970743b14cb56e7fb7b410af0e933
     API%20keys/singular: 07f3620a30e08136f0b072c9af8d1eef
     API%20Reference/singular: 7dcc877064bfdf889ec55dbc9e06a242
     Applicants/singular: 4babd8331a1441e91087f855f43e57f8
@@ -80,12 +74,11 @@ checksums:
     Card%20not%20found/singular: 91509e2f92b0b3b11330b6983139fdbf
     Card%20title/singular: 7c34f59f4005e6cb3a6ff546ea0b96e3
     Change%20Password/singular: a552fc5c4189ebc3e2e6018edda7d18f
-    Change%20your%20language%20preferences./singular: 293d49fc3c75e9c425b64bd7126e6b46
+    Change%20the%20language%20of%20the%20app./singular: fb20db145e28ed44aba89c146ded7bfc
     Check%20your%20inbox/singular: e9a430fcd298def74212238df0f680d6
     Checklist%20name/singular: 5eb5de823f7ca5a4d97bb41e6a3f675a
     Clear%20filters/singular: 8f40ab5af527e4b190da94e7b6221379
     Click%20on%20the%20link%20we've%20sent%20to%20%7BmagicLinkRecipient%7D%20to%20sign%20in./singular: 210b6ff8727f976182ec3f29ea3c7667
-    Close/singular: 2c2e22f8424a1031de89063bd0022e16
     Code%20Review/singular: a2da6c2339301e7c3ddf068c4ff9f7e8
     Collaborate%20seamlessly%20with%20your%20team./singular: c5f10e431aaf8b51519bc009a4a4080c
     Coming%20soon/singular: ee2b0671e00972773210c5be5a9ccb89
@@ -106,7 +99,6 @@ checksums:
     Continue%20with%20%7B0%7D/singular: 2eaf6e1da91e208f7c5fb6bf862fe8a6
     Control%20who%20can%20view%20and%20edit%20your%20boards./singular: 2a7e0bec29bac26280de707e2fe8bce5
     Create%20another/singular: 2de8a82a416eb78c0462aa36278edc9a
-    Create%20API%20key/singular: 70ed8431c6ed5f7fdef122cc34f75b41
     Create%20board/singular: 155b62818bfab0e34f0089e1b34a32f3
     Create%20card/singular: 32792935dd5837a9433909b04021c22b
     Create%20checklist/singular: 5cbca15a7004558c4e6d381f83a34da2
@@ -267,7 +259,6 @@ checksums:
     Name/singular: 9368b5a047572b6051f334af5aa76819
     Need%20help%3F/singular: 04e7322f2d3ffb2d73ff2f64b71637c8
     New/singular: 126d036fae5fb6b629728ecb97e6195b
-    New%20API%20key/singular: db3088aedba6e4a99b46451c5b3d36ed
     New%20board/singular: 63f4e979e29a7fc2f5c09ff91fa75966
     New%20card/singular: a33f6219a756127f91c2523cfe845a19
     New%20checklist/singular: 58252b71e9693ae0f4d2d0b72108a569
@@ -333,6 +324,7 @@ checksums:
     Resolution/singular: 6d8bd9e1bd7dae5ae38c93061d32990e
     Resources/singular: ec7fb05ed963bb6781a35782b3475502
     Review/singular: 299f75db25382980b2895622d7712927
+    Revoke/singular: be57685a85b6dfeaeb6eab4e9560b520
     Roadmap/singular: c60f4a1acf30e566861bf130f13b9ae7
     Role/singular: 53743bbb6ca938f5b893552e839d067f
     Run%20on%20your%20own%20infrastructure/singular: eba804911562b8dbf9d69c3e27f1d708
@@ -347,11 +339,7 @@ checksums:
     Send%20feedback/singular: 9631cc08d49da04475b30a0d320ce97c
     Senior/singular: 3fff865dc00435f82896fc302ea45630
     Settings/singular: 8df6777277469c1fd88cc18dde2f1cc3
-    Settings%20%7C%20Account/singular: 050e18406849ec057edac877c297c3e1
-    Settings%20%7C%20API/singular: 85101e4b802a09ad9e3f01ff116f0894
-    Settings%20%7C%20Billing/singular: e44cba741d5414035a0b499c5766c203
-    Settings%20%7C%20Integrations/singular: d04992e28016452f6d3d7dcc0b592415
-    Settings%20%7C%20Workspace/singular: 5d0bacf7ff696da940f232df45edfd39
+    Settings%20%7C%20%7B0%7D/singular: b8fc73080bc9c8f4f1403b2a69bd1ac5
     Sign%20in/singular: cb8757c7450e17de1e226e82fb0fa4a2
     Sign%20up%20%7C%20kan.bn/singular: f3de2a110c90358e6eac07d0b2f663a6
     Sign%20up%20disabled/singular: 9581b1f75b404ac0ecb7e603e0d4189c
@@ -379,7 +367,6 @@ checksums:
     Theme/singular: 21fe00b7a518089576fb83c08631107a
     They%20won't%20be%20able%20to%20access%20this%20workspace./singular: 93b740350fe3430319fbca85349e41d9
     This%20action%20can't%20be%20undone./singular: cb222ff89715d8c971e8c25d121e1dbd
-    This%20API%20key%20will%20only%20be%20shown%20once.%20Please%20save%20it%20in%20a%20secure%20location./singular: 7df18d2978d317375f780822f8321c4d
     This%20board%20is%20private%20or%20does%20not%20exist/singular: a217ff3f04463b4df8c86adb6f83c6bc
     This%20board%20URL%20has%20already%20been%20taken/singular: 1d8b40332a031b5b77a3658e48dd51ca
     This%20will%20result%20in%20the%20permanent%20deletion%20of%20all%20data%20associated%20with%20this%20workspace./singular: a31141558af793635c1ddd2fa0a33499
@@ -390,7 +377,6 @@ checksums:
     To%20Do/singular: d60813ea824f373462471e092d136eed
     Toggle%20menu/singular: 29dea3e0b6238874f8c7a27619df8e36
     Track%20all%20card%20changes%20with%20detailed%20activity%20history./singular: 0d3bac559c71ec4b8734f9f212320de5
-    Trello/singular: b5131f6488b5a439d58db3e22d6de45b
     Trello%20disconnected/singular: 54b24a3e6c9a7eedd8c8d1060ab1175d
     Trello%20imports/singular: 6827eca403faa8f89891d17827e72af9
     Triaging/singular: 1d40799fcae53a8a27688fdae2a48dee

apps/web/lingui.config.ts

@@ -1,7 +1,7 @@
 import type { LinguiConfig } from "@lingui/conf";
 
 const config: LinguiConfig = {
-  locales: ["en", "fr", "de", "es", "it", "nl", "ru"],
+  locales: ["en", "fr", "de", "es", "it", "nl"],
   sourceLocale: "en",
   catalogs: [
     {

apps/web/next.config.js

@@ -52,15 +52,6 @@ const config = {
     // instrumentationHook: true,
     swcPlugins: [["@lingui/swc-plugin", {}]],
   },
-
-  async rewrites() {
-    return [
-      {
-        source: "/settings",
-        destination: "/settings/account",
-      },
-    ];
-  },
 };
 
 // Only allow external images when OIDC is configured (for OIDC provider avatars)

apps/web/src/components/Dropdown.tsx

@@ -15,7 +15,7 @@ export default function Dropdown({
       <div>
         <Menu.Button
           disabled={disabled}
-          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 focus:outline-none dark:hover:bg-dark-200"
+          className="flex h-7 w-7 items-center justify-center rounded-[5px] hover:bg-light-200 dark:hover:bg-dark-200"
         >
           {children}
         </Menu.Button>
@@ -30,7 +30,7 @@ export default function Dropdown({
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="absolute right-0 z-50 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
+        <Menu.Items className="absolute right-0 z-30 mt-2 w-56 origin-top-right rounded-md border border-light-200 bg-light-50 p-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-400 dark:bg-dark-300">
           <div className="flex flex-col">
             {items.map((item) => (
               <Menu.Item key={item.label}>

apps/web/src/components/LanguageSelector.tsx

@@ -13,7 +13,7 @@ export function LanguageSelector() {
         id="language-select"
         value={locale}
         onChange={(e) => setLocale(e.target.value as any)}
-        className="mt-8 block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 text-sm shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500"
+        className="mt-8 block w-full max-w-[180px] rounded-lg border-0 bg-light-50 pl-10 shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500 sm:text-sm"
       >
         {availableLocales.map((loc) => (
           <option key={loc} value={loc}>

apps/web/src/components/NewWorkspaceForm.tsx

@@ -123,7 +123,7 @@ export function NewWorkspaceForm() {
                 body: JSON.stringify({
                   slug: slug || undefined,
                   workspacePublicId: values.publicId,
-                  cancelUrl: "/settings/workspace?upgrade=pro",
+                  cancelUrl: "/settings?upgrade=pro",
                   successUrl: "/boards",
                 }),
               },

apps/web/src/components/SettingsLayout.tsx

@@ -1,148 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-import {
-  Listbox,
-  ListboxButton,
-  ListboxOption,
-  ListboxOptions,
-} from "@headlessui/react";
-import { t } from "@lingui/core/macro";
-import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
-import {
-  HiChevronDown,
-  HiOutlineBanknotes,
-  HiOutlineCodeBracketSquare,
-  HiOutlineRectangleGroup,
-  HiOutlineUser,
-} from "react-icons/hi2";
-
-interface SettingsLayoutProps {
-  children: React.ReactNode;
-  currentTab: string;
-}
-
-export function SettingsLayout({ children, currentTab }: SettingsLayoutProps) {
-  const router = useRouter();
-  const [selectedTabIndex, setSelectedTabIndex] = useState(0);
-
-  const settingsTabs = [
-    {
-      key: "account",
-      icon: <HiOutlineUser />,
-      label: t`Account`,
-      condition: true,
-    },
-    {
-      key: "workspace",
-      icon: <HiOutlineRectangleGroup />,
-      label: t`Workspace`,
-      condition: true,
-    },
-    {
-      key: "billing",
-      label: t`Billing`,
-      icon: <HiOutlineBanknotes />,
-      condition: env("NEXT_PUBLIC_KAN_ENV") === "cloud",
-    },
-    {
-      key: "api",
-      icon: <HiOutlineCodeBracketSquare />,
-      label: t`API`,
-      condition: true,
-    },
-    {
-      key: "integrations",
-      icon: <HiOutlineCodeBracketSquare />,
-      label: t`Integrations`,
-      condition: true,
-    },
-  ];
-
-  const availableTabs = settingsTabs.filter((tab) => tab.condition);
-
-  // Update selected tab when currentTab prop changes
-  useEffect(() => {
-    const tabIndex = availableTabs.findIndex((tab) => tab.key === currentTab);
-    if (tabIndex !== -1) {
-      setSelectedTabIndex(tabIndex);
-    }
-  }, [currentTab, availableTabs]);
-
-  const isTabActive = (tabKey: string) => {
-    return currentTab === tabKey;
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
-      <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
-        <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
-          <div className="mb-8 flex w-full justify-between">
-            <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-              {t`Settings`}
-            </h1>
-          </div>
-
-          <div className="focus:outline-none">
-            <div className="sm:hidden">
-              {/* Mobile dropdown */}
-              <Listbox
-                value={selectedTabIndex}
-                onChange={(index) => {
-                  const tabKey = availableTabs[index]?.key;
-                  if (tabKey) {
-                    void router.push(`/settings/${tabKey}`);
-                  }
-                }}
-              >
-                <div className="relative mb-4">
-                  <ListboxButton className="w-full appearance-none rounded-lg border-0 bg-light-50 py-2 pl-3 pr-10 text-left text-sm text-light-1000 shadow-sm ring-1 ring-inset ring-light-300 focus:ring-2 focus:ring-inset focus:ring-light-400 dark:bg-dark-50 dark:text-dark-1000 dark:ring-dark-300 dark:focus:ring-dark-500">
-                    {availableTabs[selectedTabIndex]?.label || "Select a tab"}
-                    <HiChevronDown
-                      aria-hidden="true"
-                      className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-light-900 dark:text-dark-900"
-                    />
-                  </ListboxButton>
-                  <ListboxOptions className="absolute z-10 mt-1 w-full rounded-lg bg-light-50 py-1 text-sm shadow-lg ring-1 ring-inset ring-light-300 dark:bg-dark-50 dark:ring-dark-300">
-                    {availableTabs.map((tab) => (
-                      <ListboxOption
-                        key={tab.key}
-                        value={availableTabs.indexOf(tab)}
-                        className="relative cursor-pointer select-none py-2 pl-3 pr-9 text-light-1000 dark:text-dark-1000"
-                      >
-                        {tab.label}
-                      </ListboxOption>
-                    ))}
-                  </ListboxOptions>
-                </div>
-              </Listbox>
-            </div>
-            <div className="hidden sm:block">
-              <div className="border-b border-gray-200 dark:border-white/10">
-                <nav
-                  aria-label="Tabs"
-                  className="-mb-px flex space-x-8 focus:outline-none"
-                >
-                  {availableTabs.map((tab) => (
-                    <Link
-                      key={tab.key}
-                      href={`/settings/${tab.key}`}
-                      className={`whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium transition-colors focus:outline-none ${
-                        isTabActive(tab.key)
-                          ? "border-light-1000 text-light-1000 dark:border-dark-1000 dark:text-dark-1000"
-                          : "border-transparent text-light-900 hover:border-light-950 hover:text-light-950 dark:text-dark-900 dark:hover:border-white/20 dark:hover:text-dark-950"
-                      }`}
-                    >
-                      {tab.label}
-                    </Link>
-                  ))}
-                </nav>
-              </div>
-            </div>
-            <div className="focus:outline-none">{children}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/components/modal.tsx

@@ -34,7 +34,7 @@ const Modal: React.FC<Props> = ({
 
   return (
     <Transition.Root show={shouldShow} as={Fragment}>
-      <Dialog as="div" className="relative z-50" onClose={closeModal}>
+      <Dialog as="div" className="relative z-10" onClose={closeModal}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -47,7 +47,7 @@ const Modal: React.FC<Props> = ({
           <div className="fixed inset-0 bg-light-50 bg-opacity-40 transition-opacity dark:bg-dark-50 dark:bg-opacity-40" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-50 w-screen overflow-y-auto">
+        <div className="fixed inset-0 z-10 w-screen overflow-y-auto">
           <div className="flex min-h-full items-start justify-center p-4 text-center sm:items-start sm:p-0">
             <Transition.Child
               as={Fragment}

apps/web/src/hooks/useClipboard.tsx

@@ -1,36 +0,0 @@
-import { useState } from "react";
-
-export function useClipboard({ timeout = 500 } = {}) {
-  const [error, setError] = useState<string | Error | null | undefined>(null);
-  const [copied, setCopied] = useState<boolean>(false);
-  const [copyTimeout, setCopyTimeout] = useState<number | undefined>(undefined);
-
-  const handleCopyResult = (hasError: boolean) => {
-    clearTimeout(copyTimeout);
-
-    setCopyTimeout(
-      setTimeout(() => setCopied(false), timeout) as unknown as number,
-    );
-
-    setCopied(hasError);
-  };
-
-  const copy = (value: string) => {
-    if ("clipboard" in navigator) {
-      navigator.clipboard
-        .writeText(value)
-        .then(() => handleCopyResult(true))
-        .catch((err) => setError(err));
-    } else {
-      setError(new Error("Error: navigator.clipboard is not supported"));
-    }
-  };
-
-  const reset = () => {
-    setError(null);
-    setCopied(false);
-    clearTimeout(copyTimeout);
-  };
-
-  return { copy, reset, error, copied };
-}

apps/web/src/locales/de/messages.po

@@ -53,10 +53,6 @@ msgstr "1 Benutzer"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "Eine leistungsstarke, flexible Kanban-App, die dir hilft, Arbeit zu organisieren, Fortschritte zu verfolgen und Ergebnisse zu liefern – alles an einem Ort."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Konto"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Konto gelöscht"
@@ -95,8 +91,8 @@ msgstr "Beschreibung hinzufügen... (tippe '/' um Befehle zu öffnen oder '@' um
 msgid "Add details..."
 msgstr "Details hinzufügen..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Label hinzufügen"
 
@@ -152,7 +148,7 @@ msgstr "Alle Systeme funktionieren"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Du hast bereits ein Konto? <0><1>Anmelden</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Beim Trennen deines Trello-Kontos ist ein Fehler aufgetreten."
 
@@ -160,27 +156,7 @@ msgstr "Beim Trennen deines Trello-Kontos ist ein Fehler aufgetreten."
 msgid "An unexpected error occurred. Please try again later."
 msgstr "Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "API-Schlüssel erstellt"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "API-Schlüsselname"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "Der API-Schlüsselname darf 30 Zeichen nicht überschreiten"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "API-Schlüsselname ist erforderlich"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "API-Schlüssel"
 
@@ -250,13 +226,12 @@ msgstr "jährlich abgerechnet"
 msgid "billed monthly"
 msgstr "monatlich abgerechnet"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Abrechnung"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Abrechnungsportal"
 
@@ -311,12 +286,12 @@ msgid "Board visibility updated"
 msgstr "Board-Sichtbarkeit aktualisiert"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Boards"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Boards | {0}"
 
@@ -353,16 +328,16 @@ msgstr "Karte nicht gefunden"
 msgid "Card title"
 msgstr "Kartentitel"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Passwort ändern"
 
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Ändern Sie Ihre Spracheinstellungen."
+#: src/views/settings/index.tsx:227
+msgid "Change the language of the app."
+msgstr "Ändere die Sprache der App."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -382,10 +357,6 @@ msgstr "Filter löschen"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Klicke auf den Link, den wir an {magicLinkRecipient} gesendet haben, um dich anzumelden."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Schließen"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Code-Review"
@@ -430,7 +401,7 @@ msgid "Confirm your new password"
 msgstr "Bestätigen Sie Ihr neues Passwort"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Trello verbinden"
 
@@ -438,7 +409,7 @@ msgstr "Trello verbinden"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Verbinde deine Lieblingstools, um deinen Arbeitsablauf zu optimieren."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Verbinde dein Trello-Konto, um Boards zu importieren."
 
@@ -473,10 +444,6 @@ msgstr "Kontrolliere, wer deine Boards ansehen und bearbeiten kann."
 msgid "Create another"
 msgstr "Weitere erstellen"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "API-Schlüssel erstellen"
-
 #: src/views/boards/components/NewBoardForm.tsx:128
 msgid "Create board"
 msgstr "Board erstellen"
@@ -501,12 +468,12 @@ msgstr "Liste erstellen"
 msgid "Create new board"
 msgstr "Neues Board erstellen"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Neuen Schlüssel erstellen"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Neues Label erstellen"
 
@@ -560,9 +527,9 @@ msgstr "Dunkel"
 msgid "Delete"
 msgstr "Löschen"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Konto löschen"
 
@@ -583,8 +550,8 @@ msgid "Delete list"
 msgstr "Liste löschen"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Workspace löschen"
 
@@ -610,7 +577,7 @@ msgstr "hat Checklistenelement <0>{0}</0> gelöscht"
 msgid "Design"
 msgstr "Design"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Trello trennen"
 
@@ -618,7 +585,7 @@ msgstr "Trello trennen"
 msgid "Discuss and collaborate on cards."
 msgstr "Diskutiere und arbeite gemeinsam an Karten."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Anzeigename"
 
@@ -736,7 +703,7 @@ msgstr "Fehler beim Löschen des Labels"
 msgid "Error deleting workspace"
 msgstr "Fehler beim Löschen des Arbeitsbereichs"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Fehler beim Trennen von Trello"
 
@@ -950,7 +917,7 @@ msgstr "Ideen"
 msgid "Ideas to improve this page..."
 msgstr "Ideen zur Verbesserung dieser Seite..."
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importieren"
 
@@ -988,7 +955,6 @@ msgstr "In Bearbeitung"
 msgid "Individuals"
 msgstr "Einzelpersonen"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Integrationen"
@@ -1009,7 +975,7 @@ msgstr "Einladen"
 msgid "Invite another"
 msgstr "Weitere Person einladen"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Mitglied einladen"
@@ -1045,7 +1011,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & Filter"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Sprache"
 
@@ -1163,14 +1129,10 @@ msgstr "Name"
 msgid "Need help?"
 msgstr "Brauchst du Hilfe?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Neu"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "Neuer API-Schlüssel"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "Neues Board"
@@ -1244,11 +1206,11 @@ msgstr "Angebot"
 msgid "Onboarding"
 msgstr "Einarbeitung"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Sobald Sie Ihr Konto löschen, gibt es kein Zurück mehr. Diese Aktion kann nicht rückgängig gemacht werden."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Sobald Sie Ihren Arbeitsbereich löschen, gibt es kein Zurück mehr. Diese Aktion kann nicht rückgängig gemacht werden."
 
@@ -1338,9 +1300,9 @@ msgstr "Bitte wähle eine Datei zum Hochladen aus."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1391,7 +1353,7 @@ msgstr "Pro-Plan ∞"
 msgid "Profile image updated"
 msgstr "Profilbild aktualisiert"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Profilbild"
 
@@ -1474,6 +1436,10 @@ msgstr "Ressourcen"
 msgid "Review"
 msgstr "Überprüfung"
 
+#: src/views/settings/components/CreateAPIKeyForm.tsx:49
+msgid "Revoke"
+msgstr "Widerrufen"
+
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
 msgid "Roadmap"
@@ -1527,30 +1493,15 @@ msgstr "Feedback senden"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Einstellungen"
 
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Einstellungen | Konto"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Einstellungen | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Einstellungen | Abrechnung"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Einstellungen | Integrationen"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Einstellungen | Arbeitsbereich"
+#. placeholder {0}: workspace.name ?? "Workspace"
+#: src/views/settings/index.tsx:161
+msgid "Settings | {0}"
+msgstr "Einstellungen | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1668,10 +1619,6 @@ msgstr "Sie werden keinen Zugriff mehr auf diesen Workspace haben."
 msgid "This action can't be undone."
 msgstr "Diese Aktion kann nicht rückgängig gemacht werden."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "Dieser API-Schlüssel wird nur einmal angezeigt. Bitte speichern Sie ihn an einem sicheren Ort."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "Dieses Board ist privat oder existiert nicht"
@@ -1713,11 +1660,7 @@ msgstr "Menü umschalten"
 msgid "Track all card changes with detailed activity history."
 msgstr "Verfolge alle kartenänderungen mit detaillierter aktivitätshistorie."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello getrennt"
 
@@ -1802,16 +1745,16 @@ msgstr "Checklistenelement kann nicht aktualisiert werden"
 msgid "Unable to update comment"
 msgstr "Kommentar konnte nicht aktualisiert werden"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "Labels konnten nicht aktualisiert werden"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "Liste konnte nicht aktualisiert werden"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "Mitglieder konnten nicht aktualisiert werden"
 
@@ -1854,9 +1797,9 @@ msgid "Unlimited members"
 msgstr "Unbegrenzte Mitglieder"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Aktualisieren"
@@ -1887,7 +1830,7 @@ msgid "Upgrade"
 msgstr "Upgrade"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Upgrade auf Pro"
 
@@ -1935,11 +1878,11 @@ msgstr "Benutzer ist bereits Mitglied dieses Arbeitsbereichs"
 msgid "Video"
 msgstr "Video"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "API-Schlüssel anzeigen und verwalten."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "Verwalte deine Abrechnung und dein Abonnement."
 
@@ -1991,7 +1934,6 @@ msgstr "Als Trello 2011 auf den markt kam, beeindruckte es alle mit seiner sorgf
 msgid "Why make an open source Trello?"
 msgstr "Warum ein open source Trello entwickeln?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Arbeitsbereich"
@@ -2004,7 +1946,7 @@ msgstr "Workspace erfolgreich erstellt. Du kannst später in den Einstellungen u
 msgid "Workspace deleted"
 msgstr "Workspace gelöscht"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Workspace-Beschreibung"
 
@@ -2026,7 +1968,7 @@ msgid "Workspace members"
 msgstr "Workspace-mitglieder"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Name des Workspaces"
 
@@ -2050,7 +1992,7 @@ msgstr "Workspace-Name aktualisiert"
 msgid "Workspace slug updated"
 msgstr "Workspace-Slug aktualisiert"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "Workspace-URL"
 
@@ -2070,7 +2012,7 @@ msgstr "Jährlich"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Ja, wir bieten einen dauerhaft kostenlosen plan für die individuelle nutzung an. Keine einschränkungen, keine paywalls, keine limits."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "Sie sind dabei, Ihr Passwort zu ändern."
 
@@ -2118,11 +2060,11 @@ msgstr "Ihr Passwort wurde geändert."
 msgid "Your profile image has been updated."
 msgstr "Dein Profilbild wurde aktualisiert."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Dein Trello-Konto wurde getrennt."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Dein Trello-Konto ist verbunden."
 

apps/web/src/locales/en/messages.po

@@ -65,10 +65,6 @@ msgstr "1 user"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Account"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Account deleted"
@@ -111,8 +107,8 @@ msgstr "Add description... (type '/' to open commands or '@' to mention)"
 msgid "Add details..."
 msgstr "Add details..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Add label"
 
@@ -176,7 +172,7 @@ msgstr "All systems operational"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Already have an account? <0><1>Sign in</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "An error occurred while disconnecting your Trello account."
 
@@ -184,27 +180,7 @@ msgstr "An error occurred while disconnecting your Trello account."
 msgid "An unexpected error occurred. Please try again later."
 msgstr "An unexpected error occurred. Please try again later."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "API key created"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "API key name"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "API key name cannot exceed 30 characters"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "API key name is required"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "API keys"
 
@@ -286,13 +262,12 @@ msgstr "billed annually"
 msgid "billed monthly"
 msgstr "billed monthly"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Billing"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Billing portal"
 
@@ -356,12 +331,12 @@ msgid "Board visibility updated"
 msgstr "Board visibility updated"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Boards"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Boards | {0}"
 
@@ -402,20 +377,16 @@ msgstr "Card not found"
 msgid "Card title"
 msgstr "Card title"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Change Password"
 
 #: src/views/settings/index.tsx:227
-#~ msgid "Change the language of the app."
-#~ msgstr "Change the language of the app."
-
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Change your language preferences."
+msgid "Change the language of the app."
+msgstr "Change the language of the app."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -435,10 +406,6 @@ msgstr "Clear filters"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Click on the link we've sent to {magicLinkRecipient} to sign in."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Close"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Code Review"
@@ -487,7 +454,7 @@ msgid "Confirm your new password"
 msgstr "Confirm your new password"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Connect Trello"
 
@@ -495,7 +462,7 @@ msgstr "Connect Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connect your favorite tools to streamline your workflow."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Connect your Trello account to import boards."
 
@@ -530,9 +497,9 @@ msgstr "Control who can view and edit your boards."
 msgid "Create another"
 msgstr "Create another"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "Create API key"
+#: src/views/settings/index.tsx:238
+#~ msgid "Create API key"
+#~ msgstr "Create API key"
 
 #: src/views/settings/index.tsx:232
 #~ msgid "Create API keys to access the Kan API."
@@ -562,12 +529,12 @@ msgstr "Create list"
 msgid "Create new board"
 msgstr "Create new board"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Create new key"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Create new label"
 
@@ -633,9 +600,9 @@ msgstr "Dark"
 msgid "Delete"
 msgstr "Delete"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Delete account"
 
@@ -656,8 +623,8 @@ msgid "Delete list"
 msgstr "Delete list"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Delete workspace"
 
@@ -683,7 +650,7 @@ msgstr "deleted checklist item <0>{0}</0>"
 msgid "Design"
 msgstr "Design"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Disconnect Trello"
 
@@ -691,7 +658,7 @@ msgstr "Disconnect Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discuss and collaborate on cards."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Display name"
 
@@ -809,7 +776,7 @@ msgstr "Error deleting label"
 msgid "Error deleting workspace"
 msgstr "Error deleting workspace"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Error disconnecting Trello"
 
@@ -1028,7 +995,7 @@ msgstr "Ideas to improve this page..."
 #~ msgid "Ideas, Research, Planning, Execution, Review, Next Steps, Complete"
 #~ msgstr "Ideas, Research, Planning, Execution, Review, Next Steps, Complete"
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Import"
 
@@ -1066,7 +1033,6 @@ msgstr "In Progress"
 msgid "Individuals"
 msgstr "Individuals"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Integrations"
@@ -1087,7 +1053,7 @@ msgstr "Invite"
 msgid "Invite another"
 msgstr "Invite another"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Invite member"
@@ -1123,7 +1089,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & Filters"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Language"
 
@@ -1249,14 +1215,10 @@ msgstr "Name"
 msgid "Need help?"
 msgstr "Need help?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "New"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "New API key"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "New board"
@@ -1334,11 +1296,11 @@ msgstr "Offer"
 msgid "Onboarding"
 msgstr "Onboarding"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Once you delete your account, there is no going back. This action cannot be undone."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Once you delete your workspace, there is no going back. This action cannot be undone."
 
@@ -1428,9 +1390,9 @@ msgstr "Please select a file to upload."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1481,7 +1443,7 @@ msgstr "Pro Plan ∞"
 msgid "Profile image updated"
 msgstr "Profile image updated"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Profile picture"
 
@@ -1569,8 +1531,8 @@ msgid "Review"
 msgstr "Review"
 
 #: src/views/settings/components/CreateAPIKeyForm.tsx:49
-#~ msgid "Revoke"
-#~ msgstr "Revoke"
+msgid "Revoke"
+msgstr "Revoke"
 
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
@@ -1629,34 +1591,15 @@ msgstr "Send feedback"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Settings"
 
+#. placeholder {0}: workspace.name ?? "Workspace"
 #: src/views/settings/index.tsx:161
-#~ msgid "Settings | {0}"
-#~ msgstr "Settings | {0}"
-
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Settings | Account"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Settings | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Settings | Billing"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Settings | Integrations"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Settings | Workspace"
+msgid "Settings | {0}"
+msgstr "Settings | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1774,10 +1717,6 @@ msgstr "They won't be able to access this workspace."
 msgid "This action can't be undone."
 msgstr "This action can't be undone."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "This API key will only be shown once. Please save it in a secure location."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "This board is private or does not exist"
@@ -1823,11 +1762,7 @@ msgstr "Toggle menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Track all card changes with detailed activity history."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello disconnected"
 
@@ -1912,16 +1847,16 @@ msgstr "Unable to update checklist item"
 msgid "Unable to update comment"
 msgstr "Unable to update comment"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "Unable to update labels"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "Unable to update list"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "Unable to update members"
 
@@ -1968,9 +1903,9 @@ msgid "Unlimited members"
 msgstr "Unlimited members"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Update"
@@ -2005,7 +1940,7 @@ msgid "Upgrade"
 msgstr "Upgrade"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Upgrade to Pro"
 
@@ -2053,11 +1988,11 @@ msgstr "User is already a member of this workspace"
 msgid "Video"
 msgstr "Video"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "View and manage your API keys."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "View and manage your billing and subscription."
 
@@ -2113,7 +2048,6 @@ msgstr "When Trello launched in 2011, it blew everyone away with its carefully d
 msgid "Why make an open source Trello?"
 msgstr "Why make an open source Trello?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Workspace"
@@ -2126,7 +2060,7 @@ msgstr "Workspace created successfully. You can upgrade later in settings."
 msgid "Workspace deleted"
 msgstr "Workspace deleted"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Workspace description"
 
@@ -2148,7 +2082,7 @@ msgid "Workspace members"
 msgstr "Workspace members"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Workspace name"
 
@@ -2172,7 +2106,7 @@ msgstr "Workspace name updated"
 msgid "Workspace slug updated"
 msgstr "Workspace slug updated"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "Workspace URL"
 
@@ -2192,7 +2126,7 @@ msgstr "Yearly"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "You are about to change your password."
 
@@ -2240,11 +2174,11 @@ msgstr "Your password has been changed."
 msgid "Your profile image has been updated."
 msgstr "Your profile image has been updated."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Your Trello account has been disconnected."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Your Trello account is connected."
 

apps/web/src/locales/es/messages.po

@@ -53,10 +53,6 @@ msgstr "1 usuario"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "Una aplicación kanban potente y flexible que te ayuda a organizar el trabajo, seguir el progreso y entregar resultados, todo en un solo lugar."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Cuenta"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Cuenta eliminada"
@@ -95,8 +91,8 @@ msgstr "Añadir descripción... (escribe '/' para abrir comandos o '@' para menc
 msgid "Add details..."
 msgstr "Añadir detalles..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Añadir etiqueta"
 
@@ -152,7 +148,7 @@ msgstr "Todos los sistemas operativos"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "¿Ya tienes una cuenta? <0><1>Iniciar sesión</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Ocurrió un error al desconectar tu cuenta de Trello."
 
@@ -160,27 +156,7 @@ msgstr "Ocurrió un error al desconectar tu cuenta de Trello."
 msgid "An unexpected error occurred. Please try again later."
 msgstr "Ha ocurrido un error inesperado. Por favor, inténtalo de nuevo más tarde."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "Clave API creada"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "Nombre de la clave API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "El nombre de la clave API no puede exceder los 30 caracteres"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "El nombre de la clave API es obligatorio"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "Claves API"
 
@@ -250,13 +226,12 @@ msgstr "facturado anualmente"
 msgid "billed monthly"
 msgstr "facturado mensualmente"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Facturación"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Portal de facturación"
 
@@ -311,12 +286,12 @@ msgid "Board visibility updated"
 msgstr "Visibilidad del tablero actualizada"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Tableros"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Tableros | {0}"
 
@@ -353,16 +328,16 @@ msgstr "Tarjeta no encontrada"
 msgid "Card title"
 msgstr "Título de la tarjeta"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Cambiar contraseña"
 
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Cambia tus preferencias de idioma."
+#: src/views/settings/index.tsx:227
+msgid "Change the language of the app."
+msgstr "Cambiar el idioma de la aplicación."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -382,10 +357,6 @@ msgstr "Borrar filtros"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Haz clic en el enlace que hemos enviado a {magicLinkRecipient} para iniciar sesión."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Cerrar"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Revisión de código"
@@ -430,7 +401,7 @@ msgid "Confirm your new password"
 msgstr "Confirma tu nueva contraseña"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Conectar Trello"
 
@@ -438,7 +409,7 @@ msgstr "Conectar Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Conecta tus herramientas favoritas para agilizar tu flujo de trabajo."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Conecta tu cuenta de Trello para importar tableros."
 
@@ -473,10 +444,6 @@ msgstr "Controla quién puede ver y editar tus tableros."
 msgid "Create another"
 msgstr "Crear otro"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "Crear clave API"
-
 #: src/views/boards/components/NewBoardForm.tsx:128
 msgid "Create board"
 msgstr "Crear tablero"
@@ -501,12 +468,12 @@ msgstr "Crear lista"
 msgid "Create new board"
 msgstr "Crear nuevo tablero"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Crear nueva clave"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Crear nueva etiqueta"
 
@@ -560,9 +527,9 @@ msgstr "Oscuro"
 msgid "Delete"
 msgstr "Eliminar"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Eliminar cuenta"
 
@@ -583,8 +550,8 @@ msgid "Delete list"
 msgstr "Eliminar lista"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Eliminar espacio de trabajo"
 
@@ -610,7 +577,7 @@ msgstr "eliminó el elemento <0>{0}</0> de la lista de verificación"
 msgid "Design"
 msgstr "Diseño"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Desconectar Trello"
 
@@ -618,7 +585,7 @@ msgstr "Desconectar Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discute y colabora en las tarjetas."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Nombre visible"
 
@@ -736,7 +703,7 @@ msgstr "Error al eliminar la etiqueta"
 msgid "Error deleting workspace"
 msgstr "Error al eliminar el espacio de trabajo"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Error al desconectar Trello"
 
@@ -950,7 +917,7 @@ msgstr "Ideas"
 msgid "Ideas to improve this page..."
 msgstr "Ideas para mejorar esta página..."
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importar"
 
@@ -988,7 +955,6 @@ msgstr "En progreso"
 msgid "Individuals"
 msgstr "Individuos"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Integraciones"
@@ -1009,7 +975,7 @@ msgstr "Invitar"
 msgid "Invite another"
 msgstr "Invitar a otro"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Invitar miembro"
@@ -1045,7 +1011,7 @@ msgstr "Etiquetas"
 msgid "Labels & Filters"
 msgstr "Etiquetas y filtros"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Idioma"
 
@@ -1163,14 +1129,10 @@ msgstr "Nombre"
 msgid "Need help?"
 msgstr "¿Necesitas ayuda?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nuevo"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "Nueva clave API"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "Nuevo tablero"
@@ -1244,11 +1206,11 @@ msgstr "Oferta"
 msgid "Onboarding"
 msgstr "Incorporación"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Una vez que elimines tu cuenta, no hay vuelta atrás. Esta acción no se puede deshacer."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Una vez que elimines tu espacio de trabajo, no hay vuelta atrás. Esta acción no se puede deshacer."
 
@@ -1338,9 +1300,9 @@ msgstr "Por favor selecciona un archivo para subir."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1391,7 +1353,7 @@ msgstr "Plan Pro ∞"
 msgid "Profile image updated"
 msgstr "Imagen de perfil actualizada"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Foto de perfil"
 
@@ -1474,6 +1436,10 @@ msgstr "Recursos"
 msgid "Review"
 msgstr "Revisión"
 
+#: src/views/settings/components/CreateAPIKeyForm.tsx:49
+msgid "Revoke"
+msgstr "Revocar"
+
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
 msgid "Roadmap"
@@ -1527,30 +1493,15 @@ msgstr "Enviar comentarios"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Configuración"
 
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Configuración | Cuenta"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Configuración | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Configuración | Facturación"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Configuración | Integraciones"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Configuración | Espacio de trabajo"
+#. placeholder {0}: workspace.name ?? "Workspace"
+#: src/views/settings/index.tsx:161
+msgid "Settings | {0}"
+msgstr "Configuración | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1668,10 +1619,6 @@ msgstr "No podrán acceder a este espacio de trabajo."
 msgid "This action can't be undone."
 msgstr "Esta acción no se puede deshacer."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "Esta clave API solo se mostrará una vez. Por favor, guárdala en un lugar seguro."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "Este tablero es privado o no existe"
@@ -1713,11 +1660,7 @@ msgstr "Alternar menú"
 msgid "Track all card changes with detailed activity history."
 msgstr "Rastrea todos los cambios en las tarjetas con un historial de actividad detallado."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello desconectado"
 
@@ -1802,16 +1745,16 @@ msgstr "No se puede actualizar el elemento de la lista de verificación"
 msgid "Unable to update comment"
 msgstr "No se puede actualizar el comentario"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "No se pueden actualizar las etiquetas"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "No se puede actualizar la lista"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "No se pueden actualizar los miembros"
 
@@ -1854,9 +1797,9 @@ msgid "Unlimited members"
 msgstr "Miembros ilimitados"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Actualizar"
@@ -1887,7 +1830,7 @@ msgid "Upgrade"
 msgstr "Actualizar"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Actualizar a Pro"
 
@@ -1935,11 +1878,11 @@ msgstr "El usuario ya es miembro de este espacio de trabajo"
 msgid "Video"
 msgstr "Video"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "Ver y gestionar tus claves API."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "Ver y gestionar tu facturación y suscripción."
 
@@ -1991,7 +1934,6 @@ msgstr "Cuando Trello se lanzó en 2011, impresionó a todos con su simplicidad
 msgid "Why make an open source Trello?"
 msgstr "¿Por qué crear un Trello de código abierto?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Espacio de trabajo"
@@ -2004,7 +1946,7 @@ msgstr "Espacio de trabajo creado con éxito. Puedes actualizar más tarde en co
 msgid "Workspace deleted"
 msgstr "Espacio de trabajo eliminado"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Descripción del espacio de trabajo"
 
@@ -2026,7 +1968,7 @@ msgid "Workspace members"
 msgstr "Miembros del espacio de trabajo"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Nombre del espacio de trabajo"
 
@@ -2050,7 +1992,7 @@ msgstr "Nombre del espacio de trabajo actualizado"
 msgid "Workspace slug updated"
 msgstr "Slug del espacio de trabajo actualizado"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "URL del espacio de trabajo"
 
@@ -2070,7 +2012,7 @@ msgstr "Anual"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Sí, ofrecemos un plan gratuito para siempre para uso individual. Sin restricciones, sin muros de pago, sin límites."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "Estás a punto de cambiar tu contraseña."
 
@@ -2118,11 +2060,11 @@ msgstr "Tu contraseña ha sido cambiada."
 msgid "Your profile image has been updated."
 msgstr "Tu imagen de perfil ha sido actualizada."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Tu cuenta de Trello ha sido desconectada."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Tu cuenta de Trello está conectada."
 

apps/web/src/locales/fr/messages.po

@@ -53,10 +53,6 @@ msgstr "1 utilisateur"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "Une application kanban puissante et flexible qui vous aide à organiser le travail, suivre les progrès et livrer des résultats—le tout en un seul endroit."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Compte"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Compte supprimé"
@@ -95,8 +91,8 @@ msgstr "Ajouter une description... (tapez '/' pour ouvrir les commandes ou '@' p
 msgid "Add details..."
 msgstr "Ajouter des détails..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Ajouter une étiquette"
 
@@ -152,7 +148,7 @@ msgstr "Tous les systèmes opérationnels"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Vous avez déjà un compte ? <0><1>Connectez-vous</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Une erreur s'est produite lors de la déconnexion de votre compte Trello."
 
@@ -160,27 +156,7 @@ msgstr "Une erreur s'est produite lors de la déconnexion de votre compte Trello
 msgid "An unexpected error occurred. Please try again later."
 msgstr "Une erreur inattendue s'est produite. Veuillez réessayer plus tard."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "Clé API créée"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "Nom de la clé API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "Le nom de la clé API ne peut pas dépasser 30 caractères"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "Le nom de la clé API est requis"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "Clés API"
 
@@ -250,13 +226,12 @@ msgstr "facturation annuelle"
 msgid "billed monthly"
 msgstr "facturation mensuelle"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Facturation"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Portail de facturation"
 
@@ -311,12 +286,12 @@ msgid "Board visibility updated"
 msgstr "Visibilité du tableau mise à jour"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Tableaux"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Tableaux | {0}"
 
@@ -353,16 +328,16 @@ msgstr "Carte introuvable"
 msgid "Card title"
 msgstr "Titre de la carte"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Modifier le mot de passe"
 
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Modifiez vos préférences linguistiques."
+#: src/views/settings/index.tsx:227
+msgid "Change the language of the app."
+msgstr "Changer la langue de l'application."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -382,10 +357,6 @@ msgstr "Effacer les filtres"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Cliquez sur le lien que nous avons envoyé à {magicLinkRecipient} pour vous connecter."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Fermer"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Revue de code"
@@ -430,7 +401,7 @@ msgid "Confirm your new password"
 msgstr "Confirmez votre nouveau mot de passe"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Connecter Trello"
 
@@ -438,7 +409,7 @@ msgstr "Connecter Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connectez vos outils favoris pour simplifier votre flux de travail."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Connectez votre compte Trello pour importer des tableaux."
 
@@ -473,10 +444,6 @@ msgstr "Contrôlez qui peut voir et modifier vos tableaux."
 msgid "Create another"
 msgstr "Créer un autre"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "Créer une clé API"
-
 #: src/views/boards/components/NewBoardForm.tsx:128
 msgid "Create board"
 msgstr "Créer un tableau"
@@ -501,12 +468,12 @@ msgstr "Créer une liste"
 msgid "Create new board"
 msgstr "Créer un nouveau tableau"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Créer une nouvelle clé"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Créer une nouvelle étiquette"
 
@@ -560,9 +527,9 @@ msgstr "Sombre"
 msgid "Delete"
 msgstr "Supprimer"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Supprimer le compte"
 
@@ -583,8 +550,8 @@ msgid "Delete list"
 msgstr "Supprimer la liste"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Supprimer l'espace de travail"
 
@@ -610,7 +577,7 @@ msgstr "a supprimé l'élément <0>{0}</0> de la checklist"
 msgid "Design"
 msgstr "Design"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Déconnecter Trello"
 
@@ -618,7 +585,7 @@ msgstr "Déconnecter Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discutez et collaborez sur les cartes."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Nom d'affichage"
 
@@ -736,7 +703,7 @@ msgstr "Erreur lors de la suppression de l'étiquette"
 msgid "Error deleting workspace"
 msgstr "Erreur lors de la suppression de l'espace de travail"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Erreur lors de la déconnexion de Trello"
 
@@ -950,7 +917,7 @@ msgstr "Idées"
 msgid "Ideas to improve this page..."
 msgstr "Idées pour améliorer cette page..."
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importer"
 
@@ -988,7 +955,6 @@ msgstr "En cours"
 msgid "Individuals"
 msgstr "Particuliers"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Intégrations"
@@ -1009,7 +975,7 @@ msgstr "Inviter"
 msgid "Invite another"
 msgstr "Inviter un autre"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Inviter un membre"
@@ -1045,7 +1011,7 @@ msgstr "Étiquettes"
 msgid "Labels & Filters"
 msgstr "Étiquettes & filtres"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Langue"
 
@@ -1163,14 +1129,10 @@ msgstr "Nom"
 msgid "Need help?"
 msgstr "Besoin d'aide ?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nouveau"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "Nouvelle clé API"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "Nouveau tableau"
@@ -1244,11 +1206,11 @@ msgstr "Offre"
 msgid "Onboarding"
 msgstr "Intégration"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Une fois que vous supprimez votre compte, il n'y a pas de retour possible. Cette action ne peut pas être annulée."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Une fois que vous supprimez votre espace de travail, il n'y a pas de retour possible. Cette action ne peut pas être annulée."
 
@@ -1338,9 +1300,9 @@ msgstr "Veuillez sélectionner un fichier à télécharger."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1391,7 +1353,7 @@ msgstr "Plan Pro ∞"
 msgid "Profile image updated"
 msgstr "Image de profil mise à jour"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Photo de profil"
 
@@ -1474,6 +1436,10 @@ msgstr "Ressources"
 msgid "Review"
 msgstr "Révision"
 
+#: src/views/settings/components/CreateAPIKeyForm.tsx:49
+msgid "Revoke"
+msgstr "Révoquer"
+
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
 msgid "Roadmap"
@@ -1527,30 +1493,15 @@ msgstr "Envoyer des commentaires"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Paramètres"
 
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Paramètres | Compte"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Paramètres | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Paramètres | Facturation"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Paramètres | Intégrations"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Paramètres | Espace de travail"
+#. placeholder {0}: workspace.name ?? "Workspace"
+#: src/views/settings/index.tsx:161
+msgid "Settings | {0}"
+msgstr "Paramètres | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1668,10 +1619,6 @@ msgstr "Ils ne pourront plus accéder à cet espace de travail."
 msgid "This action can't be undone."
 msgstr "Cette action ne peut pas être annulée."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "Cette clé API ne sera affichée qu'une seule fois. Veuillez la sauvegarder dans un emplacement sécurisé."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "Ce tableau est privé ou n'existe pas"
@@ -1713,11 +1660,7 @@ msgstr "Basculer le menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Suivez tous les changements de cartes avec un historique d'activité détaillé."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello déconnecté"
 
@@ -1802,16 +1745,16 @@ msgstr "Impossible de mettre à jour l'élément de la liste de contrôle"
 msgid "Unable to update comment"
 msgstr "Impossible de mettre à jour le commentaire"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "Impossible de mettre à jour les étiquettes"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "Impossible de mettre à jour la liste"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "Impossible de mettre à jour les membres"
 
@@ -1854,9 +1797,9 @@ msgid "Unlimited members"
 msgstr "Membres illimités"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Mettre à jour"
@@ -1887,7 +1830,7 @@ msgid "Upgrade"
 msgstr "Mettre à niveau"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Passer à Pro"
 
@@ -1935,11 +1878,11 @@ msgstr "L'utilisateur est déjà membre de cet espace de travail"
 msgid "Video"
 msgstr "Vidéo"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "Consultez et gérez vos clés API."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "Consultez et gérez votre facturation et votre abonnement."
 
@@ -1991,7 +1934,6 @@ msgstr "Quand Trello a été lancé en 2011, il a impressionné tout le monde pa
 msgid "Why make an open source Trello?"
 msgstr "Pourquoi créer un Trello open source ?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Espace de travail"
@@ -2004,7 +1946,7 @@ msgstr "Espace de travail créé avec succès. Vous pourrez effectuer la mise à
 msgid "Workspace deleted"
 msgstr "Espace de travail supprimé"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Description de l'espace de travail"
 
@@ -2026,7 +1968,7 @@ msgid "Workspace members"
 msgstr "Membres de l'espace de travail"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Nom de l'espace de travail"
 
@@ -2050,7 +1992,7 @@ msgstr "Nom de l'espace de travail mis à jour"
 msgid "Workspace slug updated"
 msgstr "Slug de l'espace de travail mis à jour"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "URL de l'espace de travail"
 
@@ -2070,7 +2012,7 @@ msgstr "Annuel"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Oui, nous proposons un plan gratuit à vie pour un usage individuel. Aucune restriction, aucun paywall, aucune limite."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "Vous êtes sur le point de modifier votre mot de passe."
 
@@ -2118,11 +2060,11 @@ msgstr "Votre mot de passe a été modifié."
 msgid "Your profile image has been updated."
 msgstr "Votre image de profil a été mise à jour."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Votre compte Trello a été déconnecté."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Votre compte Trello est connecté."
 

apps/web/src/locales/index.ts

@@ -1,4 +1,4 @@
-export const locales = ["en", "fr", "de", "es", "it", "nl", "ru"] as const;
+export const locales = ["en", "fr", "de", "es", "it", "nl"] as const;
 
 export type Locale = (typeof locales)[number];
 
@@ -11,5 +11,4 @@ export const localeNames: Record<Locale, string> = {
   es: "Español",
   it: "Italiano",
   nl: "Nederlands",
-  ru: "Русский",
 };

apps/web/src/locales/it/messages.po

@@ -53,10 +53,6 @@ msgstr "1 utente"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "Un'app kanban potente e flessibile che ti aiuta a organizzare il lavoro, monitorare i progressi e ottenere risultati, tutto in un unico posto."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Account"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Account eliminato"
@@ -95,8 +91,8 @@ msgstr "Aggiungi descrizione... (digita '/' per aprire i comandi o '@' per menzi
 msgid "Add details..."
 msgstr "Aggiungi dettagli..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Aggiungi etichetta"
 
@@ -152,7 +148,7 @@ msgstr "Tutti i sistemi operativi"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Hai già un account? <0><1>Accedi</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Si è verificato un errore durante la disconnessione del tuo account Trello."
 
@@ -160,27 +156,7 @@ msgstr "Si è verificato un errore durante la disconnessione del tuo account Tre
 msgid "An unexpected error occurred. Please try again later."
 msgstr "Si è verificato un errore imprevisto. Riprova più tardi."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "Chiave API creata"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "Nome chiave API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "Il nome della chiave API non può superare i 30 caratteri"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "Il nome della chiave API è obbligatorio"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "Chiavi API"
 
@@ -250,13 +226,12 @@ msgstr "fatturato annualmente"
 msgid "billed monthly"
 msgstr "fatturato mensilmente"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Fatturazione"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Portale di fatturazione"
 
@@ -311,12 +286,12 @@ msgid "Board visibility updated"
 msgstr "Visibilità della bacheca aggiornata"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Bacheche"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Bacheche | {0}"
 
@@ -353,16 +328,16 @@ msgstr "Carta non trovata"
 msgid "Card title"
 msgstr "Titolo della carta"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Cambia password"
 
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Modifica le tue preferenze di lingua."
+#: src/views/settings/index.tsx:227
+msgid "Change the language of the app."
+msgstr "Cambia la lingua dell'app."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -382,10 +357,6 @@ msgstr "Cancella filtri"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Clicca sul link che abbiamo inviato a {magicLinkRecipient} per accedere."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Chiudi"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Revisione del codice"
@@ -430,7 +401,7 @@ msgid "Confirm your new password"
 msgstr "Conferma la tua nuova password"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Connetti Trello"
 
@@ -438,7 +409,7 @@ msgstr "Connetti Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Connetti i tuoi strumenti preferiti per semplificare il tuo flusso di lavoro."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Connetti il tuo account Trello per importare le bacheche."
 
@@ -473,10 +444,6 @@ msgstr "Controlla chi può visualizzare e modificare le tue bacheche."
 msgid "Create another"
 msgstr "Crea un altro"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "Crea chiave API"
-
 #: src/views/boards/components/NewBoardForm.tsx:128
 msgid "Create board"
 msgstr "Crea bacheca"
@@ -501,12 +468,12 @@ msgstr "Crea lista"
 msgid "Create new board"
 msgstr "Crea nuova bacheca"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Crea nuova chiave"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Crea nuova etichetta"
 
@@ -560,9 +527,9 @@ msgstr "Scuro"
 msgid "Delete"
 msgstr "Elimina"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Elimina account"
 
@@ -583,8 +550,8 @@ msgid "Delete list"
 msgstr "Elimina lista"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Elimina spazio di lavoro"
 
@@ -610,7 +577,7 @@ msgstr "ha eliminato l'elemento <0>{0}</0> della checklist"
 msgid "Design"
 msgstr "Design"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Disconnetti Trello"
 
@@ -618,7 +585,7 @@ msgstr "Disconnetti Trello"
 msgid "Discuss and collaborate on cards."
 msgstr "Discuti e collabora sulle schede."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Nome visualizzato"
 
@@ -736,7 +703,7 @@ msgstr "Errore durante l'eliminazione dell'etichetta"
 msgid "Error deleting workspace"
 msgstr "Errore durante l'eliminazione dell'area di lavoro"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Errore durante la disconnessione da Trello"
 
@@ -950,7 +917,7 @@ msgstr "Idee"
 msgid "Ideas to improve this page..."
 msgstr "Idee per migliorare questa pagina..."
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importa"
 
@@ -988,7 +955,6 @@ msgstr "In corso"
 msgid "Individuals"
 msgstr "Privati"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Integrazioni"
@@ -1009,7 +975,7 @@ msgstr "Invita"
 msgid "Invite another"
 msgstr "Invita un altro"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Invita membro"
@@ -1045,7 +1011,7 @@ msgstr "Etichette"
 msgid "Labels & Filters"
 msgstr "Etichette & Filtri"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Lingua"
 
@@ -1163,14 +1129,10 @@ msgstr "Nome"
 msgid "Need help?"
 msgstr "Hai bisogno di aiuto?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nuovo"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "Nuova chiave API"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "Nuova bacheca"
@@ -1244,11 +1206,11 @@ msgstr "Offerta"
 msgid "Onboarding"
 msgstr "Inserimento"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Una volta eliminato il tuo account, non si può tornare indietro. Questa azione non può essere annullata."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Una volta eliminata l'area di lavoro, non si può tornare indietro. Questa azione non può essere annullata."
 
@@ -1338,9 +1300,9 @@ msgstr "Seleziona un file da caricare."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1391,7 +1353,7 @@ msgstr "Piano Pro ∞"
 msgid "Profile image updated"
 msgstr "Immagine del profilo aggiornata"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Immagine del profilo"
 
@@ -1474,6 +1436,10 @@ msgstr "Risorse"
 msgid "Review"
 msgstr "Revisione"
 
+#: src/views/settings/components/CreateAPIKeyForm.tsx:49
+msgid "Revoke"
+msgstr "Revoca"
+
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
 msgid "Roadmap"
@@ -1527,30 +1493,15 @@ msgstr "Invia feedback"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Impostazioni"
 
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Impostazioni | Account"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Impostazioni | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Impostazioni | Fatturazione"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Impostazioni | Integrazioni"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Impostazioni | Area di lavoro"
+#. placeholder {0}: workspace.name ?? "Workspace"
+#: src/views/settings/index.tsx:161
+msgid "Settings | {0}"
+msgstr "Impostazioni | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1668,10 +1619,6 @@ msgstr "Non potranno accedere a questo spazio di lavoro."
 msgid "This action can't be undone."
 msgstr "Questa azione non può essere annullata."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "Questa chiave API verrà mostrata una sola volta. Salvala in un luogo sicuro."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "Questa bacheca è privata o non esiste"
@@ -1713,11 +1660,7 @@ msgstr "Attiva/disattiva menu"
 msgid "Track all card changes with detailed activity history."
 msgstr "Tieni traccia di tutte le modifiche alle schede con una cronologia dettagliata delle attività."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello disconnesso"
 
@@ -1802,16 +1745,16 @@ msgstr "Impossibile aggiornare l'elemento della checklist"
 msgid "Unable to update comment"
 msgstr "Impossibile aggiornare il commento"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "Impossibile aggiornare le etichette"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "Impossibile aggiornare la lista"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "Impossibile aggiornare i membri"
 
@@ -1854,9 +1797,9 @@ msgid "Unlimited members"
 msgstr "Membri illimitati"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Aggiorna"
@@ -1887,7 +1830,7 @@ msgid "Upgrade"
 msgstr "Aggiorna"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Passa a Pro"
 
@@ -1935,11 +1878,11 @@ msgstr "L'utente è già membro di questo spazio di lavoro"
 msgid "Video"
 msgstr "Video"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "Visualizza e gestisci le tue chiavi API."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "Visualizza e gestisci la tua fatturazione e abbonamento."
 
@@ -1991,7 +1934,6 @@ msgstr "Quando Trello fu lanciato nel 2011, stupì tutti con la sua semplicità
 msgid "Why make an open source Trello?"
 msgstr "Perché creare un Trello open source?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Spazio di lavoro"
@@ -2004,7 +1946,7 @@ msgstr "Spazio di lavoro creato con successo. Puoi effettuare l'aggiornamento pi
 msgid "Workspace deleted"
 msgstr "Spazio di lavoro eliminato"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Descrizione dello spazio di lavoro"
 
@@ -2026,7 +1968,7 @@ msgid "Workspace members"
 msgstr "Membri del workspace"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Nome dello spazio di lavoro"
 
@@ -2050,7 +1992,7 @@ msgstr "Nome dello spazio di lavoro aggiornato"
 msgid "Workspace slug updated"
 msgstr "Slug dell'area di lavoro aggiornato"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "URL dello spazio di lavoro"
 
@@ -2070,7 +2012,7 @@ msgstr "Annuale"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Sì, offriamo un piano gratuito per sempre per uso individuale. Nessuna restrizione, nessun paywall, nessun limite."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "Stai per cambiare la tua password."
 
@@ -2118,11 +2060,11 @@ msgstr "La tua password è stata modificata."
 msgid "Your profile image has been updated."
 msgstr "La tua immagine del profilo è stata aggiornata."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Il tuo account Trello è stato disconnesso."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Il tuo account Trello è connesso."
 

apps/web/src/locales/nl/messages.po

@@ -53,10 +53,6 @@ msgstr "1 gebruiker"
 msgid "A powerful, flexible kanban app that helps you organise work, track progress, and deliver results—all in one place."
 msgstr "Een krachtige, flexibele kanban-app die je helpt werk te organiseren, voortgang bij te houden en resultaten te leveren—allemaal op één plek."
 
-#: src/components/SettingsLayout.tsx:33
-msgid "Account"
-msgstr "Account"
-
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:27
 msgid "Account deleted"
 msgstr "Account verwijderd"
@@ -95,8 +91,8 @@ msgstr "Beschrijving toevoegen... (typ '/' om commando's te openen of '@' om te
 msgid "Add details..."
 msgstr "Details toevoegen..."
 
-#: src/views/card/components/LabelSelector.tsx:109
-#: src/views/card/components/LabelSelector.tsx:114
+#: src/views/card/components/LabelSelector.tsx:110
+#: src/views/card/components/LabelSelector.tsx:118
 msgid "Add label"
 msgstr "Label toevoegen"
 
@@ -152,7 +148,7 @@ msgstr "Alle systemen operationeel"
 msgid "Already have an account? <0><1>Sign in</1></0>"
 msgstr "Heb je al een account? <0><1>Log in</1></0>"
 
-#: src/views/settings/IntegrationsSettings.tsx:61
+#: src/views/settings/index.tsx:127
 msgid "An error occurred while disconnecting your Trello account."
 msgstr "Er is een fout opgetreden bij het verbreken van de verbinding met je Trello-account."
 
@@ -160,27 +156,7 @@ msgstr "Er is een fout opgetreden bij het verbreken van de verbinding met je Tre
 msgid "An unexpected error occurred. Please try again later."
 msgstr "Er is een onverwachte fout opgetreden. Probeer het later opnieuw."
 
-#: src/components/SettingsLayout.tsx:51
-msgid "API"
-msgstr "API"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:91
-msgid "API key created"
-msgstr "API-sleutel aangemaakt"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:161
-msgid "API key name"
-msgstr "API-sleutelnaam"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:25
-msgid "API key name cannot exceed 30 characters"
-msgstr "API-sleutelnaam mag niet langer zijn dan 30 tekens"
-
-#: src/views/settings/components/NewApiKeyModal.tsx:24
-msgid "API key name is required"
-msgstr "API-sleutelnaam is verplicht"
-
-#: src/views/settings/ApiSettings.tsx:22
+#: src/views/settings/index.tsx:296
 msgid "API keys"
 msgstr "API-sleutels"
 
@@ -250,13 +226,12 @@ msgstr "jaarlijks gefactureerd"
 msgid "billed monthly"
 msgstr "maandelijks gefactureerd"
 
-#: src/components/SettingsLayout.tsx:44
 #: src/views/boards/components/TemplateBoards.tsx:55
-#: src/views/settings/BillingSettings.tsx:39
+#: src/views/settings/index.tsx:235
 msgid "Billing"
 msgstr "Facturering"
 
-#: src/views/settings/BillingSettings.tsx:49
+#: src/views/settings/index.tsx:245
 msgid "Billing portal"
 msgstr "Factureringsportaal"
 
@@ -311,12 +286,12 @@ msgid "Board visibility updated"
 msgstr "Zichtbaarheid van bord bijgewerkt"
 
 #: src/components/SideNavigation.tsx:68
-#: src/views/boards/index.tsx:32
+#: src/views/boards/index.tsx:27
 msgid "Boards"
 msgstr "Borden"
 
 #. placeholder {0}: workspace.name ?? "Workspace"
-#: src/views/boards/index.tsx:28
+#: src/views/boards/index.tsx:23
 msgid "Boards | {0}"
 msgstr "Borden | {0}"
 
@@ -353,16 +328,16 @@ msgstr "Kaart niet gevonden"
 msgid "Card title"
 msgstr "Kaarttitel"
 
-#: src/views/settings/AccountSettings.tsx:70
-#: src/views/settings/AccountSettings.tsx:80
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:109
 #: src/views/settings/components/ChangePasswordConfirmation.tsx:178
+#: src/views/settings/index.tsx:328
+#: src/views/settings/index.tsx:338
 msgid "Change Password"
 msgstr "Wachtwoord wijzigen"
 
-#: src/views/settings/AccountSettings.tsx:45
-msgid "Change your language preferences."
-msgstr "Wijzig je taalvoorkeuren."
+#: src/views/settings/index.tsx:227
+msgid "Change the language of the app."
+msgstr "Wijzig de taal van de app."
 
 #: src/views/auth/login/index.tsx:41
 #: src/views/auth/signup/index.tsx:67
@@ -382,10 +357,6 @@ msgstr "Filters wissen"
 msgid "Click on the link we've sent to {magicLinkRecipient} to sign in."
 msgstr "Klik op de link die we naar {magicLinkRecipient} hebben gestuurd om in te loggen."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:136
-msgid "Close"
-msgstr "Sluiten"
-
 #: src/views/boards/components/TemplateBoards.tsx:22
 msgid "Code Review"
 msgstr "Code review"
@@ -430,7 +401,7 @@ msgid "Confirm your new password"
 msgstr "Bevestig je nieuwe wachtwoord"
 
 #: src/views/boards/components/ImportBoardsForm.tsx:157
-#: src/views/settings/IntegrationsSettings.tsx:93
+#: src/views/settings/index.tsx:272
 msgid "Connect Trello"
 msgstr "Verbind Trello"
 
@@ -438,7 +409,7 @@ msgstr "Verbind Trello"
 msgid "Connect your favorite tools to streamline your workflow."
 msgstr "Verbind je favoriete tools om je werkstroom te stroomlijnen."
 
-#: src/views/settings/IntegrationsSettings.tsx:80
+#: src/views/settings/index.tsx:259
 msgid "Connect your Trello account to import boards."
 msgstr "Verbind je Trello-account om borden te importeren."
 
@@ -473,10 +444,6 @@ msgstr "Bepaal wie je borden kan bekijken en bewerken."
 msgid "Create another"
 msgstr "Maak nog een"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:175
-msgid "Create API key"
-msgstr "API-sleutel aanmaken"
-
 #: src/views/boards/components/NewBoardForm.tsx:128
 msgid "Create board"
 msgstr "Maak bord"
@@ -501,12 +468,12 @@ msgstr "Lijst maken"
 msgid "Create new board"
 msgstr "Nieuw bord maken"
 
-#: src/views/settings/ApiSettings.tsx:30
+#: src/views/settings/components/CreateAPIKeyForm.tsx:54
 msgid "Create new key"
 msgstr "Nieuwe sleutel aanmaken"
 
 #: src/views/board/components/NewCardForm.tsx:394
-#: src/views/card/components/LabelSelector.tsx:97
+#: src/views/card/components/LabelSelector.tsx:98
 msgid "Create new label"
 msgstr "Maak nieuw label"
 
@@ -560,9 +527,9 @@ msgstr "Donker"
 msgid "Delete"
 msgstr "Verwijderen"
 
-#: src/views/settings/AccountSettings.tsx:52
-#: src/views/settings/AccountSettings.tsx:62
 #: src/views/settings/components/DeleteAccountConfirmation.tsx:96
+#: src/views/settings/index.tsx:346
+#: src/views/settings/index.tsx:356
 msgid "Delete account"
 msgstr "Account verwijderen"
 
@@ -583,8 +550,8 @@ msgid "Delete list"
 msgstr "Lijst verwijderen"
 
 #: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
-#: src/views/settings/WorkspaceSettings.tsx:96
-#: src/views/settings/WorkspaceSettings.tsx:107
+#: src/views/settings/index.tsx:309
+#: src/views/settings/index.tsx:320
 msgid "Delete workspace"
 msgstr "Werkruimte verwijderen"
 
@@ -610,7 +577,7 @@ msgstr "heeft checklistitem <0>{0}</0> verwijderd"
 msgid "Design"
 msgstr "Ontwerp"
 
-#: src/views/settings/IntegrationsSettings.tsx:108
+#: src/views/settings/index.tsx:287
 msgid "Disconnect Trello"
 msgstr "Trello ontkoppelen"
 
@@ -618,7 +585,7 @@ msgstr "Trello ontkoppelen"
 msgid "Discuss and collaborate on cards."
 msgstr "Bespreek en werk samen aan kaarten."
 
-#: src/views/settings/AccountSettings.tsx:35
+#: src/views/settings/index.tsx:176
 msgid "Display name"
 msgstr "Weergavenaam"
 
@@ -736,7 +703,7 @@ msgstr "Fout bij het verwijderen van label"
 msgid "Error deleting workspace"
 msgstr "Fout bij verwijderen werkruimte"
 
-#: src/views/settings/IntegrationsSettings.tsx:60
+#: src/views/settings/index.tsx:126
 msgid "Error disconnecting Trello"
 msgstr "Fout bij ontkoppelen van Trello"
 
@@ -950,7 +917,7 @@ msgstr "Ideeën"
 msgid "Ideas to improve this page..."
 msgstr "Ideeën om deze pagina te verbeteren..."
 
-#: src/views/boards/index.tsx:43
+#: src/views/boards/index.tsx:38
 msgid "Import"
 msgstr "Importeren"
 
@@ -988,7 +955,6 @@ msgstr "In behandeling"
 msgid "Individuals"
 msgstr "Individuen"
 
-#: src/components/SettingsLayout.tsx:57
 #: src/views/home/components/Features.tsx:114
 msgid "Integrations"
 msgstr "Integraties"
@@ -1009,7 +975,7 @@ msgstr "Uitnodigen"
 msgid "Invite another"
 msgstr "Nog iemand uitnodigen"
 
-#: src/views/card/components/MemberSelector.tsx:111
+#: src/views/card/components/MemberSelector.tsx:112
 #: src/views/members/components/InviteMemberForm.tsx:233
 msgid "Invite member"
 msgstr "Lid uitnodigen"
@@ -1045,7 +1011,7 @@ msgstr "Labels"
 msgid "Labels & Filters"
 msgstr "Labels & filters"
 
-#: src/views/settings/AccountSettings.tsx:42
+#: src/views/settings/index.tsx:224
 msgid "Language"
 msgstr "Taal"
 
@@ -1163,14 +1129,10 @@ msgstr "Naam"
 msgid "Need help?"
 msgstr "Hulp nodig?"
 
-#: src/views/boards/index.tsx:53
+#: src/views/boards/index.tsx:48
 msgid "New"
 msgstr "Nieuw"
 
-#: src/views/settings/components/NewApiKeyModal.tsx:147
-msgid "New API key"
-msgstr "Nieuwe API-sleutel"
-
 #: src/views/boards/components/NewBoardForm.tsx:85
 msgid "New board"
 msgstr "Nieuw bord"
@@ -1244,11 +1206,11 @@ msgstr "Aanbod"
 msgid "Onboarding"
 msgstr "Inwerktraject"
 
-#: src/views/settings/AccountSettings.tsx:55
+#: src/views/settings/index.tsx:349
 msgid "Once you delete your account, there is no going back. This action cannot be undone."
 msgstr "Zodra je je account verwijdert, is er geen weg terug. Deze actie kan niet ongedaan worden gemaakt."
 
-#: src/views/settings/WorkspaceSettings.tsx:99
+#: src/views/settings/index.tsx:312
 msgid "Once you delete your workspace, there is no going back. This action cannot be undone."
 msgstr "Zodra je je werkruimte verwijdert, is er geen weg terug. Deze actie kan niet ongedaan worden gemaakt."
 
@@ -1338,9 +1300,9 @@ msgstr "Selecteer een bestand om te uploaden."
 #: src/views/card/components/DeleteCardConfirmation.tsx:52
 #: src/views/card/components/DeleteChecklistConfirmation.tsx:37
 #: src/views/card/components/DeleteCommentConfirmation.tsx:45
-#: src/views/card/components/LabelSelector.tsx:72
-#: src/views/card/components/ListSelector.tsx:52
-#: src/views/card/components/MemberSelector.tsx:79
+#: src/views/card/components/LabelSelector.tsx:73
+#: src/views/card/components/ListSelector.tsx:53
+#: src/views/card/components/MemberSelector.tsx:80
 #: src/views/card/components/NewChecklistForm.tsx:70
 #: src/views/card/components/NewChecklistItemForm.tsx:89
 #: src/views/card/components/NewCommentForm.tsx:31
@@ -1391,7 +1353,7 @@ msgstr "Pro Plan ∞"
 msgid "Profile image updated"
 msgstr "Profielafbeelding bijgewerkt"
 
-#: src/views/settings/AccountSettings.tsx:29
+#: src/views/settings/index.tsx:171
 msgid "Profile picture"
 msgstr "Profielfoto"
 
@@ -1474,6 +1436,10 @@ msgstr "Bronnen"
 msgid "Review"
 msgstr "Beoordeling"
 
+#: src/views/settings/components/CreateAPIKeyForm.tsx:49
+msgid "Revoke"
+msgstr "Intrekken"
+
 #: src/views/home/components/Footer.tsx:36
 #: src/views/home/components/Header.tsx:13
 msgid "Roadmap"
@@ -1527,30 +1493,15 @@ msgstr "Feedback versturen"
 msgid "Senior"
 msgstr "Senior"
 
-#: src/components/SettingsLayout.tsx:82
 #: src/components/SideNavigation.tsx:78
+#: src/views/settings/index.tsx:165
 msgid "Settings"
 msgstr "Instellingen"
 
-#: src/views/settings/AccountSettings.tsx:25
-msgid "Settings | Account"
-msgstr "Instellingen | Account"
-
-#: src/views/settings/ApiSettings.tsx:18
-msgid "Settings | API"
-msgstr "Instellingen | API"
-
-#: src/views/settings/BillingSettings.tsx:35
-msgid "Settings | Billing"
-msgstr "Instellingen | Facturering"
-
-#: src/views/settings/IntegrationsSettings.tsx:69
-msgid "Settings | Integrations"
-msgstr "Instellingen | Integraties"
-
-#: src/views/settings/WorkspaceSettings.tsx:54
-msgid "Settings | Workspace"
-msgstr "Instellingen | Werkruimte"
+#. placeholder {0}: workspace.name ?? "Workspace"
+#: src/views/settings/index.tsx:161
+msgid "Settings | {0}"
+msgstr "Instellingen | {0}"
 
 #: src/views/home/components/Header.tsx:100
 #: src/views/home/components/Header.tsx:138
@@ -1668,10 +1619,6 @@ msgstr "Ze zullen geen toegang meer hebben tot deze werkruimte."
 msgid "This action can't be undone."
 msgstr "Deze actie kan niet ongedaan worden gemaakt."
 
-#: src/views/settings/components/NewApiKeyModal.tsx:129
-msgid "This API key will only be shown once. Please save it in a secure location."
-msgstr "Deze API-sleutel wordt slechts één keer getoond. Bewaar deze op een veilige plaats."
-
 #: src/views/public/board/index.tsx:151
 msgid "This board is private or does not exist"
 msgstr "Dit bord is privé of bestaat niet"
@@ -1713,11 +1660,7 @@ msgstr "Menu in-/uitschakelen"
 msgid "Track all card changes with detailed activity history."
 msgstr "Volg alle kaartwijzigingen met gedetailleerde activiteitengeschiedenis."
 
-#: src/views/settings/IntegrationsSettings.tsx:73
-msgid "Trello"
-msgstr "Trello"
-
-#: src/views/settings/IntegrationsSettings.tsx:53
+#: src/views/settings/index.tsx:119
 msgid "Trello disconnected"
 msgstr "Trello ontkoppeld"
 
@@ -1802,16 +1745,16 @@ msgstr "Kan checklistitem niet bijwerken"
 msgid "Unable to update comment"
 msgstr "Kan reactie niet bijwerken"
 
-#: src/views/card/components/LabelSelector.tsx:71
+#: src/views/card/components/LabelSelector.tsx:72
 msgid "Unable to update labels"
 msgstr "Kan labels niet bijwerken"
 
 #: src/views/board/index.tsx:133
-#: src/views/card/components/ListSelector.tsx:51
+#: src/views/card/components/ListSelector.tsx:52
 msgid "Unable to update list"
 msgstr "Kan lijst niet bijwerken"
 
-#: src/views/card/components/MemberSelector.tsx:78
+#: src/views/card/components/MemberSelector.tsx:79
 msgid "Unable to update members"
 msgstr "Kan leden niet bijwerken"
 
@@ -1854,9 +1797,9 @@ msgid "Unlimited members"
 msgstr "Onbeperkt aantal leden"
 
 #: src/views/board/components/UpdateBoardSlugForm.tsx:174
-#: src/views/settings/components/UpdateDisplayNameForm.tsx:80
-#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
-#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
+#: src/views/settings/components/UpdateDisplayNameForm.tsx:79
+#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:90
+#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:82
 #: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
 msgid "Update"
 msgstr "Bijwerken"
@@ -1887,7 +1830,7 @@ msgid "Upgrade"
 msgstr "Upgraden"
 
 #: src/views/settings/components/UpgradeToProConfirmation.tsx:52
-#: src/views/settings/WorkspaceSettings.tsx:89
+#: src/views/settings/index.tsx:216
 msgid "Upgrade to Pro"
 msgstr "Upgraden naar Pro"
 
@@ -1935,11 +1878,11 @@ msgstr "Gebruiker is al lid van deze werkruimte"
 msgid "Video"
 msgstr "Video"
 
-#: src/views/settings/ApiSettings.tsx:25
+#: src/views/settings/index.tsx:299
 msgid "View and manage your API keys."
 msgstr "Bekijk en beheer je API-sleutels."
 
-#: src/views/settings/BillingSettings.tsx:42
+#: src/views/settings/index.tsx:238
 msgid "View and manage your billing and subscription."
 msgstr "Bekijk en beheer je facturering en abonnement."
 
@@ -1991,7 +1934,6 @@ msgstr "Toen Trello in 2011 werd gelanceerd, blies het iedereen omver met zijn z
 msgid "Why make an open source Trello?"
 msgstr "Waarom een open source Trello maken?"
 
-#: src/components/SettingsLayout.tsx:39
 #: src/views/board/index.tsx:331
 msgid "Workspace"
 msgstr "Werkruimte"
@@ -2004,7 +1946,7 @@ msgstr "Werkruimte succesvol aangemaakt. Je kunt later upgraden in de instelling
 msgid "Workspace deleted"
 msgstr "Werkruimte verwijderd"
 
-#: src/views/settings/WorkspaceSettings.tsx:75
+#: src/views/settings/index.tsx:202
 msgid "Workspace description"
 msgstr "Werkruimte beschrijving"
 
@@ -2026,7 +1968,7 @@ msgid "Workspace members"
 msgstr "Werkruimteleden"
 
 #: src/components/NewWorkspaceForm.tsx:259
-#: src/views/settings/WorkspaceSettings.tsx:58
+#: src/views/settings/index.tsx:183
 msgid "Workspace name"
 msgstr "Naam werkruimte"
 
@@ -2050,7 +1992,7 @@ msgstr "Werkruimtenaam bijgewerkt"
 msgid "Workspace slug updated"
 msgstr "Werkruimte-slug bijgewerkt"
 
-#: src/views/settings/WorkspaceSettings.tsx:66
+#: src/views/settings/index.tsx:192
 msgid "Workspace URL"
 msgstr "Werkruimte URL"
 
@@ -2070,7 +2012,7 @@ msgstr "Jaarlijks"
 msgid "Yes, we offer an forever free plan for individual use. No restrictions, no paywalls, no limits."
 msgstr "Ja, we bieden een voor altijd gratis plan voor individueel gebruik. Geen beperkingen, geen betaalmuren, geen limieten."
 
-#: src/views/settings/AccountSettings.tsx:73
+#: src/views/settings/index.tsx:331
 msgid "You are about to change your password."
 msgstr "Je staat op het punt je wachtwoord te wijzigen."
 
@@ -2118,11 +2060,11 @@ msgstr "Je wachtwoord is gewijzigd."
 msgid "Your profile image has been updated."
 msgstr "Je profielafbeelding is bijgewerkt."
 
-#: src/views/settings/IntegrationsSettings.tsx:54
+#: src/views/settings/index.tsx:120
 msgid "Your Trello account has been disconnected."
 msgstr "Je Trello-account is ontkoppeld."
 
-#: src/views/settings/IntegrationsSettings.tsx:102
+#: src/views/settings/index.tsx:281
 msgid "Your Trello account is connected."
 msgstr "Je Trello-account is verbonden."
 

apps/web/src/pages/settings/account.tsx

@@ -1,16 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import { SettingsLayout } from "~/components/SettingsLayout";
-import AccountSettings from "~/views/settings/AccountSettings";
-
-const AccountSettingsPage: NextPageWithLayout = () => {
-  return (
-    <SettingsLayout currentTab="account">
-      <AccountSettings />
-    </SettingsLayout>
-  );
-};
-
-AccountSettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default AccountSettingsPage;

apps/web/src/pages/settings/api.tsx

@@ -1,16 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import { SettingsLayout } from "~/components/SettingsLayout";
-import ApiSettings from "~/views/settings/ApiSettings";
-
-const ApiSettingsPage: NextPageWithLayout = () => {
-  return (
-    <SettingsLayout currentTab="api">
-      <ApiSettings />
-    </SettingsLayout>
-  );
-};
-
-ApiSettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default ApiSettingsPage;

apps/web/src/pages/settings/billing.tsx

@@ -1,16 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import { SettingsLayout } from "~/components/SettingsLayout";
-import BillingSettings from "~/views/settings/BillingSettings";
-
-const BillingSettingsPage: NextPageWithLayout = () => {
-  return (
-    <SettingsLayout currentTab="billing">
-      <BillingSettings />
-    </SettingsLayout>
-  );
-};
-
-BillingSettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default BillingSettingsPage;

apps/web/src/pages/settings/index.tsx

@@ -0,0 +1,17 @@
+import type { NextPageWithLayout } from "~/pages/_app";
+import { getDashboardLayout } from "~/components/Dashboard";
+import Popup from "~/components/Popup";
+import SettingsView from "~/views/settings";
+
+const SettingsPage: NextPageWithLayout = () => {
+  return (
+    <>
+      <SettingsView />
+      <Popup />
+    </>
+  );
+};
+
+SettingsPage.getLayout = (page) => getDashboardLayout(page);
+
+export default SettingsPage;

apps/web/src/pages/settings/integrations.tsx

@@ -1,16 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import { SettingsLayout } from "~/components/SettingsLayout";
-import IntegrationsSettings from "~/views/settings/IntegrationsSettings";
-
-const IntegrationsSettingsPage: NextPageWithLayout = () => {
-  return (
-    <SettingsLayout currentTab="integrations">
-      <IntegrationsSettings />
-    </SettingsLayout>
-  );
-};
-
-IntegrationsSettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default IntegrationsSettingsPage;

apps/web/src/pages/settings/workspace.tsx

@@ -1,16 +0,0 @@
-import type { NextPageWithLayout } from "~/pages/_app";
-import { getDashboardLayout } from "~/components/Dashboard";
-import { SettingsLayout } from "~/components/SettingsLayout";
-import WorkspaceSettings from "~/views/settings/WorkspaceSettings";
-
-const WorkspaceSettingsPage: NextPageWithLayout = () => {
-  return (
-    <SettingsLayout currentTab="workspace">
-      <WorkspaceSettings />
-    </SettingsLayout>
-  );
-};
-
-WorkspaceSettingsPage.getLayout = (page) => getDashboardLayout(page);
-
-export default WorkspaceSettingsPage;

apps/web/src/utils/i18n.ts

@@ -18,8 +18,6 @@ const loadMessages = async (locale: Locale) => {
       return (await import("~/locales/it/messages")).messages;
     case "nl":
       return (await import("~/locales/nl/messages")).messages;
-    case "ru":
-      return (await import("~/locales/ru/messages")).messages;
     default:
       return enMessages;
   }

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -155,7 +155,7 @@ export function UpdateBoardSlugForm({
         <div className="flex items-center gap-2">
           <Button
             variant="secondary"
-            href="/settings?tab=workspace"
+            href="/settings?edit=workspace_url"
             onClick={closeModal}
           >
             {t`Edit workspace URL`}

apps/web/src/views/boards/components/BoardsList.tsx

@@ -19,7 +19,7 @@ export function BoardsList() {
 
   if (isLoading)
     return (
-      <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
+      <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
         <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -45,7 +45,7 @@ export function BoardsList() {
     );
 
   return (
-    <div className="3xl:grid-cols-4 grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-3">
+    <div className="grid h-fit w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-7">
       {data?.map((board) => (
         <Link key={board.publicId} href={`boards/${board.publicId}`}>
           <div className="align-center relative mr-5 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed border-light-400 bg-light-50 shadow-sm hover:bg-light-200 dark:border-dark-600 dark:bg-dark-50 dark:hover:bg-dark-100">

apps/web/src/views/members/index.tsx

@@ -183,7 +183,7 @@ export default function MembersPage() {
               <>
                 {!proSubscription && (
                   <Link
-                    href="/settings/workspace?upgrade=pro"
+                    href="/settings?upgrade=pro"
                     className="hidden items-center rounded-full border border-emerald-300 bg-emerald-50 px-3 py-1 text-center text-xs text-emerald-400 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-400 lg:flex"
                   >
                     <HiBolt />

apps/web/src/views/settings/AccountSettings.tsx

@@ -1,116 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { env } from "next-runtime-env";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import { LanguageSelector } from "~/components/LanguageSelector";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-import { api } from "~/utils/api";
-import Avatar from "./components/Avatar";
-import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
-import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
-import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
-
-export default function AccountSettings() {
-  const { modalContentType, openModal, isOpen } = useModal();
-  const isCredentialsEnabled =
-    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
-  const { data } = api.user.getUser.useQuery();
-
-  return (
-    <>
-      <PageHead title={t`Settings | Account`} />
-
-      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Profile picture`}
-        </h2>
-        <Avatar userId={data?.id} userImage={data?.image} />
-
-        <div className="mb-4">
-          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-            {t`Display name`}
-          </h2>
-          <UpdateDisplayNameForm displayName={data?.name ?? ""} />
-        </div>
-
-        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-            {t`Language`}
-          </h2>
-          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-            {t`Change your language preferences.`}
-          </p>
-          <LanguageSelector />
-        </div>
-
-        <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-            {t`Delete account`}
-          </h2>
-          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-            {t`Once you delete your account, there is no going back. This action cannot be undone.`}
-          </p>
-          <div className="mt-4">
-            <Button
-              variant="secondary"
-              onClick={() => openModal("DELETE_ACCOUNT")}
-            >
-              {t`Delete account`}
-            </Button>
-          </div>
-        </div>
-
-        {isCredentialsEnabled && (
-          <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-            <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-              {t`Change Password`}
-            </h2>
-            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-              {t`You are about to change your password.`}
-            </p>
-            <div className="mt-4">
-              <Button
-                variant="secondary"
-                onClick={() => openModal("CHANGE_PASSWORD")}
-              >
-                {t`Change Password`}
-              </Button>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Account-specific modals */}
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
-      >
-        <DeleteAccountConfirmation />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
-      >
-        <ChangePasswordFormConfirmation />
-      </Modal>
-
-      {/* Global modals */}
-      <Modal
-        modalSize="md"
-        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-      >
-        <FeedbackModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-      >
-        <NewWorkspaceForm />
-      </Modal>
-    </>
-  );
-}

apps/web/src/views/settings/ApiSettings.tsx

@@ -1,66 +0,0 @@
-import { t } from "@lingui/core/macro";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-import ApiKeyList from "./components/ApiKeyList";
-import NewApiKeyModal from "./components/NewApiKeyModal";
-import { RevokeApiKeyConfirmation } from "./components/RevokeApiKeyConfirmation";
-
-export default function ApiSettings() {
-  const { modalContentType, openModal, isOpen } = useModal();
-
-  return (
-    <>
-      <PageHead title={t`Settings | API`} />
-
-      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`API keys`}
-        </h2>
-        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-          {t`View and manage your API keys.`}
-        </p>
-
-        <div className="mb-4 flex items-center justify-between">
-          <Button variant="primary" onClick={() => openModal("NEW_API_KEY")}>
-            {t`Create new key`}
-          </Button>
-        </div>
-
-        <ApiKeyList />
-      </div>
-
-      {/* API-specific modals */}
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_API_KEY"}
-      >
-        <NewApiKeyModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "REVOKE_API_KEY"}
-      >
-        <RevokeApiKeyConfirmation />
-      </Modal>
-
-      {/* Global modals */}
-      <Modal
-        modalSize="md"
-        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-      >
-        <FeedbackModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-      >
-        <NewWorkspaceForm />
-      </Modal>
-    </>
-  );
-}

apps/web/src/views/settings/BillingSettings.tsx

@@ -1,68 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-
-export default function BillingSettings() {
-  const { modalContentType, isOpen } = useModal();
-
-  const handleOpenBillingPortal = async () => {
-    try {
-      const response = await fetch("/api/stripe/create_billing_session", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const { url } = (await response.json()) as { url: string };
-
-      if (url) {
-        window.location.href = url;
-      }
-    } catch (error) {
-      console.error("Error creating billing session:", error);
-    }
-  };
-
-  return (
-    <>
-      <PageHead title={t`Settings | Billing`} />
-
-      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Billing`}
-        </h2>
-        <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-          {t`View and manage your billing and subscription.`}
-        </p>
-        <Button
-          variant="primary"
-          iconRight={<HiMiniArrowTopRightOnSquare />}
-          onClick={handleOpenBillingPortal}
-        >
-          {t`Billing portal`}
-        </Button>
-      </div>
-
-      {/* Global modals */}
-      <Modal
-        modalSize="md"
-        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-      >
-        <FeedbackModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-      >
-        <NewWorkspaceForm />
-      </Modal>
-    </>
-  );
-}

apps/web/src/views/settings/IntegrationsSettings.tsx

@@ -1,130 +0,0 @@
-import { t } from "@lingui/core/macro";
-import { useEffect } from "react";
-import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-import { api } from "~/utils/api";
-
-export default function IntegrationsSettings() {
-  const { modalContentType, isOpen } = useModal();
-  const { showPopup } = usePopup();
-
-  const {
-    data: integrations,
-    refetch: refetchIntegrations,
-    isLoading: integrationsLoading,
-  } = api.integration.providers.useQuery();
-
-  const { data: trelloUrl, refetch: refetchTrelloUrl } =
-    api.integration.getAuthorizationUrl.useQuery(
-      { provider: "trello" },
-      {
-        enabled:
-          !integrationsLoading &&
-          !integrations?.some(
-            (integration) => integration.provider === "trello",
-          ),
-        refetchOnWindowFocus: true,
-      },
-    );
-
-  useEffect(() => {
-    const handleFocus = () => {
-      refetchIntegrations();
-    };
-    window.addEventListener("focus", handleFocus);
-    return () => {
-      window.removeEventListener("focus", handleFocus);
-    };
-  }, [refetchIntegrations]);
-
-  const { mutateAsync: disconnectTrello } =
-    api.integration.disconnect.useMutation({
-      onSuccess: () => {
-        refetchIntegrations();
-        refetchTrelloUrl();
-        showPopup({
-          header: t`Trello disconnected`,
-          message: t`Your Trello account has been disconnected.`,
-          icon: "success",
-        });
-      },
-      onError: () => {
-        showPopup({
-          header: t`Error disconnecting Trello`,
-          message: t`An error occurred while disconnecting your Trello account.`,
-          icon: "error",
-        });
-      },
-    });
-
-  return (
-    <>
-      <PageHead title={t`Settings | Integrations`} />
-
-      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Trello`}
-        </h2>
-        {!integrations?.some(
-          (integration) => integration.provider === "trello",
-        ) && trelloUrl ? (
-          <>
-            <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-              {t`Connect your Trello account to import boards.`}
-            </p>
-            <Button
-              variant="primary"
-              iconRight={<HiMiniArrowTopRightOnSquare />}
-              onClick={() =>
-                window.open(
-                  trelloUrl.url,
-                  "trello_auth",
-                  "height=800,width=600",
-                )
-              }
-            >
-              {t`Connect Trello`}
-            </Button>
-          </>
-        ) : (
-          integrations?.some(
-            (integration) => integration.provider === "trello",
-          ) && (
-            <>
-              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                {t`Your Trello account is connected.`}
-              </p>
-              <Button
-                variant="secondary"
-                onClick={() => disconnectTrello({ provider: "trello" })}
-              >
-                {t`Disconnect Trello`}
-              </Button>
-            </>
-          )
-        )}
-      </div>
-
-      {/* Global modals */}
-      <Modal
-        modalSize="md"
-        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-      >
-        <FeedbackModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-      >
-        <NewWorkspaceForm />
-      </Modal>
-    </>
-  );
-}

apps/web/src/views/settings/WorkspaceSettings.tsx

@@ -1,145 +0,0 @@
-import { useRouter } from "next/router";
-import { t } from "@lingui/core/macro";
-import { env } from "next-runtime-env";
-import { useEffect, useState } from "react";
-import { HiBolt } from "react-icons/hi2";
-
-import type { Subscription } from "@kan/shared/utils";
-import { hasActiveSubscription } from "@kan/shared/utils";
-
-import Button from "~/components/Button";
-import FeedbackModal from "~/components/FeedbackModal";
-import Modal from "~/components/modal";
-import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
-import { PageHead } from "~/components/PageHead";
-import { useModal } from "~/providers/modal";
-import { useWorkspace } from "~/providers/workspace";
-import { api } from "~/utils/api";
-import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
-import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
-import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
-import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
-import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
-
-export default function WorkspaceSettings() {
-  const { modalContentType, openModal, isOpen } = useModal();
-  const { workspace } = useWorkspace();
-  const router = useRouter();
-  const { data } = api.user.getUser.useQuery();
-  const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
-
-  const { data: workspaceData } = api.workspace.byId.useQuery({
-    workspacePublicId: workspace.publicId,
-  });
-
-  const subscriptions = workspaceData?.subscriptions as
-    | Subscription[]
-    | undefined;
-
-  // Open upgrade modal if upgrade=pro is in URL params
-  useEffect(() => {
-    if (
-      router.query.upgrade === "pro" &&
-      env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-      !hasActiveSubscription(subscriptions, "pro") &&
-      !hasOpenedUpgradeModal
-    ) {
-      openModal("UPGRADE_TO_PRO");
-      setHasOpenedUpgradeModal(true);
-    }
-  }, [router.query.upgrade, subscriptions, openModal, hasOpenedUpgradeModal]);
-
-  return (
-    <>
-      <PageHead title={t`Settings | Workspace`} />
-
-      <div className="mb-8 border-t border-light-300 dark:border-dark-300">
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Workspace name`}
-        </h2>
-        <UpdateWorkspaceNameForm
-          workspacePublicId={workspace.publicId}
-          workspaceName={workspace.name}
-        />
-
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Workspace URL`}
-        </h2>
-        <UpdateWorkspaceUrlForm
-          workspacePublicId={workspace.publicId}
-          workspaceUrl={workspace.slug ?? ""}
-          workspacePlan={workspace.plan ?? "free"}
-        />
-
-        <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-          {t`Workspace description`}
-        </h2>
-        <UpdateWorkspaceDescriptionForm
-          workspacePublicId={workspace.publicId}
-          workspaceDescription={workspace.description ?? ""}
-        />
-
-        {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
-          !hasActiveSubscription(subscriptions, "pro") && (
-            <div className="my-8">
-              <Button
-                onClick={() => openModal("UPGRADE_TO_PRO")}
-                iconRight={<HiBolt />}
-              >
-                {t`Upgrade to Pro`}
-              </Button>
-            </div>
-          )}
-
-        <div className="border-t border-light-300 dark:border-dark-300">
-          <h2 className="mb-4 mt-8 text-[14px] font-bold text-neutral-900 dark:text-dark-1000">
-            {t`Delete workspace`}
-          </h2>
-          <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-            {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
-          </p>
-          <div className="mt-4">
-            <Button
-              variant="secondary"
-              onClick={() => openModal("DELETE_WORKSPACE")}
-              disabled={workspace.role !== "admin"}
-            >
-              {t`Delete workspace`}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Workspace-specific modals */}
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
-      >
-        <DeleteWorkspaceConfirmation />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "UPGRADE_TO_PRO"}
-      >
-        <UpgradeToProConfirmation
-          userId={data?.id ?? ""}
-          workspacePublicId={workspace.publicId}
-        />
-      </Modal>
-
-      {/* Global modals */}
-      <Modal
-        modalSize="md"
-        isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
-      >
-        <FeedbackModal />
-      </Modal>
-      <Modal
-        modalSize="sm"
-        isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
-      >
-        <NewWorkspaceForm />
-      </Modal>
-    </>
-  );
-}

apps/web/src/views/settings/components/ApiKeyList.tsx

@@ -1,202 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { HiEllipsisHorizontal } from "react-icons/hi2";
-import { twMerge } from "tailwind-merge";
-
-import { authClient } from "@kan/auth/client";
-
-import Dropdown from "~/components/Dropdown";
-import { useModal } from "~/providers/modal";
-
-export default function ApiKeyList() {
-  const { openModal } = useModal();
-
-  const { data, isLoading } = useQuery({
-    queryKey: ["apiKeys"],
-    queryFn: () => authClient.apiKey.list(),
-  });
-
-  const TableRow = ({
-    keyId,
-    keyName,
-    keyStart,
-    createdAt,
-    lastRequest,
-    isLastRow,
-    showSkeleton,
-  }: {
-    keyId?: string;
-    keyName?: string | null | undefined;
-    keyStart?: string | null | undefined;
-    createdAt?: Date | null;
-    lastRequest?: Date | null;
-    isLastRow?: boolean | undefined;
-    showSkeleton?: boolean | undefined;
-  }) => {
-    const formatDate = (date?: Date | string | null) => {
-      if (!date) return "Never";
-      const dateObj = date instanceof Date ? date : new Date(date);
-      return dateObj.toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-    };
-
-    return (
-      <tr className="rounded-b-lg">
-        <td className={twMerge("w-[30%]", isLastRow ? "rounded-bl-lg" : "")}>
-          <div className="flex items-center p-4">
-            <div className="ml-2 min-w-0 flex-1">
-              <div>
-                <div className="flex items-center">
-                  <p
-                    className={twMerge(
-                      "mr-2 text-sm font-medium text-light-900 dark:text-dark-900",
-                      showSkeleton &&
-                        "md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
-                    )}
-                  >
-                    {keyName}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </td>
-        <td className="w-[20%] px-3 py-4">
-          <p
-            className={twMerge(
-              "text-sm text-light-900 dark:text-dark-900",
-              showSkeleton &&
-                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
-            )}
-          >
-            {formatDate(createdAt)}
-          </p>
-        </td>
-        <td className="w-[20%] px-3 py-4">
-          <p
-            className={twMerge(
-              "text-sm text-light-900 dark:text-dark-900",
-              showSkeleton &&
-                "h-3 w-[80px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
-            )}
-          >
-            {formatDate(lastRequest)}
-          </p>
-        </td>
-        <td className="w-[25%] px-3 py-4">
-          <div>
-            <span
-              className={twMerge(
-                "inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
-                showSkeleton &&
-                  "h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
-              )}
-            >
-              {keyStart}...
-            </span>
-          </div>
-        </td>
-        <td
-          className={twMerge(
-            "w-[5%] min-w-[50px]",
-            isLastRow && "rounded-br-lg",
-          )}
-        >
-          <div className="flex w-full items-center justify-center px-3">
-            <div className="relative z-50">
-              <Dropdown
-                items={[
-                  {
-                    label: "Revoke",
-                    action: () =>
-                      openModal("REVOKE_API_KEY", keyId, keyName ?? ""),
-                  },
-                ]}
-              >
-                <HiEllipsisHorizontal
-                  size={25}
-                  className="text-light-900 dark:text-dark-900"
-                />
-              </Dropdown>
-            </div>
-          </div>
-        </td>
-      </tr>
-    );
-  };
-
-  if (!isLoading && (!data?.data || data.data.length === 0)) {
-    return null;
-  }
-
-  return (
-    <div className="mt-8 flow-root">
-      <div className="overflow-x-auto overflow-y-visible">
-        <div className="inline-block min-w-full py-2 pb-12 align-middle">
-          <div className="relative h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
-            <table className="min-w-[600px] divide-y divide-light-600 dark:divide-dark-600">
-              <thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
-                <tr>
-                  <th
-                    scope="col"
-                    className="w-[30%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
-                  >
-                    Name
-                  </th>
-                  <th
-                    scope="col"
-                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
-                  >
-                    Created
-                  </th>
-                  <th
-                    scope="col"
-                    className="w-[20%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
-                  >
-                    Last Used
-                  </th>
-                  <th
-                    scope="col"
-                    className="w-[25%] px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
-                  >
-                    Key
-                  </th>
-                  <th
-                    scope="col"
-                    className="w-[5%] rounded-tr-lg px-3 py-3.5 text-center text-sm font-semibold text-light-900 dark:text-dark-900"
-                  >
-                    {/* Actions column */}
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
-                {!isLoading &&
-                  data?.data?.map((apiKey, index) => (
-                    <TableRow
-                      key={apiKey.id}
-                      keyId={apiKey.id}
-                      keyName={apiKey.name}
-                      keyStart={apiKey.start}
-                      createdAt={apiKey.createdAt}
-                      lastRequest={apiKey.lastRequest}
-                      isLastRow={index === data.data.length - 1}
-                    />
-                  ))}
-
-                {isLoading && (
-                  <>
-                    <TableRow showSkeleton />
-                    <TableRow showSkeleton />
-                    <TableRow showSkeleton isLastRow />
-                  </>
-                )}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/src/views/settings/components/CreateAPIKeyForm.tsx

@@ -0,0 +1,60 @@
+import { t } from "@lingui/core/macro";
+
+import { authClient } from "@kan/auth/client";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+
+const CreateAPIKeyForm = ({
+  apiKey,
+  refetchUser,
+}: {
+  apiKey:
+    | {
+        id: number;
+        prefix: string | null;
+        key: string;
+      }
+    | null
+    | undefined;
+  refetchUser: () => void;
+}) => {
+  const handleCreateAPIKey = async () => {
+    await authClient.apiKey.create({
+      name: "Kan API Key",
+      prefix: "kan_",
+    });
+
+    refetchUser();
+  };
+
+  const handleRevokeAPIKey = async () => {
+    if (!apiKey) return;
+    await authClient.apiKey.delete({
+      keyId: apiKey.id.toString(),
+    });
+
+    refetchUser();
+  };
+
+  return (
+    <div>
+      {apiKey ? (
+        <div className="flex gap-2">
+          <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
+            <Input value={apiKey.key} readOnly type="password" />
+          </div>
+          <div>
+            <Button variant="danger" onClick={handleRevokeAPIKey}>
+              {t`Revoke`}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <Button onClick={handleCreateAPIKey}>{t`Create new key`}</Button>
+      )}
+    </div>
+  );
+};
+
+export default CreateAPIKeyForm;

apps/web/src/views/settings/components/NewApiKeyForm.tsx

@@ -1,69 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-import { useModal } from "~/providers/modal";
-
-const newApiKeySchema = z.object({
-  name: z.string().min(1),
-});
-
-export default function NewApiKeyForm() {
-  const { openModal } = useModal();
-  const form = useForm({
-    resolver: zodResolver(newApiKeySchema),
-    defaultValues: {
-      name: "",
-    },
-  });
-
-  const qc = useQueryClient();
-
-  const createApiKeyMutation = useMutation({
-    mutationFn: ({ name }: { name: string }) =>
-      authClient.apiKey.create({ name, prefix: "kan_" }),
-    onSuccess: ({ data: apiKey }) => {
-      qc.invalidateQueries({
-        queryKey: ["apiKeys"],
-      });
-      openModal("API_KEY_CREATED", apiKey?.key, apiKey?.name ?? "");
-    },
-    onError: () => {
-      form.setError("name", {
-        type: "manual",
-        message: "Failed to create API key",
-      });
-    },
-  });
-
-  const handleSubmit = (data: z.infer<typeof newApiKeySchema>) => {
-    createApiKeyMutation.mutate({ name: data.name });
-  };
-
-  return (
-    <div className="px-2 py-2">
-      <form
-        onSubmit={form.handleSubmit(handleSubmit)}
-        className="flex flex-col gap-2"
-      >
-        <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-          New API key
-        </h2>
-        <Input
-          {...form.register("name")}
-          placeholder="Name"
-          className="w-full"
-          errorMessage={form.formState.errors.name?.message}
-        />
-        <Button type="submit" isLoading={createApiKeyMutation.isPending}>
-          Create
-        </Button>
-      </form>
-    </div>
-  );
-}

apps/web/src/views/settings/components/NewApiKeyModal.tsx

@@ -1,181 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { t } from "@lingui/core/macro";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import {
-  HiInformationCircle,
-  HiMiniCheck,
-  HiOutlineDocumentDuplicate,
-  HiXMark,
-} from "react-icons/hi2";
-import { z } from "zod";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import Input from "~/components/Input";
-import { useClipboard } from "~/hooks/useClipboard";
-import { useModal } from "~/providers/modal";
-
-const newApiKeySchema = z.object({
-  name: z
-    .string()
-    .min(1, { message: t`API key name is required` })
-    .max(30, { message: t`API key name cannot exceed 30 characters` }),
-});
-
-export default function NewApiKeyModal() {
-  const { closeModal } = useModal();
-  const { copied, copy } = useClipboard({ timeout: 2000 });
-  const [createdApiKey, setCreatedApiKey] = useState<{
-    key: string;
-    name: string;
-  } | null>(null);
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<z.infer<typeof newApiKeySchema>>({
-    resolver: zodResolver(newApiKeySchema),
-    defaultValues: {
-      name: "",
-    },
-  });
-
-  const qc = useQueryClient();
-
-  const createApiKeyMutation = useMutation({
-    mutationFn: ({ name }: { name: string }) =>
-      authClient.apiKey.create({ name, prefix: "kan_" }),
-    onSuccess: ({ data: apiKey }) => {
-      void qc.invalidateQueries({
-        queryKey: ["apiKeys"],
-      });
-      if (apiKey && apiKey.key && apiKey.name) {
-        setCreatedApiKey({
-          key: apiKey.key,
-          name: apiKey.name,
-        });
-      }
-    },
-    onError: () => {
-      // Handle error if needed
-    },
-  });
-
-  const onSubmit = (data: z.infer<typeof newApiKeySchema>) => {
-    createApiKeyMutation.mutate({ name: data.name });
-  };
-
-  useEffect(() => {
-    // Reset state and form when modal opens
-    setCreatedApiKey(null);
-    reset();
-  }, [reset]);
-
-  useEffect(() => {
-    if (!createdApiKey) {
-      const nameElement = document.querySelector<HTMLElement>("#name");
-      if (nameElement) nameElement.focus();
-    }
-  }, [createdApiKey]);
-
-  if (createdApiKey) {
-    return (
-      <div>
-        <div className="px-5 pt-5">
-          <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
-            <h2 className="text-sm font-bold">{t`API key created`}</h2>
-            <button
-              type="button"
-              className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-              onClick={(e) => {
-                e.preventDefault();
-                closeModal();
-              }}
-            >
-              <HiXMark
-                size={18}
-                className="text-light-900 dark:text-dark-900"
-              />
-            </button>
-          </div>
-
-          <div className="mb-4">
-            <div className="relative">
-              <Input
-                value={createdApiKey.key}
-                className="pr-10 text-sm text-light-900 dark:text-dark-900"
-                readOnly
-              />
-              <button
-                type="button"
-                className="absolute inset-y-0 right-0 flex items-center pr-3 text-light-900 hover:text-light-950 dark:text-dark-900 dark:hover:text-dark-950"
-                onClick={() => copy(createdApiKey.key)}
-              >
-                {copied ? (
-                  <HiMiniCheck className="h-5 w-5 text-green-600" />
-                ) : (
-                  <HiOutlineDocumentDuplicate className="h-5 w-5" />
-                )}
-              </button>
-            </div>
-            <div className="mt-2 flex items-start gap-1">
-              <HiInformationCircle className="mt-0.5 h-4 w-4 text-dark-900" />
-              <p className="text-xs text-gray-500 dark:text-dark-900">
-                {t`This API key will only be shown once. Please save it in a secure location.`}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-          <div>
-            <Button onClick={() => closeModal()}>{t`Close`}</Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <div className="px-5 pt-5">
-        <div className="flex w-full items-center justify-between pb-4 text-neutral-900 dark:text-dark-1000">
-          <h2 className="text-sm font-bold">{t`New API key`}</h2>
-          <button
-            type="button"
-            className="rounded p-1 hover:bg-light-300 focus:outline-none dark:hover:bg-dark-300"
-            onClick={(e) => {
-              e.preventDefault();
-              closeModal();
-            }}
-          >
-            <HiXMark size={18} className="text-light-900 dark:text-dark-900" />
-          </button>
-        </div>
-        <Input
-          id="name"
-          placeholder={t`API key name`}
-          {...register("name", { required: true })}
-          errorMessage={errors.name?.message}
-          onKeyDown={async (e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              await handleSubmit(onSubmit)();
-            }
-          }}
-        />
-      </div>
-      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div>
-          <Button type="submit" isLoading={createApiKeyMutation.isPending}>
-            {t`Create API key`}
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-}

apps/web/src/views/settings/components/RevokeApiKeyConfirmation.tsx

@@ -1,96 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-
-import { authClient } from "@kan/auth/client";
-
-import Button from "~/components/Button";
-import { useModal } from "~/providers/modal";
-import { usePopup } from "~/providers/popup";
-
-export function RevokeApiKeyConfirmation() {
-  const { closeModal, entityId, entityLabel } = useModal();
-  const { showPopup } = usePopup();
-  const qc = useQueryClient();
-
-  const [isAcknowledgmentChecked, setIsAcknowledgmentChecked] = useState(false);
-
-  const deleteApiKeyMutation = useMutation({
-    mutationFn: () => authClient.apiKey.delete({ keyId: entityId }),
-    onSuccess: async () => {
-      closeModal();
-      showPopup({
-        header: "API key revoked",
-        message: `Your API key: ${entityLabel} has been revoked.`,
-        icon: "success",
-      });
-      qc.invalidateQueries({
-        queryKey: ["apiKeys"],
-      });
-    },
-    onError: () => {
-      closeModal();
-      showPopup({
-        header: "Error revoking API key",
-        message: "Please try again later, or contact customer support.",
-        icon: "error",
-      });
-    },
-  });
-
-  const handleRevokeApiKey = () => {
-    deleteApiKeyMutation.mutate();
-  };
-
-  return (
-    <div className="p-5">
-      <div className="flex w-full flex-col justify-between pb-4">
-        <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          {`Are you sure you want to revoke this API key: ${entityLabel}?`}
-        </h2>
-        <p className="mb-4 text-sm text-light-900 dark:text-dark-900">
-          Keep in mind that this action is irreversible.
-        </p>
-        <p className="text-sm text-light-900 dark:text-dark-900">
-          This will result in the permanent revocation of this API key.
-        </p>
-      </div>
-      <div className="relative flex items-start">
-        <div className="flex h-6 items-center">
-          <input
-            id="acknowledgment"
-            name="acknowledgment"
-            type="checkbox"
-            aria-describedby="acknowledgment-description"
-            className="mt-2 h-[14px] w-[14px] rounded border-gray-300 bg-transparent text-indigo-600 focus:shadow-none focus:ring-0 focus:ring-offset-0"
-            checked={isAcknowledgmentChecked}
-            onChange={() =>
-              setIsAcknowledgmentChecked(!isAcknowledgmentChecked)
-            }
-          />
-        </div>
-        <div className="ml-3 text-sm leading-6">
-          <p
-            id="comments-description"
-            className="text-light-900 dark:text-dark-1000"
-          >
-            I acknowledge that this API key will be permanently revoked and want
-            to proceed.
-          </p>
-        </div>
-      </div>
-      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
-        <Button variant="secondary" onClick={() => closeModal()}>
-          Cancel
-        </Button>
-        <Button
-          variant="danger"
-          onClick={handleRevokeApiKey}
-          disabled={!isAcknowledgmentChecked}
-          isLoading={deleteApiKeyMutation.isPending}
-        >
-          Revoke API key
-        </Button>
-      </div>
-    </div>
-  );
-}

apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx

@@ -69,18 +69,16 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      {isDirty && (
-        <div>
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            variant="primary"
-            disabled={updateDisplayName.isPending}
-            isLoading={updateDisplayName.isPending}
-          >
-            {t`Update`}
-          </Button>
-        </div>
-      )}
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateDisplayName.isPending}
+          isLoading={updateDisplayName.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx

@@ -80,18 +80,16 @@ const UpdateWorkspaceDescriptionForm = ({
           errorMessage={errors.description?.message}
         />
       </div>
-      {isDirty && (
-        <div>
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            variant="primary"
-            disabled={updateWorkspaceDescription.isPending}
-            isLoading={updateWorkspaceDescription.isPending}
-          >
-            {t`Update`}
-          </Button>
-        </div>
-      )}
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateWorkspaceDescription.isPending}
+          isLoading={updateWorkspaceDescription.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx

@@ -72,18 +72,16 @@ const UpdateWorkspaceNameForm = ({
       <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
         <Input {...register("name")} errorMessage={errors.name?.message} />
       </div>
-      {isDirty && (
-        <div>
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            variant="primary"
-            disabled={updateWorkspaceName.isPending}
-            isLoading={updateWorkspaceName.isPending}
-          >
-            {t`Update`}
-          </Button>
-        </div>
-      )}
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={!isDirty || updateWorkspaceName.isPending}
+          isLoading={updateWorkspaceName.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx

@@ -138,23 +138,22 @@ const UpdateWorkspaceUrlForm = ({
           }
         />
       </div>
-      {isDirty && (
-        <div>
-          <Button
-            onClick={handleSubmit(onSubmit)}
-            variant="primary"
-            disabled={
-              updateWorkspaceSlug.isPending ||
-              checkWorkspaceSlugAvailability.isPending ||
-              isWorkspaceSlugAvailable?.isAvailable === false ||
-              isTyping
-            }
-            isLoading={updateWorkspaceSlug.isPending}
-          >
-            {t`Update`}
-          </Button>
-        </div>
-      )}
+      <div>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="primary"
+          disabled={
+            !isDirty ||
+            updateWorkspaceSlug.isPending ||
+            checkWorkspaceSlugAvailability.isPending ||
+            isWorkspaceSlugAvailable?.isAvailable === false ||
+            isTyping
+          }
+          isLoading={updateWorkspaceSlug.isPending}
+        >
+          {t`Update`}
+        </Button>
+      </div>
     </div>
   );
 };

apps/web/src/views/settings/index.tsx

@@ -0,0 +1,412 @@
+import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
+import { env } from "next-runtime-env";
+import { useEffect, useRef, useState } from "react";
+import { HiBolt, HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
+
+import type { Subscription } from "@kan/shared/utils";
+import { hasActiveSubscription } from "@kan/shared/utils";
+
+import Button from "~/components/Button";
+import FeedbackModal from "~/components/FeedbackModal";
+import { LanguageSelector } from "~/components/LanguageSelector";
+import Modal from "~/components/modal";
+import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
+import { PageHead } from "~/components/PageHead";
+import { useModal } from "~/providers/modal";
+import { usePopup } from "~/providers/popup";
+import { useWorkspace } from "~/providers/workspace";
+import { api } from "~/utils/api";
+import Avatar from "./components/Avatar";
+import { ChangePasswordFormConfirmation } from "./components/ChangePasswordConfirmation";
+import CreateAPIKeyForm from "./components/CreateAPIKeyForm";
+import { DeleteAccountConfirmation } from "./components/DeleteAccountConfirmation";
+import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
+import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
+import UpdateWorkspaceDescriptionForm from "./components/UpdateWorkspaceDescriptionForm";
+import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
+import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
+import { UpgradeToProConfirmation } from "./components/UpgradeToProConfirmation";
+
+export default function SettingsPage() {
+  const { modalContentType, openModal, isOpen } = useModal();
+  const { workspace } = useWorkspace();
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+  const router = useRouter();
+  const workspaceUrlSectionRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [hasOpenedUpgradeModal, setHasOpenedUpgradeModal] = useState(false);
+  const isCredentialsEnabled =
+    env("NEXT_PUBLIC_ALLOW_CREDENTIALS")?.toLowerCase() === "true";
+  const { data } = api.user.getUser.useQuery();
+
+  const { data: workspaceData } = api.workspace.byId.useQuery({
+    workspacePublicId: workspace.publicId,
+  });
+
+  const subscriptions = workspaceData?.subscriptions as
+    | Subscription[]
+    | undefined;
+
+  const {
+    data: integrations,
+    refetch: refetchIntegrations,
+    isLoading: integrationsLoading,
+  } = api.integration.providers.useQuery();
+
+  const { data: trelloUrl, refetch: refetchTrelloUrl } =
+    api.integration.getAuthorizationUrl.useQuery(
+      { provider: "trello" },
+      {
+        enabled:
+          !integrationsLoading &&
+          !integrations?.some(
+            (integration) => integration.provider === "trello",
+          ),
+        refetchOnWindowFocus: true,
+      },
+    );
+
+  useEffect(() => {
+    const handleFocus = () => {
+      refetchIntegrations();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => {
+      window.removeEventListener("focus", handleFocus);
+    };
+  }, [refetchIntegrations]);
+
+  useEffect(() => {
+    if (
+      router.query.edit === "workspace_url" &&
+      workspaceUrlSectionRef.current &&
+      scrollContainerRef.current
+    ) {
+      const element = workspaceUrlSectionRef.current;
+      const container = scrollContainerRef.current;
+
+      container.scrollTop = element.offsetTop - 40;
+
+      const input = element.querySelector('input[type="text"]');
+      if (input instanceof HTMLInputElement) {
+        input.focus();
+      }
+    }
+  }, [router.query.edit]);
+
+  // Open upgrade modal if upgrade=pro is in URL params
+  useEffect(() => {
+    if (
+      router.query.upgrade === "pro" &&
+      env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+      !hasActiveSubscription(subscriptions, "pro") &&
+      !hasOpenedUpgradeModal
+    ) {
+      openModal("UPGRADE_TO_PRO");
+      setHasOpenedUpgradeModal(true);
+    }
+  }, [router.query.upgrade, subscriptions, openModal, hasOpenedUpgradeModal]);
+
+  const { mutateAsync: disconnectTrello } =
+    api.integration.disconnect.useMutation({
+      onSuccess: () => {
+        refetchUser();
+        refetchIntegrations();
+        refetchTrelloUrl();
+        showPopup({
+          header: t`Trello disconnected`,
+          message: t`Your Trello account has been disconnected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error disconnecting Trello`,
+          message: t`An error occurred while disconnecting your Trello account.`,
+          icon: "error",
+        });
+      },
+    });
+
+  const refetchUser = () => utils.user.getUser.refetch();
+
+  const handleOpenBillingPortal = async () => {
+    try {
+      const response = await fetch("/api/stripe/create_billing_session", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      const { url } = (await response.json()) as { url: string };
+
+      if (url) {
+        window.location.href = url;
+      }
+    } catch (error) {
+      console.error("Error creating billing session:", error);
+    }
+  };
+
+  return (
+    <>
+      <div className="flex h-full w-full flex-col overflow-hidden">
+        <div
+          ref={scrollContainerRef}
+          className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]"
+        >
+          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
+          <div className="m-auto max-w-[1100px] px-5 py-6 md:px-28 md:py-12">
+            <div className="mb-8 flex w-full justify-between">
+              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
+                {t`Settings`}
+              </h1>
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Profile picture`}
+              </h2>
+              <Avatar userId={data?.id} userImage={data?.image} />
+
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Display name`}
+              </h2>
+              <UpdateDisplayNameForm displayName={data?.name ?? ""} />
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Workspace name`}
+              </h2>
+              <UpdateWorkspaceNameForm
+                workspacePublicId={workspace.publicId}
+                workspaceName={workspace.name}
+              />
+
+              <div ref={workspaceUrlSectionRef}>
+                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                  {t`Workspace URL`}
+                </h2>
+                <UpdateWorkspaceUrlForm
+                  workspacePublicId={workspace.publicId}
+                  workspaceUrl={workspace.slug ?? ""}
+                  workspacePlan={workspace.plan ?? "free"}
+                />
+              </div>
+
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Workspace description`}
+              </h2>
+              <UpdateWorkspaceDescriptionForm
+                workspacePublicId={workspace.publicId}
+                workspaceDescription={workspace.description ?? ""}
+              />
+
+              {env("NEXT_PUBLIC_KAN_ENV") === "cloud" &&
+                !hasActiveSubscription(subscriptions, "pro") && (
+                  <div className="mt-8">
+                    <Button
+                      onClick={() => openModal("UPGRADE_TO_PRO")}
+                      iconRight={<HiBolt />}
+                    >
+                      {t`Upgrade to Pro`}
+                    </Button>
+                  </div>
+                )}
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Language`}
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Change the language of the app.`}
+              </p>
+              <LanguageSelector />
+            </div>
+
+            {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
+              <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                  {t`Billing`}
+                </h2>
+                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                  {t`View and manage your billing and subscription.`}
+                </p>
+                <Button
+                  variant="primary"
+                  iconRight={<HiMiniArrowTopRightOnSquare />}
+                  onClick={handleOpenBillingPortal}
+                >
+                  {t`Billing portal`}
+                </Button>
+              </div>
+            )}
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                Trello
+              </h2>
+              {!integrations?.some(
+                (integration) => integration.provider === "trello",
+              ) && trelloUrl ? (
+                <>
+                  <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                    {t`Connect your Trello account to import boards.`}
+                  </p>
+                  <Button
+                    variant="primary"
+                    iconRight={<HiMiniArrowTopRightOnSquare />}
+                    onClick={() =>
+                      window.open(
+                        trelloUrl.url,
+                        "trello_auth",
+                        "height=800,width=600",
+                      )
+                    }
+                  >
+                    {t`Connect Trello`}
+                  </Button>
+                </>
+              ) : (
+                integrations?.some(
+                  (integration) => integration.provider === "trello",
+                ) && (
+                  <>
+                    <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                      {t`Your Trello account is connected.`}
+                    </p>
+                    <Button
+                      variant="secondary"
+                      onClick={() => disconnectTrello({ provider: "trello" })}
+                    >
+                      {t`Disconnect Trello`}
+                    </Button>
+                  </>
+                )
+              )}
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`API keys`}
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`View and manage your API keys.`}
+              </p>
+              <CreateAPIKeyForm
+                apiKey={data?.apiKey}
+                refetchUser={refetchUser}
+              />
+            </div>
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Delete workspace`}
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
+              </p>
+              <div className="mt-4">
+                <Button
+                  variant="secondary"
+                  onClick={() => openModal("DELETE_WORKSPACE")}
+                  disabled={workspace.role !== "admin"}
+                >
+                  {t`Delete workspace`}
+                </Button>
+              </div>
+            </div>
+
+            {isCredentialsEnabled && (
+              <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                  {t`Change Password`}
+                </h2>
+                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                  {t`You are about to change your password.`}
+                </p>
+                <div className="mt-4">
+                  <Button
+                    variant="secondary"
+                    onClick={() => openModal("CHANGE_PASSWORD")}
+                  >
+                    {t`Change Password`}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Delete account`}
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Once you delete your account, there is no going back. This action cannot be undone.`}
+              </p>
+              <div className="mt-4">
+                <Button
+                  variant="secondary"
+                  onClick={() => openModal("DELETE_ACCOUNT")}
+                >
+                  {t`Delete account`}
+                </Button>
+              </div>
+            </div>
+          </div>
+
+          <>
+            <Modal
+              modalSize="md"
+              isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
+            >
+              <FeedbackModal />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
+            >
+              <NewWorkspaceForm />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
+            >
+              <DeleteWorkspaceConfirmation />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "UPGRADE_TO_PRO"}
+            >
+              <UpgradeToProConfirmation
+                userId={data?.id ?? ""}
+                workspacePublicId={workspace.publicId}
+              />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
+            >
+              <DeleteAccountConfirmation />
+            </Modal>
+
+            <Modal
+              modalSize="sm"
+              isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
+            >
+              <ChangePasswordFormConfirmation />
+            </Modal>
+          </>
+        </div>
+      </div>
+    </>
+  );
+}