Add keyboard shortcuts: new, escape, and hard break (#552)

* Add keyboard shortcuts: new, escape, and hard break

* Add preferences modal

* Remove code accidentally re-added due to rebase

* Fix incorrect copy and lint

* Put stuff back so diffs are clearer

* Re-add invite codes to settings

* Address comments

* Tune the copy

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

7 files changed, 66 insertions, 26 deletions

diff --git a/src/state/models/ui/shell.ts b/src/state/models/ui/shell.ts
index 5942ec100..0b0da0001 100644
--- a/src/state/models/ui/shell.ts
+++ b/src/state/models/ui/shell.ts
@@ -11,6 +11,7 @@ export interface ConfirmModal {
   title: string
   message: string | (() => JSX.Element)
   onPressConfirm: () => void | Promise<void>
+  onPressCancel?: () => void | Promise<void>
 }
 
 export interface EditProfileModal {
@@ -86,10 +87,10 @@ export interface ContentFilteringSettingsModal {
 
 export type Modal =
   // Account
+  | AddAppPasswordModal
   | ChangeHandleModal
   | DeleteAccountModal
   | EditProfileModal
-  | AddAppPasswordModal
 
   // Curation
   | ContentFilteringSettingsModal
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 45e67d7cb..5c7594d61 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -88,6 +88,30 @@ export const ComposePost = observer(function ComposePost({
     autocompleteView.setup()
   }, [autocompleteView])
 
+  const onEscape = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        store.shell.openModal({
+          name: 'confirm',
+          title: 'Cancel draft',
+          onPressConfirm: onClose,
+          onPressCancel: () => {
+            store.shell.closeModal()
+          },
+          message: "Are you sure you'd like to cancel this draft?",
+        })
+      }
+    },
+    [store.shell, onClose],
+  )
+
+  useEffect(() => {
+    if (isDesktopWeb) {
+      window.addEventListener('keydown', onEscape)
+      return () => window.removeEventListener('keydown', onEscape)
+    }
+  }, [onEscape])
+
   const onPressAddLinkCard = useCallback(
     (uri: string) => {
       setExtLink({uri, isLoading: true})
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index 4abedb3e2..b56d306e2 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -4,6 +4,7 @@ import {RichText} from '@atproto/api'
 import {useEditor, EditorContent, JSONContent} from '@tiptap/react'
 import {Document} from '@tiptap/extension-document'
 import History from '@tiptap/extension-history'
+import Hardbreak from '@tiptap/extension-hard-break'
 import {Link} from '@tiptap/extension-link'
 import {Mention} from '@tiptap/extension-mention'
 import {Paragraph} from '@tiptap/extension-paragraph'
@@ -72,6 +73,7 @@ export const TextInput = React.forwardRef(
           }),
           Text,
           History,
+          Hardbreak,
         ],
         editorProps: {
           attributes: {
diff --git a/src/view/com/modals/AltImageRead.tsx b/src/view/com/modals/AltImageRead.tsx
index 4dde8f58b..985477287 100644
--- a/src/view/com/modals/AltImageRead.tsx
+++ b/src/view/com/modals/AltImageRead.tsx
@@ -34,8 +34,8 @@ export function Component({altText}: Props) {
         testID="altTextImageSaveBtn"
         onPress={onPress}
         accessibilityRole="button"
-        accessibilityLabel="Save"
-        accessibilityHint="Save alt text">
+        accessibilityLabel="Done"
+        accessibilityHint="Closes alt text modal">
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}
           start={{x: 0, y: 0}}
diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx
index c508c2d3a..11e1a6334 100644
--- a/src/view/com/modals/Confirm.tsx
+++ b/src/view/com/modals/Confirm.tsx
@@ -19,10 +19,12 @@ export function Component({
   title,
   message,
   onPressConfirm,
+  onPressCancel,
 }: {
   title: string
   message: string | (() => JSX.Element)
   onPressConfirm: () => void | Promise<void>
+  onPressCancel?: () => void | Promise<void>
 }) {
   const pal = usePalette('default')
   const store = useStores()
@@ -69,12 +71,23 @@ export function Component({
           style={[styles.btn]}
           accessibilityRole="button"
           accessibilityLabel="Confirm"
-          // TODO: This needs to be updated so that modal roles are clear;
-          // Currently there is only one usage for the confirm modal: post deletion
-          accessibilityHint="Confirms a potentially destructive action">
+          accessibilityHint="">
           <Text style={[s.white, s.bold, s.f18]}>Confirm</Text>
         </TouchableOpacity>
       )}
+      {onPressCancel === undefined ? null : (
+        <TouchableOpacity
+          testID="cancelBtn"
+          onPress={onPressCancel}
+          style={[styles.btnCancel, s.mt10]}
+          accessibilityRole="button"
+          accessibilityLabel="Cancel"
+          accessibilityHint="">
+          <Text type="button-lg" style={pal.textLight}>
+            Cancel
+          </Text>
+        </TouchableOpacity>
+      )}
     </View>
   )
 }
@@ -104,4 +117,12 @@ const styles = StyleSheet.create({
     marginHorizontal: 44,
     backgroundColor: colors.blue3,
   },
+  btnCancel: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 32,
+    padding: 14,
+    marginHorizontal: 20,
+  },
 })
diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx
index a6e0ba3fe..804d414b3 100644
--- a/src/view/com/util/forms/ToggleButton.tsx
+++ b/src/view/com/util/forms/ToggleButton.tsx
@@ -142,9 +142,11 @@ export function ToggleButton({
             ]}
           />
         </View>
-        <Text type="button" style={[labelStyle, styles.label]}>
-          {label}
-        </Text>
+        {label === '' ? null : (
+          <Text type="button" style={[labelStyle, styles.label]}>
+            {label}
+          </Text>
+        )}
       </View>
     </Button>
   )
@@ -154,6 +156,7 @@ const styles = StyleSheet.create({
   outer: {
     flexDirection: 'row',
     alignItems: 'center',
+    gap: 10,
   },
   circle: {
     width: 42,
@@ -161,7 +164,6 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     padding: 4,
     borderWidth: 1,
-    marginRight: 10,
   },
   circleFill: {
     width: 16,
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
index 4d21f8e2c..705c37b30 100644
--- a/src/view/screens/Settings.tsx
+++ b/src/view/screens/Settings.tsx
@@ -34,8 +34,8 @@ import {useCustomPalette} from 'lib/hooks/useCustomPalette'
 import {AccountData} from 'state/models/session'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
-import {pluralize} from 'lib/strings/helpers'
 import {isDesktopWeb} from 'platform/detection'
+import {pluralize} from 'lib/strings/helpers'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'>
 export const SettingsScreen = withAuthRequired(
@@ -54,6 +54,7 @@ export const SettingsScreen = withAuthRequired(
       light: {color: colors.blue3},
       dark: {color: colors.blue2},
     })
+
     const dangerBg = useCustomPalette<ViewStyle>({
       light: {backgroundColor: colors.red1},
       dark: {backgroundColor: colors.red7},
@@ -140,13 +141,12 @@ export const SettingsScreen = withAuthRequired(
     }, [store])
 
     return (
-      <View style={s.hContentRegion} testID="settingsScreen">
+      <View style={[s.hContentRegion]} testID="settingsScreen">
         <ViewHeader title="Settings" />
         <ScrollView
-          style={s.hContentRegion}
+          style={[s.hContentRegion]}
           contentContainerStyle={!isDesktopWeb && pal.viewLight}
           scrollIndicatorInsets={{right: 1}}>
-          <View style={styles.spacer20} />
           <View style={[s.flexRow, styles.heading]}>
             <Text type="xl-bold" style={pal.text}>
               Signed in as
@@ -161,9 +161,7 @@ export const SettingsScreen = withAuthRequired(
             <Link
               href={`/profile/${store.me.handle}`}
               title="Your profile"
-              noFeedback
-              accessibilityLabel={`Signed in as ${store.me.handle}`}
-              accessibilityHint="Double tap to sign out">
+              noFeedback>
               <View style={[pal.view, styles.linkCard]}>
                 <View style={styles.avi}>
                   <UserAvatar size={40} avatar={store.me.avatar} />
@@ -231,9 +229,7 @@ export const SettingsScreen = withAuthRequired(
               Add account
             </Text>
           </TouchableOpacity>
-
           <View style={styles.spacer20} />
-
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Invite a friend
           </Text>
@@ -301,9 +297,7 @@ export const SettingsScreen = withAuthRequired(
               Blocked accounts
             </Text>
           </Link>
-
           <View style={styles.spacer20} />
-
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Advanced
           </Text>
@@ -338,9 +332,7 @@ export const SettingsScreen = withAuthRequired(
               Change my handle
             </Text>
           </TouchableOpacity>
-
           <View style={styles.spacer20} />
-
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Danger zone
           </Text>
@@ -355,16 +347,14 @@ export const SettingsScreen = withAuthRequired(
               <FontAwesomeIcon
                 icon={['far', 'trash-can']}
                 style={dangerText as FontAwesomeIconStyle}
-                size={21}
+                size={18}
               />
             </View>
             <Text type="lg" style={dangerText}>
               Delete my account
             </Text>
           </TouchableOpacity>
-
           <View style={styles.spacer20} />
-
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Developer tools
           </Text>