import { useState, useEffect, useRef } from 'react'; import { defineMessages, useIntl } from '../../../i18n'; import { Switch } from '../../ui/switch'; import { Button } from '../../ui/button'; import { Settings, ChevronDown, ChevronUp } from 'lucide-react'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '../../ui/dialog'; import UpdateSection from './UpdateSection'; import { COST_TRACKING_ENABLED, UPDATES_ENABLED } from '../../../updates'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../ui/card'; import ThemeSelector from '../../GooseSidebar/ThemeSelector'; import BlockLogoBlack from './icons/block-lockup_black.png'; import BlockLogoWhite from './icons/block-lockup_white.png'; import TelemetrySettings from './TelemetrySettings'; import { trackSettingToggled } from '../../../utils/analytics'; import { NavigationModeSelector } from './NavigationModeSelector'; import { NavigationStyleSelector } from './NavigationStyleSelector'; import { NavigationPositionSelector } from './NavigationPositionSelector'; import { NavigationCustomizationSettings } from './NavigationCustomizationSettings'; import { NavigationProvider, useNavigationContextSafe } from '../../Layout/NavigationContext'; const i18n = defineMessages({ appearanceTitle: { id: 'settings.appearance.title', defaultMessage: 'Appearance' }, appearanceDesc: { id: 'settings.appearance.description', defaultMessage: 'Configure how goose appears on your system', }, notifications: { id: 'settings.notifications.title', defaultMessage: 'Notifications' }, notificationsDesc: { id: 'settings.notifications.description', defaultMessage: 'Notifications are managed by your OS - {link}', }, configGuide: { id: 'settings.notifications.configGuide', defaultMessage: 'Configuration guide' }, openSettings: { id: 'settings.notifications.openSettings', defaultMessage: 'Open Settings' }, taskNotifications: { id: 'settings.notifications.task.title', defaultMessage: 'Task completion notifications', }, taskNotificationsDesc: { id: 'settings.notifications.task.description', defaultMessage: 'Notify when Goose finishes a task while the window is in the background', }, menuBarIcon: { id: 'settings.menuBarIcon.title', defaultMessage: 'Menu bar icon' }, menuBarIconDesc: { id: 'settings.menuBarIcon.description', defaultMessage: 'Show goose in the menu bar', }, dockIcon: { id: 'settings.dockIcon.title', defaultMessage: 'Dock icon' }, dockIconDesc: { id: 'settings.dockIcon.description', defaultMessage: 'Show goose in the dock' }, preventSleep: { id: 'settings.preventSleep.title', defaultMessage: 'Prevent Sleep' }, preventSleepDesc: { id: 'settings.preventSleep.description', defaultMessage: 'Keep your computer awake while goose is running a task (screen can still lock)', }, costTracking: { id: 'settings.costTracking.title', defaultMessage: 'Cost Tracking' }, costTrackingDesc: { id: 'settings.costTracking.description', defaultMessage: 'Show model pricing and usage costs', }, themeTitle: { id: 'settings.theme.title', defaultMessage: 'Theme' }, themeDesc: { id: 'settings.theme.description', defaultMessage: 'Customize the look and feel of goose', }, navigationTitle: { id: 'settings.navigation.title', defaultMessage: 'Navigation' }, navigationDesc: { id: 'settings.navigation.description', defaultMessage: 'Customize navigation layout and behavior', }, navMode: { id: 'settings.navigation.mode', defaultMessage: 'Mode' }, navStyle: { id: 'settings.navigation.style', defaultMessage: 'Style' }, navPosition: { id: 'settings.navigation.position', defaultMessage: 'Position' }, navCustomize: { id: 'settings.navigation.customize', defaultMessage: 'Customize Items' }, helpTitle: { id: 'settings.help.title', defaultMessage: 'Help & feedback' }, helpDesc: { id: 'settings.help.description', defaultMessage: 'Help us improve goose by reporting issues or requesting new features', }, reportBug: { id: 'settings.help.reportBug', defaultMessage: 'Report a Bug' }, requestFeature: { id: 'settings.help.requestFeature', defaultMessage: 'Request a Feature' }, versionTitle: { id: 'settings.version.title', defaultMessage: 'Version' }, updatesTitle: { id: 'settings.updates.title', defaultMessage: 'Updates' }, updatesDesc: { id: 'settings.updates.description', defaultMessage: 'Check for and install updates to keep goose running at its best', }, notificationsModalTitle: { id: 'settings.notifications.modal.title', defaultMessage: 'How to Enable Notifications', }, notificationsMacInstructions: { id: 'settings.notifications.modal.macInstructions', defaultMessage: 'To enable notifications on macOS:', }, notificationsMacStep1: { id: 'settings.notifications.modal.macStep1', defaultMessage: 'Open System Preferences', }, notificationsMacStep2: { id: 'settings.notifications.modal.macStep2', defaultMessage: 'Click on Notifications', }, notificationsMacStep3: { id: 'settings.notifications.modal.macStep3', defaultMessage: 'Find and select goose in the application list', }, notificationsMacStep4: { id: 'settings.notifications.modal.macStep4', defaultMessage: 'Enable notifications and adjust settings as desired', }, notificationsWinInstructions: { id: 'settings.notifications.modal.winInstructions', defaultMessage: 'To enable notifications on Windows:', }, notificationsWinStep1: { id: 'settings.notifications.modal.winStep1', defaultMessage: 'Open Settings', }, notificationsWinStep2: { id: 'settings.notifications.modal.winStep2', defaultMessage: 'Go to System > Notifications', }, notificationsWinStep3: { id: 'settings.notifications.modal.winStep3', defaultMessage: 'Find and select goose in the application list', }, notificationsWinStep4: { id: 'settings.notifications.modal.winStep4', defaultMessage: 'Toggle notifications on and adjust settings as desired', }, close: { id: 'settings.close', defaultMessage: 'Close' }, }); interface AppSettingsSectionProps { scrollToSection?: string; } const NavigationSettingsContent: React.FC = () => { const [isExpanded, setIsExpanded] = useState(false); const navContext = useNavigationContextSafe(); const isOverlayMode = navContext?.navigationMode === 'overlay'; const intl = useIntl(); return ( {isExpanded && (

