feat: improve shortcuts

packages/client/internals/Controls.vue

@@ -4,10 +4,12 @@ import SlidesOverview from './SlidesOverview.vue'
 import WebCamera from './WebCamera.vue'
 import RecordingDialog from './RecordingDialog.vue'
 import InfoDialog from './InfoDialog.vue'
+import Goto from './Goto.vue'
 </script>
 
 <template>
   <SlidesOverview v-model="showOverview" />
+  <Goto />
   <template v-if="__DEV__">
     <WebCamera />
     <RecordingDialog v-model="showRecordingDialog" />

packages/client/internals/Goto.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { whenever } from '@vueuse/core'
+import { nextTick, ref } from 'vue'
+import { go } from '../logic/nav'
+import { showGotoDialog } from '../state'
+
+const input = ref<HTMLInputElement>()
+const num = ref('')
+
+function goTo() {
+  const n = +num.value
+  if (!isNaN(n))
+    go(n - 1)
+  close()
+}
+
+function close() {
+  showGotoDialog.value = false
+}
+
+whenever(showGotoDialog, async() => {
+  num.value = ''
+  await nextTick()
+  input.value?.focus()
+})
+</script>
+
+<template>
+  <div
+    class="fixed right-5 bg-main transform transition-all"
+    :class="showGotoDialog ? 'top-5' : '-top-10'"
+    shadow="~"
+    p="x-4 y-2"
+    border="~ transparent rounded dark:(gray-400 opacity-25)"
+  >
+    <input
+      ref="input"
+      v-model="num"
+      type="number"
+      :disabled="!showGotoDialog"
+      class="outline-none bg-transparent"
+      placeholder="Goto..."
+      @keydown.enter="goTo"
+      @keydown.escape="close"
+      @blur="close"
+    />
+  </div>
+</template>
+
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

packages/client/logic/shortcuts.ts

@@ -1,5 +1,5 @@
 import { Fn, not, and, whenever } from '@vueuse/core'
-import { fullscreen, magicKeys, shortcutsEnabled, isInputing, toggleOverview } from '../state'
+import { fullscreen, magicKeys, shortcutsEnabled, isInputing, toggleOverview, showGotoDialog, showOverview } from '../state'
 import { toggleDark } from './dark'
 import { next, nextSlide, prev, prevSlide } from './nav'
 
@@ -19,5 +19,6 @@ shortcut('shift_left', prevSlide)
 shortcut('shift_right', nextSlide)
 shortcut('d', toggleDark)
 shortcut('f', () => fullscreen.toggle())
-shortcut('escape', toggleOverview)
 shortcut('o', toggleOverview)
+shortcut('escape', () => showOverview.value = false)
+shortcut('g', () => showGotoDialog.value = !showGotoDialog.value)

packages/client/state/index.ts

@@ -5,6 +5,7 @@ export const showOverview = ref(false)
 export const showEditor = ref(false)
 export const showRecordingDialog = ref(false)
 export const showInfoDialog = ref(false)
+export const showGotoDialog = ref(false)
 
 export const shortcutsEnabled = ref(true)
 export const query = useUrlSearchParams()