Enable opt-in telemetry

src/pages/settings.tsx

@@ -5,12 +5,14 @@ import ConfirmationDialog from "@/components/ConfirmationDialog";
 import { IpcClient } from "@/ipc/ipc_client";
 import { showSuccess, showError } from "@/lib/toast";
 import { AutoApproveSwitch } from "@/components/AutoApproveSwitch";
-
+import { TelemetrySwitch } from "@/components/TelemetrySwitch";
+import { useSettings } from "@/hooks/useSettings";
 export default function SettingsPage() {
   const { theme, setTheme } = useTheme();
   const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
   const [isResetting, setIsResetting] = useState(false);
   const [appVersion, setAppVersion] = useState<string | null>(null);
+  const { settings } = useSettings();
 
   useEffect(() => {
     // Fetch app version
@@ -103,6 +105,27 @@ export default function SettingsPage() {
             </div>
           </div>
 
+          <div className="space-y-6">
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
+              <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">
+                Telemetry
+              </h2>
+              <div className="space-y-2">
+                <TelemetrySwitch />
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  This records anonymous usage data to improve the product.
+                </div>
+              </div>
+
+              <div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400">
+                <span className="mr-2 font-medium">Telemetry ID:</span>
+                <span className="bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-gray-800 dark:text-gray-200 font-mono">
+                  {settings ? settings.telemetryUserId : "n/a"}
+                </span>
+              </div>
+            </div>
+          </div>
+
           <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm">
             <ProviderSettingsGrid configuredProviders={[]} />
           </div>