Initial settings implementation

src-web/components/core/Checkbox.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { useCallback } from 'react';
 import { Icon } from './Icon';
+import { HStack } from './Stacks';
 
 interface Props {
   checked: boolean;
@@ -8,33 +8,47 @@ interface Props {
   onChange: (checked: boolean) => void;
   disabled?: boolean;
   className?: string;
+  hideLabel?: boolean;
 }
 
-export function Checkbox({ checked, onChange, className, disabled, title }: Props) {
-  const handleClick = useCallback(() => {
-    onChange(!checked);
-  }, [onChange, checked]);
-
+export function Checkbox({ checked, onChange, className, disabled, title, hideLabel }: Props) {
   return (
-    <button
-      role="checkbox"
-      aria-checked={checked ? 'true' : 'false'}
-      disabled={disabled}
-      onClick={handleClick}
-      title={title}
-      className={classNames(
-        className,
-        'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',
-        'focus:border-focus',
-        'disabled:opacity-disabled',
-        checked && 'bg-gray-200/10',
-        // Remove focus style
-        'outline-none',
-      )}
+    <HStack
+      as="label"
+      space={2}
+      alignItems="center"
+      className={classNames(className, disabled && 'opacity-disabled')}
     >
-      <div className="flex items-center justify-center">
-        <Icon size="sm" icon={checked ? 'check' : 'empty'} />
+      <div className="relative flex">
+        <input
+          aria-hidden
+          className="appearance-none w-4 h-4 flex-shrink-0 border border-gray-200 rounded focus:border-focus outline-none ring-0"
+          type="checkbox"
+          disabled={disabled}
+          onChange={() => onChange(!checked)}
+        />
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Icon size="sm" icon={checked ? 'check' : 'empty'} />
+        </div>
       </div>
-    </button>
+      {/*<button*/}
+      {/*  role="checkbox"*/}
+      {/*  aria-checked={checked ? 'true' : 'false'}*/}
+      {/*  disabled={disabled}*/}
+      {/*  onClick={handleClick}*/}
+      {/*  title={title}*/}
+      {/*  className={classNames(*/}
+      {/*    className,*/}
+      {/*    'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',*/}
+      {/*    'focus:border-focus',*/}
+      {/*    'disabled:opacity-disabled',*/}
+      {/*    checked && 'bg-gray-200/10',*/}
+      {/*    // Remove focus style*/}
+      {/*    'outline-none',*/}
+      {/*  )}*/}
+      {/*>*/}
+      {/*</button>*/}
+      {!hideLabel && title}
+    </HStack>
   );
 }

src-web/components/core/Dropdown.tsx

@@ -479,11 +479,6 @@ interface MenuItemHotKeyProps {
 }
 
 function MenuItemHotKey({ action, onSelect, item }: MenuItemHotKeyProps) {
-  if (action) {
-    console.log('MENU ITEM HOTKEY', action, item);
-  }
-  useHotKey(action ?? null, () => {
-    onSelect(item);
-  });
+  useHotKey(action ?? null, () => onSelect(item));
   return null;
 }

src-web/components/core/Editor/Editor.tsx

@@ -290,13 +290,29 @@ function getExtensions({
 
     // Handle onChange
     EditorView.updateListener.of((update) => {
-      if (onChange && update.docChanged) {
+      // Only fire onChange if the document changed and the update was from user input. This prevents firing onChange when the document is updated when
+      // changing pages (one request to another in header editor)
+      if (onChange && update.docChanged && isViewUpdateFromUserInput(update)) {
         onChange.current?.(update.state.doc.toString());
       }
     }),
   ];
 }
 
+function isViewUpdateFromUserInput(viewUpdate: ViewUpdate) {
+  // Make sure document has changed, ensuring user events like selections don't count.
+  if (viewUpdate.docChanged) {
+    // Check transactions for any that are direct user input, not changes from Y.js or another extension.
+    for (const transaction of viewUpdate.transactions) {
+      // Not using Transaction.isUserEvent because that only checks for a specific User event type ( "input", "delete", etc.). Checking the annotation directly allows for any type of user event.
+      const userEventType = transaction.annotation(Transaction.userEvent);
+      if (userEventType) return userEventType;
+    }
+  }
+
+  return false;
+}
+
 const syncGutterBg = ({
   parent,
   className = '',

src-web/components/core/PairEditor.tsx

@@ -335,7 +335,8 @@ const FormRow = memo(function FormRow({
         <span className="w-3" />
       )}
       <Checkbox
-        title={pairContainer.pair.enabled ? 'disable entry' : 'Enable item'}
+        hideLabel
+        title={pairContainer.pair.enabled ? 'Disable item' : 'Enable item'}
         disabled={isLast}
         checked={isLast ? false : !!pairContainer.pair.enabled}
         className={classNames('mr-2', isLast && '!opacity-disabled')}

src-web/components/core/Stacks.tsx

@@ -54,7 +54,7 @@ export const VStack = forwardRef(function VStack(
 });
 
 type BaseStackProps = HTMLAttributes<HTMLElement> & {
-  as?: ComponentType | 'ul' | 'form';
+  as?: ComponentType | 'ul' | 'label' | 'form';
   space?: keyof typeof gapClasses;
   alignItems?: 'start' | 'center' | 'stretch';
   justifyContent?: 'start' | 'center' | 'end' | 'between';