chore(ui): improve keyboard support

Author: ncarlier

ui/src/articles/components/ArticlesPageMenu.tsx

@@ -131,32 +131,32 @@ export const ArticlesPageMenu = (props: Props) => {
         {!!req.category && (
           <li>
             <DropDownMenuItem label='View'>
-              <ToggleView value={req.starred ? 'starred' : req.status ?? 'inbox'} onChange={handleChangeView} keys="shift+h" />
+              <ToggleView value={req.starred ? 'starred' : req.status ?? 'inbox'} onChange={handleChangeView} kbs="shift+h" />
             </DropDownMenuItem>
           </li>
         )}
         <li>
           <DropDownMenuItem label='Display as'>
-            <ToggleDisplayMode value={getDisplayPreference().mode} onChange={(mode) => setDisplayPreference({mode})} keys="shift+d" />
+            <ToggleDisplayMode value={getDisplayPreference().mode} onChange={(mode) => setDisplayPreference({mode})} kbs="shift+d" />
           </DropDownMenuItem>
         </li>
         {variant === 'starred' && (
           <li>
             <DropDownMenuItem label='Sort by'>
-              <ToggleSortBy value={getDisplayPreference().by} onChange={handleChangeSortBy} keys="shift+b" />
+              <ToggleSortBy value={getDisplayPreference().by} onChange={handleChangeSortBy} kbs="shift+b" />
             </DropDownMenuItem>
           </li>
         )}
         <li>
           <DropDownMenuItem label='Order '>
-            <ToggleSortOrder value={getDisplayPreference().order} onChange={handleChangeSortOrder} keys="shift+o" />
+            <ToggleSortOrder value={getDisplayPreference().order} onChange={handleChangeSortOrder} kbs="shift+o" />
           </DropDownMenuItem>
         </li>
         {req.status === 'inbox' && (
           <li>
             <LinkIcon onClick={showMarkAllAsReadDialog} icon="done_all">
               <span>Mark all as read</span>
-              <Kbd keys="shift+m" onKeypress={showMarkAllAsReadDialog} />
+              <Kbd keys="shift+del" onKeypress={showMarkAllAsReadDialog} />
             </LinkIcon>
           </li>
         )}

ui/src/articles/components/MarkAsButton.tsx

@@ -29,12 +29,12 @@ const variants: VariantsType = {
   inbox: {
     title: 'Put back to the inbox',
     icon: 'undo',
-    kbs: 'm',
+    kbs: 'ins',
   },
   read: {
     title: 'Mark as read',
     icon: 'done',
-    kbs: 'm',
+    kbs: 'del',
   },
   to_read: {
     title: 'Read it later',

ui/src/articles/components/ToggleDisplayMode.tsx

@@ -5,7 +5,7 @@ import { DisplayMode } from '../../contexts'
 interface Props {
   value: DisplayMode
   onChange: (value: DisplayMode) => void
-  keys: string
+  kbs: string
 }
 
 const values: {
@@ -27,9 +27,9 @@ const values: {
 
 const toggle = (value: DisplayMode) => value === 'grid' ? 'list' : 'grid'
 
-export const ToggleDisplayMode = ({value, onChange, keys}: Props) => (
+export const ToggleDisplayMode = ({value, onChange, kbs}: Props) => (
   <>
     <ToggleMenuItem name='display-mode' value={value} onChange={onChange} values={values} />
-    <Kbd keys={keys} onKeypress={() => onChange(toggle(value))} />
+    <Kbd keys={kbs} onKeypress={() => onChange(toggle(value))} />
   </>
 )

ui/src/articles/components/ToggleSortBy.tsx

@@ -5,7 +5,7 @@ import { SortBy } from '../models'
 interface Props {
   value: SortBy
   onChange: (by: SortBy) => void
-  keys: string
+  kbs: string
 }
 
 const values: {
@@ -27,9 +27,9 @@ const values: {
 
 const toggle = (value: SortBy) => value === 'key' ? 'stars' : 'key'
 
-export const ToggleSortBy = ({value, onChange, keys}: Props) => (
+export const ToggleSortBy = ({value, onChange, kbs}: Props) => (
   <>
     <ToggleMenuItem name='sort-by' value={value} onChange={onChange} values={values} />
-    <Kbd keys={keys} onKeypress={() => onChange(toggle(value))} />
+    <Kbd keys={kbs} onKeypress={() => onChange(toggle(value))} />
   </>
 )

ui/src/articles/components/ToggleSortOrder.tsx

@@ -5,7 +5,7 @@ import { SortOrder } from '../models'
 interface Props {
   value: SortOrder
   onChange: (order: SortOrder) => void
-  keys: string
+  kbs: string
 }
 
 const values: {
@@ -27,9 +27,9 @@ const values: {
 
 const toggle = (value: SortOrder) => value === 'asc' ? 'desc' : 'asc'
 
-export const ToggleSortOrder = ({value, onChange, keys}: Props) => (
+export const ToggleSortOrder = ({value, onChange, kbs}: Props) => (
   <>
     <ToggleMenuItem name='sort-order' value={value} onChange={onChange} values={values} />
-    <Kbd keys={keys} onKeypress={() => onChange(toggle(value))} />
+    <Kbd keys={kbs} onKeypress={() => onChange(toggle(value))} />
   </>
 )

ui/src/articles/components/ToggleView.tsx

@@ -7,7 +7,7 @@ type ViewMode = ArticleStatus | 'starred'
 interface Props {
   value: ViewMode
   onChange: (value: ViewMode) => void
-  keys: string
+  kbs: string
 }
 
 const values: {
@@ -42,9 +42,9 @@ const toggle = (value: ViewMode) => value === 'inbox' ? 'to_read'
   : value === 'read' ? 'starred'
   : 'inbox'
 
-export const ToggleView = ({value, onChange, keys}: Props) => (
+export const ToggleView = ({value, onChange, kbs}: Props) => (
   <>
     <ToggleMenuItem name='view-mode' value={value} onChange={onChange} values={values} />
-    <Kbd keys={keys} onKeypress={() => onChange(toggle(value))} />
+    <Kbd keys={kbs} onKeypress={() => onChange(toggle(value))} />
   </>
 )

ui/src/articles/components/context-menu/ArticleContextMenu.tsx

@@ -20,7 +20,7 @@ export const ArticleContextMenu = (props: Props) => {
   const isOnline = !props.article.isOffline
 
   return (
-    <DrawerMenu title={title}>
+    <DrawerMenu title={title} kbs={props.keyboard ? 'm' : ''}>
       <ul>
         {props.showEditModal && (
           <li>

ui/src/components/DrawerMenu.tsx

@@ -2,18 +2,23 @@ import React, { createRef, CSSProperties, FC, PropsWithChildren, useCallback, us
 import Drawer from 'react-bottom-drawer'
 
 import { ButtonIcon } from '.'
+import { useKeyboard } from '../hooks'
 
 interface Props extends PropsWithChildren {
   style?: CSSProperties
   title?: string
   icon?: string
+  kbs?: string
 }
 
 export const DrawerMenu: FC<Props> = (props) => {
-  const { children, icon = 'more_vert', ...attrs } = props
+  const { children, icon = 'more_vert', kbs, ...attrs } = props
   const [isVisible, setIsVisible] = useState(false)
   const ref = createRef<HTMLDivElement>()
 
+  const toggle = React.useCallback(() => {
+    setIsVisible(!isVisible)
+  }, [isVisible])
   const onClose = React.useCallback(() => {
     setIsVisible(false)
   }, [])
@@ -33,6 +38,9 @@ export const DrawerMenu: FC<Props> = (props) => {
     }
   }, [handleClickOutside])
 
+  useKeyboard(kbs, toggle, !!kbs)
+  attrs.title += kbs ? ` [${kbs}]` : ''
+  
   return (
     <>
       <ButtonIcon icon={icon} {...attrs} onClick={handleClickMenu} />

ui/src/components/DropDownMenu.tsx

@@ -44,13 +44,6 @@ export const DropDownMenu: FC<Props> = (props) => {
       const $el = e.target
       if (!($el instanceof Element)) return
       if (ref.current && !ref.current.contains($el)) {
-        /*
-        const isButton = $el.parentElement && $el.parentElement.tagName === 'BUTTON'
-        const $details = $el.closest('details')
-        if (!isButton || $details !== ref.current) {
-          ref.current.removeAttribute('open')
-        }
-        */
         ref.current.removeAttribute('open')
       }
     },
@@ -70,7 +63,7 @@ export const DropDownMenu: FC<Props> = (props) => {
       document.removeEventListener('click', handleClickOutside, { capture: true })
     }
   }, [handleClickOutside])
-
+  
   return (
     <details ref={ref} className={styles.menu}>
       <summary>

ui/src/components/Shortcuts.tsx

@@ -17,7 +17,7 @@ export const Shortcuts = () => (
           Toggle sort by (if starred)<kbd>shift+b</kbd>
         </li>
         <li>
-          Mark all as read (if category or main list)<kbd>shift+m</kbd>
+          Mark all as read (if category or main list)<kbd>shift+del</kbd>
         </li>
         <li>
           Toggle history list (if category)<kbd>shift+h</kbd>
@@ -46,7 +46,10 @@ export const Shortcuts = () => (
       <h1>Article</h1>
       <ul>
         <li>
-          Toggle read status<kbd>m</kbd>
+          Mark article as read<kbd>del</kbd>
+        </li>
+        <li>
+          Mark article as unread<kbd>ins</kbd>
         </li>
         <li>
           Read article later<kbd>r</kbd>
@@ -66,6 +69,9 @@ export const Shortcuts = () => (
         <li>
           Save to default archive service<kbd>shift+s</kbd>
         </li>
+        <li>
+          Open article menu<kbd>m</kbd>
+        </li>
         <li>
           Back to list<kbd>backspace</kbd>
         </li>