pages/search: improve usability

This commit is contained in:
He4eT 2024-01-21 04:52:33 +01:00
commit dbb7724253
3 changed files with 16 additions and 10 deletions

View file

@ -10,19 +10,25 @@ export const actionboxHandlers = (commandQuery, store, flush) => {
({ ({
'?': openHelp, '?': openHelp,
'x': closeCurrentTab, 'q': closeCurrentTab,
'r': reloadCurrentTab, 'r': reloadCurrentTab,
/* */ /* */
'f': switchToTab, 'f': switchToTab,
'd': closeTab, 'd': closeTab,
'c': duplicateTab, 'c': duplicateTab,
/* TODO */
// 'p': Pin or unpin the tab
// 'm': Mute or unmute the tab
// 's': Put the tab to sleep
// 'e': Pop the tab into it's own window with minimal UI
}[command] ?? noop(command))(store, label, flush) }[command] ?? noop(command))(store, label, flush)
} }
/* */ /* */
function openHelp () { function openHelp () {
const helpLink = 'https://github.com/He4eT/tabswitcher#Tabswitcher'
location.href = helpLink
} }
function closeCurrentTab () { function closeCurrentTab () {
@ -44,7 +50,6 @@ function switchToTab (store, label) {
const tab = getTabByLabel(store, label) const tab = getTabByLabel(store, label)
if (tab) { if (tab) {
store.actions.goToTab(tab.id) store.actions.goToTab(tab.id)
flush()
closeCurrentTab() closeCurrentTab()
} }
} }
@ -52,18 +57,18 @@ function switchToTab (store, label) {
function closeTab (store, label, flush) { function closeTab (store, label, flush) {
const tab = getTabByLabel(store, label) const tab = getTabByLabel(store, label)
if (tab) { if (tab) {
store.actions.closeTab(tab.id)
flush() flush()
store.actions.closeTab(tab.id)
} }
} }
function duplicateTab (store, label, flush) { function duplicateTab (store, label, flush) {
const tab = getTabByLabel(store, label) const tab = getTabByLabel(store, label)
if (tab) { if (tab) {
flush()
browser.tabs.create({ browser.tabs.create({
active: false, active: false,
url: tab.url, url: tab.url,
}).then(store.actions.updateState) }).then(store.actions.updateState)
flush()
} }
} }

View file

@ -80,11 +80,9 @@ export const attachInputHandlers = (store) => {
searchBox.addEventListener('keydown', (e) => { searchBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
let visibleTabs = store.getCurrentState().results let visibleTabs = store.getCurrentState().results
if (visibleTabs.length === 1) { if (visibleTabs.length > 0) {
const tabId = visibleTabs[0].obj.id const tabId = visibleTabs[0].obj.id
switchToTab(tabId) switchToTab(tabId)
} else {
actionbox.focus()
} }
} }
}) })

View file

@ -8,11 +8,14 @@
</head> </head>
<body> <body>
<header> <header>
<input type='search' id='searchbox' placeholder='Filter' autofocus /> <input type='search' id='searchbox' placeholder='Enter search terms' autofocus />
<input type='search' id='actionbox' placeholder='Action (? for help)' /> <input type='search' id='actionbox' placeholder='Action (? for help)' />
</header> </header>
<main id='searchResults'></main> <main id='searchResults'></main>
<script type="text/javascript" src="./vendor/fuzzysort.js"></script>
<!-- https://github.com/farzher/fuzzysort/blob/4096947da28d0831ee2a8ca67257c0b0c84915d1/fuzzysort.js -->
<script src="./vendor/fuzzysort.js"></script>
<!-- -->
<script type='module' src='./search.js'></script> <script type='module' src='./search.js'></script>
</body> </body>
</html> </html>