feat: add useEffect to update expanded categories based on search keyword

Author: medyo

src/features/settings/components/TopicSettings.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { AiFillMobile } from 'react-icons/ai'
 import { BsChevronDown, BsChevronUp, BsFillGearFill, BsFillShieldLockFill } from 'react-icons/bs'
 import { FaDatabase, FaPaintBrush, FaRobot, FaServer } from 'react-icons/fa'
@@ -58,6 +58,13 @@ export const TopicSettings = () => {
     occupation ? [occupation] : ['backend', 'frontend']
   )
 
+  useEffect(() => {
+    if (searchKeyword.trim() === '') {
+      return
+    }
+    setExpandedCategories(Object.keys(groupedTags))
+  }, [searchKeyword, groupedTags])
+
   return (
     <SettingsContentLayout
       bodyClassName="topicsBottomSpacer"