diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts index 0271c36..ddea6bf 100644 --- a/apps/desktop/src/lib/cmds/builtin.ts +++ b/apps/desktop/src/lib/cmds/builtin.ts @@ -115,16 +115,15 @@ export const builtinCmds: BuiltinCmd[] = [ goto("/troubleshooters/extension-loading") } }, - // { - // name: "Create Quicklink", - // iconifyIcon: "material-symbols:link", - // description: "Create a Quicklink", - // function: async () => { - // const appStateStore = useAppStateStore() - // appStateStore.setSearchTermSync("") - // goto("/create-quicklink") - // } - // }, + { + name: "Create Quicklink", + iconifyIcon: "material-symbols:link", + description: "Create a Quicklink", + function: async () => { + appState.clearSearchTerm() + goto("/extension/create-quick-link") + } + }, // { // name: "Settings", // iconifyIcon: "solar:settings-linear", diff --git a/apps/desktop/src/lib/cmds/index.ts b/apps/desktop/src/lib/cmds/index.ts index 3efc68d..a845ef1 100644 --- a/apps/desktop/src/lib/cmds/index.ts +++ b/apps/desktop/src/lib/cmds/index.ts @@ -2,6 +2,7 @@ import { CmdTypeEnum, CustomUiCmd, ExtPackageJsonExtra, TemplateUiCmd } from "@k import type { CommandLaunchers, OnExtCmdSelect } from "@kksh/ui/types" import * as v from "valibot" import { onCustomUiCmdSelect, onTemplateUiCmdSelect } from "./ext" +import { onQuickLinkSelect } from "./quick-links" const onExtCmdSelect: OnExtCmdSelect = ( ext: ExtPackageJsonExtra, @@ -20,4 +21,4 @@ const onExtCmdSelect: OnExtCmdSelect = ( } } -export const commandLaunchers = { onExtCmdSelect } satisfies CommandLaunchers +export const commandLaunchers = { onExtCmdSelect, onQuickLinkSelect } satisfies CommandLaunchers diff --git a/apps/desktop/src/lib/cmds/quick-links.ts b/apps/desktop/src/lib/cmds/quick-links.ts new file mode 100644 index 0000000..43662a4 --- /dev/null +++ b/apps/desktop/src/lib/cmds/quick-links.ts @@ -0,0 +1,25 @@ +import { appState } from "@/stores" +import type { CmdQuery, CmdValue } from "@kksh/ui/types" +import { open } from "tauri-plugin-shellx-api" + +/** + * Given some link like https://google.com/search?q={argument}&query={query} + * Find {argument} and {query} + */ +export function findAllArgsInLink(link: string): string[] { + const regex = /\{([^}]+)\}/g + const matches = [...link.matchAll(regex)] + return matches.map((match) => match[1]) +} + +export function onQuickLinkSelect(quickLink: CmdValue, queries: CmdQuery[]) { + console.log(quickLink, queries) + let qlink = quickLink.data + for (const arg of queries) { + console.log(`replace all {${arg.name}} with ${arg.value}`) + qlink = qlink.replaceAll(`{${arg.name}}`, arg.value) + } + appState.clearSearchTerm() + console.log(qlink) + open(qlink) +} diff --git a/apps/desktop/src/lib/components/main/CommandPalette.svelte b/apps/desktop/src/lib/components/main/CommandPalette.svelte deleted file mode 100644 index 2ae6ff1..0000000 --- a/apps/desktop/src/lib/components/main/CommandPalette.svelte +++ /dev/null @@ -1,89 +0,0 @@ - - - - - - - - - No results found. - {#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0} - - {/if} - {#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0} - - {/if} - - - - - - diff --git a/apps/desktop/src/lib/stores/appState.ts b/apps/desktop/src/lib/stores/appState.ts index 041a40e..7b6b737 100644 --- a/apps/desktop/src/lib/stores/appState.ts +++ b/apps/desktop/src/lib/stores/appState.ts @@ -1,5 +1,8 @@ +import { findAllArgsInLink } from "@/cmds/quick-links" +import { CmdTypeEnum } from "@kksh/api/models" import type { AppState } from "@kksh/types" -import { get, writable, type Writable } from "svelte/store" +import type { CmdValue } from "@kksh/ui/types" +import { derived, get, writable, type Writable } from "svelte/store" export const defaultAppState: AppState = { searchTerm: "", @@ -24,3 +27,13 @@ function createAppState(): Writable & AppStateAPI { } export const appState = createAppState() + +// export const cmdQueries = derived(appState, ($appState) => { +// if ($appState.highlightedCmd.startsWith("{")) { +// const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue +// if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) { +// return findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" })) +// } +// } +// return [] +// }) diff --git a/apps/desktop/src/lib/stores/cmdQuery.ts b/apps/desktop/src/lib/stores/cmdQuery.ts new file mode 100644 index 0000000..18bcb01 --- /dev/null +++ b/apps/desktop/src/lib/stores/cmdQuery.ts @@ -0,0 +1,23 @@ +import { findAllArgsInLink } from "@/cmds/quick-links" +import { CmdTypeEnum } from "@kksh/api/models" +import type { CmdQuery, CmdValue } from "@kksh/ui/main" +import { derived, get, writable, type Writable } from "svelte/store" +import { appState } from "./appState" + +function createCmdQueryStore(): Writable { + const store = writable([]) + appState.subscribe(($appState) => { + if ($appState.highlightedCmd.startsWith("{")) { + const parsedCmd = JSON.parse($appState.highlightedCmd) as CmdValue + if (parsedCmd.cmdType === CmdTypeEnum.QuickLink && parsedCmd.data) { + return store.set(findAllArgsInLink(parsedCmd.data).map((arg) => ({ name: arg, value: "" }))) + } + } + store.set([]) + }) + return { + ...store + } +} + +export const cmdQueries = createCmdQueryStore() diff --git a/apps/desktop/src/lib/stores/index.ts b/apps/desktop/src/lib/stores/index.ts index dec33b0..141acbc 100644 --- a/apps/desktop/src/lib/stores/index.ts +++ b/apps/desktop/src/lib/stores/index.ts @@ -3,3 +3,4 @@ export * from "./appState" export * from "./winExtMap" export * from "./extensions" export * from "./auth" +export * from "./quick-links" diff --git a/apps/desktop/src/lib/stores/quick-links.ts b/apps/desktop/src/lib/stores/quick-links.ts new file mode 100644 index 0000000..4dfb348 --- /dev/null +++ b/apps/desktop/src/lib/stores/quick-links.ts @@ -0,0 +1,41 @@ +import type { Icon } from "@kksh/api/models" +import { createQuickLinkCommand, getAllQuickLinkCommands } from "@kksh/extension/db" +import type { CmdQuery, QuickLink } from "@kksh/ui/types" +import { get, writable, type Writable } from "svelte/store" + +export interface QuickLinkAPI { + get: () => QuickLink[] + init: () => Promise + refresh: () => Promise + createQuickLink: (name: string, link: string, icon: Icon) => Promise +} + +function createQuickLinksStore(): Writable & QuickLinkAPI { + const store = writable([]) + + async function init() { + refresh() + } + + async function refresh() { + const cmds = await getAllQuickLinkCommands() + console.log(cmds) + + store.set(cmds.map((cmd) => ({ link: cmd.data.link, name: cmd.name, icon: cmd.data.icon }))) + } + + async function createQuickLink(name: string, link: string, icon: Icon) { + await createQuickLinkCommand(name, link, icon) + await refresh() + } + + return { + ...store, + get: () => get(store), + init, + refresh, + createQuickLink + } +} + +export const quickLinks = createQuickLinksStore() diff --git a/apps/desktop/src/lib/utils/command-score.ts b/apps/desktop/src/lib/utils/command-score.ts new file mode 100644 index 0000000..0e6c837 --- /dev/null +++ b/apps/desktop/src/lib/utils/command-score.ts @@ -0,0 +1,175 @@ +// This file is taken from https://github.com/huntabyte/bits-ui/blob/7f7bf6f6b736cf34e57a0d87aab01074c33efd46/packages/bits-ui/src/lib/bits/command/command.svelte.ts#L1 + +// eslint-disable-next-line ts/ban-ts-comment +// @ts-nocheck +// The scores are arranged so that a continuous match of characters will +// result in a total score of 1. +// +// The best case, this character is a match, and either this is the start +// of the string, or the previous character was also a match. +const SCORE_CONTINUE_MATCH = 1 +// A new match at the start of a word scores better than a new match +// elsewhere as it's more likely that the user will type the starts +// of fragments. +// NOTE: We score word jumps between spaces slightly higher than slashes, brackets +// hyphens, etc. +const SCORE_SPACE_WORD_JUMP = 0.9 +const SCORE_NON_SPACE_WORD_JUMP = 0.8 +// Any other match isn't ideal, but we include it for completeness. +const SCORE_CHARACTER_JUMP = 0.17 +// If the user transposed two letters, it should be significantly penalized. +// +// i.e. "ouch" is more likely than "curtain" when "uc" is typed. +const SCORE_TRANSPOSITION = 0.1 +// The goodness of a match should decay slightly with each missing +// character. +// +// i.e. "bad" is more likely than "bard" when "bd" is typed. +// +// This will not change the order of suggestions based on SCORE_* until +// 100 characters are inserted between matches. +const PENALTY_SKIPPED = 0.999 +// The goodness of an exact-case match should be higher than a +// case-insensitive match by a small amount. +// +// i.e. "HTML" is more likely than "haml" when "HM" is typed. +// +// This will not change the order of suggestions based on SCORE_* until +// 1000 characters are inserted between matches. +const PENALTY_CASE_MISMATCH = 0.9999 +// Match higher for letters closer to the beginning of the word +const PENALTY_DISTANCE_FROM_START = 0.9 +// If the word has more characters than the user typed, it should +// be penalised slightly. +// +// i.e. "html" is more likely than "html5" if I type "html". +// +// However, it may well be the case that there's a sensible secondary +// ordering (like alphabetical) that it makes sense to rely on when +// there are many prefix matches, so we don't make the penalty increase +// with the number of tokens. +const PENALTY_NOT_COMPLETE = 0.99 + +const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/ +const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g +const IS_SPACE_REGEXP = /[\s-]/ +const COUNT_SPACE_REGEXP = /[\s-]/g + +function commandScoreInner( + string, + abbreviation, + lowerString, + lowerAbbreviation, + stringIndex, + abbreviationIndex, + memoizedResults +) { + if (abbreviationIndex === abbreviation.length) { + if (stringIndex === string.length) { + return SCORE_CONTINUE_MATCH + } + return PENALTY_NOT_COMPLETE + } + + const memoizeKey = `${stringIndex},${abbreviationIndex}` + if (memoizedResults[memoizeKey] !== undefined) { + return memoizedResults[memoizeKey] + } + + const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex) + let index = lowerString.indexOf(abbreviationChar, stringIndex) + let highScore = 0 + + let score, transposedScore, wordBreaks, spaceBreaks + + while (index >= 0) { + score = commandScoreInner( + string, + abbreviation, + lowerString, + lowerAbbreviation, + index + 1, + abbreviationIndex + 1, + memoizedResults + ) + if (score > highScore) { + if (index === stringIndex) { + score *= SCORE_CONTINUE_MATCH + } else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) { + score *= SCORE_NON_SPACE_WORD_JUMP + wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP) + if (wordBreaks && stringIndex > 0) { + score *= PENALTY_SKIPPED ** wordBreaks.length + } + } else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) { + score *= SCORE_SPACE_WORD_JUMP + spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP) + if (spaceBreaks && stringIndex > 0) { + score *= PENALTY_SKIPPED ** spaceBreaks.length + } + } else { + score *= SCORE_CHARACTER_JUMP + if (stringIndex > 0) { + score *= PENALTY_SKIPPED ** (index - stringIndex) + } + } + + if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) { + score *= PENALTY_CASE_MISMATCH + } + } + + if ( + (score < SCORE_TRANSPOSITION && + lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1)) || + (lowerAbbreviation.charAt(abbreviationIndex + 1) === + lowerAbbreviation.charAt(abbreviationIndex) && // allow duplicate letters. Ref #7428 + lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex)) + ) { + transposedScore = commandScoreInner( + string, + abbreviation, + lowerString, + lowerAbbreviation, + index + 1, + abbreviationIndex + 2, + memoizedResults + ) + + if (transposedScore * SCORE_TRANSPOSITION > score) { + score = transposedScore * SCORE_TRANSPOSITION + } + } + + if (score > highScore) { + highScore = score + } + + index = lowerString.indexOf(abbreviationChar, index + 1) + } + + memoizedResults[memoizeKey] = highScore + return highScore +} + +function formatInput(string) { + // convert all valid space characters to space so they match each other + return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ") +} + +export function commandScore(string: string, abbreviation: string, aliases?: string[]): number { + /* NOTE: + * in the original, we used to do the lower-casing on each recursive call, but this meant that toLowerCase() + * was the dominating cost in the algorithm, passing both is a little ugly, but considerably faster. + */ + string = aliases && aliases.length > 0 ? `${`${string} ${aliases?.join(" ")}`}` : string + return commandScoreInner( + string, + abbreviation, + formatInput(string), + formatInput(abbreviation), + 0, + 0, + {} + ) +} diff --git a/apps/desktop/src/routes/+layout.svelte b/apps/desktop/src/routes/+layout.svelte index f0e2cfb..774f061 100644 --- a/apps/desktop/src/routes/+layout.svelte +++ b/apps/desktop/src/routes/+layout.svelte @@ -1,7 +1,7 @@ - + + { + return commandScore( + value.startsWith("{") ? (JSON.parse(value) as CmdValue).cmdName : value, + search, + keywords + ) + }} + loop +> + + {#snippet rightSlot()} + + {#each $cmdQueries as cmdQuery} + {@const queryWidth = Math.max(cmdQuery.name.length, cmdQuery.value.length) + 2} + { + if (evt.key === "Enter") { + evt.preventDefault() + evt.stopPropagation() + commandLaunchers.onQuickLinkSelect( + JSON.parse($appState.highlightedCmd), + $cmdQueries + ) + } + }} + bind:value={cmdQuery.value} + /> + {/each} + + + + + + + + + Settings + + exit()}>Quit + openDevTools()}>Open Dev Tools + getCurrentWebviewWindow().hide()} + >Close Window + + + + {/snippet} + + + No results found. + + {#if $appConfig.extensionsInstallDir && $devStoreExts.length > 0} + + + {/if} + {#if $appConfig.extensionsInstallDir && $installedStoreExts.length > 0} + + + {/if} + + + + + + + diff --git a/apps/desktop/src/routes/extension/create-quick-link/+page.svelte b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte new file mode 100644 index 0000000..828755f --- /dev/null +++ b/apps/desktop/src/routes/extension/create-quick-link/+page.svelte @@ -0,0 +1,110 @@ + + + + +
+
+

