refac
This commit is contained in:
Timothy Jaeryang Baek committed
1 parent
1760b073c7
commit
343eb1d659
22 files changed
+572
-308
No files matched your search
@@ -1,47 +1,116 @@
|
||||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { shortcuts } from '$lib/shortcuts';
|
||||
import { updateUserSettings } from '$lib/apis/users';
|
||||
import {
|
||||
DEFAULT_KEYBINDINGS,
|
||||
eventToChord,
|
||||
formatChord,
|
||||
isConfigurableShortcut,
|
||||
keybindings,
|
||||
resetKeybindings,
|
||||
Shortcut,
|
||||
shortcuts
|
||||
} from '$lib/shortcuts';
|
||||
import type { KeybindingsMap, ShortcutDefinition } from '$lib/shortcuts';
|
||||
import { settings } from '$lib/stores';
|
||||
import ShortcutItem from '../ShortcutItem.svelte';
|
||||
|
||||
type ShortcutDefinition = NonNullable<(typeof shortcuts)[keyof typeof shortcuts]>;
|
||||
type CategorizedShortcuts = {
|
||||
[category: string]: ShortcutDefinition[];
|
||||
type ShortcutEntry = {
|
||||
id: Shortcut;
|
||||
shortcut: ShortcutDefinition;
|
||||
};
|
||||
type CategorizedShortcuts = {
|
||||
[category: string]: ShortcutEntry[];
|
||||
};
|
||||
type I18nStore = Writable<{
|
||||
t: (key: string, options?: Record<string, unknown>) => string;
|
||||
}>;
|
||||
|
||||
const i18n: Writable<any> = getContext('i18n');
|
||||
const i18n: I18nStore = getContext('i18n');
|
||||
|
||||
let categorizedShortcuts: CategorizedShortcuts = {};
|
||||
let isMac = false;
|
||||
let recordingShortcut: Shortcut | null = null;
|
||||
|
||||
onMount(() => {
|
||||
isMac = /Mac/i.test(navigator.userAgent);
|
||||
});
|
||||
|
||||
$: {
|
||||
const allShortcuts = Object.values(shortcuts).filter((shortcut) => {
|
||||
const allShortcuts = Object.entries(shortcuts).filter(([, shortcut]) => {
|
||||
if (!shortcut.setting) {
|
||||
return true;
|
||||
}
|
||||
return ($settings as Record<string, any>)[shortcut.setting.id] === shortcut.setting.value;
|
||||
});
|
||||
return ($settings as Record<string, unknown>)[shortcut.setting.id] === shortcut.setting.value;
|
||||
}) as [Shortcut, ShortcutDefinition][];
|
||||
|
||||
categorizedShortcuts = allShortcuts.reduce<CategorizedShortcuts>((acc, shortcut) => {
|
||||
categorizedShortcuts = allShortcuts.reduce<CategorizedShortcuts>((acc, [id, shortcut]) => {
|
||||
const category = shortcut.category;
|
||||
if (!acc[category]) {
|
||||
acc[category] = [];
|
||||
}
|
||||
acc[category].push(shortcut);
|
||||
acc[category].push({ id, shortcut });
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
|
||||
const saveKeybindings = async (next: KeybindingsMap) => {
|
||||
keybindings.set(next);
|
||||
await updateUserSettings(localStorage.token, { keybindings: next });
|
||||
};
|
||||
|
||||
const setBinding = async (id: Shortcut, chord: string) => {
|
||||
if (!isConfigurableShortcut(id)) return;
|
||||
await saveKeybindings({ ...$keybindings, [id]: chord });
|
||||
};
|
||||
|
||||
const resetBindings = async () => {
|
||||
resetKeybindings();
|
||||
await updateUserSettings(localStorage.token, { keybindings: DEFAULT_KEYBINDINGS });
|
||||
};
|
||||
|
||||
const getConflict = (id: Shortcut, chord: string): Shortcut | null => {
|
||||
if (!isConfigurableShortcut(id) || !chord) return null;
|
||||
for (const [otherId, otherChord] of Object.entries($keybindings)) {
|
||||
if (otherId !== id && otherChord === chord) return otherId as Shortcut;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleRecordingKeydown = async (event: KeyboardEvent) => {
|
||||
if (!recordingShortcut) return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
recordingShortcut = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const chord = eventToChord(event);
|
||||
if (!chord) return;
|
||||
|
||||
await setBinding(recordingShortcut, chord);
|
||||
recordingShortcut = null;
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleRecordingKeydown} />
|
||||
|
||||
<div id="tab-shortcuts" class="flex h-full flex-col text-sm">
|
||||
<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
|
||||
{$i18n.t('Keyboard Shortcuts')}
|
||||
</h2>
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
{$i18n.t('Keyboard Shortcuts')}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
class="text-[0.625rem] text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300"
|
||||
on:click={resetBindings}
|
||||
>
|
||||
{$i18n.t('Reset Defaults')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
|
||||
<div class="flex items-center gap-2 px-1 pb-1">
|
||||
@@ -99,8 +168,55 @@
|
||||
<!-- {$i18n.t('Voice')} -->
|
||||
<!-- {$i18n.t('Toggle Mute')} -->
|
||||
<!-- {$i18n.t('Only active during Voice Mode.')} -->
|
||||
{#each items as shortcut}
|
||||
<ShortcutItem {shortcut} {isMac} />
|
||||
<!-- {$i18n.t('Reset Defaults')} -->
|
||||
<!-- {$i18n.t('Press keys...')} -->
|
||||
<!-- {$i18n.t('Unassigned')} -->
|
||||
<!-- {$i18n.t('Also bound to {{action}}')} -->
|
||||
{#each items as { id, shortcut }}
|
||||
{@const configurable = isConfigurableShortcut(id)}
|
||||
{@const chord = configurable ? $keybindings[id] : ''}
|
||||
{@const conflict = configurable ? getConflict(id, chord) : null}
|
||||
<div class="flex min-h-8 w-full items-center gap-3 px-1 py-1.5">
|
||||
<ShortcutItem {id} {shortcut} {isMac} compact />
|
||||
|
||||
<div class="flex w-[9.5rem] shrink-0 items-center justify-end gap-1">
|
||||
{#if configurable}
|
||||
{#if recordingShortcut === id}
|
||||
<span
|
||||
class="inline-flex min-h-[1.125rem] items-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
|
||||
>
|
||||
{$i18n.t('Press keys...')}
|
||||
</span>
|
||||
{:else if chord}
|
||||
<button
|
||||
class="inline-flex min-h-[1.125rem] items-center rounded-full bg-gray-100 px-[0.4375rem] py-0.5 text-center text-[0.625rem] font-medium leading-none text-gray-500 dark:bg-white/6 dark:text-gray-400"
|
||||
title={$i18n.t('Click to rebind')}
|
||||
on:click={() => (recordingShortcut = id)}
|
||||
>
|
||||
{formatChord(chord)}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="text-[0.625rem] text-gray-500 transition hover:text-gray-400 dark:text-gray-600"
|
||||
on:click={() => (recordingShortcut = id)}
|
||||
>
|
||||
{$i18n.t('Unassigned')}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if conflict}
|
||||
<span
|
||||
class="text-[0.5625rem] text-amber-500"
|
||||
title={$i18n.t('Also bound to {{action}}', {
|
||||
action: $i18n.t(shortcuts[conflict]?.name ?? conflict)
|
||||
})}>!</span
|
||||
>
|
||||
{/if}
|
||||
{:else}
|
||||
<ShortcutItem {id} {shortcut} {isMac} keysOnly />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user