Toggle settings

src-tauri/src/main.rs

@@ -630,6 +630,10 @@ fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
             CustomMenuItem::new("new_request".to_string(), "New Request")
                 .accelerator("CmdOrCtrl+n"),
         )
+        .add_item(
+            CustomMenuItem::new("toggle_settings".to_string(), "Toggle Settings")
+                .accelerator("CmdOrCtrl+,"),
+        )
         .add_item(
             CustomMenuItem::new("duplicate_request".to_string(), "Duplicate Request")
                 .accelerator("CmdOrCtrl+d"),
@@ -684,6 +688,7 @@ fn create_window(handle: &AppHandle<Wry>) -> Window<Wry> {
         "focus_sidebar" => win2.emit("focus_sidebar", true).unwrap(),
         "send_request" => win2.emit("send_request", true).unwrap(),
         "new_request" => _ = win2.emit("new_request", true).unwrap(),
+        "toggle_settings" => _ = win2.emit("toggle_settings", true).unwrap(),
         "duplicate_request" => _ = win2.emit("duplicate_request", true).unwrap(),
         "refresh" => win2.eval("location.reload()").unwrap(),
         "new_window" => _ = create_window(&handle2),

src-web/components/RequestActionsDropdown.tsx

@@ -1,8 +1,10 @@
 import type { HTMLAttributes, ReactElement } from 'react';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateRequest } from '../hooks/useDuplicateRequest';
+import { useTauriEvent } from '../hooks/useTauriEvent';
 import { useTheme } from '../hooks/useTheme';
+import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { HotKey } from './core/HotKey';
 import { Icon } from './core/Icon';
@@ -15,10 +17,16 @@ interface Props {
 export function RequestActionsDropdown({ requestId, children }: Props) {
   const deleteRequest = useDeleteRequest(requestId);
   const duplicateRequest = useDuplicateRequest({ id: requestId, navigateAfter: true });
+  const dropdownRef = useRef<DropdownRef>(null);
   const { appearance, toggleAppearance } = useTheme();
 
+  useTauriEvent('toggle_settings', () => {
+    dropdownRef.current?.toggle();
+  });
+
   return (
     <Dropdown
+      ref={dropdownRef}
       items={[
         {
           label: 'Duplicate',

src-web/components/Sidebar.tsx

@@ -3,7 +3,7 @@ import type { ForwardedRef, KeyboardEvent } from 'react';
 import React, { forwardRef, Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
 import type { XYCoord } from 'react-dnd';
 import { useDrag, useDrop } from 'react-dnd';
-import { useKeyPressEvent } from 'react-use';
+import { useKey, useKeyPressEvent } from 'react-use';
 import { useActiveRequestId } from '../hooks/useActiveRequestId';
 import { useAppRoutes } from '../hooks/useAppRoutes';
 import { useDeleteAnyRequest } from '../hooks/useDeleteAnyRequest';
@@ -84,23 +84,33 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
     routes.navigate('request', { requestId: request.id, workspaceId: request.workspaceId });
   });
 
-  useKeyPressEvent('ArrowUp', () => {
+  useKey(
-    if (!hasFocus) return;
+    'ArrowUp',
-    let newIndex = (selectedIndex ?? requests.length) - 1;
+    () => {
-    if (newIndex < 0) {
+      if (!hasFocus) return;
-      newIndex = requests.length - 1;
+      let newIndex = (selectedIndex ?? requests.length) - 1;
-    }
+      if (newIndex < 0) {
-    setSelectedIndex(newIndex);
+        newIndex = requests.length - 1;
-  });
+      }
+      setSelectedIndex(newIndex);
+    },
+    undefined,
+    [hasFocus, requests, selectedIndex],
+  );
 
-  useKeyPressEvent('ArrowDown', () => {
+  useKey(
-    if (!hasFocus) return;
+    'ArrowDown',
-    let newIndex = (selectedIndex ?? -1) + 1;
+    () => {
-    if (newIndex > requests.length - 1) {
+      if (!hasFocus) return;
-      newIndex = 0;
+      let newIndex = (selectedIndex ?? -1) + 1;
-    }
+      if (newIndex > requests.length - 1) {
-    setSelectedIndex(newIndex);
+        newIndex = 0;
-  });
+      }
+      setSelectedIndex(newIndex);
+    },
+    undefined,
+    [hasFocus, requests, selectedIndex],
+  );
 
   useKeyPressEvent('Backspace', (e) => {
     if (!hasFocus) return;

src-web/components/core/Dropdown.tsx

@@ -13,7 +13,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useKeyPressEvent } from 'react-use';
+import { useKey, useKeyPressEvent } from 'react-use';
 import { Portal } from '../Portal';
 import { Separator } from './Separator';
 import { VStack } from './Stacks';
@@ -44,6 +44,7 @@ export interface DropdownProps {
 export interface DropdownRef {
   isOpen: boolean;
   open: (activeIndex?: number) => void;
+  toggle: () => void;
   close?: () => void;
   next?: () => void;
   prev?: () => void;
@@ -62,6 +63,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(function Dropdown
   useImperativeHandle(ref, () => ({
     ...menuRef.current,
     isOpen: open,
+    toggle: () => setOpen(!open),
     open: (activeIndex?: number) => {
       if (activeIndex === undefined) {
         setDefaultSelectedIndex(undefined);
@@ -129,7 +131,7 @@ interface MenuProps {
   onClose: () => void;
 }
 
-const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen'>, MenuProps>(function Menu(
+const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuProps>(function Menu(
   { className, items, onClose, triggerRect, defaultSelectedIndex }: MenuProps,
   ref,
 ) {
@@ -195,12 +197,12 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen'>, MenuProps>(functio
     });
   }, [items]);
 
-  useKeyPressEvent('ArrowUp', (e) => {
+  useKey('ArrowUp', (e) => {
     e.preventDefault();
     handlePrev();
   });
 
-  useKeyPressEvent('ArrowDown', (e) => {
+  useKey('ArrowDown', (e) => {
     e.preventDefault();
     handleNext();
   });