refac

src/lib/components/common/AccessButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { Writable } from 'svelte/store';
+	import type { i18n as i18nType } from 'i18next';
+
+	import LockClosed from '$lib/components/icons/LockClosed.svelte';
+
+	export let className = '';
+	export let disabled = false;
+
+	const i18n = getContext<Writable<i18nType>>('i18n');
+</script>
+
+<button
+	type="button"
+	class="flex shrink-0 items-center gap-1 rounded-lg bg-gray-50 px-2 py-1 text-xs font-normal text-gray-900 transition ring-1 ring-gray-200 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-850 dark:text-gray-100 dark:ring-gray-800 dark:hover:bg-gray-800 {className}"
+	{disabled}
+	on:click
+>
+	<LockClosed strokeWidth="2.5" className="size-3 shrink-0" />
+	<span class="shrink-0">{$i18n.t('Access')}</span>
+</button>

src/lib/components/common/HotkeyHint.svelte

@@ -1,19 +1,17 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { shortcuts } from '$lib/shortcuts';
-	import { settings } from '$lib/stores';
+	import { formatChord, isConfigurableShortcut, keybindings, shortcuts } from '$lib/shortcuts';
+	import type { Shortcut } from '$lib/shortcuts';
 
 	export let name: string;
 	export let className = '';
 
 	let isMac = false;
 	let mounted = false;
-	let keys: string[] = [];
 	let isVisible = true;
 
 	onMount(() => {
 		isMac = /Mac/i.test(navigator.userAgent);
-		keys = shortcuts[name]?.keys ?? [];
 		mounted = true;
 	});
 
@@ -26,12 +24,21 @@
 
 		return key;
 	}
+
+	function displayKeys(): string {
+		const id = name as Shortcut;
+		if (isConfigurableShortcut(id)) {
+			return formatChord($keybindings[id]);
+		}
+		const keys = shortcuts[id]?.keys ?? [];
+		return keys.map(formatKey).join(isMac ? '' : '+');
+	}
 </script>
 
 {#if mounted && isVisible}
 	<div
 		class="hidden md:flex items-center self-center text-xs text-gray-400 dark:text-gray-600 {className}"
 	>
-		<span>{keys.map(formatKey).join(isMac ? '' : '+')}</span>
+		<span>{displayKeys()}</span>
 	</div>
 {/if}