yaak-mountain-loop/src-web/components/SettingsDropdown.tsx

import { invoke } from '@tauri-apps/api';
import { useRef } from 'react';
import { useAppVersion } from '../hooks/useAppVersion';
import { useExportData } from '../hooks/useExportData';
import { useImportData } from '../hooks/useImportData';
import { useTheme } from '../hooks/useTheme';
import { useUpdateMode } from '../hooks/useUpdateMode';
import type { DropdownProps, DropdownRef } from './core/Dropdown';
import { Dropdown } from './core/Dropdown';
import { Icon } from './core/Icon';
import { IconButton } from './core/IconButton';

export function SettingsDropdown() {
  const importData = useImportData();
  const exportData = useExportData();
  const { appearance, toggleAppearance } = useTheme();
  const appVersion = useAppVersion();
  const [updateMode, setUpdateMode] = useUpdateMode();
  const dropdownRef = useRef<DropdownRef>(null);

  return (
    <Dropdown
      ref={dropdownRef}
      items={[
        {
          key: 'import-data',
          label: 'Import',
          leftSlot: <Icon icon="download" />,
          onSelect: () => importData.mutate(),
        },
        {
          key: 'export-data',
          label: 'Export',
          leftSlot: <Icon icon="upload" />,
          onSelect: () => exportData.mutate(),
        },
        {
          key: 'appearance',
          label: 'Toggle Theme',
          onSelect: toggleAppearance,
          leftSlot: <Icon icon={appearance === 'dark' ? 'sun' : 'moon'} />,
        },
        { type: 'separator', label: `v${appVersion.data}` },
        {
          key: 'update-mode',
          label: updateMode === 'stable' ? 'Enable Beta' : 'Disable Beta',
          onSelect: () => setUpdateMode(updateMode === 'stable' ? 'beta' : 'stable'),
          leftSlot: <Icon icon="camera" />,
        },
        {
          key: 'update-check',
          label: 'Check for Updates',
          onSelect: () => invoke('check_for_updates'),
          leftSlot: <Icon icon="update" />,
        },
      ]}
    >
      <IconButton size="sm" title="Request Options" icon="gear" className="pointer-events-auto" />
    </Dropdown>
  );
}