Implement topic manager enhancements: hover preview and improved deletion behavior

client/src/components/tailwind/TailwindApp.tsx

@@ -487,6 +487,14 @@ function TailwindApp() {
                     userId={user?.email || ''}
                     currentTopicId={currentTopicId}
                     onSelectTopic={(topicId: number) => {
+                      // Check if the topicId is -1, which is a special value indicating no topics
+                      // or when a topic was deleted but we don't want to select another automatically
+                      if (topicId === -1) {
+                        // Just stay on the topic manager page without selecting a topic
+                        return;
+                      }
+
+                      // Normal topic selection
                       handleTopicSelect(topicId);
                       modals.topicManager.close();
                     }}

client/src/components/tailwind/TailwindTopicList.tsx

@@ -8,6 +8,7 @@ interface TopicListProps {
   onCreateTopic: () => void;
   onDeleteTopic: (topicId: number) => void;
   onEditTopic: (topic: Topic) => void;
+  onTopicHover?: (topicId: number | null) => void;
   currentTopicId?: number;
 }
 
@@ -17,6 +18,7 @@ const TailwindTopicList: React.FC<TopicListProps> = ({
   onCreateTopic,
   onDeleteTopic,
   onEditTopic,
+  onTopicHover,
   currentTopicId
 }) => {
   const [topics, setTopics] = useState<Topic[]>([]);
@@ -93,6 +95,20 @@ const TailwindTopicList: React.FC<TopicListProps> = ({
     return date.toLocaleDateString('vi-VN', { year: 'numeric', month: '2-digit', day: '2-digit' });
   };
 
+  // Handle mouse enter event
+  const handleMouseEnter = (topicId: number) => {
+    if (onTopicHover) {
+      onTopicHover(topicId);
+    }
+  };
+
+  // Handle mouse leave event
+  const handleMouseLeave = () => {
+    if (onTopicHover) {
+      onTopicHover(null);
+    }
+  };
+
   // Sort topics and then separate pinned topics to top
   const sortedTopicsRaw = sortTopics(topics);
   const pinnedTopics = sortedTopicsRaw.filter(topic => topic.pinnedState);
@@ -142,6 +158,8 @@ const TailwindTopicList: React.FC<TopicListProps> = ({
                 topic.id === currentTopicId ? 'bg-[#F2EEE5]' : ''
               }`}
               onClick={() => topic.id && onSelectTopic(topic.id)}
+              onMouseEnter={() => topic.id && handleMouseEnter(topic.id)}
+              onMouseLeave={handleMouseLeave}
             >
               <div className="flex justify-between items-start">
                 <div className="flex-1 min-w-0 pr-4">

client/src/components/tailwind/TailwindTopicManager.tsx

@@ -20,6 +20,8 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
   const [isEditorOpen, setIsEditorOpen] = useState(false);
   const [topicToEdit, setTopicToEdit] = useState<Topic | undefined>(undefined);
   const [selectedTopicDetails, setSelectedTopicDetails] = useState<Topic | null>(null);
+  const [hoveredTopicId, setHoveredTopicId] = useState<number | null>(null);
+  const [hoveredTopicDetails, setHoveredTopicDetails] = useState<Topic | null>(null);
   const [showConfirmDelete, setShowConfirmDelete] = useState<number | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [activeTab, setActiveTab] = useState<'topics' | 'search'>('topics');
@@ -166,6 +168,26 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
     loadTopics();
   }, [userId]);
 
+  // Handle topic hover
+  useEffect(() => {
+    if (hoveredTopicId) {
+      db.topics.get(hoveredTopicId)
+        .then(topic => {
+          if (topic) {
+            setHoveredTopicDetails(topic);
+          } else {
+            setHoveredTopicDetails(null);
+          }
+        })
+        .catch(error => {
+          console.error(`[TOPIC MANAGER] Error fetching hovered topic ${hoveredTopicId}:`, error);
+          setHoveredTopicDetails(null);
+        });
+    } else {
+      setHoveredTopicDetails(null);
+    }
+  }, [hoveredTopicId]);
+
   // Handle creating a new topic
   const handleCreateTopic = () => {
     setTopicToEdit(undefined);
@@ -229,24 +251,9 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
 
         console.log(`[TOPIC MANAGER] Successfully deleted topic ${showConfirmDelete} with ${result.deletedMessages} messages`);
 
-        // Find another topic to select
-        const otherTopics = topics.filter(t => t.id !== showConfirmDelete);
-        if (otherTopics.length > 0) {
-          // Sort by most recently active
-          const sortedTopics = [...otherTopics].sort((a, b) => b.lastActive - a.lastActive);
-          const newTopicToSelect = sortedTopics[0];
-          if (newTopicToSelect && newTopicToSelect.id) {
-            setSelectedTopicDetails(newTopicToSelect);
-            onSelectTopic(newTopicToSelect.id);
-          } else {
-            setSelectedTopicDetails(null);
-          }
-        } else {
-          // No topics left, just reset the UI without creating a new topic
-          setSelectedTopicDetails(null);
-          // Use -1 as a special value to indicate no topics
-          onSelectTopic(-1);
-        }
+        // Enhancement #102: Do not automatically select another topic after deletion
+        // Just clear the selected topic details so the user has to explicitly select a topic
+        setSelectedTopicDetails(null);
 
         // Reload topics to update the list
         await loadTopics();
@@ -262,6 +269,11 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
     setShowConfirmDelete(null);
   };
 
+  // Handle topic hover
+  const handleTopicHover = (topicId: number | null) => {
+    setHoveredTopicId(topicId);
+  };
+
   // Determine the current topic ID for display
   // Always prioritize the prop from parent over local state
   const activeTopicId = currentTopicId || selectedTopicDetails?.id;
@@ -314,6 +326,7 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
             onCreateTopic={handleCreateTopic}
             onDeleteTopic={handleDeleteTopic}
             onEditTopic={handleEditTopic}
+            onTopicHover={handleTopicHover}
             currentTopicId={activeTopicId}
           />
         ) : (
@@ -341,7 +354,12 @@ const TailwindTopicManager: React.FC<TopicManagerProps> = ({
       </div>
 
       <div className="md:col-span-2">
-        {selectedTopicDetails ? (
+        {hoveredTopicDetails ? (
+          <TailwindTopicMetadata 
+            topic={hoveredTopicDetails} 
+            className="sticky top-4"
+          />
+        ) : selectedTopicDetails ? (
           <TailwindTopicMetadata 
             topic={selectedTopicDetails} 
             className="sticky top-4"