Support client certificates (#319)

src-web/components/Settings/Settings.tsx

@@ -1,15 +1,19 @@
 import { useSearch } from '@tanstack/react-router';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { type } from '@tauri-apps/plugin-os';
+import { useLicense } from '@yaakapp-internal/license';
+import { pluginsAtom, settingsAtom } from '@yaakapp-internal/models';
 import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 import { useState } from 'react';
 import { useKeyPressEvent } from 'react-use';
 import { appInfo } from '../../lib/appInfo';
 import { capitalize } from '../../lib/capitalize';
+import { CountBadge } from '../core/CountBadge';
 import { HStack } from '../core/Stacks';
-import type { TabItem } from '../core/Tabs/Tabs';
-import { TabContent, Tabs } from '../core/Tabs/Tabs';
+import { TabContent, type TabItem, Tabs } from '../core/Tabs/Tabs';
 import { HeaderSize } from '../HeaderSize';
+import { SettingsCertificates } from './SettingsCertificates';
 import { SettingsGeneral } from './SettingsGeneral';
 import { SettingsInterface } from './SettingsInterface';
 import { SettingsLicense } from './SettingsLicense';
@@ -25,14 +29,26 @@ const TAB_GENERAL = 'general';
 const TAB_INTERFACE = 'interface';
 const TAB_THEME = 'theme';
 const TAB_PROXY = 'proxy';
+const TAB_CERTIFICATES = 'certificates';
 const TAB_PLUGINS = 'plugins';
 const TAB_LICENSE = 'license';
-const tabs = [TAB_GENERAL, TAB_THEME, TAB_INTERFACE, TAB_PROXY, TAB_PLUGINS, TAB_LICENSE] as const;
+const tabs = [
+  TAB_GENERAL,
+  TAB_THEME,
+  TAB_INTERFACE,
+  TAB_CERTIFICATES,
+  TAB_PROXY,
+  TAB_PLUGINS,
+  TAB_LICENSE,
+] as const;
 export type SettingsTab = (typeof tabs)[number];
 
 export default function Settings({ hide }: Props) {
   const { tab: tabFromQuery } = useSearch({ from: '/workspaces/$workspaceId/settings' });
   const [tab, setTab] = useState<string | undefined>(tabFromQuery);
+  const settings = useAtomValue(settingsAtom);
+  const plugins = useAtomValue(pluginsAtom);
+  const licenseCheck = useLicense();
 
   // Close settings window on escape
   // TODO: Could this be put in a better place? Eg. in Rust key listener when creating the window
@@ -79,6 +95,16 @@ export default function Settings({ hide }: Props) {
             value,
             label: capitalize(value),
             hidden: !appInfo.featureLicense && value === TAB_LICENSE,
+            rightSlot:
+              value === TAB_CERTIFICATES ? (
+                <CountBadge count={settings.clientCertificates.length} />
+              ) : value === TAB_PLUGINS ? (
+                <CountBadge count={plugins.length} />
+              ) : value === TAB_PROXY && settings.proxy?.type === 'enabled' ? (
+                <CountBadge count />
+              ) : value === TAB_LICENSE && licenseCheck.check.data?.status === 'personal_use' ? (
+                <CountBadge count color="notice" />
+              ) : null,
           }),
         )}
       >
@@ -97,6 +123,9 @@ export default function Settings({ hide }: Props) {
         <TabContent value={TAB_PROXY} className="overflow-y-auto h-full px-6 !py-4">
           <SettingsProxy />
         </TabContent>
+        <TabContent value={TAB_CERTIFICATES} className="overflow-y-auto h-full px-6 !py-4">
+          <SettingsCertificates />
+        </TabContent>
         <TabContent value={TAB_LICENSE} className="overflow-y-auto h-full px-6 !py-4">
           <SettingsLicense />
         </TabContent>