{intl.formatMessage(i18n.navMode)}

{!isOverlayMode && (

{intl.formatMessage(i18n.navStyle)}

)} {!isOverlayMode && (

{intl.formatMessage(i18n.navPosition)}

)}

{intl.formatMessage(i18n.navCustomize)}

)} ); }; // Navigation Settings Card - wrapped in its own provider for settings page const NavigationSettingsCard: React.FC = () => { const navContext = useNavigationContextSafe(); // If already in a NavigationProvider context, render directly if (navContext) { return ; } // Otherwise wrap with provider return ( ); }; export default function AppSettingsSection({ scrollToSection }: AppSettingsSectionProps) { const [menuBarIconEnabled, setMenuBarIconEnabled] = useState(true); const [dockIconEnabled, setDockIconEnabled] = useState(true); const [wakelockEnabled, setWakelockEnabled] = useState(true); const [notificationsEnabled, setNotificationsEnabled] = useState(true); const [isMacOS, setIsMacOS] = useState(false); const [isDockSwitchDisabled, setIsDockSwitchDisabled] = useState(false); const [showNotificationModal, setShowNotificationModal] = useState(false); const [showPricing, setShowPricing] = useState(true); const [isDarkMode, setIsDarkMode] = useState(false); const updateSectionRef = useRef(null); const shouldShowUpdates = !window.appConfig.get('GOOSE_VERSION'); useEffect(() => { setIsMacOS(window.electron.platform === 'darwin'); }, []); useEffect(() => { const updateTheme = () => { setIsDarkMode(document.documentElement.classList.contains('dark')); }; updateTheme(); const observer = new MutationObserver(updateTheme); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'], }); return () => observer.disconnect(); }, []); useEffect(() => { window.electron.getSetting('showPricing').then(setShowPricing); }, []); useEffect(() => { if (scrollToSection === 'update' && updateSectionRef.current) { setTimeout(() => { updateSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); } }, [scrollToSection]); useEffect(() => { window.electron.getMenuBarIconState().then((enabled) => { setMenuBarIconEnabled(enabled); }); window.electron.getWakelockState().then((enabled) => { setWakelockEnabled(enabled); }); window.electron.getSetting('enableNotifications').then((enabled) => { setNotificationsEnabled(enabled ?? true); }); if (isMacOS) { window.electron.getDockIconState().then((enabled) => { setDockIconEnabled(enabled); }); } }, [isMacOS]); const handleMenuBarIconToggle = async () => { const newState = !menuBarIconEnabled; // If we're turning off the menu bar icon and the dock icon is hidden, // we need to show the dock icon to maintain accessibility if (!newState && !dockIconEnabled && isMacOS) { const success = await window.electron.setDockIcon(true); if (success) { setDockIconEnabled(true); } } const success = await window.electron.setMenuBarIcon(newState); if (success) { setMenuBarIconEnabled(newState); trackSettingToggled('menu_bar_icon', newState); } }; const handleDockIconToggle = async () => { const newState = !dockIconEnabled; // If we're turning off the dock icon and the menu bar icon is hidden, // we need to show the menu bar icon to maintain accessibility if (!newState && !menuBarIconEnabled) { const success = await window.electron.setMenuBarIcon(true); if (success) { setMenuBarIconEnabled(true); } } // Disable the switch to prevent rapid toggling setIsDockSwitchDisabled(true); setTimeout(() => { setIsDockSwitchDisabled(false); }, 1000); // Set the dock icon state const success = await window.electron.setDockIcon(newState); if (success) { setDockIconEnabled(newState); trackSettingToggled('dock_icon', newState); } }; const handleWakelockToggle = async () => { const newState = !wakelockEnabled; const success = await window.electron.setWakelock(newState); if (success) { setWakelockEnabled(newState); trackSettingToggled('prevent_sleep', newState); } }; const handleNotificationsToggle = async (checked: boolean) => { setNotificationsEnabled(checked); await window.electron.setSetting('enableNotifications', checked); trackSettingToggled('task_notifications', checked); }; const handleShowPricingToggle = async (checked: boolean) => { setShowPricing(checked); await window.electron.setSetting('showPricing', checked); trackSettingToggled('cost_tracking', checked); // Trigger event for other components window.dispatchEvent(new CustomEvent('showPricingChanged')); }; const intl = useIntl(); return (

