chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

implemented a quick and dirty command palette

Browse source
This commit is contained in:
Chris Kruining 2024-10-22 13:57:49 +02:00
parent a6fc5720d4
commit e363ee1844
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
4 changed files with 302 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

36
src/routes/(editor).tsx
View file

@ -1,27 +1,39 @@
import { Title } from "@solidjs/meta";
import { ParentProps, Show } from "solid-js";
import { Component, createEffect, createMemo, createSignal, For, ParentProps, Show } from "solid-js";
import { BsTranslate } from "solid-icons/bs";
import { FilesProvider } from "~/features/file";
import { MenuProvider, asMenuRoot } from "~/features/menu";
import { CommandPalette, CommandPaletteApi, MenuProvider, asMenuRoot, useMenu } from "~/features/menu";
import { isServer } from "solid-js/web";
import { A } from "@solidjs/router";
import { createCommand, Modifier } from "~/features/command";
asMenuRoot // prevents removal of import
export default function Editor(props: ParentProps) {
const supported = isServer || typeof window.showDirectoryPicker === 'function';
const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
return <MenuProvider>
const supported = isServer || typeof window.showDirectoryPicker === 'function';
const commands = [
createCommand('open command palette', () => {
commandPalette()?.show();
}, { key: 'p', modifier: Modifier.Control | Modifier.Shift }),
];
return <MenuProvider commands={commands}>
<Title>Translation-Tool</Title>
<nav use:asMenuRoot>
<A class="logo" href="/"><BsTranslate /></A>
</nav>
<main inert={commandPalette()?.open()}>
<nav use:asMenuRoot>
<A class="logo" href="/"><BsTranslate /></A>
</nav>
<Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
<FilesProvider>
{props.children}
</FilesProvider>
</Show>
<Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
<FilesProvider>
{props.children}
</FilesProvider>
</Show>
</main>
<CommandPalette api={setCommandPalette} />
</MenuProvider>
}

27
src/routes/(editor)/edit.tsx
View file

@ -158,12 +158,8 @@ export default function Edit(props: ParentProps) {
const entry = _entries.get(key);
const localEntry = entry?.[lang];
console.log(entry, localEntry);
// TODO :: this is not really a matrix, we should resolve the file when one does not exist
//
// happy path :: When we do have both an entry and localEntry and the localEntry has an id and that file is found
// TODO :: try to resolve to a file
//
// | | entry | localEntry | id | file |
// |---|-------!------------|----!------!
// | 1 | x | x | x | x |
@ -171,11 +167,30 @@ export default function Edit(props: ParentProps) {
// | 3 | x | x | | |
// | 4 | x | | | |
// | 5 | | | | |
//
// 1. happy path
// 2. weird edge case
// 3. this language never had a file before. peek at at another language and create a new file with a mathing path
// 4. error?
// 5. error?
if (!localEntry) {
throw new Error('invalid edge case???');
}
if (localEntry.id === undefined) {
const [, alternativeLocalEntry] = Object.entries(entry).find(([l, e]) => l !== lang && e.id !== undefined) ?? [];
if (alternativeLocalEntry === undefined) {
// unable to find alternative. show a picker instead?
return;
}
const file = findFile(tree(), alternativeLocalEntry.id);
console.log('alt', file);
}
const file = findFile(tree(), localEntry.id);
const fileExists = file !== undefined;