feat: added preselected commands to the command palette

Author: CodeMyst

client/src/lib/CommandPalette.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import type { HighlightWords } from "highlight-words";
     import highlightWords from "highlight-words";
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
     import {
         baseCommandsStore,
         Close,
         getBaseCommands,
+        preselectedCommandStore,
         tempCommandsStore,
         type Command
     } from "./command";
@@ -47,6 +48,19 @@
         showingTempCommands = true;
     });
 
+    preselectedCommandStore.subscribe(async (cmd) => {
+        const command = commands.find((c) => c.name.toLowerCase() === cmd?.toLowerCase());
+
+        if (command) {
+            selectedCommand = command;
+            selectedCommand?.onHover?.();
+
+            await tick();
+
+            scrollIntoView(false);
+        }
+    });
+
     onMount(() => {
         cmdPalOpen.subscribe((val) => {
             if (val) {
@@ -127,13 +141,13 @@
         }
     };
 
-    const scrollIntoView = () => {
+    const scrollIntoView = (smooth: boolean = true) => {
         const index = filteredCommands.findIndex((cmd) => cmd === selectedCommand);
 
         if (index === -1) return;
 
         commandElements[index]?.scrollIntoView({
-            behavior: "smooth",
+            behavior: smooth ? "smooth" : "instant",
             block: "nearest"
         });
     };
@@ -165,6 +179,8 @@
 
             selectedCommand = filteredCommands[0];
             selectedCommand.onHover?.();
+
+            scrollIntoView(false);
         } else {
             // deselect commands
             isCommandSelected = false;
@@ -207,7 +223,7 @@
         }
     };
 
-    const open = () => {
+    const open = async () => {
         if (isOpen) return;
 
         // save the focused element
@@ -217,12 +233,23 @@
 
         searchElement?.focus();
 
-        selectedCommand = commands[0];
-        selectedCommand.onHover?.();
+        const preselectedCommand = commands.find(
+            (c) => c.name.toLowerCase() === $preselectedCommandStore?.toLowerCase()
+        );
+
+        if (preselectedCommand) {
+            selectedCommand = preselectedCommand;
+        } else {
+            selectedCommand = commands[0];
+        }
+
+        selectedCommand?.onHover?.();
 
         cmdPalOpen.set(true);
 
-        scrollIntoView();
+        await tick();
+
+        scrollIntoView(false);
     };
 
     const close = () => {

client/src/lib/Editor.svelte

@@ -7,7 +7,7 @@
     import { Compartment, EditorState } from "@codemirror/state";
     import { getLangs, getPopularLangNames, autodetectLanguage, type Language } from "./api/lang";
     import { tooltip } from "$lib/tooltips";
-    import { Close, setTempCommands, type Command } from "./command";
+    import { Close, setPreselectedCommand, setTempCommands, type Command } from "./command";
     import { cmdPalOpen, cmdPalTitle, themeStore } from "./stores.svelte";
     import { languages as cmLangs } from "@codemirror/language-data";
     import { isLanguageMarkdown } from "./utils/markdown";
@@ -249,6 +249,8 @@
                     cmdPalTitle.set("select indentation width (spaces)");
                     setTempCommands(getIndentWidthCommands(prevUnit, convertIndent));
 
+                    setPreselectedCommand(selectedIndentWidth.toString());
+
                     return Close.no;
                 }
             },
@@ -261,6 +263,8 @@
                     cmdPalTitle.set("select indentation width (tabs)");
                     setTempCommands(getIndentWidthCommands(prevUnit, convertIndent));
 
+                    setPreselectedCommand(selectedIndentWidth.toString());
+
                     return Close.no;
                 }
             }
