Add key hints

Author: TommyX12

src/renderer/components/RecordDialog.module.css

@@ -22,6 +22,41 @@
   justify-content: center;
 }
 
+.keyHintRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 10px;
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.keyHintContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
 .leftMargin {
   margin-left: 7px;
 }
+
+.keyHint {
+  font-size: 0.8em;
+  margin-right: 5px;
+  padding: 1px 3px;
+  border-radius: 2px;
+  background-color: #88888822;
+  border: 1px solid #88888844;
+}
+
+.keyHintText {
+  font-size: 0.85em;
+  margin-right: 20px;
+}
+
+.disabledKeyHint {
+  opacity: 0.5;
+}

src/renderer/components/RecordDialog.tsx

@@ -21,6 +21,7 @@ import { QuickAddActionDialog } from './QuickAddActionDialog';
 import { RecordModel } from '../data/data-model';
 import { DateInput2 } from '@blueprintjs/datetime2';
 import { TimePrecision } from '@blueprintjs/datetime';
+import classNames from 'classnames';
 
 export interface EditRecordProps {
   recordReferenceSignature: RecordReferenceSignature;
@@ -267,9 +268,11 @@ export function RecordDialog({
               setActionNameString(event.target.value);
             }}
             rightElement={
-              <Button icon="plus" onClick={forceCreate}>
-                Create
-              </Button>
+              actionNameString.length > 0 ? (
+                <Button icon="plus" onClick={forceCreate}>
+                  Create
+                </Button>
+              ) : undefined
             }
           />
         </div>
@@ -285,6 +288,28 @@ export function RecordDialog({
           />
         </div>
       </div>
+      <div className={classNames(styles.keyHintRow)}>
+        <div className={styles.keyHintContainer}>
+          <div className={styles.keyHint}>enter</div>
+          <div className={styles.keyHintText}>Confirm</div>
+        </div>
+        <div
+          className={classNames(styles.keyHintContainer, {
+            [styles.disabledKeyHint]: actionNameString.length === 0,
+          })}
+        >
+          <div className={styles.keyHint}>shift + enter</div>
+          <div className={styles.keyHintText}>Create</div>
+        </div>
+        <div className={styles.keyHintContainer}>
+          <div className={styles.keyHint}>up / ctrl+k</div>
+          <div className={styles.keyHintText}>Previous</div>
+        </div>
+        <div className={styles.keyHintContainer}>
+          <div className={styles.keyHint}>down / ctrl+j</div>
+          <div className={styles.keyHintText}>Next</div>
+        </div>
+      </div>
       <div className={styles.actionFinder}>
         <ActionFinder
           ref={actionFinderRef}