From 0df105f186278de7a123cdbb931b9413a20f407e Mon Sep 17 00:00:00 2001
From: Aslam <iupin5212@gmail.com>
Date: Thu, 19 Sep 2024 21:12:19 +0700
Subject: [PATCH] chore: add item value and cut line 1 (#167)

---
 web/components/custom/command-palette/command-data.ts     | 1 +
 web/components/custom/command-palette/command-items.tsx   | 6 +++---
 web/components/custom/command-palette/command-palette.tsx | 4 +++-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/components/custom/command-palette/command-data.ts b/web/components/custom/command-palette/command-data.ts
index ac3f4cb1..01221ec1 100644
--- a/web/components/custom/command-palette/command-data.ts
+++ b/web/components/custom/command-palette/command-data.ts
@@ -6,6 +6,7 @@ import { HTMLLikeElement } from "@/lib/utils"
 export type CommandAction = string | (() => void)
 
 export interface CommandItemType {
+	id?: string
 	icon?: keyof typeof icons
 	value: string
 	label: HTMLLikeElement | string
diff --git a/web/components/custom/command-palette/command-items.tsx b/web/components/custom/command-palette/command-items.tsx
index 9555ad16..51f64d3a 100644
--- a/web/components/custom/command-palette/command-items.tsx
+++ b/web/components/custom/command-palette/command-items.tsx
@@ -11,14 +11,14 @@ export interface CommandItemProps extends Omit<CommandItemType, "action"> {
 }
 
 const HTMLLikeRenderer: React.FC<{ content: HTMLLikeElement | string }> = React.memo(({ content }) => {
-	return <>{renderHTMLLikeElement(content)}</>
+	return <span className="line-clamp-1">{renderHTMLLikeElement(content)}</span>
 })
 
 HTMLLikeRenderer.displayName = "HTMLLikeRenderer"
 
 export const CommandItem: React.FC<CommandItemProps> = React.memo(
-	({ icon, label, action, payload, shortcut, handleAction }) => (
-		<Command.Item onSelect={() => handleAction(action, payload)}>
+	({ icon, label, action, payload, shortcut, handleAction, ...item }) => (
+		<Command.Item value={`${item.id}-${item.value}`} onSelect={() => handleAction(action, payload)}>
 			{icon && <LaIcon name={icon} />}
 			<HTMLLikeRenderer content={label} />
 			{shortcut && <CommandShortcut>{shortcut}</CommandShortcut>}
diff --git a/web/components/custom/command-palette/command-palette.tsx b/web/components/custom/command-palette/command-palette.tsx
index 4e2fd40c..d797e381 100644
--- a/web/components/custom/command-palette/command-palette.tsx
+++ b/web/components/custom/command-palette/command-palette.tsx
@@ -86,6 +86,7 @@ export function CommandPalette() {
 			heading: "Personal Links",
 			items:
 				me?.root.personalLinks?.map(link => ({
+					id: link?.id,
 					icon: "Link" as const,
 					value: link?.title || "Untitled",
 					label: link?.title || "Untitled",
@@ -100,6 +101,7 @@ export function CommandPalette() {
 			heading: "Personal Pages",
 			items:
 				me?.root.personalPages?.map(page => ({
+					id: page?.id,
 					icon: "FileText" as const,
 					value: page?.title || "Untitled",
 					label: page?.title || "Untitled",
@@ -184,7 +186,7 @@ export function CommandPalette() {
 	const commandKey = React.useMemo(() => {
 		return filteredCommands
 			.map(group => {
-				const itemsKey = group.items.map(item => `${item.label}-${item.action}`).join("|")
+				const itemsKey = group.items.map(item => `${item.label}-${item.value}`).join("|")
 				return `${group.heading}:${itemsKey}`
 			})
 			.join("__")