@@ -295,6 +299,7 @@
 
     const onLanguageClick = async () => {
         setTempCommands(await getLanguageCommands());
+        if (selectedLanguage) setPreselectedCommand(selectedLanguage.name);
 
         cmdPalTitle.set("select language");
         cmdPalOpen.set(true);
@@ -303,6 +308,8 @@
     const onIndentClick = () => {
         setTempCommands(getIndentUnitCommands());
 
+        setPreselectedCommand(selectedIndentUnit);
+
         cmdPalTitle.set("select indentation unit");
         cmdPalOpen.set(true);
     };

client/src/lib/TabbedEditor.svelte

@@ -251,6 +251,18 @@
 
         return editor.getIndentUnitCommands(convertIndent);
     };
+
+    export const getSelectedLang = () => {
+        if (!editor) return undefined;
+
+        return editor.getSelectedLang();
+    };
+
+    export const getSelectedIndentationUnit = () => {
+        if (!editor) return undefined;
+
+        return editor.getIndentation()[0];
+    };
 </script>
 
 <svelte:window

client/src/lib/command.ts

@@ -21,6 +21,7 @@ let baseCommands: Command[] = [];
 
 export const baseCommandsStore: Writable<Command[]> = writable(baseCommands);
 export const tempCommandsStore: Writable<Command[]> = writable([]);
+export const preselectedCommandStore: Writable<string | undefined> = writable();
 
 export const getBaseCommands = (): Command[] => {
     return baseCommands;
@@ -42,6 +43,10 @@ export const setTempCommands = (commands: Command[]) => {
     tempCommandsStore.set(commands);
 };
 
+export const setPreselectedCommand = (command: string) => {
+    preselectedCommandStore.set(command);
+};
+
 export const getConfirmActionCommands = (confirmAction: CommandAction): Command[] => [
     {
         name: "yes",

client/src/routes/+layout.svelte

@@ -3,7 +3,13 @@
     import Footer from "$lib/Footer.svelte";
     import type { LayoutServerData } from "./$types";
     import CommandPalette from "$lib/CommandPalette.svelte";
-    import { Close, setBaseCommands, setTempCommands, type Command } from "$lib/command";
+    import {
+        Close,
+        setBaseCommands,
+        setPreselectedCommand,
+        setTempCommands,
+        type Command
+    } from "$lib/command";
     import { beforeNavigate, goto } from "$app/navigation";
     import ThemeContext from "$lib/ThemeContext.svelte";
     import { onMount, type Snippet } from "svelte";
@@ -98,6 +104,12 @@
                     cmdPalTitle.set("select a theme");
                     setTempCommands(themeCommands());
 
+                    if (data.settings.followSystemTheme && $systemThemeStore === "dark") {
+                        setPreselectedCommand(data.settings.darkTheme);
+                    } else {
+                        setPreselectedCommand(data.settings.theme);
+                    }
+
                     return Close.no;
                 }
             }

client/src/routes/+page.svelte

@@ -7,7 +7,13 @@
         type PasteCreateInfo,
         type PastyCreateInfo
     } from "$lib/api/paste";
-    import { addBaseCommands, Close, setTempCommands, type Command } from "$lib/command";
+    import {
+        addBaseCommands,
+        Close,
+        setPreselectedCommand,
+        setTempCommands,
+        type Command
+    } from "$lib/command";
     import PasteOptions from "$lib/PasteOptions.svelte";
     import {
         cmdPalOpen,
@@ -54,6 +60,7 @@
                 name: "set expires in",
                 action: () => {
                     setTempCommands(getExpiresInCommands());
+                    setPreselectedCommand(expiresInToLongString(selectedExpiresIn));
                     return Close.no;
                 }
             },
@@ -62,7 +69,11 @@
                 action: () => {
                     const cmds = editor.getLanguageCommands();
                     (async () => {
-                        if (cmds) setTempCommands(await cmds);
+                        if (cmds) {
+                            setTempCommands(await cmds);
+                            const selectedLang = editor.getSelectedLang();
+                            if (selectedLang) setPreselectedCommand(selectedLang.name);
+                        }
                     })();
                     return Close.no;
                 }
