|
| 1 | +/** |
| 2 | + * The "Suggested shortcuts" card at the top of the Shortcuts route: sites the |
| 3 | + * user keeps going back to, each one click from a prefilled New shortcut form. |
| 4 | + * |
| 5 | + * It sits outside the rows and groups and writes nothing `applyFilter` owns. |
| 6 | + * Hiding it while a query is live is `applyFilter`'s call, on the host this |
| 7 | + * returns; this file never writes `hidden`. With nothing to offer it leaves the |
| 8 | + * host empty and `.suggest:empty` takes it off the page. |
| 9 | + * |
| 10 | + * A suggestion's name comes off a page title in the user's history, which is |
| 11 | + * untrusted text, so it reaches the DOM only through `el` (invariant 11). |
| 12 | + */ |
| 13 | + |
| 14 | +import { hasHistoryAccess, loadSuggestions, requestHistoryAccess } from '../../lib/history'; |
| 15 | +import { prefillFor } from '../../lib/suggest'; |
| 16 | +import type { Suggestion } from '../../lib/suggest'; |
| 17 | +import { prettyUrl } from '../../lib/text'; |
| 18 | +import { el } from '../../ui/dom'; |
| 19 | +import { button, iconButton, panelCard } from '../dom'; |
| 20 | +import { go } from '../router'; |
| 21 | +import { commitSettings, getCommands, getState, reportFailure } from '../store'; |
| 22 | + |
| 23 | +const TITLE = 'Suggested shortcuts'; |
| 24 | +const OFFER = |
| 25 | + 'Suggest shortcuts for sites you visit often. BunnyLol reads your browsing history on this device only; nothing leaves your browser.'; |
| 26 | + |
| 27 | +/** Returned empty and filled once the history has been read, which is async. */ |
| 28 | +export function renderSuggestions(): HTMLElement { |
| 29 | + const host = el('div', { class: 'suggest' }); |
| 30 | + void fill(host, false); |
| 31 | + return host; |
| 32 | +} |
| 33 | + |
| 34 | +async function fill(host: HTMLElement, refocus: boolean): Promise<void> { |
| 35 | + const granted = await hasHistoryAccess(); |
| 36 | + const found = granted ? await loadSuggestions(getCommands(), getState().settings) : []; |
| 37 | + // The page may have re-rendered while the history was being read, and taken |
| 38 | + // this host with it. |
| 39 | + if (!host.isConnected) return; |
| 40 | + host.textContent = ''; |
| 41 | + |
| 42 | + if (!granted) { |
| 43 | + const card = panelCard(TITLE, OFFER); |
| 44 | + card.body.append( |
| 45 | + el('div', { |
| 46 | + class: 'btn-row', |
| 47 | + children: [ |
| 48 | + // The request runs straight from the click: Chrome refuses one that |
| 49 | + // is not a direct response to a user gesture. |
| 50 | + button( |
| 51 | + 'Suggest shortcuts', |
| 52 | + () => |
| 53 | + void requestHistoryAccess().then((ok) => { |
| 54 | + if (ok) void fill(host, true); |
| 55 | + }), |
| 56 | + 'btn btn-sm', |
| 57 | + ), |
| 58 | + ], |
| 59 | + }), |
| 60 | + ); |
| 61 | + host.append(card.section); |
| 62 | + return; |
| 63 | + } |
| 64 | + if (found.length === 0) return; |
| 65 | + |
| 66 | + const card = panelCard(TITLE, 'Sites you keep going back to that no shortcut reaches yet.'); |
| 67 | + card.body.append( |
| 68 | + el('div', { class: 'rows', children: found.map((s) => suggestionRow(s, host)) }), |
| 69 | + ); |
| 70 | + host.append(card.section); |
| 71 | + // The button just pressed went out with the old card, which drops focus on |
| 72 | + // `<body>`; the first control of the new one is the nearest thing to it. |
| 73 | + if (refocus) host.querySelector('button')?.focus(); |
| 74 | +} |
| 75 | + |
| 76 | +function suggestionRow(s: Suggestion, host: HTMLElement): HTMLElement { |
| 77 | + return el('div', { |
| 78 | + class: 'row', |
| 79 | + children: [ |
| 80 | + el('div', { class: 'row-keys', children: [el('code', { class: 'chip', text: s.alias })] }), |
| 81 | + el('div', { |
| 82 | + class: 'row-body', |
| 83 | + children: [ |
| 84 | + el('div', { class: 'row-name', text: s.name }), |
| 85 | + el('div', { class: 'row-url', text: prettyUrl(s.url), title: s.url }), |
| 86 | + ], |
| 87 | + }), |
| 88 | + el('div', { |
| 89 | + class: 'row-actions', |
| 90 | + children: [ |
| 91 | + button( |
| 92 | + 'Add', |
| 93 | + () => go(`#new?prefill=${encodeURIComponent(prefillFor(s))}`), |
| 94 | + 'btn btn-sm', |
| 95 | + ), |
| 96 | + iconButton(`Dismiss ${s.name}`, 'close', () => { |
| 97 | + const settings = getState().settings; |
| 98 | + void commitSettings({ |
| 99 | + ...settings, |
| 100 | + dismissedSuggestions: [...settings.dismissedSuggestions, s.host], |
| 101 | + }).catch(reportFailure); |
| 102 | + // Our own write comes back as an echo, and an echo does not |
| 103 | + // re-render, so the card refills itself. `commitSettings` applies |
| 104 | + // the dismissal before it awaits, so the reload already skips it. |
| 105 | + void fill(host, true); |
| 106 | + }), |
| 107 | + ], |
| 108 | + }), |
| 109 | + ], |
| 110 | + }); |
| 111 | +} |
0 commit comments