refactor: clipper ui (#2330)

packages/web/src/javascripts/Components/ClipperView/ClipperView.tsx

@@ -1,6 +1,5 @@
 import { WebApplicationGroup } from '@/Application/WebApplicationGroup'
 import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
-import { SNLogoFull } from '@standardnotes/icons'
 import { useCallback, useEffect, useState } from 'react'
 import { AccountMenuPane } from '../AccountMenu/AccountMenuPane'
 import MenuPaneSelector from '../AccountMenu/MenuPaneSelector'
@@ -38,12 +37,6 @@ import LinkedItemBubble from '../LinkedItems/LinkedItemBubble'
 import StyledTooltip from '../StyledTooltip/StyledTooltip'
 import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 
-const Header = () => (
-  <div className="flex items-center border-b border-border p-1 px-3 py-2 text-base font-semibold text-info-contrast">
-    <SNLogoFull className="h-7" />
-  </div>
-)
-
 const ClipperView = ({
   viewControllerManager,
   applicationGroup,
@@ -257,8 +250,6 @@ const ClipperView = ({
 
   if (user && !isEntitledToExtension) {
     return (
-      <>
-        <Header />
       <div className="px-3 py-3">
         <div
           className="mx-auto mb-5 flex h-24 w-24 items-center justify-center rounded-[50%] bg-contrast"
@@ -278,14 +269,11 @@ const ClipperView = ({
           Sign out
         </Button>
       </div>
-      </>
     )
   }
 
   if (clippedNote) {
     return (
-      <>
-        <Header />
       <ClippedNoteView
         note={clippedNote}
         key={clippedNote.uuid}
@@ -293,15 +281,11 @@ const ClipperView = ({
         clearClip={clearClip}
         isFirefoxPopup={isFirefoxPopup}
       />
-      </>
     )
   }
 
   if (!user) {
-    return (
+    return menuPane ? (
-      <>
-        <Header />
-        {menuPane ? (
       <div className="py-1">
         <MenuPaneSelector
           viewControllerManager={viewControllerManager}
@@ -323,16 +307,28 @@ const ClipperView = ({
           Sign in
         </MenuItem>
       </Menu>
-        )}
-      </>
     )
   }
 
   return (
-    <>
+    <div className="bg-contrast p-3">
-      <Header />
+      <Menu a11yLabel="Extension menu" isOpen={true} className="rounded border border-border bg-default">
-      <div>
+        {hasSelection && (
-        <Menu a11yLabel="Extension menu" isOpen={true} className="pb-1">
+          <MenuItem
+            className="border-b border-border"
+            disabled={isScreenshotMode}
+            onClick={async () => {
+              const payload = await sendMessageToActiveTab({ type: RuntimeMessageTypes.GetSelection })
+              if (!payload) {
+                return
+              }
+              setClipPayload(payload)
+            }}
+          >
+            <Icon type="paragraph" className="mr-2 text-info" />
+            Clip text selection
+          </MenuItem>
+        )}
         <MenuItem
           onClick={async () => {
             const payload = await sendMessageToActiveTab({ type: RuntimeMessageTypes.GetFullPage })
@@ -342,6 +338,7 @@ const ClipperView = ({
             setClipPayload(payload)
           }}
         >
+          <Icon type="notes-filled" className="mr-2 text-info" />
           {isScreenshotMode ? 'Capture visible' : 'Clip full page'}
         </MenuItem>
         <MenuItem
@@ -354,26 +351,16 @@ const ClipperView = ({
             setClipPayload(payload)
           }}
         >
+          <Icon type="rich-text" className="mr-2 text-info" />
           Clip article
         </MenuItem>
-          <MenuItem
-            disabled={!hasSelection || isScreenshotMode}
-            onClick={async () => {
-              const payload = await sendMessageToActiveTab({ type: RuntimeMessageTypes.GetSelection })
-              if (!payload) {
-                return
-              }
-              setClipPayload(payload)
-            }}
-          >
-            Clip text selection
-          </MenuItem>
         <MenuItem
           onClick={async () => {
             void sendMessageToActiveTab({ type: RuntimeMessageTypes.StartNodeSelection })
             window.close()
           }}
         >
+          <Icon type="dashboard" className="mr-2 text-info" />
           Select elements to {isScreenshotMode ? 'capture' : 'clip'}
         </MenuItem>
         <MenuSwitchButtonItem
@@ -385,46 +372,49 @@ const ClipperView = ({
         >
           Clip as screenshot
         </MenuSwitchButtonItem>
-          <div className="border-t border-border px-3 py-3 text-base text-foreground">
+        <div className="border-t border-border px-3 py-3  text-foreground">
-            <div className="flex items-center justify-between">
-              <div className="font-medium">Default tag</div>
           {defaultTag && (
-                <StyledTooltip label="Remove default tag" gutter={2}>
+            <div className="flex items-center justify-between text-base">
-                  <button className="rounded-full p-1 hover:bg-contrast hover:text-info" onClick={unselectTag}>
-                    <Icon type="clear-circle-filled" />
-                  </button>
-                </StyledTooltip>
-              )}
-            </div>
-            {defaultTag && (
-              <div>
               <LinkedItemBubble
-                  className="m-1 mr-2"
+                className="m-1 mr-2 min-w-0"
                 link={createLinkFromItem(defaultTag, 'linked')}
                 unlinkItem={unselectTag}
                 isBidirectional={false}
-                  inlineFlex={true}
               />
+              <StyledTooltip label="Remove default tag" gutter={2}>
+                <button
+                  className="rounded-full p-1 text-neutral hover:bg-contrast hover:text-info"
+                  onClick={unselectTag}
+                >
+                  <Icon type="clear-circle-filled" />
+                </button>
+              </StyledTooltip>
             </div>
           )}
           <ItemSelectionDropdown
             onSelection={selectTag}
             placeholder="Select tag to save clipped notes to..."
             contentTypes={[ContentType.Tag]}
+            className={{
+              input: 'text-[0.85rem]',
+            }}
+            comboboxProps={{
+              placement: 'top',
+            }}
           />
         </div>
-          <div className="border-t border-border px-3 pt-3 pb-1 text-base text-foreground">
+        <div className="flex items-center border-t border-border text-foreground">
-            <div>You're signed in as:</div>
+          <Icon type="user" className="mx-2" />
-            <div className="wrap my-0.5 font-bold">{user.email}</div>
+          <div className="flex-grow py-2 text-sm font-semibold">{user.email}</div>
-            <span className="text-neutral">{application.getHost()}</span>
+          <button
+            className="flex-shrink-0 border-l border-border py-2 px-2 hover:bg-info-backdrop focus:bg-info-backdrop focus:shadow-none focus:outline-none"
+            onClick={showSignOutConfirmation}
+          >
+            <Icon type="signOut" className="text-neutral" />
+          </button>
         </div>
-          <MenuItem onClick={showSignOutConfirmation}>
-            <Icon type="signOut" className="mr-2 h-6 w-6 text-neutral" />
-            Sign out
-          </MenuItem>
       </Menu>
     </div>
-    </>
   )
 }
 

packages/web/src/javascripts/Components/ItemSelectionDropdown/ItemSelectionDropdown.tsx

@@ -1,6 +1,13 @@
 import { doesItemMatchSearchQuery } from '@/Utils/Items/Search/doesItemMatchSearchQuery'
-import { Combobox, ComboboxItem, ComboboxPopover, useComboboxStore, VisuallyHidden } from '@ariakit/react'
+import {
-import { ContentType, DecryptedItem, naturalSort } from '@standardnotes/snjs'
+  Combobox,
+  ComboboxItem,
+  ComboboxPopover,
+  ComboboxStoreProps,
+  useComboboxStore,
+  VisuallyHidden,
+} from '@ariakit/react'
+import { classNames, ContentType, DecryptedItem, naturalSort } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { useDeferredValue, useEffect, useState } from 'react'
 import { useApplication } from '../ApplicationProvider'
@@ -10,13 +17,23 @@ type Props = {
   contentTypes: ContentType[]
   placeholder: string
   onSelection: (item: DecryptedItem) => void
+  className?: {
+    input?: string
+    popover?: string
+  }
+  comboboxProps?: ComboboxStoreProps
 }
 
-const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection }: Props) => {
+const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection, comboboxProps, className = {} }: Props) => {
   const application = useApplication()
 
-  const combobox = useComboboxStore()
+  const combobox = useComboboxStore(comboboxProps)
   const value = combobox.useState('value')
+  const open = combobox.useState('open')
+  if (value.length < 1 && open) {
+    combobox.setOpen(false)
+  }
+
   const searchQuery = useDeferredValue(value)
   const [items, setItems] = useState<DecryptedItem[]>([])
 
@@ -30,17 +47,21 @@ const ItemSelectionDropdown = ({ contentTypes, placeholder, onSelection }: Props
 
   return (
     <div>
-      <label>
       <VisuallyHidden>Select an item</VisuallyHidden>
       <Combobox
         store={combobox}
         placeholder={placeholder}
-          className="h-7 w-70 bg-transparent text-sm text-text focus:border-b-2 focus:border-info focus:shadow-none focus:outline-none lg:text-xs"
+        className={classNames(
+          'h-7 w-70 bg-transparent text-sm text-text focus:border-b-2 focus:border-info focus:shadow-none focus:outline-none lg:text-xs',
+          className.input,
+        )}
       />
-      </label>
       <ComboboxPopover
         store={combobox}
-        className="z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded bg-default py-2 shadow-main"
+        className={classNames(
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded bg-default py-2 shadow-main',
+          className.popover,
+        )}
       >
         {items.length > 0 ? (
           items.map((item) => (

packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx

@@ -41,7 +41,13 @@ const MenuSwitchButtonItem = forwardRef(
           <span className="flex flex-grow items-center">{children}</span>
           <div className="flex items-center">
             {shortcut && <KeyboardShortcutIndicator className="mr-2" shortcut={shortcut} />}
-            <Switch disabled={disabled} className="pointer-events-none px-0" checked={checked} onChange={onChange} />
+            <Switch
+              disabled={disabled}
+              className="pointer-events-none px-0"
+              checked={checked}
+              onChange={onChange}
+              tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+            />
           </div>
         </button>
       </MenuListItem>

packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts

@@ -96,16 +96,16 @@ export const useListKeyboardNavigation = (
 
     const selectedItemIndex = Array.from(items).findIndex((item) => item.dataset.selected)
     let indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
-    indexToFocus = getNextFocusableIndex(indexToFocus, items)
+    indexToFocus = getNextFocusableIndex(indexToFocus - 1, items)
 
-    setTimeout(() => {
     focusItemWithIndex(indexToFocus, items)
-    }, FIRST_ITEM_FOCUS_TIMEOUT)
   }, [container, focusItemWithIndex, getNextFocusableIndex, initialFocus])
 
   useEffect(() => {
     if (shouldAutoFocus) {
+      setTimeout(() => {
         setInitialFocus()
+      }, FIRST_ITEM_FOCUS_TIMEOUT)
     }
   }, [setInitialFocus, shouldAutoFocus])