feat(06-02): replace EmojiPicker with IconPicker across all category components
- CategoryPicker shows LucideIcon prefix and uses IconPicker for inline create - CategoryHeader displays LucideIcon in view mode and IconPicker in edit mode - OnboardingWizard uses IconPicker for category creation step - CreateThreadModal drops emoji from category select options - Fixed categoryEmoji -> categoryIcon in routes and useCategories hook Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,143 +1,139 @@
|
||||
import { useState } from "react";
|
||||
import { formatWeight, formatPrice } from "../lib/formatters";
|
||||
import { useUpdateCategory, useDeleteCategory } from "../hooks/useCategories";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
import { IconPicker } from "./IconPicker";
|
||||
|
||||
interface CategoryHeaderProps {
|
||||
categoryId: number;
|
||||
name: string;
|
||||
emoji: string;
|
||||
totalWeight: number;
|
||||
totalCost: number;
|
||||
itemCount: number;
|
||||
categoryId: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
totalWeight: number;
|
||||
totalCost: number;
|
||||
itemCount: number;
|
||||
}
|
||||
|
||||
export function CategoryHeader({
|
||||
categoryId,
|
||||
name,
|
||||
emoji,
|
||||
totalWeight,
|
||||
totalCost,
|
||||
itemCount,
|
||||
categoryId,
|
||||
name,
|
||||
icon,
|
||||
totalWeight,
|
||||
totalCost,
|
||||
itemCount,
|
||||
}: CategoryHeaderProps) {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(name);
|
||||
const [editEmoji, setEditEmoji] = useState(emoji);
|
||||
const updateCategory = useUpdateCategory();
|
||||
const deleteCategory = useDeleteCategory();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editName, setEditName] = useState(name);
|
||||
const [editIcon, setEditIcon] = useState(icon);
|
||||
const updateCategory = useUpdateCategory();
|
||||
const deleteCategory = useDeleteCategory();
|
||||
|
||||
const isUncategorized = categoryId === 1;
|
||||
const isUncategorized = categoryId === 1;
|
||||
|
||||
function handleSave() {
|
||||
if (!editName.trim()) return;
|
||||
updateCategory.mutate(
|
||||
{ id: categoryId, name: editName.trim(), emoji: editEmoji },
|
||||
{ onSuccess: () => setIsEditing(false) },
|
||||
);
|
||||
}
|
||||
function handleSave() {
|
||||
if (!editName.trim()) return;
|
||||
updateCategory.mutate(
|
||||
{ id: categoryId, name: editName.trim(), icon: editIcon },
|
||||
{ onSuccess: () => setIsEditing(false) },
|
||||
);
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (
|
||||
confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
|
||||
) {
|
||||
deleteCategory.mutate(categoryId);
|
||||
}
|
||||
}
|
||||
function handleDelete() {
|
||||
if (
|
||||
confirm(`Delete category "${name}"? Items will be moved to Uncategorized.`)
|
||||
) {
|
||||
deleteCategory.mutate(categoryId);
|
||||
}
|
||||
}
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 py-4">
|
||||
<input
|
||||
type="text"
|
||||
value={editEmoji}
|
||||
onChange={(e) => setEditEmoji(e.target.value)}
|
||||
className="w-12 text-center text-xl border border-gray-200 rounded-md px-1 py-1"
|
||||
maxLength={4}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleSave();
|
||||
if (e.key === "Escape") setIsEditing(false);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="text-sm text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isEditing) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 py-4">
|
||||
<IconPicker value={editIcon} onChange={setEditIcon} size="sm" />
|
||||
<input
|
||||
type="text"
|
||||
value={editName}
|
||||
onChange={(e) => setEditName(e.target.value)}
|
||||
className="text-lg font-semibold border border-gray-200 rounded-md px-2 py-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") handleSave();
|
||||
if (e.key === "Escape") setIsEditing(false);
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="text-sm text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsEditing(false)}
|
||||
className="text-sm text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group flex items-center gap-3 py-4">
|
||||
<span className="text-xl">{emoji}</span>
|
||||
<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
|
||||
<span className="text-sm text-gray-400">
|
||||
{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
|
||||
{formatWeight(totalWeight)} · {formatPrice(totalCost)}
|
||||
</span>
|
||||
{!isUncategorized && (
|
||||
<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditName(name);
|
||||
setEditEmoji(emoji);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 rounded"
|
||||
title="Edit category"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
className="p-1 text-gray-400 hover:text-red-500 rounded"
|
||||
title="Delete category"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="group flex items-center gap-3 py-4">
|
||||
<LucideIcon name={icon} size={22} className="text-gray-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">{name}</h2>
|
||||
<span className="text-sm text-gray-400">
|
||||
{itemCount} {itemCount === 1 ? "item" : "items"} ·{" "}
|
||||
{formatWeight(totalWeight)} · {formatPrice(totalCost)}
|
||||
</span>
|
||||
{!isUncategorized && (
|
||||
<div className="ml-auto flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditName(name);
|
||||
setEditIcon(icon);
|
||||
setIsEditing(true);
|
||||
}}
|
||||
className="p-1 text-gray-400 hover:text-gray-600 rounded"
|
||||
title="Edit category"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
className="p-1 text-gray-400 hover:text-red-500 rounded"
|
||||
title="Delete category"
|
||||
>
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,200 +1,263 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useCategories,
|
||||
useCreateCategory,
|
||||
useCategories,
|
||||
useCreateCategory,
|
||||
} from "../hooks/useCategories";
|
||||
import { LucideIcon } from "../lib/iconData";
|
||||
import { IconPicker } from "./IconPicker";
|
||||
|
||||
interface CategoryPickerProps {
|
||||
value: number;
|
||||
onChange: (categoryId: number) => void;
|
||||
value: number;
|
||||
onChange: (categoryId: number) => void;
|
||||
}
|
||||
|
||||
export function CategoryPicker({ value, onChange }: CategoryPickerProps) {
|
||||
const { data: categories = [] } = useCategories();
|
||||
const createCategory = useCreateCategory();
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [highlightIndex, setHighlightIndex] = useState(-1);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const listRef = useRef<HTMLUListElement>(null);
|
||||
const { data: categories = [] } = useCategories();
|
||||
const createCategory = useCreateCategory();
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [highlightIndex, setHighlightIndex] = useState(-1);
|
||||
const [isCreating, setIsCreating] = useState(false);
|
||||
const [newCategoryIcon, setNewCategoryIcon] = useState("package");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const listRef = useRef<HTMLUListElement>(null);
|
||||
|
||||
// Sync display value when value prop changes
|
||||
const selectedCategory = categories.find((c) => c.id === value);
|
||||
// Sync display value when value prop changes
|
||||
const selectedCategory = categories.find((c) => c.id === value);
|
||||
|
||||
const filtered = categories.filter((c) =>
|
||||
c.name.toLowerCase().includes(inputValue.toLowerCase()),
|
||||
);
|
||||
const filtered = categories.filter((c) =>
|
||||
c.name.toLowerCase().includes(inputValue.toLowerCase()),
|
||||
);
|
||||
|
||||
const showCreateOption =
|
||||
inputValue.trim() !== "" &&
|
||||
!categories.some(
|
||||
(c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(),
|
||||
);
|
||||
const showCreateOption =
|
||||
inputValue.trim() !== "" &&
|
||||
!categories.some(
|
||||
(c) => c.name.toLowerCase() === inputValue.trim().toLowerCase(),
|
||||
);
|
||||
|
||||
const totalOptions = filtered.length + (showCreateOption ? 1 : 0);
|
||||
const totalOptions = filtered.length + (showCreateOption ? 1 : 0);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(e.target as Node)
|
||||
) {
|
||||
setIsOpen(false);
|
||||
// Reset input to selected category name
|
||||
if (selectedCategory) {
|
||||
setInputValue("");
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [selectedCategory]);
|
||||
useEffect(() => {
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
const target = e.target as Node;
|
||||
if (
|
||||
containerRef.current &&
|
||||
!containerRef.current.contains(target) &&
|
||||
!(target instanceof Element && target.closest("[data-icon-picker]"))
|
||||
) {
|
||||
setIsOpen(false);
|
||||
setIsCreating(false);
|
||||
setNewCategoryIcon("package");
|
||||
// Reset input to selected category name
|
||||
if (selectedCategory) {
|
||||
setInputValue("");
|
||||
}
|
||||
}
|
||||
}
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, [selectedCategory]);
|
||||
|
||||
function handleSelect(categoryId: number) {
|
||||
onChange(categoryId);
|
||||
setInputValue("");
|
||||
setIsOpen(false);
|
||||
setHighlightIndex(-1);
|
||||
}
|
||||
function handleSelect(categoryId: number) {
|
||||
onChange(categoryId);
|
||||
setInputValue("");
|
||||
setIsOpen(false);
|
||||
setHighlightIndex(-1);
|
||||
}
|
||||
|
||||
async function handleCreate() {
|
||||
const name = inputValue.trim();
|
||||
if (!name) return;
|
||||
createCategory.mutate(
|
||||
{ name, emoji: "\u{1F4E6}" },
|
||||
{
|
||||
onSuccess: (newCat) => {
|
||||
handleSelect(newCat.id);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
function handleStartCreate() {
|
||||
setIsCreating(true);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (!isOpen) {
|
||||
if (e.key === "ArrowDown" || e.key === "Enter") {
|
||||
setIsOpen(true);
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
async function handleConfirmCreate() {
|
||||
const name = inputValue.trim();
|
||||
if (!name) return;
|
||||
createCategory.mutate(
|
||||
{ name, icon: newCategoryIcon },
|
||||
{
|
||||
onSuccess: (newCat) => {
|
||||
setIsCreating(false);
|
||||
setNewCategoryIcon("package");
|
||||
handleSelect(newCat.id);
|
||||
},
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1));
|
||||
break;
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
setHighlightIndex((i) => Math.max(i - 1, 0));
|
||||
break;
|
||||
case "Enter":
|
||||
e.preventDefault();
|
||||
if (highlightIndex >= 0 && highlightIndex < filtered.length) {
|
||||
handleSelect(filtered[highlightIndex].id);
|
||||
} else if (
|
||||
showCreateOption &&
|
||||
highlightIndex === filtered.length
|
||||
) {
|
||||
handleCreate();
|
||||
}
|
||||
break;
|
||||
case "Escape":
|
||||
setIsOpen(false);
|
||||
setHighlightIndex(-1);
|
||||
setInputValue("");
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (!isOpen) {
|
||||
if (e.key === "ArrowDown" || e.key === "Enter") {
|
||||
setIsOpen(true);
|
||||
e.preventDefault();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll highlighted option into view
|
||||
useEffect(() => {
|
||||
if (highlightIndex >= 0 && listRef.current) {
|
||||
const option = listRef.current.children[highlightIndex] as HTMLElement;
|
||||
option?.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}, [highlightIndex]);
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault();
|
||||
setHighlightIndex((i) => Math.min(i + 1, totalOptions - 1));
|
||||
break;
|
||||
case "ArrowUp":
|
||||
e.preventDefault();
|
||||
setHighlightIndex((i) => Math.max(i - 1, 0));
|
||||
break;
|
||||
case "Enter":
|
||||
e.preventDefault();
|
||||
if (isCreating) {
|
||||
handleConfirmCreate();
|
||||
} else if (highlightIndex >= 0 && highlightIndex < filtered.length) {
|
||||
handleSelect(filtered[highlightIndex].id);
|
||||
} else if (
|
||||
showCreateOption &&
|
||||
highlightIndex === filtered.length
|
||||
) {
|
||||
handleStartCreate();
|
||||
}
|
||||
break;
|
||||
case "Escape":
|
||||
if (isCreating) {
|
||||
setIsCreating(false);
|
||||
setNewCategoryIcon("package");
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
setHighlightIndex(-1);
|
||||
setInputValue("");
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
role="combobox"
|
||||
aria-expanded={isOpen}
|
||||
aria-autocomplete="list"
|
||||
aria-controls="category-listbox"
|
||||
aria-activedescendant={
|
||||
highlightIndex >= 0 ? `category-option-${highlightIndex}` : undefined
|
||||
}
|
||||
value={
|
||||
isOpen
|
||||
? inputValue
|
||||
: selectedCategory
|
||||
? `${selectedCategory.emoji} ${selectedCategory.name}`
|
||||
: ""
|
||||
}
|
||||
placeholder="Search or create category..."
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
setIsOpen(true);
|
||||
setHighlightIndex(-1);
|
||||
}}
|
||||
onFocus={() => {
|
||||
setIsOpen(true);
|
||||
setInputValue("");
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
{isOpen && (
|
||||
<ul
|
||||
ref={listRef}
|
||||
id="category-listbox"
|
||||
role="listbox"
|
||||
className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
|
||||
>
|
||||
{filtered.map((cat, i) => (
|
||||
<li
|
||||
key={cat.id}
|
||||
id={`category-option-${i}`}
|
||||
role="option"
|
||||
aria-selected={cat.id === value}
|
||||
className={`px-3 py-2 text-sm cursor-pointer ${
|
||||
i === highlightIndex
|
||||
? "bg-blue-50 text-blue-900"
|
||||
: "hover:bg-gray-50"
|
||||
} ${cat.id === value ? "font-medium" : ""}`}
|
||||
onClick={() => handleSelect(cat.id)}
|
||||
onMouseEnter={() => setHighlightIndex(i)}
|
||||
>
|
||||
{cat.emoji} {cat.name}
|
||||
</li>
|
||||
))}
|
||||
{showCreateOption && (
|
||||
<li
|
||||
id={`category-option-${filtered.length}`}
|
||||
role="option"
|
||||
aria-selected={false}
|
||||
className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
|
||||
highlightIndex === filtered.length
|
||||
? "bg-blue-50 text-blue-900"
|
||||
: "hover:bg-gray-50 text-gray-600"
|
||||
}`}
|
||||
onClick={handleCreate}
|
||||
onMouseEnter={() => setHighlightIndex(filtered.length)}
|
||||
>
|
||||
+ Create "{inputValue.trim()}"
|
||||
</li>
|
||||
)}
|
||||
{filtered.length === 0 && !showCreateOption && (
|
||||
<li className="px-3 py-2 text-sm text-gray-400">
|
||||
No categories found
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
// Scroll highlighted option into view
|
||||
useEffect(() => {
|
||||
if (highlightIndex >= 0 && listRef.current) {
|
||||
const option = listRef.current.children[highlightIndex] as HTMLElement;
|
||||
option?.scrollIntoView({ block: "nearest" });
|
||||
}
|
||||
}, [highlightIndex]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative">
|
||||
<div className="relative">
|
||||
{!isOpen && selectedCategory && (
|
||||
<div className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none">
|
||||
<LucideIcon
|
||||
name={selectedCategory.icon}
|
||||
size={16}
|
||||
className="text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
role="combobox"
|
||||
aria-expanded={isOpen}
|
||||
aria-autocomplete="list"
|
||||
aria-controls="category-listbox"
|
||||
aria-activedescendant={
|
||||
highlightIndex >= 0
|
||||
? `category-option-${highlightIndex}`
|
||||
: undefined
|
||||
}
|
||||
value={
|
||||
isOpen
|
||||
? inputValue
|
||||
: selectedCategory
|
||||
? selectedCategory.name
|
||||
: ""
|
||||
}
|
||||
placeholder="Search or create category..."
|
||||
onChange={(e) => {
|
||||
setInputValue(e.target.value);
|
||||
setIsOpen(true);
|
||||
setHighlightIndex(-1);
|
||||
}}
|
||||
onFocus={() => {
|
||||
setIsOpen(true);
|
||||
setInputValue("");
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
className={`w-full py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
|
||||
!isOpen && selectedCategory ? "pl-8 pr-3" : "px-3"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{isOpen && (
|
||||
<ul
|
||||
ref={listRef}
|
||||
id="category-listbox"
|
||||
role="listbox"
|
||||
className="absolute z-20 mt-1 w-full max-h-48 overflow-auto bg-white border border-gray-200 rounded-lg shadow-lg"
|
||||
>
|
||||
{filtered.map((cat, i) => (
|
||||
<li
|
||||
key={cat.id}
|
||||
id={`category-option-${i}`}
|
||||
role="option"
|
||||
aria-selected={cat.id === value}
|
||||
className={`px-3 py-2 text-sm cursor-pointer flex items-center gap-1.5 ${
|
||||
i === highlightIndex
|
||||
? "bg-blue-50 text-blue-900"
|
||||
: "hover:bg-gray-50"
|
||||
} ${cat.id === value ? "font-medium" : ""}`}
|
||||
onClick={() => handleSelect(cat.id)}
|
||||
onMouseEnter={() => setHighlightIndex(i)}
|
||||
>
|
||||
<LucideIcon
|
||||
name={cat.icon}
|
||||
size={16}
|
||||
className="text-gray-500 shrink-0"
|
||||
/>
|
||||
{cat.name}
|
||||
</li>
|
||||
))}
|
||||
{showCreateOption && !isCreating && (
|
||||
<li
|
||||
id={`category-option-${filtered.length}`}
|
||||
role="option"
|
||||
aria-selected={false}
|
||||
className={`px-3 py-2 text-sm cursor-pointer border-t border-gray-100 ${
|
||||
highlightIndex === filtered.length
|
||||
? "bg-blue-50 text-blue-900"
|
||||
: "hover:bg-gray-50 text-gray-600"
|
||||
}`}
|
||||
onClick={handleStartCreate}
|
||||
onMouseEnter={() => setHighlightIndex(filtered.length)}
|
||||
>
|
||||
+ Create "{inputValue.trim()}"
|
||||
</li>
|
||||
)}
|
||||
{isCreating && (
|
||||
<li className="px-3 py-2 border-t border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<IconPicker
|
||||
value={newCategoryIcon}
|
||||
onChange={setNewCategoryIcon}
|
||||
size="sm"
|
||||
/>
|
||||
<span className="text-sm text-gray-700 truncate flex-1">
|
||||
{inputValue.trim()}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleConfirmCreate}
|
||||
disabled={createCategory.isPending}
|
||||
className="text-xs font-medium text-blue-600 hover:text-blue-800 disabled:opacity-50"
|
||||
>
|
||||
{createCategory.isPending ? "..." : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{filtered.length === 0 && !showCreateOption && (
|
||||
<li className="px-3 py-2 text-sm text-gray-400">
|
||||
No categories found
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@ export function CreateThreadModal() {
|
||||
>
|
||||
{categories?.map((cat) => (
|
||||
<option key={cat.id} value={cat.id}>
|
||||
{cat.emoji} {cat.name}
|
||||
{cat.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useState } from "react";
|
||||
import { useCreateCategory } from "../hooks/useCategories";
|
||||
import { useCreateItem } from "../hooks/useItems";
|
||||
import { useUpdateSetting } from "../hooks/useSettings";
|
||||
import { IconPicker } from "./IconPicker";
|
||||
|
||||
interface OnboardingWizardProps {
|
||||
onComplete: () => void;
|
||||
@@ -12,7 +13,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
|
||||
|
||||
// Step 2 state
|
||||
const [categoryName, setCategoryName] = useState("");
|
||||
const [categoryEmoji, setCategoryEmoji] = useState("");
|
||||
const [categoryIcon, setCategoryIcon] = useState("");
|
||||
const [categoryError, setCategoryError] = useState("");
|
||||
const [createdCategoryId, setCreatedCategoryId] = useState<number | null>(null);
|
||||
|
||||
@@ -41,7 +42,7 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
|
||||
}
|
||||
setCategoryError("");
|
||||
createCategory.mutate(
|
||||
{ name, emoji: categoryEmoji.trim() || undefined },
|
||||
{ name, icon: categoryIcon.trim() || undefined },
|
||||
{
|
||||
onSuccess: (created) => {
|
||||
setCreatedCategoryId(created.id);
|
||||
@@ -164,20 +165,13 @@ export function OnboardingWizard({ onComplete }: OnboardingWizardProps) {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label
|
||||
htmlFor="onboard-cat-emoji"
|
||||
className="block text-sm font-medium text-gray-700 mb-1"
|
||||
>
|
||||
Emoji (optional)
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Icon (optional)
|
||||
</label>
|
||||
<input
|
||||
id="onboard-cat-emoji"
|
||||
type="text"
|
||||
value={categoryEmoji}
|
||||
onChange={(e) => setCategoryEmoji(e.target.value)}
|
||||
className="w-20 px-3 py-2 border border-gray-200 rounded-lg text-center text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
placeholder="⛺"
|
||||
maxLength={4}
|
||||
<IconPicker
|
||||
value={categoryIcon}
|
||||
onChange={setCategoryIcon}
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user