Create Quick Link

+
+ + + {#snippet children({ props })} + Name + + {/snippet} + + Quick Link Display Name + + + + + {#snippet children({ props })} + Link + + {/snippet} + + Quick Link URL + + + + + + +
+ Submit + +
+{#if dev} +
+ +
+{/if} diff --git a/apps/desktop/src/routes/extension/create-quick-link/schema.ts b/apps/desktop/src/routes/extension/create-quick-link/schema.ts new file mode 100644 index 0000000..c4de730 --- /dev/null +++ b/apps/desktop/src/routes/extension/create-quick-link/schema.ts @@ -0,0 +1,7 @@ +import { z } from "zod" + +export const formSchema = z.object({ + username: z.string().min(2).max(50) +}) + +export type FormSchema = typeof formSchema diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte index 41f9c69..d8d7a1f 100644 --- a/apps/desktop/src/routes/extension/store/+page.svelte +++ b/apps/desktop/src/routes/extension/store/+page.svelte @@ -76,7 +76,7 @@ {/snippet} - + { @@ -117,20 +116,21 @@ .uninstallStoreExtensionByIdentifier(ext.identifier) .then((uninstalledExt) => { toast.success(`${uninstalledExt.name} Uninstalled`) + loading.uninstall = false + showBtn.uninstall = false + showBtn.install = true }) .catch((err) => { toast.error("Fail to uninstall extension", { description: err }) error(`Fail to uninstall store extension (${ext.identifier}): ${err}`) }) - .finally(() => { - loading.uninstall = false - showBtn.uninstall = false - showBtn.install = true - }) + .finally(() => {}) } function onEnterPressed() { - return onInstallSelected() + if (showBtn.install) { + return onInstallSelected() + } } function handleKeydown(e: KeyboardEvent) { @@ -153,6 +153,7 @@ export enum CmdTypeEnum { HeadlessWorker = "headless_worker", + Builtin = "builtin", + System = "system", UiWorker = "ui_worker", UiIframe = "ui_iframe", QuickLink = "quick_link", @@ -55,12 +57,18 @@ export const ExtCmd = object({ name: string(), type: CmdType, data: string(), - alias: optional(string()), - hotkey: optional(string()), + alias: nullable(optional(string())), + hotkey: nullable(optional(string())), enabled: boolean() }) export type ExtCmd = InferOutput +export const QuickLinkCmd = object({ + ...ExtCmd.entries, + data: object({ link: string(), icon: Icon }) +}) +export type QuickLinkCmd = InferOutput + export const ExtData = object({ dataId: number(), extId: number(), diff --git a/packages/api/src/models/icon.ts b/packages/api/src/models/icon.ts index 6639ba5..26872e9 100644 --- a/packages/api/src/models/icon.ts +++ b/packages/api/src/models/icon.ts @@ -1,4 +1,13 @@ -import { enum_, literal, object, string, type InferOutput } from "valibot" +import { + boolean, + enum_, + literal, + nullable, + object, + optional, + string, + type InferOutput +} from "valibot" import { NodeName, NodeNameEnum } from "./constants" /* -------------------------------------------------------------------------- */ @@ -16,7 +25,8 @@ export type IconType = InferOutput export const Icon = object({ type: IconType, - value: string() + value: string(), + invert: optional(boolean()) }) export type Icon = InferOutput export const IconNode = object({ diff --git a/packages/extension/src/db.ts b/packages/extension/src/db.ts index a6246ba..b76d7e4 100644 --- a/packages/extension/src/db.ts +++ b/packages/extension/src/db.ts @@ -1,5 +1,13 @@ import { db } from "@kksh/api/commands" -import { ExtPackageJson, ExtPackageJsonExtra } from "@kksh/api/models" +import { + CmdTypeEnum, + ExtCmd, + ExtPackageJson, + ExtPackageJsonExtra, + Icon, + QuickLinkCmd +} from "@kksh/api/models" +import * as v from "valibot" export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: string) { const extInDb = await db.getUniqueExtensionByIdentifier(extPkgJson.kunkun.identifier) @@ -12,3 +20,38 @@ export async function upsertExtension(extPkgJson: ExtPackageJson, extFullPath: s }) } } + +export async function createQuickLinkCommand(name: string, link: string, icon: Icon) { + const extension = await db.getExtQuickLinks() + return db.createCommand({ + extId: extension.extId, + name, + cmdType: CmdTypeEnum.QuickLink, + data: JSON.stringify({ + link, + icon + }), + enabled: true + }) +} + +export async function getAllQuickLinkCommands(): Promise { + const extension = await db.getExtQuickLinks() + const cmds = await db.getCommandsByExtId(extension.extId) + return cmds + .map((cmd) => { + try { + cmd.data = JSON.parse(cmd.data) + const parsedData = v.safeParse(QuickLinkCmd, cmd) + if (!parsedData.success) { + console.warn("Fail to parse quick link command", cmd) + console.error(v.flatten(parsedData.issues)) + return null + } + return parsedData.output + } catch (error) { + return null + } + }) + .filter((cmd) => cmd !== null) +} diff --git a/packages/supabase/package.json b/packages/supabase/package.json index 4248fdd..d4cf8bf 100644 --- a/packages/supabase/package.json +++ b/packages/supabase/package.json @@ -8,7 +8,8 @@ ".": "./src/index.ts" }, "dependencies": { - "@kksh/api": "workspace:*" + "@kksh/api": "workspace:*", + "@supabase/supabase-js": "^2.46.1" }, "devDependencies": { "@types/bun": "latest" diff --git a/packages/ui/components.json b/packages/ui/components.json index f10b563..33c48e0 100644 --- a/packages/ui/components.json +++ b/packages/ui/components.json @@ -8,10 +8,10 @@ }, "aliases": { "components": "@kksh/ui/src/components", - "utils": "@kksh/ui/src/utils", + "utils": "@kksh/ui/utils", "ui": "@kksh/ui/src/components/ui", "hooks": "@kksh/ui/src/hooks" }, "typescript": true, "registry": "https://next.shadcn-svelte.com/registry" -} +} \ No newline at end of file diff --git a/packages/ui/package.json b/packages/ui/package.json index 55cca6d..1f37855 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -35,19 +35,24 @@ }, "devDependencies": { "@kksh/api": "workspace:*", + "@kksh/svelte5": "^0.1.2-beta.8", "@types/bun": "latest", - "bits-ui": "1.0.0-next.36", + "bits-ui": "1.0.0-next.45", + "@iconify/svelte": "^4.0.2", "clsx": "^2.1.1", + "formsnap": "2.0.0-next.1", "lucide-svelte": "^0.454.0", "mode-watcher": "^0.4.1", "paneforge": "1.0.0-next.1", "shiki": "^1.22.2", "svelte-radix": "^2.0.1", "svelte-sonner": "^0.3.28", + "sveltekit-superforms": "^2.20.0", "tailwind-merge": "^2.5.4", "tailwind-variants": "^0.2.1", "tailwindcss": "^3.4.14", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "zod": "^3.23.8" }, "dependencies": { "@formkit/auto-animate": "^0.8.2", diff --git a/packages/ui/src/components/common/IconMultiplexer.svelte b/packages/ui/src/components/common/IconMultiplexer.svelte index e76760e..74996ee 100644 --- a/packages/ui/src/components/common/IconMultiplexer.svelte +++ b/packages/ui/src/components/common/IconMultiplexer.svelte @@ -12,17 +12,37 @@ {#if icon.type === IconEnum.RemoteUrl} - + {:else if icon.type === IconEnum.Iconify} - + {:else if icon.type === IconEnum.Base64PNG} - + {:else if icon.type === IconEnum.Text} - {:else if icon.type === IconEnum.Svg} - {@html icon.value} + {@html icon.value} {:else} - + {/if} diff --git a/packages/ui/src/components/common/IconSelector.svelte b/packages/ui/src/components/common/IconSelector.svelte new file mode 100644 index 0000000..70576ab --- /dev/null +++ b/packages/ui/src/components/common/IconSelector.svelte @@ -0,0 +1,56 @@ + + +
+ + + {triggerContent} + + + + Icon Type + {#each iconOptionsArray as [label, value]} + {label} + {/each} + + + +