@@ -71,7 +82,11 @@
                 name: "set editor indentation",
                 action: () => {
                     const cmds = editor.getIndentUnitCommands();
-                    if (cmds) setTempCommands(cmds);
+                    if (cmds) {
+                        setTempCommands(cmds);
+                        const selectedIndentationUnit = editor.getSelectedIndentationUnit();
+                        if (selectedIndentationUnit) setPreselectedCommand(selectedIndentationUnit);
+                    }
                     return Close.no;
                 }
             },
@@ -150,6 +165,7 @@
 
     const openExpiresSelect = () => {
         setTempCommands(getExpiresInCommands());
+        setPreselectedCommand(expiresInToLongString(selectedExpiresIn));
 
         cmdPalTitle.set("select when the paste will expire");
         cmdPalOpen.set(true);

client/src/routes/settings/appearance/+page.svelte

@@ -2,7 +2,7 @@
     import { updateSettings } from "$lib/api/settings";
     import type { PageData } from "./$types";
     import { cmdPalOpen, cmdPalTitle, systemThemeStore, themeStore } from "$lib/stores.svelte";
-    import { Close, setTempCommands, type Command } from "$lib/command";
+    import { Close, setPreselectedCommand, setTempCommands, type Command } from "$lib/command";
     import { themes } from "$lib/themes";
     import Checkbox from "$lib/Checkbox.svelte";
 
@@ -70,18 +70,21 @@
 
     const onPasteViewClicked = () => {
         setTempCommands(getPasteViewCommands());
+        setPreselectedCommand(settings.pasteView);
         cmdPalTitle.set("select default paste view");
         cmdPalOpen.set(true);
     };
 
     const onThemeClicked = () => {
         setTempCommands(getThemeCommands(false));
+        setPreselectedCommand(settings.theme);
         cmdPalTitle.set("select the theme");
         cmdPalOpen.set(true);
     };
 
     const onDarkThemeClicked = () => {
         setTempCommands(getThemeCommands(true));
+        setPreselectedCommand(settings.darkTheme);
         cmdPalTitle.set("select the theme");
         cmdPalOpen.set(true);
     };

client/src/routes/settings/behaviour/+page.svelte

@@ -2,7 +2,7 @@
     import Checkbox from "$lib/Checkbox.svelte";
     import { getLangs, getPopularLangNames } from "$lib/api/lang";
     import { updateSettings } from "$lib/api/settings";
-    import { Close, setTempCommands, type Command } from "$lib/command";
+    import { Close, setPreselectedCommand, setTempCommands, type Command } from "$lib/command";
     import { cmdPalOpen, cmdPalTitle } from "$lib/stores.svelte";
     import type { PageData } from "./$types";
 
@@ -23,6 +23,7 @@
                     cmdPalTitle.set("select indentation width (spaces)");
 
                     setTempCommands(getIndentWidthCommands());
+                    setPreselectedCommand(settings.defaultIndentationWidth.toString());
 
                     updateSettings(fetch, settings);
 
@@ -34,7 +35,9 @@
                 action: () => {
                     settings.defaultIndentationUnit = "tabs";
                     cmdPalTitle.set("select indentation width (tabs)");
+
                     setTempCommands(getIndentWidthCommands());
+                    setPreselectedCommand(settings.defaultIndentationWidth.toString());
 
                     updateSettings(fetch, settings);
 
@@ -111,13 +114,15 @@
 
     const onDefaultLanguageClicked = async () => {
         setTempCommands(await getLanguageCommands());
+        setPreselectedCommand(settings.defaultLanguage);
 
         cmdPalTitle.set("select language");
         cmdPalOpen.set(true);
     };
 
     const onDefaultIndentationClicked = () => {
         setTempCommands(getIndentUnitCommands());
+        setPreselectedCommand(settings.defaultIndentationUnit);
 
         cmdPalTitle.set("select indentation unit");
         cmdPalOpen.set(true);