Redesign settings

package.json

@@ -41,10 +41,10 @@
 		"@dnd-kit/sortable": "^8.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
 		"@lezer/highlight": "^1.2.0",
-		"@mantine/core": "^7.12.1",
-		"@mantine/hooks": "^7.12.1",
-		"@mantine/modals": "^7.12.1",
-		"@mantine/notifications": "^7.12.1",
+		"@mantine/core": "^7.13.3",
+		"@mantine/hooks": "^7.13.3",
+		"@mantine/modals": "^7.13.3",
+		"@mantine/notifications": "^7.13.3",
 		"@mdi/js": "^7.2.96",
 		"@replit/codemirror-indentation-markers": "^6.5.0",
 		"@surrealdb/codemirror": "1.0.0-beta.11",

src/adapter/browser.tsx

@@ -1,3 +1,4 @@
+import { isFunction, shake } from "radash";
 import type {
 	OpenedBinaryFile,
 	OpenedTextFile,
@@ -43,6 +44,8 @@ export abstract class BaseBrowserAdapter implements SurrealistAdapter {
 
 	public async loadConfig() {
 		const localStorageValue = localStorage.getItem(CONFIG_KEY);
+
+		// NOTE legacy local storage config
 		if (localStorageValue) {
 			const config = localStorageValue || "{}";
 			const parsed = JSON.parse(config);
@@ -58,15 +61,7 @@ export abstract class BaseBrowserAdapter implements SurrealistAdapter {
 	}
 
 	public async saveConfig(config: any) {
-		const objConfig: any = {};
-
-		for (const key in config) {
-			if (typeof config[key] !== "function") {
-				objConfig[key] = config[key];
-			}
-		}
-
-		await idxdb.setConfig(objConfig);
+		await idxdb.setConfig(shake(config, isFunction));
 		localStorage.removeItem(CONFIG_KEY);
 	}
 

src/adapter/desktop.tsx

@@ -104,6 +104,7 @@ export class DesktopAdapter implements SurrealistAdapter {
 			store: useConfigStore,
 			select: (s) => s.settings.behavior.windowPinned,
 			then: (pinned) => {
+				console.log("pinned", pinned);
 				getCurrentWindow().setAlwaysOnTop(pinned);
 			},
 		});

src/components/App/index.tsx

@@ -8,6 +8,7 @@ import { Scaffold } from "../Scaffold";
 import { Globals } from "./globals";
 import { ChangelogModal } from "./modals/changelog";
 import { CloudExpiredDialog } from "./modals/cloud-expired";
+import { CommandPaletteModal } from "./modals/commands";
 import { ConnectionModal } from "./modals/connection";
 import { ConnectionsModal } from "./modals/connections";
 import { ConsoleDrawer } from "./modals/console";
@@ -19,7 +20,6 @@ import { EmbedderModal } from "./modals/embedder";
 import { HighlightToolModal } from "./modals/highlight-tool";
 import { KeymapModal } from "./modals/hotkeys";
 import { NewsFeedDrawer } from "./modals/newsfeed";
-import { CommandPaletteModal } from "./modals/palette";
 import { ProvisioningDialog } from "./modals/provisioning";
 import { RegisterUserModal } from "./modals/register";
 import { SandboxModal } from "./modals/sandbox";

src/components/App/modals/palette.tsx → src/components/App/modals/commands.tsx

@@ -1,13 +1,14 @@
 import classes from "../style.module.scss";
 
 import { Box, Divider, Group, Modal, ScrollArea, Stack, Text, TextInput } from "@mantine/core";
-
 import { useInputState } from "@mantine/hooks";
+import clsx from "clsx";
 import posthog from "posthog-js";
-import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { type KeyboardEvent, useMemo, useRef, useState } from "react";
 import { adapter } from "~/adapter";
 import { Entry } from "~/components/Entry";
 import { Icon } from "~/components/Icon";
+import { PreferenceInput } from "~/components/Inputs/preference";
 import { Shortcut } from "~/components/Shortcut";
 import { Spacer } from "~/components/Spacer";
 import { useBoolean } from "~/hooks/boolean";
@@ -17,19 +18,37 @@ import { useStable } from "~/hooks/stable";
 import { dispatchIntent, useIntent } from "~/hooks/url";
 import { useConfigStore } from "~/stores/config";
 import { type Command, type CommandCategory, computeCommands } from "~/util/commands";
-import { Y_SLIDE_TRANSITION, fuzzyMatch } from "~/util/helpers";
+import { ON_STOP_PROPAGATION, Y_SLIDE_TRANSITION, fuzzyMatch } from "~/util/helpers";
 import { iconOpen, iconSearch } from "~/util/icons";
 
 export function CommandPaletteModal() {
 	const { pushCommand } = useConfigStore.getState();
+	const searchRef = useRef<HTMLInputElement>(null);
 
 	const [isOpen, openHandle] = useBoolean();
 	const [search, setSearch] = useInputState("");
 	const [categories, setCategories] = useState<CommandCategory[]>([]);
 
+	const handlePreferenceInput = useStable((e: KeyboardEvent) => {
+		e.stopPropagation();
+
+		if (e.code === "Tab") {
+			e.preventDefault();
+			return;
+		}
+
+		if (e.code === "Escape") {
+			searchRef.current?.focus();
+			openHandle.open();
+		}
+	});
+
 	const [filtered, flattened] = useMemo(() => {
 		const filtered = categories.flatMap((cat) => {
-			if (search && cat.search === false) {
+			if (
+				(cat.visibility === "unsearched" && search) ||
+				(cat.visibility === "searched" && !search)
+			) {
 				return [];
 			}
 
@@ -56,16 +75,17 @@ export function CommandPaletteModal() {
 		return [filtered, flattened];
 	}, [categories, search]);
 
-	const activate = (cmd: Command) => {
+	const activate = useStable((cmd: Command) => {
 		const query = search.trim();
 
-		if (query.length > 0) {
-			pushCommand(query);
-		}
+		posthog.capture("execute_command", {
+			command: cmd.name,
+		});
 
 		switch (cmd.action.type) {
 			case "insert": {
 				setSearch(cmd.action.content);
+				searchRef.current?.focus();
 				break;
 			}
 			case "href": {
@@ -83,14 +103,23 @@ export function CommandPaletteModal() {
 				cmd.action.handler();
 				break;
 			}
+			case "preference": {
+				const el = document.querySelector(`[data-navigation-item-id="${cmd.id}"]`);
+				const input = el?.querySelector<HTMLElement>(".mantine-InputWrapper-root input");
+				const checkbox = el?.querySelector<HTMLElement>(".mantine-Checkbox-root input");
+
+				(input ?? checkbox)?.click();
+				input?.focus();
+				return;
+			}
 		}
 
-		posthog.capture("execute_command", {
-			command: cmd.name,
-		});
-	};
+		if (query.length > 0) {
+			pushCommand(query);
+		}
+	});
 
-	const [handleKeyDown, searchRef] = useKeyNavigation(flattened);
+	const [handleKeyDown, selected] = useKeyNavigation(flattened, activate);
 
 	useIntent("open-command-palette", () => {
 		openHandle.open();
@@ -176,6 +205,9 @@ export function CommandPaletteModal() {
 											disabled={cmd.disabled}
 											leftSection={<Icon path={cmd.icon} />}
 											data-navigation-item-id={cmd.id}
+											className={clsx(
+												selected === cmd.id && classes.listingActive,
+											)}
 										>
 											<Text>{cmd.name}</Text>
 											{cmd.action.type === "href" && (
@@ -201,6 +233,20 @@ export function CommandPaletteModal() {
 													</Group>
 												</>
 											)}
+											{cmd.action.type === "preference" && (
+												<>
+													<Spacer />
+													<Box
+														onClick={ON_STOP_PROPAGATION}
+														onKeyDown={handlePreferenceInput}
+													>
+														<PreferenceInput
+															controller={cmd.action.controller}
+															compact
+														/>
+													</Box>
+												</>
+											)}
 										</Entry>
 									))}
 								</Stack>