Launch analytics events, changelog, better filter styles

src-web/components/SettingsDropdown.tsx

@@ -1,9 +1,9 @@
 import { invoke, shell } from '@tauri-apps/api';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useAppVersion } from '../hooks/useAppVersion';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
-import { useUpdateMode } from '../hooks/useUpdateMode';
+import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { Button } from './core/Button';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
@@ -18,18 +18,51 @@ export function SettingsDropdown() {
   const importData = useImportData();
   const exportData = useExportData();
   const appVersion = useAppVersion();
-  const [updateMode, setUpdateMode] = useUpdateMode();
   const dropdownRef = useRef<DropdownRef>(null);
   const dialog = useDialog();
+  const [showChangelog, setShowChangelog] = useState<boolean>(false);
+
+  useListenToTauriEvent('show_changelog', () => {
+    setShowChangelog(true);
+  });
 
   return (
     <Dropdown
       ref={dropdownRef}
+      onClose={() => setShowChangelog(false)}
       items={[
+        {
+          key: 'settings',
+          label: 'Settings',
+          hotKeyAction: 'settings.show',
+          leftSlot: <Icon icon="settings" />,
+          onSelect: () => {
+            dialog.show({
+              id: 'settings',
+              size: 'md',
+              title: 'Settings',
+              render: () => <SettingsDialog />,
+            });
+          },
+        },
+        {
+          key: 'hotkeys',
+          label: 'Keyboard shortcuts',
+          hotKeyAction: 'hotkeys.showHelp',
+          leftSlot: <Icon icon="keyboard" />,
+          onSelect: () => {
+            dialog.show({
+              id: 'hotkey-help',
+              title: 'Keyboard Shortcuts',
+              size: 'sm',
+              render: () => <KeyboardShortcutsDialog />,
+            });
+          },
+        },
         {
           key: 'import-data',
-          label: 'Import',
-          leftSlot: <Icon icon="download" />,
+          label: 'Import Data',
+          leftSlot: <Icon icon="folderInput" />,
           onSelect: () => {
             dialog.show({
               title: 'Import Data',
@@ -56,60 +89,41 @@ export function SettingsDropdown() {
         },
         {
           key: 'export-data',
-          label: 'Export',
-          leftSlot: <Icon icon="upload" />,
+          label: 'Export Data',
+          leftSlot: <Icon icon="folderOutput" />,
           onSelect: () => exportData.mutate(),
         },
-        {
-          key: 'hotkeys',
-          label: 'Keyboard shortcuts',
-          hotKeyAction: 'hotkeys.showHelp',
-          leftSlot: <Icon icon="keyboard" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'hotkey-help',
-              title: 'Keyboard Shortcuts',
-              size: 'sm',
-              render: () => <KeyboardShortcutsDialog />,
-            });
-          },
-        },
-        {
-          key: 'settings',
-          label: 'Settings',
-          hotKeyAction: 'settings.show',
-          leftSlot: <Icon icon="settings" />,
-          onSelect: () => {
-            dialog.show({
-              id: 'settings',
-              size: 'md',
-              title: 'Settings',
-              render: () => <SettingsDialog />,
-            });
-          },
-        },
         { type: 'separator', label: `Yaak v${appVersion.data}` },
-        {
-          key: 'update-mode',
-          label: updateMode === 'stable' ? 'Enable Beta' : 'Disable Beta',
-          onSelect: () => setUpdateMode(updateMode === 'stable' ? 'beta' : 'stable'),
-          leftSlot: <Icon icon="flask" />,
-        },
         {
           key: 'update-check',
           label: 'Check for Updates',
-          onSelect: () => invoke('check_for_updates'),
           leftSlot: <Icon icon="update" />,
+          onSelect: () => invoke('check_for_updates'),
         },
         {
           key: 'feedback',
           label: 'Feedback',
-          onSelect: () => shell.open('https://yaak.canny.io'),
           leftSlot: <Icon icon="chat" />,
+          rightSlot: <Icon icon="externalLink" />,
+          onSelect: () => shell.open('https://yaak.canny.io'),
+        },
+        {
+          key: 'changelog',
+          label: 'Changelog',
+          variant: showChangelog ? 'notify' : 'default',
+          leftSlot: <Icon icon="cake" />,
+          rightSlot: <Icon icon="externalLink" />,
+          onSelect: () => shell.open(`https://yaak.app/changelog/${appVersion.data}`),
         },
       ]}
     >
-      <IconButton size="sm" title="Main Menu" icon="settings" className="pointer-events-auto" />
+      <IconButton
+        size="sm"
+        title="Main Menu"
+        icon="settings"
+        className="pointer-events-auto"
+        showBadge={showChangelog}
+      />
     </Dropdown>
   );
 }