Skip to content

Commit

Permalink
web: (wip) add command palette
Browse files Browse the repository at this point in the history 
Signed-off-by: 01zulfi <[email protected]>
  • Loading branch information
@01zulfi
01zulfi committed Jan 24, 2025
1 parent 65f1633 commit 32eb9d9
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 90 deletions.
32 changes: 19 additions & 13 deletions apps/web/src/dialogs/command-palette/command-palette-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { BaseDialogProps, DialogManager } from "../../common/dialog-manager";
import Dialog from "../../components/dialog";
import Field from "../../components/field";
import { useCommandPaletteStore } from "../../stores/command-palette-store";
import { Icon } from "../../components/icons";

export const CommandPaletteDialog = DialogManager.register(
function CommandPaletteDialog(props: BaseDialogProps<boolean>) {
Expand All @@ -39,7 +40,6 @@ export const CommandPaletteDialog = DialogManager.register(
setCommands,
reset
} = useCommandPaletteStore();
console.log("commands", commands);
const selectedRef = useRef<HTMLButtonElement>(null);

useEffect(() => {
Expand Down Expand Up @@ -85,7 +85,7 @@ export const CommandPaletteDialog = DialogManager.register(
index
});
return acc;
}, {} as Record<string, ((typeof commands)[number] & { index: number; icon: any })[]>);
}, {} as Record<string, ((typeof commands)[number] & { index: number; icon: Icon | undefined })[]>);

return (
<Dialog
Expand All @@ -107,6 +107,7 @@ export const CommandPaletteDialog = DialogManager.register(
if (e.key == "Enter") {
e.preventDefault();
const command = commands[selected];
if (!command) return;
const action = getCommandAction({
id: command.id,
type: command.type
Expand Down Expand Up @@ -163,11 +164,14 @@ export const CommandPaletteDialog = DialogManager.register(
ref={command.index === selected ? selectedRef : null}
key={index}
onClick={() => {
getCommandAction({
const action = getCommandAction({
id: command.id,
type: command.type
})?.(command.id);
props.onClose(true);
});
if (action) {
action(command.id);
props.onClose(true);
}
}}
sx={{
display: "flex",
Expand All @@ -190,14 +194,16 @@ export const CommandPaletteDialog = DialogManager.register(
}
}}
>
<command.icon
size={18}
color={
command.index === selected
? "icon-selected"
: "icon"
}
/>
{command.icon && (
<command.icon
size={18}
color={
command.index === selected
? "icon-selected"
: "icon"
}
/>
)}
{["note", "notebook", "reminder", "tag"].includes(
command.type
) ? (
Expand Down
102 changes: 25 additions & 77 deletions apps/web/src/stores/command-palette-store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,54 +27,40 @@ import {
Reminder as ReminderIcon,
Tag as TagIcon
} from "../components/icons";
import { commands } from "../dialogs/command-palette/commands";
import { commands as COMMANDS } from "../dialogs/command-palette/commands";
import { hashNavigate, navigate } from "../navigation";
import { useEditorStore } from "./editor-store";
import Config from "../utils/config";
import { receiveMessageOnPort } from "worker_threads";

interface Command {
id: string;
title: string;
icon: Icon;
type: "command" | "note" | "notebook" | "tag" | "reminder";
group: string;
action: (arg?: string) => void;
}

interface RecentCommand extends Omit<Command, "action" | "icon"> {}

const CommandIconMap = commands.reduce((acc, command) => {
const CommandIconMap = COMMANDS.reduce((acc, command) => {
acc.set(command.id, command.icon);
return acc;
}, new Map<string, Command["icon"]>());
}, new Map<string, Icon>());

const CommandActionMap = commands.reduce((acc, command) => {
const CommandActionMap = COMMANDS.reduce((acc, command) => {
acc.set(command.id, command.action);
return acc;
}, new Map<string, Command["action"]>());

const cache = new Map<string, Omit<Command, "action" | "icon">[]>();
}, new Map<string, (arg?: any) => void>());

console.log("commands here", Config.get("commandPalette:recent"), commands);
const cache = new Map<string, Command[]>();

class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
recent = Config.get<RecentCommand[]>("commandPalette:recent", []);
all = this.recent.concat(
commands.map((c) => {
return {
id: c.id,
title: c.title,
group: c.group,
type: "command"
};
})
);
commands: Omit<Command, "action" | "icon">[] = this.all;
commands: Command[] = COMMANDS.map((c) => ({
id: c.id,
title: c.title,
group: c.group,
type: "command"
}));
selected = 0;
query = ">";

setCommands = (commands: Omit<Command, "action" | "icon">[]) => {
setCommands = (commands: Command[]) => {
this.set((state) => {
state.commands = commands;
});
Expand Down Expand Up @@ -125,30 +111,6 @@ class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
id: Command["id"];
type: Command["type"];
}) => {
this.set((state) => {
let recent = this.get().recent.slice();
const found = recent.find((c) => c.id === id);
console.log("here", recent, found);
if (found) {
recent = recent.filter((c) => c.id !== id);
recent.unshift(found);
recent = recent.slice(0, 3);
this.set({ recent });
Config.set("commandPalette:recent", recent);
} else {
const command = this.all.find((c) => c.id === id);
if (command) {
recent.unshift(command);
recent = recent.slice(0, 3);
recent = recent.map((r) => ({
...r,
group: "recent"
}));
this.set({ recent });
Config.set("commandPalette:recent", recent);
}
}
});
switch (type) {
case "command":
return CommandActionMap.get(id);
Expand Down Expand Up @@ -191,42 +153,32 @@ class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
};

reset = () => {
this.set((state) => {
state.query = ">";
state.selected = 0;
state.commands = commands.map((c) => {
this.set({
query: ">",
selected: 0,
commands: COMMANDS.map((c) => {
return {
id: c.id,
title: c.title,
group: c.group,
type: "command"
};
});
})
});
cache.clear();
};

private commandSearch(query: string) {
console.log("store command search", query, this.all);
console.log("store command search", query, this.commands);
const str = query.substring(1).trim();
if (str === "") return this.all;
if (str === "") return this.commands;
const matches = db.lookup.fuzzy(
query.substring(1).trim(),
this.all.map((c) => c.title)
str,
this.commands.map((c) => c.title)
);
const matchedCommands = this.commands.filter((c) =>
matches.includes(c.title)
);
// const matchedCommands = matches
// .map((match) => {
// return this.all.find((c) => c.title === match);
// })
// .filter((c) => c !== undefined);
const matchedCommands = this.all.filter((c) => matches.includes(c.title));
// const filtered = matchedCommands.map((c) => ({
// id: c.id,
// title: c.title,
// group: c.group,
// type: "command" as const
// }));
// return filtered;
return matchedCommands;
}

Expand All @@ -240,7 +192,6 @@ class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
const reminders = db.lookup.reminders(query, {
titleOnly: true
});

const list = (
await Promise.all([
notes.items(),
Expand All @@ -249,7 +200,6 @@ class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
reminders.items()
])
).flat();

const commands = list.map((item) => {
return {
id: item.id,
Expand All @@ -258,9 +208,7 @@ class CommandPaletteStore extends BaseStore<CommandPaletteStore> {
type: item.type
};
});

cache.set(query, commands);

return commands;
}

Expand Down

0 comments on commit 32eb9d9

Please sign in to comment.