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>

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

@@ -0,0 +1,16 @@
+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;