feat(ui): show template shortcut in the ui list

stdword · Aug 23, 2024 · 6d5b3da · 6d5b3da
1 parent f7d8729
commit 6d5b3da
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 10 deletions.
diff --git a/src/ui/insert.css b/src/ui/insert.css
@@ -201,9 +201,9 @@ div {
 
 .cell {
     align-items: center;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
     width: 100%;
     display: inline-grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
 .cell-left {
@@ -215,27 +215,34 @@ div {
 .cell-under {
     display: flex;
     grid-row: 2;
-    grid-column: span 3;
+    grid-column: 1/span 3;
 
     opacity: .5;
     font-size: 12px;
 }
 
 .cell-right {
     justify-content: flex-end;
-    display: flex;
     grid-row: 1/span 2;
     grid-column: span 1/span 1;
+
+    display: inline-grid;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
 }
 
 .label {
+    grid-row: 1;
+    grid-column: 1/span 1;
+
+    display: flex;
+    justify-content: flex-end;
+
     white-space: nowrap;
     opacity: .4;
 
     border-radius: var(--ls-border-radius-low);
     -webkit-border-radius: var(--ls-border-radius-low);
     line-height: 1.45;
-    padding: 3px 5px!important;
 
     color: var(--fht-label-text, var(--lx-accent-11, var(--ls-page-inline-code-color)));
     font-family: MonoLisa,Fira Code,Monaco,Menlo,Consolas,COURIER NEW,monospace;
@@ -245,6 +252,49 @@ div {
     text-rendering: optimizeSpeed;
 }
 
+.shortcut {
+    grid-row: 2;
+    grid-column: 1/span 1;
+
+    display: inline-flex;
+    margin-left: auto;
+
+    gap: 0.1rem;
+    opacity: 0.8;
+}
+
+.shortcut.mac > .tile {
+    letter-spacing: 2px;
+}
+
+.shortcut > .tile {
+    display: inline-flex;
+    height: 1.25rem;
+
+    font-family: system-ui;
+    line-height: 1rem;
+    font-weight: 400;
+    font-size: .75rem;
+
+    padding: 0 0.25rem 0 0.375rem;
+    border-radius: 0.25rem;
+
+    white-space: nowrap;
+    justify-content: center;
+    align-items: center;
+
+    color: var(--ls-primary-text-color);
+    background-color: var(--ls-quaternary-background-color);
+    box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,.15), inset 0 -1px 0 0 rgba(0,0,0,.15);
+}
+.item.selected .shortcut {
+    opacity: 1;
+}
+.item.selected .shortcut > .tile {
+    background-color: var(--ls-tertiary-background-color);
+    box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,.20), inset 0 -1px 0 0 rgba(0,0,0,.25);
+}
+
 mark {
     background-color: var(--fht-hightlight, var(--lx-accent-09-alpha, var(--ls-page-mark-bg-color)));
     color: var(--ls-page-mark-color);

diff --git a/src/ui/insert.tsx b/src/ui/insert.tsx
@@ -6,35 +6,36 @@ import fuzzysort from 'fuzzysort'
 import './insert.css'
 import { Template } from '../template'
 import { insertTemplate } from '../logic'
-import { PropertiesUtils } from '../utils'
+import { humanizeShortcut, isMacOS, PropertiesUtils } from '../utils'
 
 
-export const isMacOS = navigator.userAgent.toUpperCase().indexOf('MAC') >= 0
 export const shortcutToOpenInsertUI = [
     {label: 'Ctrl+T', key: 'ctrl+t'},
     {label: '⌘T', key: 'mod+t'},
 ]
 
-type DataItem = { uuid: string, name: string, name_: string, label: string, page: string }
+
+type DataItem = { uuid: string, name: string, name_: string, label: string, page: string, shortcut: string[] | null }
 type Data = DataItem[]
 
 
 async function prepareDataLogic(): Promise<Data> {
     const query = `
-        [:find ?uuid ?name ?label ?page
+        [:find ?uuid ?name ?page ?label ?shortcut
          :where
          [?b :block/properties ?ps]
          [?b :block/page ?p]
          [?p :block/original-name ?page]
          [?b :block/uuid ?uuid]
          [(get ?ps :${PropertiesUtils.templateProperty}) ?name]
          [(get ?ps :${PropertiesUtils.templateListAsProperty} "") ?label]
+         [(get ?ps :${PropertiesUtils.templateShortcutProperty} "") ?shortcut]
         ]
     `.trim()
 
     const result = await logseq.DB.datascriptQuery(query)
     const data = result
-        .map(([uuid, name, label, page]) => ({uuid, name, label, page}))
+        .map(([uuid, name, page, label, shortcut]) => ({uuid, name, page, label, shortcut}))
         .map((item) => {
             // clean .name
             item.name = item.name.trim()
@@ -43,6 +44,9 @@ async function prepareDataLogic(): Promise<Data> {
             // clean .label
             item.label = Template.cleanLabel(item.label)
 
+            // clean .shortcut
+            item.shortcut = humanizeShortcut(item.shortcut)
+
             return item
         })
 
@@ -417,7 +421,7 @@ function InsertUI({ blockUUIDs, isSelectedState }) {
                         <div id="results-wrap">
                             <div id="results">
                                 <div id="items">
-                                    {results.length ? results.map(({name, label, page}) => (
+                                    {results.length ? results.map(({name, label, page, shortcut}) => (
                                         <div className="item"
                                              onClick={insertHighlightedItem}
                                              onMouseDown={highlightItem}
@@ -433,6 +437,12 @@ function InsertUI({ blockUUIDs, isSelectedState }) {
                                                                     dangerouslySetInnerHTML={{ __html: label }}></code>
                                                             : ''
                                                         }
+                                                        { shortcut
+                                                            ?   <div className={isMacOS ? "shortcut mac" : "shortcut"}>
+                                                                    {shortcut.map((s) => <kbd className="tile">{s}</kbd>)}
+                                                                </div>
+                                                            : ''
+                                                        }
                                                     </div>
                                                     <span className="cell-under"
                                                           dangerouslySetInnerHTML={{ __html: page }}></span>

diff --git a/src/utils/logseq.ts b/src/utils/logseq.ts
@@ -4,6 +4,50 @@ import { escape, escapeForRegExp, f, indexOfNth, p, sleep } from './other'
 import { isEmptyString, isInteger, isUUID, unquote } from './parsing'
 
 
+export const isMacOS = navigator.userAgent.toUpperCase().indexOf('MAC') >= 0
+
+
+// source: https://gist.github.com/xyhp915/d1a6d151a99f31647a95e59cdfbf4ddc
+const shortcutNamesMap = {
+  'shift': ['Shift', '⇧'],
+  'ctrl': ['Ctrl', '^'],
+  'alt': ['Alt', '⌥'],
+  'mod': ['Mod', '⌘'],
+  'meta': ['Meta', '⌘'],
+  'win': 'Win',
+
+  'backspace': ['Backspace','⌫'],
+  'delete': ['Del', '⌦'],
+  'tab': ['Tab', '⇥'],
+  'enter': ['Enter', '↩︎'],
+
+  'insert': 'Ins',
+  'context': 'Context',
+
+  'pause': '⏸',
+  'caps-lock': ['CapsLock', '⇪'],
+  'esc': ['Esc', '⎋'],
+
+  'pg-up': ['PgUp', '⇞'],
+  'pg-down': ['PgDown', '⇟'],
+  'end': ['End', '↘'],
+  'home': ['Home', '↖'],
+  'left': '←',
+  'up': '↑',
+  'right': '→',
+  'down': '↓',
+  'space': '␣',
+
+  'semicolon': ';',
+  'equals': '=',
+  'dash': '-',
+
+  'open-square-bracket': '[',
+  'close-square-bracket': ']',
+  'single-quote': "'",
+}
+
+
 export type IBlockNode = {
     content: string | void,
     children: IBlockNode[],
@@ -16,6 +60,29 @@ export type IBlockNode = {
     },
 }
 
+
+export function humanizeShortcut(shortcut: string) {
+    function get(sh) {
+        const display = shortcutNamesMap[sh]
+        if (!display)
+            return sh
+        if (typeof display === 'string')
+            return display
+        if (isMacOS)
+            return display[1]
+        return display[0]
+    }
+
+    if (!shortcut)
+        return null
+
+    return shortcut
+        .split(' ')
+        .map(
+            (s) => s.split('+').map(get).join(isMacOS ? '' : '+')
+        )
+}
+
 export async function mapBlockTree(
     root: IBlockNode,
     callback: (b: IBlockNode, lvl: number, data?: any) => Promise<string | void>,