diff --git a/components/home/PopularFeatures.tsx b/components/home/PopularFeatures.tsx index 00ceb60..18b156e 100644 --- a/components/home/PopularFeatures.tsx +++ b/components/home/PopularFeatures.tsx @@ -20,9 +20,11 @@ export function PopularFeatures({ onSearch }: PopularFeaturesProps) { selectedTag, newTagInput, showTagManager, + justAddedTag, setSelectedTag, setNewTagInput, setShowTagManager, + setJustAddedTag, handleAddTag, handleDeleteTag, handleRestoreDefaults, @@ -50,6 +52,7 @@ export function PopularFeatures({ onSearch }: PopularFeaturesProps) { selectedTag={selectedTag} showTagManager={showTagManager} newTagInput={newTagInput} + justAddedTag={justAddedTag} onTagSelect={(tagId) => { if (tagId === 'custom_色情' || tags.find(t => t.id === tagId)?.label === '色情') { window.location.href = '/secret'; @@ -63,6 +66,7 @@ export function PopularFeatures({ onSearch }: PopularFeaturesProps) { onNewTagInputChange={setNewTagInput} onAddTag={handleAddTag} onDragEnd={handleDragEnd} + onJustAddedTagHandled={() => setJustAddedTag(false)} /> void; onTagDelete: (tagId: string) => void; onToggleManager: () => void; @@ -39,6 +40,7 @@ interface TagManagerProps { onNewTagInputChange: (value: string) => void; onAddTag: () => void; onDragEnd: (event: DragEndEvent) => void; + onJustAddedTagHandled: () => void; } function SortableTag({ @@ -112,6 +114,7 @@ export function TagManager({ selectedTag, showTagManager, newTagInput, + justAddedTag, onTagSelect, onTagDelete, onToggleManager, @@ -119,6 +122,7 @@ export function TagManager({ onNewTagInputChange, onAddTag, onDragEnd, + onJustAddedTagHandled, }: TagManagerProps) { const scrollContainerRef = useRef(null); const prevTagsLength = useRef(tags.length); @@ -137,16 +141,14 @@ export function TagManager({ // Auto-scroll to end when new tag is added useEffect(() => { - if (tags.length > prevTagsLength.current) { - if (scrollContainerRef.current) { - scrollContainerRef.current.scrollTo({ - left: scrollContainerRef.current.scrollWidth, - behavior: 'smooth', - }); - } + if (justAddedTag && scrollContainerRef.current) { + scrollContainerRef.current.scrollTo({ + left: scrollContainerRef.current.scrollWidth, + behavior: 'smooth', + }); + onJustAddedTagHandled(); } - prevTagsLength.current = tags.length; - }, [tags.length]); + }, [justAddedTag, onJustAddedTagHandled]); const handleDragStart = (event: DragStartEvent) => { setActiveId(event.active.id as string); diff --git a/components/home/hooks/useTagManager.ts b/components/home/hooks/useTagManager.ts index 751fdbc..3df8f54 100644 --- a/components/home/hooks/useTagManager.ts +++ b/components/home/hooks/useTagManager.ts @@ -29,6 +29,7 @@ export function useTagManager() { const [tags, setTags] = useState(DEFAULT_TAGS); const [newTagInput, setNewTagInput] = useState(''); const [showTagManager, setShowTagManager] = useState(false); + const [justAddedTag, setJustAddedTag] = useState(false); // Load custom tags from localStorage useEffect(() => { @@ -56,6 +57,7 @@ export function useTagManager() { }; saveTags([...tags, newTag]); setNewTagInput(''); + setJustAddedTag(true); }; const handleDeleteTag = (tagId: string) => { @@ -86,9 +88,11 @@ export function useTagManager() { selectedTag, newTagInput, showTagManager, + justAddedTag, setSelectedTag, setNewTagInput, setShowTagManager, + setJustAddedTag, handleAddTag, handleDeleteTag, handleRestoreDefaults,