fix: tag creation in File Manager #632
@@ -13,7 +13,7 @@ import {
|
||||
ChevronUp,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import type { KnowledgeEntryWithTags } from "@mosaic/shared";
|
||||
import type { KnowledgeEntryWithTags, KnowledgeTag } from "@mosaic/shared";
|
||||
import { EntryStatus, Visibility } from "@mosaic/shared";
|
||||
|
||||
import { MosaicSpinner } from "@/components/ui/MosaicSpinner";
|
||||
@@ -25,8 +25,12 @@ import {
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from "@/components/ui/dialog";
|
||||
import { fetchEntries, createEntry, deleteEntry } from "@/lib/api/knowledge";
|
||||
import type { EntriesResponse, CreateEntryData, EntryFilters } from "@/lib/api/knowledge";
|
||||
import { fetchEntries, createEntry, deleteEntry, fetchTags } from "@/lib/api/knowledge";
|
||||
import type {
|
||||
EntriesResponse,
|
||||
CreateEntryData,
|
||||
EntryFilters,
|
||||
} from "@/lib/api/knowledge";
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Helpers
|
||||
@@ -421,6 +425,26 @@ function CreateEntryDialog({
|
||||
const [visibility, setVisibility] = useState<Visibility>(Visibility.PRIVATE);
|
||||
const [formError, setFormError] = useState<string | null>(null);
|
||||
|
||||
// Tag state
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const [tagInput, setTagInput] = useState("");
|
||||
const [availableTags, setAvailableTags] = useState<KnowledgeTag[]>([]);
|
||||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||||
const tagInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Load available tags when dialog opens
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchTags()
|
||||
.then((tags) => {
|
||||
setAvailableTags(tags);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Failed to load tags:", err);
|
||||
});
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
function resetForm(): void {
|
||||
setTitle("");
|
||||
setContent("");
|
||||
@@ -428,6 +452,9 @@ function CreateEntryDialog({
|
||||
setStatus(EntryStatus.DRAFT);
|
||||
setVisibility(Visibility.PRIVATE);
|
||||
setFormError(null);
|
||||
setSelectedTags([]);
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
}
|
||||
|
||||
async function handleSubmit(e: SyntheticEvent): Promise<void> {
|
||||
@@ -452,6 +479,7 @@ function CreateEntryDialog({
|
||||
content: trimmedContent,
|
||||
status,
|
||||
visibility,
|
||||
tags: selectedTags,
|
||||
};
|
||||
const trimmedSummary = summary.trim();
|
||||
if (trimmedSummary) {
|
||||
@@ -610,6 +638,210 @@ function CreateEntryDialog({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<label
|
||||
htmlFor="entry-tags"
|
||||
style={{
|
||||
display: "block",
|
||||
marginBottom: 6,
|
||||
fontSize: "0.85rem",
|
||||
fontWeight: 500,
|
||||
color: "var(--text-2)",
|
||||
}}
|
||||
>
|
||||
Tags
|
||||
</label>
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
minHeight: 38,
|
||||
padding: "6px 8px",
|
||||
background: "var(--bg)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r)",
|
||||
boxSizing: "border-box",
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: 4,
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Selected tag chips */}
|
||||
{selectedTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
style={{
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: "2px 8px",
|
||||
background: "var(--surface-2)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r-sm)",
|
||||
fontSize: "0.75rem",
|
||||
color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedTags((prev) => prev.filter((t) => t !== tag));
|
||||
}}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
padding: 0,
|
||||
cursor: "pointer",
|
||||
color: "var(--muted)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{/* Tag text input */}
|
||||
<input
|
||||
ref={tagInputRef}
|
||||
id="entry-tags"
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => {
|
||||
setTagInput(e.target.value);
|
||||
setShowSuggestions(e.target.value.length > 0);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === ",") {
|
||||
e.preventDefault();
|
||||
const trimmed = tagInput.trim();
|
||||
if (trimmed && !selectedTags.includes(trimmed)) {
|
||||
setSelectedTags((prev) => [...prev, trimmed]);
|
||||
setTagInput("");
|
||||
}
|
||||
}
|
||||
if (e.key === "Backspace" && tagInput === "" && selectedTags.length > 0) {
|
||||
setSelectedTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
}}
|
||||
onBlur={() => {
|
||||
// Delay to allow click on suggestion
|
||||
setTimeout(() => setShowSuggestions(false), 150);
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (tagInput.length > 0) setShowSuggestions(true);
|
||||
}}
|
||||
placeholder={selectedTags.length === 0 ? "Add tags..." : ""}
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: 80,
|
||||
border: "none",
|
||||
background: "transparent",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.85rem",
|
||||
outline: "none",
|
||||
padding: "2px 0",
|
||||
}}
|
||||
/>
|
||||
{/* Autocomplete suggestions */}
|
||||
{showSuggestions && (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "100%",
|
||||
left: 0,
|
||||
right: 0,
|
||||
marginTop: 4,
|
||||
background: "var(--surface)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "var(--r)",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
|
||||
maxHeight: 150,
|
||||
overflowY: "auto",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{availableTags
|
||||
.filter(
|
||||
(t) =>
|
||||
t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
|
||||
!selectedTags.includes(t.name)
|
||||
)
|
||||
.slice(0, 5)
|
||||
.map((tag) => (
|
||||
<button
|
||||
key={tag.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!selectedTags.includes(tag.name)) {
|
||||
setSelectedTags((prev) => [...prev, tag.name]);
|
||||
}
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
tagInputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px 12px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
textAlign: "left",
|
||||
cursor: "pointer",
|
||||
color: "var(--text)",
|
||||
fontSize: "0.85rem",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "var(--surface-2)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "transparent";
|
||||
}}
|
||||
>
|
||||
{tag.name}
|
||||
</button>
|
||||
))}
|
||||
{availableTags.filter(
|
||||
(t) =>
|
||||
t.name.toLowerCase().includes(tagInput.toLowerCase()) &&
|
||||
!selectedTags.includes(t.name)
|
||||
).length === 0 &&
|
||||
tagInput.trim() &&
|
||||
!selectedTags.includes(tagInput.trim()) && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const trimmed = tagInput.trim();
|
||||
if (trimmed && !selectedTags.includes(trimmed)) {
|
||||
setSelectedTags((prev) => [...prev, trimmed]);
|
||||
}
|
||||
setTagInput("");
|
||||
setShowSuggestions(false);
|
||||
tagInputRef.current?.focus();
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "8px 12px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
textAlign: "left",
|
||||
cursor: "pointer",
|
||||
color: "var(--muted)",
|
||||
fontSize: "0.85rem",
|
||||
fontStyle: "italic",
|
||||
}}
|
||||
>
|
||||
Create "{tagInput.trim()}"
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status + Visibility row */}
|
||||
<div style={{ display: "flex", gap: 16, marginBottom: 16 }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
|
||||
Reference in New Issue
Block a user