Support client certificates (#319)

src-web/components/core/CountBadge.tsx

@@ -1,11 +1,13 @@
+import type { Color } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 
 interface Props {
   count: number | true;
   className?: string;
+  color?: Color;
 }
 
-export function CountBadge({ count, className }: Props) {
+export function CountBadge({ count, className, color }: Props) {
   if (count === 0) return null;
   return (
     <div
@@ -13,10 +15,21 @@ export function CountBadge({ count, className }: Props) {
       className={classNames(
         className,
         'flex items-center',
-        'opacity-70 border border-border-subtle text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        'opacity-70 border text-4xs rounded mb-0.5 px-1 ml-1 h-4 font-mono',
+        color == null && 'border-border-subtle',
+        color === 'primary' && 'text-primary',
+        color === 'secondary' && 'text-secondary',
+        color === 'success' && 'text-success',
+        color === 'notice' && 'text-notice',
+        color === 'warning' && 'text-warning',
+        color === 'danger' && 'text-danger',
       )}
     >
-      {count === true ? <div aria-hidden className="rounded-full h-1 w-1 bg-text-subtle" /> : count}
+      {count === true ? (
+        <div aria-hidden className="rounded-full h-1 w-1 bg-[currentColor]" />
+      ) : (
+        count
+      )}
     </div>
   );
 }

src-web/components/core/DetailsBanner.tsx

@@ -24,7 +24,7 @@ export function DetailsBanner({ className, color, summary, children, ...extraPro
           />
           {summary}
         </summary>
-        <div className="mt-1.5">{children}</div>
+        <div className="mt-1.5 pb-2">{children}</div>
       </details>
     </Banner>
   );

src-web/components/core/PlainInput.tsx

@@ -162,6 +162,7 @@ export const PlainInput = forwardRef<{ focus: () => void }, PlainInputProps>(fun
           'x-theme-input',
           'relative w-full rounded-md text',
           'border',
+          'overflow-hidden',
           focused ? 'border-border-focus' : 'border-border-subtle',
           hasChanged && 'has-[:invalid]:border-danger', // For built-in HTML validation
           size === 'md' && 'min-h-md',