1 files changed, 52 insertions, 1 deletions
diff --git a/apps/browser-extension/src/OptionsPage.tsx b/apps/browser-extension/src/OptionsPage.tsx
index ef51bc02..cac32eff 100644
--- a/apps/browser-extension/src/OptionsPage.tsx
+++ b/apps/browser-extension/src/OptionsPage.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { Button } from "./components/ui/button";
+import { Input } from "./components/ui/input";
 import {
   Select,
   SelectContent,
@@ -9,9 +10,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./components/ui/select";
+import { Switch } from "./components/ui/switch";
 import Logo from "./Logo";
 import Spinner from "./Spinner";
-import usePluginSettings from "./utils/settings";
+import usePluginSettings, {
+  DEFAULT_BADGE_CACHE_EXPIRE_MS,
+} from "./utils/settings";
 import { useTheme } from "./utils/ThemeProvider";
 import { api } from "./utils/trpc";
 
@@ -64,6 +68,53 @@ export default function OptionsPage() {
       <Logo />
       <span className="text-lg">Settings</span>
       <hr />
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-sm font-medium">Show count badge</span>
+        <Switch
+          checked={settings.showCountBadge}
+          onCheckedChange={(checked) =>
+            setSettings((s) => ({ ...s, showCountBadge: checked }))
+          }
+        />
+      </div>
+      {settings.showCountBadge && (
+        <>
+          <div className="flex items-center justify-between gap-2">
+            <span className="text-sm font-medium">Use badge cache</span>
+            <Switch
+              checked={settings.useBadgeCache}
+              onCheckedChange={(checked) =>
+                setSettings((s) => ({ ...s, useBadgeCache: checked }))
+              }
+            />
+          </div>
+          {settings.useBadgeCache && (
+            <>
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-sm font-medium">
+                  Badge cache expire time (second)
+                </span>
+                <Input
+                  type="number"
+                  min="1"
+                  step="1"
+                  value={settings.badgeCacheExpireMs / 1000}
+                  onChange={(e) =>
+                    setSettings((s) => ({
+                      ...s,
+                      badgeCacheExpireMs:
+                        parseInt(e.target.value) * 1000 ||
+                        DEFAULT_BADGE_CACHE_EXPIRE_MS,
+                    }))
+                  }
+                  className="w-32"
+                />
+              </div>
+            </>
+          )}
+        </>
+      )}
+      <hr />
       <div className="flex gap-2">
         <span className="my-auto">Server Address:</span>
         {settings.address}