From 6fdd2bb63342dfaa4cb538dbff6522a7349e6abb Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Wed, 24 Dec 2025 19:49:42 +0330
Subject: [PATCH] Commit message: feat: add tag suggestions to todo category
 input using chips and tooltip

---
 .../widgets/todos/expandable-todo-input.tsx   | 42 ++++++++++++++++++-
 src/services/hooks/todo/get-tags.hook.ts      | 17 ++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 src/services/hooks/todo/get-tags.hook.ts

diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index 2e0652b0..4dcf3803 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -12,6 +12,8 @@ import { DatePicker } from '@/components/date-picker/date-picker'
 import { PRIORITY_OPTIONS } from '@/common/constant/priority_options'
 import { PriorityButton } from '@/components/priority-options/priority-options'
 import Analytics from '@/analytics'
+import { Chip } from '@/components/chip.component'
+import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 
 interface ExpandableTodoInputProps {
 	todoText: string
@@ -27,14 +29,23 @@ export function ExpandableTodoInput({
 	const [isExpanded, setIsExpanded] = useState(false)
 	const [priority, setPriority] = useState<TodoPriority>(TodoPriority.Medium)
 	const [category, setCategory] = useState('')
+	const { data: fetchedTags } = useGetTags(true)
 	const [notes, setNotes] = useState('')
+	const [isTagTooltipOpen, setIsTagTooltipOpen] = useState(false)
 	const [selectedDate, setSelectedDate] = useState<jalaliMoment.Moment | undefined>()
 	const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
 	const inputRef = useRef<HTMLInputElement | null>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
 	const datePickerButtonRef = useRef<HTMLButtonElement>(null)
+	const categoryInputRef = useRef<HTMLInputElement | null>(null)
 	const isAdding = useIsMutating({ mutationKey: ['addTodo'] }) > 0
 
+	const onSelectCategory = (tag: string) => {
+		setCategory(tag)
+		setIsTagTooltipOpen(false)
+		Analytics.event('todo_category_select')
+	}
+
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			if (
@@ -207,13 +218,42 @@ export function ExpandableTodoInput({
 											/>
 										</div>
 										<TextInput
+											ref={categoryInputRef}
 											type="text"
 											value={category}
-											onChange={setCategory}
+											onChange={onSelectCategory}
+											onFocus={() => setIsTagTooltipOpen(true)}
 											placeholder="دسته‌بندی (مثال: شخصی، کاری)"
 											className="text-xs placeholder:text-xs py-1.5"
 											debounce={false}
 										/>
+										<ClickableTooltip
+											triggerRef={categoryInputRef}
+											isOpen={isTagTooltipOpen}
+											setIsOpen={setIsTagTooltipOpen}
+											content={
+												<div className="flex flex-wrap gap-1 overflow-x-hidden overflow-y-auto max-w-48 max-h-32 scrollbar-none">
+													{fetchedTags
+														?.filter((tag) => tag.trim())
+														?.map((tag) => (
+															<Chip
+																key={tag}
+																selected={false}
+																onClick={() => {
+																	setCategory(tag)
+																	setIsTagTooltipOpen(
+																		false
+																	)
+																}}
+																className="text-xs w-fit p-0! py-1! px-3!"
+															>
+																{tag}
+															</Chip>
+														))}
+												</div>
+											}
+											position="top"
+										/>
 									</div>
 
 									<div className="flex items-center gap-3">
diff --git a/src/services/hooks/todo/get-tags.hook.ts b/src/services/hooks/todo/get-tags.hook.ts
new file mode 100644
index 00000000..229e6869
--- /dev/null
+++ b/src/services/hooks/todo/get-tags.hook.ts
@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+import { getMainClient } from '@/services/api'
+
+export const useGetTags = (enabled: boolean) => {
+	return useQuery<string[]>({
+		queryKey: ['getTags'],
+		queryFn: async () => getTags(),
+		retry: 0,
+		enabled,
+		initialData: [],
+	})
+}
+export async function getTags(): Promise<string[]> {
+	const client = await getMainClient()
+	const { data } = await client.get<string[]>('/todos/@me/tags')
+	return data
+}