feat: Implement auto-scroll to newly added tags in the TagManager using a dedicated state flag.

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)}
       />
 
       <MovieGrid

components/home/TagManager.tsx

@@ -32,6 +32,7 @@ interface TagManagerProps {
   selectedTag: string;
   showTagManager: boolean;
   newTagInput: string;
+  justAddedTag: boolean;
   onTagSelect: (tagId: string) => 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<HTMLDivElement>(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);

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,