elk/components/magickeys/MagickeysKeyboardShortcuts.vue

167 lines
5.1 KiB
Vue

<script setup lang="ts">
const emit = defineEmits(['close'])
const { t } = useI18n()
/* TODOs:
* - I18n
*/
interface ShortcutDef {
keys: string[]
isSequence: boolean
}
interface ShortcutItem {
description: string
shortcut: ShortcutDef
}
interface ShortcutItemGroup {
name: string
items: ShortcutItem[]
}
const isMac = useIsMac()
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
{
name: t('magic_keys.groups.navigation.title'),
items: [
{
description: t('magic_keys.groups.navigation.shortcut_help'),
shortcut: { keys: ['?'], isSequence: false },
},
{
description: t('magic_keys.groups.navigation.next_status'),
shortcut: { keys: ['j'], isSequence: false },
},
{
description: t('magic_keys.groups.navigation.previous_status'),
shortcut: { keys: ['k'], isSequence: false },
},
{
description: t('magic_keys.groups.navigation.go_to_search'),
shortcut: { keys: ['/'], isSequence: false },
},
{
description: t('magic_keys.groups.navigation.go_to_home'),
shortcut: { keys: ['g', 'h'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_notifications'),
shortcut: { keys: ['g', 'n'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_conversations'),
shortcut: { keys: ['g', 'c'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_favourites'),
shortcut: { keys: ['g', 'f'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_bookmarks'),
shortcut: { keys: ['g', 'b'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_explore'),
shortcut: { keys: ['g', 'e'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_local'),
shortcut: { keys: ['g', 'l'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_federated'),
shortcut: { keys: ['g', 't'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_lists'),
shortcut: { keys: ['g', 'i'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_settings'),
shortcut: { keys: ['g', 's'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_profile'),
shortcut: { keys: ['g', 'p'], isSequence: true },
},
],
},
{
name: t('magic_keys.groups.actions.title'),
items: [
{
description: t('magic_keys.groups.actions.search'),
shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
},
{
description: t('magic_keys.groups.actions.command_mode'),
shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
},
{
description: t('magic_keys.groups.actions.compose'),
shortcut: { keys: ['c'], isSequence: false },
},
{
description: t('magic_keys.groups.actions.show_new_items'),
shortcut: { keys: ['.'], isSequence: false },
},
{
description: t('magic_keys.groups.actions.favourite'),
shortcut: { keys: ['f'], isSequence: false },
},
{
description: t('magic_keys.groups.actions.boost'),
shortcut: { keys: ['b'], isSequence: false },
},
],
},
{
name: t('magic_keys.groups.media.title'),
items: [],
},
])
</script>
<template>
<div px-3 sm:px-5 py-2 sm:py-4 max-w-220 relative max-h-screen>
<button btn-action-icon absolute top-1 sm:top-2 right-1 sm:right-2 m1 :aria-label="$t('modals.aria_label_close')" @click="emit('close')">
<div i-ri:close-fill />
</button>
<h2 text-xl font-700 mb3>
{{ $t('magic_keys.dialog_header') }}
</h2>
<div mb2 grid grid-cols-1 md:grid-cols-3 gap-y- md:gap-x-6 lg:gap-x-8>
<div
v-for="group in shortcutItemGroups"
:key="group.name"
>
<h3 font-700 my-2 text-lg>
{{ group.name }}
</h3>
<div
v-for="item in group.items"
:key="item.description"
flex my-1 lg:my-2 justify-between place-items-center max-w-full text-base
>
<div mr-2 break-words overflow-hidden leading-4 h-full inline-block align-middle>
{{ item.description }}
</div>
<div>
<template
v-for="(key, idx) in item.shortcut.keys"
:key="idx"
>
<span v-if="idx !== 0" mx1 text-sm op80>{{ item.shortcut.isSequence ? $t('magic_keys.sequence_then') : '+' }}</span>
<code class="px2 md:px1.5 lg:px2 lg:px2 py0 lg:py-0.5" rounded bg-code border="px $c-border-code" shadow-sm my1 font-mono font-600>{{ key }}</code>
</template>
</div>
</div>
</div>
</div>
</div>
</template>