From 64ad8627e19f86a92ef37f561d9e633c397061fb Mon Sep 17 00:00:00 2001 From: thororen1234 <78185467+thororen1234@users.noreply.github.com> Date: Tue, 19 May 2026 22:26:05 -0400 Subject: [PATCH] CMDPalette: Kill compact mode --- src/equicordplugins/commandPalette/index.tsx | 6 +- src/equicordplugins/commandPalette/style.css | 54 +++------------ .../ui/CommandPaletteActionBar.tsx | 39 +++++------ .../commandPalette/ui/CommandPaletteModal.tsx | 67 +++++-------------- 4 files changed, 41 insertions(+), 125 deletions(-) diff --git a/src/equicordplugins/commandPalette/index.tsx b/src/equicordplugins/commandPalette/index.tsx index dee25573d..135fc729f 100644 --- a/src/equicordplugins/commandPalette/index.tsx +++ b/src/equicordplugins/commandPalette/index.tsx @@ -122,11 +122,7 @@ export const settings = definePluginSettings({ type: OptionType.COMPONENT, component: CommandPaletteSettingsPanel }, - compactStartEnabled: { - description: "Open the palette in compact mode first.", - type: OptionType.BOOLEAN, - default: true - }, + closeAfterExecute: { description: "Close palette after executing a command.", type: OptionType.BOOLEAN, diff --git a/src/equicordplugins/commandPalette/style.css b/src/equicordplugins/commandPalette/style.css index 86a74c731..8a1482da1 100644 --- a/src/equicordplugins/commandPalette/style.css +++ b/src/equicordplugins/commandPalette/style.css @@ -26,8 +26,6 @@ --cp-radius-sm: 8px; --cp-shadow: 0 16px 44px rgb(0 0 0 / 38%), 0 6px 18px rgb(0 0 0 / 28%); - width: min(900px, 92vw) !important; - max-width: min(900px, 92vw) !important; background: var(--cp-bg) !important; border-radius: var(--cp-radius) !important; box-shadow: var(--cp-shadow) !important; @@ -44,9 +42,7 @@ display: flex; flex-direction: column; width: 100%; - max-width: 100%; - min-height: 67vh; - max-height: 67vh; + height: 100%; background: var(--cp-bg); border-radius: var(--cp-radius); box-sizing: border-box; @@ -388,7 +384,7 @@ } .vc-command-palette-row-subtitle { - font-size: 13px; + font-size: 14px; color: var(--cp-text-secondary); line-height: 1.4; } @@ -749,46 +745,7 @@ font-size: 13px; } -/* Compact Mode */ -.vc-command-palette-compact .vc-command-palette-shell { - max-height: fit-content; - min-height: 100%; - overflow: hidden; -} -.vc-command-palette-compact { - min-height: 0 !important; -} - -.vc-command-palette-action-bar-logo { - display: flex; - align-items: center; - color: var(--cp-text-muted); -} - -.vc-command-palette-compact .vc-command-palette-input { - border-bottom: none; -} - -.vc-command-palette-action-bar-compact-btn { - display: flex; - align-items: center; - gap: 8px; - padding: 7px 12px; - background: var(--cp-bg-secondary); - border: 1px solid var(--cp-border); - border-radius: 8px; - color: var(--cp-text-secondary); - font-size: 12px; - cursor: pointer; - transition: all 0.15s ease; - line-height: 1; -} - -.vc-command-palette-action-bar-compact-btn:hover { - background: var(--cp-bg-hover); - border-color: var(--cp-border-strong); -} .vc-command-palette-keybind-input { display: flex; @@ -1029,7 +986,7 @@ } .vc-command-palette-picker .vc-command-palette-main-input input { - min-height: 40px !important; + width: 100px !important; height: 40px !important; font-size: 18px !important; } @@ -1052,6 +1009,11 @@ outline: none !important; } +.vc-command-palette-main-search-input { + width: 100%; + margin-left: 6px; +} + input.vc-command-palette-main-search-input:read-only, .vc-command-palette-main-search-input input:read-only { color: var(--cp-text-muted) !important; diff --git a/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx b/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx index 8b8c6606e..e0645b216 100644 --- a/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx +++ b/src/equicordplugins/commandPalette/ui/CommandPaletteActionBar.tsx @@ -4,40 +4,33 @@ * SPDX-License-Identifier: GPL-3.0-or-later */ -import { EquicordIcon } from "@equicordplugins/discordDevBanner/components"; import { IS_MAC } from "@utils/constants"; import { classNameFactory } from "@utils/css"; -import { classes } from "@utils/misc"; +import { SVGProps } from "react"; const cl = classNameFactory("vc-command-palette-"); interface CommandPaletteActionBarProps { selectedLabel?: string; onOpenActions?(): void; - compact?: boolean; - onExpand?(): void; } -export function CommandPaletteActionBar({ selectedLabel, onOpenActions, compact, onExpand }: CommandPaletteActionBarProps) { - const actionsShortcutLabel = IS_MAC ? "⌘L" : "Ctrl+L"; +const EquicordIcon = (props: React.PropsWithChildren>) => ( + + + + + +); - if (compact) { - return ( -
-
- -
- -
- ); - } +export function CommandPaletteActionBar({ selectedLabel, onOpenActions }: CommandPaletteActionBarProps) { + const actionsShortcutLabel = IS_MAC ? "⌘L" : "Ctrl+L"; return (
diff --git a/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx b/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx index e6d442f6d..03ccff695 100644 --- a/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx +++ b/src/equicordplugins/commandPalette/ui/CommandPaletteModal.tsx @@ -12,7 +12,7 @@ import { copyWithToast } from "@utils/discord"; import { Logger } from "@utils/Logger"; import { classes } from "@utils/misc"; import { RenderModalProps } from "@vencord/discord-types"; -import { Modal,TextInput, Toasts, useEffect, useMemo, useRef, useState } from "@webpack/common"; +import { Modal, TextInput, Toasts, useEffect, useMemo, useRef, useState } from "@webpack/common"; import type { KeyboardEvent as ReactKeyboardEvent } from "react"; import { buildQueryResolution } from "../actions/executors"; @@ -284,18 +284,16 @@ function createInitialPageState(ref: PalettePageRef): PalettePageValuesState { export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: RenderModalProps; instanceKey: number; }) { const { - compactStartEnabled = true, closeAfterExecute = true } = settings.use(); const [query, setQuery] = useState(""); - const [expanded, setExpanded] = useState(false); const [selectedIndex, setSelectedIndex] = useState(-1); const [selectedKey, setSelectedKey] = useState(null); const [keyboardSelectedKey, setKeyboardSelectedKey] = useState(null); const [registryVersion, setRegistryVersion] = useState(() => getRegistryVersion()); const [pinnedIds, setPinnedIds] = useState>(new Set()); const [navigationLevel, setNavigationLevel] = useState(() => { - if (compactStartEnabled || !persistedCategoryId) return { type: "root" }; + if (!persistedCategoryId) return { type: "root" }; return buildNavigationLevelForCategory(persistedCategoryId); }); const [activePromptCommand, setActivePromptCommand] = useState(null); @@ -326,7 +324,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R useEffect(() => { setQuery(""); - setExpanded(false); setSelectedIndex(-1); setSelectedKey(null); setKeyboardSelectedKey(null); @@ -343,10 +340,10 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R closeReasonRef.current = null; keyboardNavigationAtRef.current = 0; setNavigationLevel(() => { - if (compactStartEnabled || !persistedCategoryId) return { type: "root" }; + if (!persistedCategoryId) return { type: "root" }; return buildNavigationLevelForCategory(persistedCategoryId); }); - }, [compactStartEnabled, instanceKey]); + }, [instanceKey]); useEffect(() => { return () => { @@ -374,7 +371,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R }, [navigationLevel]); const trimmedQuery = query.trim(); - const compact = compactStartEnabled && trimmedQuery.length === 0 && !expanded && navigationLevel.type === "root" && pageStack.length === 0; const allCommands = useMemo(() => listCommands(), [registryVersion]); @@ -472,7 +468,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R expandedItems.push({ type: "section", id: "section-breadcrumb", label: breadcrumb }); } - if (!compact && navigationLevel.type === "root" && trimmedQuery.length === 0) { + if (navigationLevel.type === "root" && trimmedQuery.length === 0) { if (pinnedCandidates.length > 0) { expandedItems.push({ type: "section", id: "section-pinned", label: "Pinned" }); expandedItems.push(...pinnedCandidates); @@ -507,7 +503,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R } return expandedItems; - }, [compact, navigationLevel, pinnedCandidates, rankedCommandCandidates, recentCandidates, suggestedCandidates, trimmedQuery]); + }, [navigationLevel, pinnedCandidates, rankedCommandCandidates, recentCandidates, suggestedCandidates, trimmedQuery]); const emptyStateText = navigationLevel.type === "category" && navigationLevel.categoryId === MENTIONS_CATEGORY_ID ? "All caught up." @@ -606,12 +602,6 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R }, [queryCandidates, selectedPromptCandidateId]); useEffect(() => { - if (compact) { - setSelectedIndex(-1); - setSelectedKey(null); - return; - } - if (!hasCommandItems) { setSelectedIndex(-1); setSelectedKey(null); @@ -635,7 +625,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R setSelectedIndex(firstSelectable); setSelectedKey(items[firstSelectable].id); - }, [hasCommandItems, items, selectedKey, compact]); + }, [hasCommandItems, items, selectedKey]); useEffect(() => { if (selectedIndex < 0) return; @@ -662,7 +652,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R if (previous === trimmedQuery) return; lastTrimmedQueryRef.current = trimmedQuery; - if (compact || isPageOpen) return; + if (isPageOpen) return; setSelectedIndex(-1); setSelectedKey(null); @@ -671,7 +661,7 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R if (listRef.current) { listRef.current.scrollTop = 0; } - }, [compact, isPageOpen, trimmedQuery]); + }, [isPageOpen, trimmedQuery]); useEffect(() => { if (!focusPromptInput) return; @@ -1256,17 +1246,12 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R if (isMainInputTarget && event.key === "ArrowDown") { event.preventDefault(); - if (compact) { - setExpanded(true); - return; - } moveSelection(1); return; } if (isMainInputTarget && event.key === "ArrowUp") { event.preventDefault(); - if (compact) return; if (selectedIndex <= 0) { focusSearchInput(); return; @@ -1289,24 +1274,12 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R if (event.key === "ArrowDown") { event.preventDefault(); - if (compact) { - setExpanded(true); - return; - } - moveSelection(1); return; } if (event.key === "ArrowUp") { event.preventDefault(); - if (compact) return; - - if (selectedIndex <= 0 && trimmedQuery.length === 0 && navigationLevel.type === "root") { - setExpanded(false); - return; - } - moveSelection(-1); return; } @@ -1368,14 +1341,8 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R return; } - if (!compact && trimmedQuery.length > 0) { + if (trimmedQuery.length > 0) { setQuery(""); - setExpanded(false); - return; - } - - if (!compact) { - setExpanded(false); return; } @@ -1471,10 +1438,10 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R return ( -
+
{!isPageOpen && ( )} - {!compact && !isPageOpen && calculatorResult && ( + {!isPageOpen && calculatorResult && ( )} - {!compact && !isPageOpen && ( + {!isPageOpen && (
{!hasCommandItems &&
{emptyStateText}
} {items.map((item, index) => { @@ -1626,9 +1593,9 @@ export function CommandPaletteModal({ modalProps, instanceKey }: { modalProps: R
)} - {!compact && isPageOpen && activePageView} + {isPageOpen && activePageView} - {!compact && (isActionsMenuOpen || isActionsMenuClosing) && ( + {(isActionsMenuOpen || isActionsMenuClosing) && ( setExpanded(true)} /> )}