{intl.formatMessage(i18n.appearanceTitle)} {intl.formatMessage(i18n.appearanceDesc)}

{intl.formatMessage(i18n.notifications)}

{intl.formatMessage(i18n.notificationsDesc, { link: ( setShowNotificationModal(true)} > {intl.formatMessage(i18n.configGuide)} ), })}

{intl.formatMessage(i18n.taskNotifications)}

{intl.formatMessage(i18n.taskNotificationsDesc)}

{intl.formatMessage(i18n.menuBarIcon)}

{intl.formatMessage(i18n.menuBarIconDesc)}

{isMacOS && (

{intl.formatMessage(i18n.dockIcon)}

{intl.formatMessage(i18n.dockIconDesc)}

)} {/* Prevent Sleep */}

{intl.formatMessage(i18n.preventSleep)}

{intl.formatMessage(i18n.preventSleepDesc)}

{/* Cost Tracking */} {COST_TRACKING_ENABLED && (

{intl.formatMessage(i18n.costTracking)}

{intl.formatMessage(i18n.costTrackingDesc)}

)} {intl.formatMessage(i18n.themeTitle)} {intl.formatMessage(i18n.themeDesc)} {/* Navigation Settings */} {intl.formatMessage(i18n.helpTitle)} {intl.formatMessage(i18n.helpDesc)}

{/* Version Section - only show if GOOSE_VERSION is set */} {!shouldShowUpdates && ( {intl.formatMessage(i18n.versionTitle)}

{String(window.appConfig.get('GOOSE_VERSION') || 'Development')}

)} {/* Update Section - only show if GOOSE_VERSION is NOT set */} {UPDATES_ENABLED && shouldShowUpdates && (

{intl.formatMessage(i18n.updatesTitle)} {intl.formatMessage(i18n.updatesDesc)}

)} {/* Notification Instructions Modal */}

); }