Implement settings/passkeys

Author: Perlmint

web-next/src/components/SettingsTabs.tsx

@@ -6,7 +6,7 @@ import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs.tsx";
 import { useLingui } from "~/lib/i18n/macro.d.ts";
 import type { SettingsTabs_account$key } from "./__generated__/SettingsTabs_account.graphql.ts";
 
-export type SettingsTab = "profile" | "preferences";
+export type SettingsTab = "profile" | "preferences" | "passkeys";
 
 export interface SettingsTabsProps {
   selected: SettingsTab;
@@ -28,7 +28,7 @@ export function SettingsTabs(props: SettingsTabsProps) {
     <Show when={account()}>
       {(account) => (
         <Tabs value={props.selected}>
-          <TabsList class="grid max-w-prose mx-auto grid-cols-4">
+          <TabsList class="grid max-w-prose mx-auto grid-cols-3">
             <TabsTrigger
               as={A}
               value="profile"
@@ -43,6 +43,13 @@ export function SettingsTabs(props: SettingsTabsProps) {
             >
               {t`Preferences`}
             </TabsTrigger>
+            <TabsTrigger
+              as={A}
+              value="passkeys"
+              href={`/@${account().username}/settings/passkeys`}
+            >
+              {t`Passkeys`}
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       )}