diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index 9650dfc..1202516 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -7,6 +7,9 @@ import { Save, AlertCircle, Loader2, + BarChart3, + Shield, + Trash, } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; @@ -27,7 +30,9 @@ import { StorageTab } from "./StorageTab"; import { HooksEditor } from "./HooksEditor"; import { SlashCommandsManager } from "./SlashCommandsManager"; import { ProxySettings } from "./ProxySettings"; -import { useTheme } from "@/hooks"; +import { AnalyticsConsent } from "./AnalyticsConsent"; +import { useTheme, useTrackEvent } from "@/hooks"; +import { analytics } from "@/lib/analytics"; interface SettingsProps { /** @@ -87,12 +92,30 @@ export const Settings: React.FC = ({ const [proxySettingsChanged, setProxySettingsChanged] = useState(false); const saveProxySettings = React.useRef<(() => Promise) | null>(null); + // Analytics state + const [analyticsEnabled, setAnalyticsEnabled] = useState(false); + const [analyticsConsented, setAnalyticsConsented] = useState(false); + const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false); + const trackEvent = useTrackEvent(); + // Load settings on mount useEffect(() => { loadSettings(); loadClaudeBinaryPath(); + loadAnalyticsSettings(); }, []); + /** + * Loads analytics settings + */ + const loadAnalyticsSettings = async () => { + const settings = analytics.getSettings(); + if (settings) { + setAnalyticsEnabled(settings.enabled); + setAnalyticsConsented(settings.hasConsented); + } + }; + /** * Loads the current Claude binary path */ @@ -374,7 +397,7 @@ export const Settings: React.FC = ({ ) : (
- + General Permissions Environment @@ -383,6 +406,7 @@ export const Settings: React.FC = ({ Commands Storage Proxy + Analytics {/* General Settings */} @@ -897,6 +921,97 @@ export const Settings: React.FC = ({ /> + + {/* Analytics Settings */} + + +
+
+ +

Analytics Settings

+
+ +
+ {/* Analytics Toggle */} +
+
+ +

+ Help improve Claudia by sharing anonymous usage data +

+
+ { + if (checked && !analyticsConsented) { + setShowAnalyticsConsent(true); + } else if (checked) { + await analytics.enable(); + setAnalyticsEnabled(true); + trackEvent.settingsChanged('analytics_enabled', true); + setToast({ message: "Analytics enabled", type: "success" }); + } else { + await analytics.disable(); + setAnalyticsEnabled(false); + trackEvent.settingsChanged('analytics_enabled', false); + setToast({ message: "Analytics disabled", type: "success" }); + } + }} + /> +
+ + {/* Privacy Info */} +
+
+ +
+

Your privacy is protected

+
    +
  • • No personal information is collected
  • +
  • • No file contents, paths, or project names
  • +
  • • All data is anonymous with random IDs
  • +
  • • You can disable analytics at any time
  • +
+
+
+
+ + {/* Data Collection Info */} + {analyticsEnabled && ( +
+
+

What we collect:

+
    +
  • • Feature usage patterns
  • +
  • • Performance metrics
  • +
  • • Error reports (without sensitive data)
  • +
  • • Session frequency and duration
  • +
+
+ + {/* Delete Data Button */} +
+ +
+
+ )} +
+
+
+
)} @@ -912,6 +1027,16 @@ export const Settings: React.FC = ({ /> )} + + {/* Analytics Consent Dialog */} + { + await loadAnalyticsSettings(); + setShowAnalyticsConsent(false); + }} + /> ); };