feat: search options (#540)

* feat: search options

* feat: sanitize folder names

* fix: add cursor: pointer to switch

* fix: explicitly make the search bar a text input

* refactor: remove magic number

* refactor: extract Switch component to its own file

* refactor: split AppState into multiple files

* refactor: review comments

app/assets/javascripts/components/SearchOptions.tsx

@@ -0,0 +1,112 @@
+import { AppState } from '@/ui_models/app_state';
+import { toDirective, useAutorunValue } from './utils';
+import { useRef, useState } from 'preact/hooks';
+import { WebApplication } from '@/ui_models/application';
+import VisuallyHidden from '@reach/visually-hidden';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+} from '@reach/disclosure';
+import { FocusEvent } from 'react';
+import { Switch } from './Switch';
+import TuneIcon from '../../icons/ic_tune.svg';
+
+type Props = {
+  appState: AppState;
+  application: WebApplication;
+};
+
+function SearchOptions({ appState }: Props) {
+  const { searchOptions } = appState;
+
+  const {
+    includeProtectedContents,
+    includeArchived,
+    includeTrashed,
+  } = useAutorunValue(() => ({
+    includeProtectedContents: searchOptions.includeProtectedContents,
+    includeArchived: searchOptions.includeArchived,
+    includeTrashed: searchOptions.includeTrashed,
+  }));
+
+  const [
+    togglingIncludeProtectedContents,
+    setTogglingIncludeProtectedContents,
+  ] = useState(false);
+
+  async function toggleIncludeProtectedContents() {
+    setTogglingIncludeProtectedContents(true);
+    try {
+      await searchOptions.toggleIncludeProtectedContents();
+    } finally {
+      setTogglingIncludeProtectedContents(false);
+    }
+  }
+
+  const [open, setOpen] = useState(false);
+  const [optionsPanelTop, setOptionsPanelTop] = useState(0);
+  const buttonRef = useRef<HTMLButtonElement>();
+  const panelRef = useRef<HTMLDivElement>();
+
+  function closeOnBlur(event: FocusEvent<HTMLElement>) {
+    if (
+      !togglingIncludeProtectedContents &&
+      !panelRef.current.contains(event.relatedTarget as Node)
+    ) {
+      setOpen(false);
+    }
+  }
+
+  return (
+    <Disclosure
+      open={open}
+      onChange={() => {
+        const { height } = buttonRef.current.getBoundingClientRect();
+        const extraVerticalBreathingRoom = 4;
+        setOptionsPanelTop(height + extraVerticalBreathingRoom);
+        setOpen((prevIsOpen) => !prevIsOpen);
+      }}
+    >
+      <DisclosureButton
+        ref={buttonRef}
+        onBlur={closeOnBlur}
+        className="sn-icon-button color-neutral hover:color-info"
+      >
+        <VisuallyHidden>Search options</VisuallyHidden>
+        <TuneIcon className="fill-current block" />
+      </DisclosureButton>
+      <DisclosurePanel
+        ref={panelRef}
+        style={{
+          top: optionsPanelTop,
+        }}
+        className="sn-dropdown sn-dropdown-anchor-right grid gap-2 py-2"
+      >
+        <Switch
+          checked={includeProtectedContents}
+          onChange={toggleIncludeProtectedContents}
+          onBlur={closeOnBlur}
+        >
+          <p className="capitalize">Include protected contents</p>
+        </Switch>
+        <Switch
+          checked={includeArchived}
+          onChange={searchOptions.toggleIncludeArchived}
+          onBlur={closeOnBlur}
+        >
+          <p className="capitalize">Include archived notes</p>
+        </Switch>
+        <Switch
+          checked={includeTrashed}
+          onChange={searchOptions.toggleIncludeTrashed}
+          onBlur={closeOnBlur}
+        >
+          <p className="capitalize">Include trashed notes</p>
+        </Switch>
+      </DisclosurePanel>
+    </Disclosure>
+  );
+}
+
+export const SearchOptionsDirective = toDirective<Props>(SearchOptions);

app/assets/javascripts/components/Switch.tsx

@@ -0,0 +1,48 @@
+import { ComponentChildren, FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+import { HTMLProps } from 'react';
+import {
+  CustomCheckboxContainer,
+  CustomCheckboxInput,
+  CustomCheckboxInputProps,
+} from '@reach/checkbox';
+import '@reach/checkbox/styles.css';
+
+export type SwitchProps = HTMLProps<HTMLInputElement> & {
+  checked?: boolean;
+  onChange: (checked: boolean) => void;
+  children: ComponentChildren;
+};
+
+export const Switch: FunctionalComponent<SwitchProps> = (
+  props: SwitchProps
+) => {
+  const [checkedState, setChecked] = useState(props.checked || false);
+  const checked = props.checked ?? checkedState;
+  return (
+    <label className="sn-component flex justify-between items-center cursor-pointer hover:bg-contrast py-2 px-3">
+      {props.children}
+      <CustomCheckboxContainer
+        checked={checked}
+        onChange={(event) => {
+          setChecked(event.target.checked);
+          props.onChange(event.target.checked);
+        }}
+        className={`sn-switch ${checked ? 'bg-info' : 'bg-secondary-contrast'}`}
+      >
+        <CustomCheckboxInput
+          {...({
+            ...props,
+            children: undefined,
+          } as CustomCheckboxInputProps)}
+        />
+        <span
+          aria-hidden
+          className={`sn-switch-handle ${
+            checked ? 'sn-switch-handle-right' : ''
+          }`}
+        />
+      </CustomCheckboxContainer>
+    </label>
+  );
+};

app/assets/javascripts/components/utils.ts

@@ -32,6 +32,9 @@ export function toDirective<Props>(
         '$scope',
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ($element: JQLite, $scope: any) => {
+          if ($scope.class) {
+            $element.addClass($scope.class);
+          }
           return {
             $onChanges() {
               render(