Make Shift+Esc mark all columns as done instead of read

Author: brunolemos

packages/components/src/components/AppKeyboardShortcuts.tsx

@@ -85,7 +85,7 @@ export const AppKeyboardShortcuts = React.memo(() => {
   useMultiKeyPressCallback(
     ['Shift', 'Escape'],
     useCallback(() => {
-      dispatch(actions.markEverythingAsReadWithConfirmation())
+      dispatch(actions.clearAllColumnsWithConfirmation())
     }, []),
   )
 

packages/components/src/components/common/Button.tsx

@@ -1,5 +1,5 @@
 import { ThemeColors } from '@devhub/core'
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { StyleSheet, View, ViewProps } from 'react-native'
 
 import { useHover } from '../../hooks/use-hover'
@@ -20,6 +20,7 @@ import {
 import { ThemedView } from '../themed/ThemedView'
 
 export type ButtonProps = Omit<ThemedTouchableHighlightProps, 'children'> & {
+  autoFocus?: boolean
   children:
     | React.ReactNode
     | ((colors: { foregroundThemeColor: keyof ThemeColors }) => React.ReactNode)
@@ -54,6 +55,7 @@ export const defaultButtonSize = 40 * scaleFactor
 
 export function Button(props: ButtonProps) {
   const {
+    autoFocus,
     children,
     colors,
     contentContainerStyle,
@@ -140,6 +142,11 @@ export function Button(props: ButtonProps) {
     ),
   )
 
+  useEffect(() => {
+    if (autoFocus && innerTouchableRef.current)
+      innerTouchableRef.current.focus()
+  }, [autoFocus])
+
   return (
     <ThemedView
       ref={containerViewRef}
@@ -161,6 +168,7 @@ export function Button(props: ButtonProps) {
       <>
         <ThemedTouchableHighlight
           ref={innerTouchableRef}
+          accessibilityRole="button"
           backgroundColor={undefined}
           underlayColor={backgroundHoverThemeColor}
           {...otherProps}

packages/components/src/components/context/DialogContext.tsx

@@ -327,18 +327,22 @@ const DialogView = React.memo(
                                   return 'primary'
                                 })()
                               : 'neutral'
+
+                          const disabled =
+                            (!button.onPress && button.style !== 'cancel') ||
+                            (buttonType === 'primary' &&
+                              renderInput &&
+                              !inputValue)
+
                           return (
                             <Fragment
                               key={`dialog-button-${button.text || index}`}
                             >
                               <Button
-                                disabled={
-                                  (!button.onPress &&
-                                    button.style !== 'cancel') ||
-                                  (buttonType === 'primary' &&
-                                    renderInput &&
-                                    !inputValue)
+                                autoFocus={
+                                  buttonType === 'primary' && !disabled
                                 }
+                                disabled={disabled}
                                 onPress={() => {
                                   if (button.onPress) {
                                     button.onPress(inputValue || '')

packages/components/src/components/modals/KeyboardShortcutsModal.tsx

@@ -50,9 +50,9 @@ export const keyboardShortcutsById = {
     keys: ['Shift R'],
     description: 'Mark column as read/unread',
   },
-  markEverythingAsRead: {
+  markEverythingAsDone: {
     keys: ['Shift Esc'],
-    description: 'Mark everything as read, from all columns',
+    description: 'Mark all columns as done',
   },
   toggleSave: { keys: ['S'], description: 'Save/unsave item' },
   toggleDoneAllFromColumn: {
@@ -94,7 +94,7 @@ export const keyboardShortcuts = [
   keyboardShortcutsById.selectNextColumn,
   keyboardShortcutsById.toggleRead,
   keyboardShortcutsById.toggleReadAllFromColumn,
-  keyboardShortcutsById.markEverythingAsRead,
+  keyboardShortcutsById.markEverythingAsDone,
   keyboardShortcutsById.toggleSave,
   keyboardShortcutsById.toggleDoneAllFromColumn,
   keyboardShortcutsById.moveColumnLeft,

packages/components/src/redux/actions/columns.ts

@@ -216,6 +216,16 @@ export function setColumnClearedAtFilter(payload: {
   return createAction('SET_COLUMN_CLEARED_AT_FILTER', payload)
 }
 
+export function clearAllColumnsWithConfirmation(
+  payload: { clearedAt?: string | null } = {},
+) {
+  return createAction('CLEAR_ALL_COLUMNS_WITH_CONFIRMATION', payload)
+}
+
+export function clearAllColumns(payload: { clearedAt?: string | null } = {}) {
+  return createAction('CLEAR_ALL_COLUMNS', payload)
+}
+
 export function changeIssueNumberFilter(payload: {
   columnId: string
   issueNumber: number

packages/components/src/redux/reducers/columns.ts

@@ -694,13 +694,37 @@ export const columnsReducer: Reducer<State> = (
         const column = draft.byId[action.payload.columnId]
         if (!column) return
 
+        const now = new Date().toISOString()
+
         column.filters = column.filters || {}
         column.filters.clearedAt =
           action.payload.clearedAt === null
             ? undefined
-            : action.payload.clearedAt || new Date().toISOString()
+            : action.payload.clearedAt || now
 
-        draft.updatedAt = new Date().toISOString()
+        draft.updatedAt = now
+      })
+
+    case 'CLEAR_ALL_COLUMNS':
+      return immer(state, draft => {
+        if (!draft.byId) return
+
+        draft.allIds = draft.allIds || []
+
+        const now = new Date().toISOString()
+
+        draft.allIds.forEach(columnId => {
+          const column = draft.byId![columnId]
+          if (!column) return
+
+          column.filters = column.filters || {}
+          column.filters.clearedAt =
+            action.payload.clearedAt === null
+              ? undefined
+              : action.payload.clearedAt || now
+
+          draft.updatedAt = now
+        })
       })
 
     case 'CHANGE_ISSUE_NUMBER_FILTER':

packages/components/src/redux/sagas/columns.ts

@@ -1,5 +1,12 @@
 import { AppState, InteractionManager } from 'react-native'
-import { all, call, put, select, takeLatest } from 'redux-saga/effects'
+import {
+  all,
+  call,
+  put,
+  select,
+  takeEvery,
+  takeLatest,
+} from 'redux-saga/effects'
 
 import {
   ActivityColumnSubscriptionCreation,
@@ -214,13 +221,12 @@ function* onDeleteColumn(
   }
 }
 
-function* onSetClearedAt(
+function* onClearColumnOrColumns(
   action: ExtractActionFromActionCreator<
-    typeof actions.setColumnClearedAtFilter
+    typeof actions.setColumnClearedAtFilter | typeof actions.clearAllColumns
   >,
 ) {
-  if (!action.payload.clearedAt) return
-
+  if (action.payload.clearedAt === null) return
   yield put(actions.cleanupArchivedItems())
 }
 
@@ -405,10 +411,13 @@ function* onColumnSubscriptionFilterChange(
 
 export function* columnsSagas() {
   yield all([
-    yield takeLatest('ADD_COLUMN_AND_SUBSCRIPTIONS', onAddColumn),
-    yield takeLatest('MOVE_COLUMN', onMoveColumn),
-    yield takeLatest('DELETE_COLUMN', onDeleteColumn),
-    yield takeLatest('SET_COLUMN_CLEARED_AT_FILTER', onSetClearedAt),
+    yield takeEvery('ADD_COLUMN_AND_SUBSCRIPTIONS', onAddColumn),
+    yield takeEvery('MOVE_COLUMN', onMoveColumn),
+    yield takeEvery('DELETE_COLUMN', onDeleteColumn),
+    yield takeLatest(
+      ['SET_COLUMN_CLEARED_AT_FILTER', 'CLEAR_ALL_COLUMNS'],
+      onClearColumnOrColumns,
+    ),
     yield takeLatest(
       [
         'CLEAR_COLUMN_FILTERS',

packages/components/src/redux/sagas/subscriptions.ts

@@ -794,14 +794,19 @@ function* onMarkEverythingAsReadWithConfirmation(
   >,
 ) {
   const confirmed = yield new Promise(resolve => {
-    confirm('Mark all columns as read?', 'This cannot be undone.', {
-      confirmCallback() {
-        resolve(true)
-      },
-      cancelCallback() {
-        resolve(false)
+    confirm(
+      'Mark all as read?',
+      'All your GitHub notifications and all columns will be marked as read. ' +
+        'This cannot be undone.',
+      {
+        confirmCallback() {
+          resolve(true)
+        },
+        cancelCallback() {
+          resolve(false)
+        },
       },
-    })
+    )
   })
 
   if (!confirmed) return
@@ -810,6 +815,33 @@ function* onMarkEverythingAsReadWithConfirmation(
   yield _markAllGitHubNotificationsAsReadOrUnread({ unread: false })
 }
 
+function* onClearAllColumnsWithConfirmation(
+  _action: ExtractActionFromActionCreator<
+    typeof actions.clearAllColumnsWithConfirmation
+  >,
+) {
+  const confirmed = yield new Promise(resolve => {
+    confirm(
+      'Clear all columns?',
+      'All columns will become empty. ' +
+        'Your GitHub notifications will be marked as read. ' +
+        'This cannot be undone.',
+      {
+        confirmCallback() {
+          resolve(true)
+        },
+        cancelCallback() {
+          resolve(false)
+        },
+      },
+    )
+  })
+
+  if (!confirmed) return
+
+  yield put(actions.clearAllColumns())
+}
+
 export function* subscriptionsSagas() {
   yield all([
     yield fork(init),
@@ -836,6 +868,10 @@ export function* subscriptionsSagas() {
       'MARK_EVERYTHING_AS_READ_WITH_CONFIRMATION',
       onMarkEverythingAsReadWithConfirmation,
     ),
+    yield takeLatest(
+      'CLEAR_ALL_COLUMNS_WITH_CONFIRMATION',
+      onClearAllColumnsWithConfirmation,
+    ),
   ])
 }