refactor: reorganize settings page with tabbed interface (#57)

* refactor: reorganize settings page with tabbed interface

* feat: revamp API key management with new list view and confirmation modals

* refactor: update tab styling

* refactor: tweak UI/UX for managing API keys

* refactor: only show update button when change has been made

* refactor: only show update button when content of display name has been updated

* feat: store tab state in params

* refactor: remove focus state from tabs

* refactor: tweak styling on mobile select

* refactor: simplify settings pages

* feat: open upgrade modal if upgrade=pro is in params

* feat: add scroll to api key list on mobile

* chore: add translations

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>
This commit is contained in:
LovelessCodes
2025-09-14 16:48:55 +02:00
committed by GitHub
parent 793baa8325
commit 3e21b23f0a
40 changed files with 2009 additions and 905 deletions

View File

@@ -53,6 +53,10 @@ 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"
@@ -91,8 +95,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:110
#: src/views/card/components/LabelSelector.tsx:118
#: src/views/card/components/LabelSelector.tsx:109
#: src/views/card/components/LabelSelector.tsx:114
msgid "Add label"
msgstr "Label toevoegen"
@@ -148,7 +152,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/index.tsx:127
#: src/views/settings/IntegrationsSettings.tsx:61
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."
@@ -156,7 +160,27 @@ 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/views/settings/index.tsx:296
#: 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
msgid "API keys"
msgstr "API-sleutels"
@@ -226,12 +250,13 @@ msgstr "jaarlijks gefactureerd"
msgid "billed monthly"
msgstr "maandelijks gefactureerd"
#: src/components/SettingsLayout.tsx:44
#: src/views/boards/components/TemplateBoards.tsx:55
#: src/views/settings/index.tsx:235
#: src/views/settings/BillingSettings.tsx:39
msgid "Billing"
msgstr "Facturering"
#: src/views/settings/index.tsx:245
#: src/views/settings/BillingSettings.tsx:49
msgid "Billing portal"
msgstr "Factureringsportaal"
@@ -286,12 +311,12 @@ msgid "Board visibility updated"
msgstr "Zichtbaarheid van bord bijgewerkt"
#: src/components/SideNavigation.tsx:68
#: src/views/boards/index.tsx:27
#: src/views/boards/index.tsx:32
msgid "Boards"
msgstr "Borden"
#. placeholder {0}: workspace.name ?? "Workspace"
#: src/views/boards/index.tsx:23
#: src/views/boards/index.tsx:28
msgid "Boards | {0}"
msgstr "Borden | {0}"
@@ -328,16 +353,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/index.tsx:227
msgid "Change the language of the app."
msgstr "Wijzig de taal van de app."
#: src/views/settings/AccountSettings.tsx:45
msgid "Change your language preferences."
msgstr "Wijzig je taalvoorkeuren."
#: src/views/auth/login/index.tsx:41
#: src/views/auth/signup/index.tsx:67
@@ -357,6 +382,10 @@ 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"
@@ -401,7 +430,7 @@ msgid "Confirm your new password"
msgstr "Bevestig je nieuwe wachtwoord"
#: src/views/boards/components/ImportBoardsForm.tsx:157
#: src/views/settings/index.tsx:272
#: src/views/settings/IntegrationsSettings.tsx:93
msgid "Connect Trello"
msgstr "Verbind Trello"
@@ -409,7 +438,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/index.tsx:259
#: src/views/settings/IntegrationsSettings.tsx:80
msgid "Connect your Trello account to import boards."
msgstr "Verbind je Trello-account om borden te importeren."
@@ -444,6 +473,10 @@ 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"
@@ -468,12 +501,12 @@ msgstr "Lijst maken"
msgid "Create new board"
msgstr "Nieuw bord maken"
#: src/views/settings/components/CreateAPIKeyForm.tsx:54
#: src/views/settings/ApiSettings.tsx:30
msgid "Create new key"
msgstr "Nieuwe sleutel aanmaken"
#: src/views/board/components/NewCardForm.tsx:394
#: src/views/card/components/LabelSelector.tsx:98
#: src/views/card/components/LabelSelector.tsx:97
msgid "Create new label"
msgstr "Maak nieuw label"
@@ -527,9 +560,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"
@@ -550,8 +583,8 @@ msgid "Delete list"
msgstr "Lijst verwijderen"
#: src/views/settings/components/DeleteWorkspaceConfirmation.tsx:106
#: src/views/settings/index.tsx:309
#: src/views/settings/index.tsx:320
#: src/views/settings/WorkspaceSettings.tsx:96
#: src/views/settings/WorkspaceSettings.tsx:107
msgid "Delete workspace"
msgstr "Werkruimte verwijderen"
@@ -577,7 +610,7 @@ msgstr "heeft checklistitem <0>{0}</0> verwijderd"
msgid "Design"
msgstr "Ontwerp"
#: src/views/settings/index.tsx:287
#: src/views/settings/IntegrationsSettings.tsx:108
msgid "Disconnect Trello"
msgstr "Trello ontkoppelen"
@@ -585,7 +618,7 @@ msgstr "Trello ontkoppelen"
msgid "Discuss and collaborate on cards."
msgstr "Bespreek en werk samen aan kaarten."
#: src/views/settings/index.tsx:176
#: src/views/settings/AccountSettings.tsx:35
msgid "Display name"
msgstr "Weergavenaam"
@@ -703,7 +736,7 @@ msgstr "Fout bij het verwijderen van label"
msgid "Error deleting workspace"
msgstr "Fout bij verwijderen werkruimte"
#: src/views/settings/index.tsx:126
#: src/views/settings/IntegrationsSettings.tsx:60
msgid "Error disconnecting Trello"
msgstr "Fout bij ontkoppelen van Trello"
@@ -917,7 +950,7 @@ msgstr "Ideeën"
msgid "Ideas to improve this page..."
msgstr "Ideeën om deze pagina te verbeteren..."
#: src/views/boards/index.tsx:38
#: src/views/boards/index.tsx:43
msgid "Import"
msgstr "Importeren"
@@ -955,6 +988,7 @@ msgstr "In behandeling"
msgid "Individuals"
msgstr "Individuen"
#: src/components/SettingsLayout.tsx:57
#: src/views/home/components/Features.tsx:114
msgid "Integrations"
msgstr "Integraties"
@@ -975,7 +1009,7 @@ msgstr "Uitnodigen"
msgid "Invite another"
msgstr "Nog iemand uitnodigen"
#: src/views/card/components/MemberSelector.tsx:112
#: src/views/card/components/MemberSelector.tsx:111
#: src/views/members/components/InviteMemberForm.tsx:233
msgid "Invite member"
msgstr "Lid uitnodigen"
@@ -1011,7 +1045,7 @@ msgstr "Labels"
msgid "Labels & Filters"
msgstr "Labels & filters"
#: src/views/settings/index.tsx:224
#: src/views/settings/AccountSettings.tsx:42
msgid "Language"
msgstr "Taal"
@@ -1129,10 +1163,14 @@ msgstr "Naam"
msgid "Need help?"
msgstr "Hulp nodig?"
#: src/views/boards/index.tsx:48
#: src/views/boards/index.tsx:53
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"
@@ -1206,11 +1244,11 @@ msgstr "Aanbod"
msgid "Onboarding"
msgstr "Inwerktraject"
#: src/views/settings/index.tsx:349
#: src/views/settings/AccountSettings.tsx:55
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/index.tsx:312
#: src/views/settings/WorkspaceSettings.tsx:99
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."
@@ -1300,9 +1338,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:73
#: src/views/card/components/ListSelector.tsx:53
#: src/views/card/components/MemberSelector.tsx:80
#: 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/NewChecklistForm.tsx:70
#: src/views/card/components/NewChecklistItemForm.tsx:89
#: src/views/card/components/NewCommentForm.tsx:31
@@ -1353,7 +1391,7 @@ msgstr "Pro Plan ∞"
msgid "Profile image updated"
msgstr "Profielafbeelding bijgewerkt"
#: src/views/settings/index.tsx:171
#: src/views/settings/AccountSettings.tsx:29
msgid "Profile picture"
msgstr "Profielfoto"
@@ -1436,10 +1474,6 @@ 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"
@@ -1493,16 +1527,11 @@ 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"
#. 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
msgid "Sign in"
@@ -1619,6 +1648,10 @@ 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"
@@ -1660,7 +1693,11 @@ msgstr "Menu in-/uitschakelen"
msgid "Track all card changes with detailed activity history."
msgstr "Volg alle kaartwijzigingen met gedetailleerde activiteitengeschiedenis."
#: src/views/settings/index.tsx:119
#: src/views/settings/IntegrationsSettings.tsx:73
msgid "Trello"
msgstr "Trello"
#: src/views/settings/IntegrationsSettings.tsx:53
msgid "Trello disconnected"
msgstr "Trello ontkoppeld"
@@ -1745,16 +1782,16 @@ msgstr "Kan checklistitem niet bijwerken"
msgid "Unable to update comment"
msgstr "Kan reactie niet bijwerken"
#: src/views/card/components/LabelSelector.tsx:72
#: src/views/card/components/LabelSelector.tsx:71
msgid "Unable to update labels"
msgstr "Kan labels niet bijwerken"
#: src/views/board/index.tsx:133
#: src/views/card/components/ListSelector.tsx:52
#: src/views/card/components/ListSelector.tsx:51
msgid "Unable to update list"
msgstr "Kan lijst niet bijwerken"
#: src/views/card/components/MemberSelector.tsx:79
#: src/views/card/components/MemberSelector.tsx:78
msgid "Unable to update members"
msgstr "Kan leden niet bijwerken"
@@ -1797,9 +1834,9 @@ msgid "Unlimited members"
msgstr "Onbeperkt aantal leden"
#: src/views/board/components/UpdateBoardSlugForm.tsx:174
#: 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/UpdateDisplayNameForm.tsx:80
#: src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx:91
#: src/views/settings/components/UpdateWorkspaceNameForm.tsx:83
#: src/views/settings/components/UpdateWorkspaceUrlForm.tsx:154
msgid "Update"
msgstr "Bijwerken"
@@ -1830,7 +1867,7 @@ msgid "Upgrade"
msgstr "Upgraden"
#: src/views/settings/components/UpgradeToProConfirmation.tsx:52
#: src/views/settings/index.tsx:216
#: src/views/settings/WorkspaceSettings.tsx:89
msgid "Upgrade to Pro"
msgstr "Upgraden naar Pro"
@@ -1878,11 +1915,11 @@ msgstr "Gebruiker is al lid van deze werkruimte"
msgid "Video"
msgstr "Video"
#: src/views/settings/index.tsx:299
#: src/views/settings/ApiSettings.tsx:25
msgid "View and manage your API keys."
msgstr "Bekijk en beheer je API-sleutels."
#: src/views/settings/index.tsx:238
#: src/views/settings/BillingSettings.tsx:42
msgid "View and manage your billing and subscription."
msgstr "Bekijk en beheer je facturering en abonnement."
@@ -1934,6 +1971,7 @@ 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"
@@ -1946,7 +1984,7 @@ msgstr "Werkruimte succesvol aangemaakt. Je kunt later upgraden in de instelling
msgid "Workspace deleted"
msgstr "Werkruimte verwijderd"
#: src/views/settings/index.tsx:202
#: src/views/settings/WorkspaceSettings.tsx:75
msgid "Workspace description"
msgstr "Werkruimte beschrijving"
@@ -1968,7 +2006,7 @@ msgid "Workspace members"
msgstr "Werkruimteleden"
#: src/components/NewWorkspaceForm.tsx:259
#: src/views/settings/index.tsx:183
#: src/views/settings/WorkspaceSettings.tsx:58
msgid "Workspace name"
msgstr "Naam werkruimte"
@@ -1992,7 +2030,7 @@ msgstr "Werkruimtenaam bijgewerkt"
msgid "Workspace slug updated"
msgstr "Werkruimte-slug bijgewerkt"
#: src/views/settings/index.tsx:192
#: src/views/settings/WorkspaceSettings.tsx:66
msgid "Workspace URL"
msgstr "Werkruimte URL"
@@ -2012,7 +2050,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/index.tsx:331
#: src/views/settings/AccountSettings.tsx:73
msgid "You are about to change your password."
msgstr "Je staat op het punt je wachtwoord te wijzigen."
@@ -2060,11 +2098,11 @@ msgstr "Je wachtwoord is gewijzigd."
msgid "Your profile image has been updated."
msgstr "Je profielafbeelding is bijgewerkt."
#: src/views/settings/index.tsx:120
#: src/views/settings/IntegrationsSettings.tsx:54
msgid "Your Trello account has been disconnected."
msgstr "Je Trello-account is ontkoppeld."
#: src/views/settings/index.tsx:281
#: src/views/settings/IntegrationsSettings.tsx:102
msgid "Your Trello account is connected."
msgstr "Je Trello-account is verbonden."

File diff suppressed because one or more lines are too long