87 | ${[
88 | {
89 | text: html`${msg('Select')}`,
90 | kbdIcons: ['i-lucide-arrow-up', 'i-lucide-arrow-down'],
91 | },
92 | {
93 | text: html`${msg('Confirm')}`,
94 | kbdIcons: ['i-lucide-corner-down-left'],
95 | },
96 | {
97 | text: html`${msg('Close')}`,
98 | kbdIcons: ['i-mdi-keyboard-esc'],
99 | },
100 | ].map(
101 | (item) => html`
102 |
103 | ${item.kbdIcons.map(
104 | (icon) => html`
105 |
108 |
109 |
110 | `
111 | )}
112 | ${item.text}
113 |
114 | `
115 | )}
116 |
117 | `;
118 | }
119 |
120 | handleClearInput() {
121 | this.keyword = '';
122 | this.searchResult = undefined;
123 | this.inputRef.value!.value = '';
124 | this.inputRef.value!.focus();
125 | }
126 |
127 | renderItems() {
128 | return html`
147 | ${this.historyHits.length
148 | ? html`
149 |
150 | ${msg('Recent')}
151 |
152 |
156 | ${msg('Clear')}
157 |
158 |
159 |
160 | ${this.historyHits?.map((hit, index) =>
161 | this.renderListItem(hit, index, 'i-lucide-history')
162 | )}
163 |
`
164 | : this.renderEmpty()}
165 |
166 | `;
167 | }
168 |
169 | renderListItem(hit: HaloDocument, index: number, listIcon: string) {
170 | return html`
171 |