feat(TypeaheadInput): implement dark mode detection and theme-aware styling

src/components/ItemsList.tsx

@@ -210,6 +210,13 @@ async function fetchWikidataSuggestions(query: string): Promise<WikidataSuggesti
   }
 }
 
+// Helper function to check if an item has content
+function itemHasContent(item: Item): boolean {
+  return item.name.trim() !== '' || 
+         item.description.trim() !== '' || 
+         Object.values(item.customProperties).some(prop => prop.trim() !== '');
+}
+
 export function ItemsList({ url }: ItemsListProps) {
   const queryClient = useQueryClient();
   
@@ -249,7 +256,22 @@ export function ItemsList({ url }: ItemsListProps) {
         };
         setItems([emptyItem]);
       } else {
-        setItems(loadedItems);
+        // Check if we need to add an empty row at the end
+        const lastItem = loadedItems[loadedItems.length - 1];
+        const needsEmptyRow = itemHasContent(lastItem);
+        
+        if (needsEmptyRow) {
+          const emptyItem: Item = {
+            id: uuidv4(),
+            name: '',
+            description: '',
+            wikidataId: undefined,
+            customProperties: {}
+          };
+          setItems([...loadedItems, emptyItem]);
+        } else {
+          setItems(loadedItems);
+        }
       }
       
       // Set selected properties
@@ -283,8 +305,10 @@ export function ItemsList({ url }: ItemsListProps) {
   // Mutations
   const saveItemMutation = useMutation({
     mutationFn: (item: Item) => saveItemToDb(url, item),
-    onSuccess: () => {
+    // REMOVED: onSuccess invalidation that was causing the issue
-      queryClient.invalidateQueries({ queryKey: ['items', url] });
+    onError: (error) => {
+      console.error('Failed to save item:', error);
+      // You could add a toast notification here
     }
   });
 
@@ -312,6 +336,9 @@ export function ItemsList({ url }: ItemsListProps) {
       const newItems = [...prevItems];
       const item = { ...newItems[index] };
       
+      // Store the previous state of the item to check if it was empty before
+      const wasEmpty = !itemHasContent(item);
+      
       if (field === 'name') {
         item.name = value;
         // Fetch Wikidata suggestions only if value is not empty
@@ -344,53 +371,36 @@ export function ItemsList({ url }: ItemsListProps) {
       
       newItems[index] = item;
       
-      // Only save if the item has some content
+      // Check if the item now has content after the update
-      const hasContent = item.name.trim() || 
+      const nowHasContent = itemHasContent(item);
-                        item.description.trim() || 
-                        Object.values(item.customProperties).some(prop => prop.trim());
       
-      if (hasContent) {
+      // Only save if the item has some content
+      if (nowHasContent) {
         // Auto-save with error handling
-        saveItemMutation.mutate(item, {
+        saveItemMutation.mutate(item);
-          onError: (error) => {
-            console.error('Failed to save item:', error);
-            // You could add a toast notification here
-          },
-          onSuccess: () => {
-            // After successful save, reload items to get any synchronized properties
-            // This ensures that if another item with the same name exists, 
-            // its properties are updated in the UI
-            queryClient.invalidateQueries({ queryKey: ['items', url] });
-          }
-        });
       }
       
-      // Add new row if editing last row and value is not empty
+      // Add new row logic: only add if we're editing the last item AND
-      // Only add if the last item doesn't already have content and we're not already at the end
+      // the item transitioned from empty to having content
-      if (index === newItems.length - 1 && value.trim()) {
+      const isLastItem = index === newItems.length - 1;
-        const lastItem = newItems[newItems.length - 1];
+      const transitionedToContent = wasEmpty && nowHasContent;
-        const lastItemHasContent = lastItem.name.trim() || 
-                                  lastItem.description.trim() || 
-                                  Object.values(lastItem.customProperties).some(prop => prop.trim());
       
-        if (lastItemHasContent) {
+      if (isLastItem && transitionedToContent) {
-          const newItem: Item = {
+        // Add a new empty row
-            id: uuidv4(),
+        const newItem: Item = {
-            name: '',
+          id: uuidv4(),
-            description: '',
+          name: '',
-            wikidataId: undefined,
+          description: '',
-            customProperties: {}
+          wikidataId: undefined,
-          };
+          customProperties: {}
-          newItems.push(newItem);
+        };
-          
+        newItems.push(newItem);
-          // Don't auto-save empty items immediately
+        console.log('Added new empty row after item got content');
-          // They will be saved when user starts typing
-        }
       }
       
       return newItems;
     });
-  }, [saveItemMutation, queryClient, url]);
+  }, [saveItemMutation]);
 
   const removeItem = useCallback((index: number) => {
     const itemId = items[index].id;
@@ -414,7 +424,7 @@ export function ItemsList({ url }: ItemsListProps) {
     })));
   }, [deletePropertyMutation]);
 
-    const fetchPropertyLabelsHelper = useCallback(async (propertyIds: string[]): Promise<Record<string, string>> => {
+  const fetchPropertyLabelsHelper = useCallback(async (propertyIds: string[]): Promise<Record<string, string>> => {
     const labels = await fetchPropertyLabels(propertyIds);
     setPropertyLabels(prev => ({ ...prev, ...labels }));
     return labels;
@@ -527,7 +537,7 @@ export function ItemsList({ url }: ItemsListProps) {
     }
     
     console.log('Property addition completed:', normalizedProperty);
-  }, [selectedProperties, propertyLabels, items, propertyCache, url]);
+  }, [customProperties, propertyLabels, items, propertyCache, url]);
 
   const handleWikidataSelect = useCallback(async (suggestion: WikidataSuggestion, itemId: string) => {
     console.log('Wikidata selection for item:', itemId, suggestion);

src/components/TypeaheadInput.tsx

@@ -36,11 +36,47 @@ export function TypeaheadInput({
   const [isLoading, setIsLoading] = useState(false);
   const [isExternalUpdate, setIsExternalUpdate] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState<DropdownPosition>({ top: 0, left: 0, width: 0 });
+  const [isDarkMode, setIsDarkMode] = useState(false);
   
   const inputRef = useRef<HTMLInputElement>(null);
   const suggestionsRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
   
+  // Detect dark mode
+  useEffect(() => {
+    const checkDarkMode = () => {
+      // Check if dark class is on html or body element
+      const isDark = document.documentElement.classList.contains('dark') || 
+                    document.body.classList.contains('dark') ||
+                    // Fallback: check system preference
+                    window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setIsDarkMode(isDark);
+    };
+    
+    // Initial check
+    checkDarkMode();
+    
+    // Watch for changes to the dark class
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    
+    // Watch for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', checkDarkMode);
+    
+    return () => {
+      observer.disconnect();
+      mediaQuery.removeEventListener('change', checkDarkMode);
+    };
+  }, []);
+  
   // Calculate dropdown position relative to viewport
   const calculateDropdownPosition = useCallback((): DropdownPosition => {
     if (!inputRef.current) {
@@ -297,7 +333,8 @@ export function TypeaheadInput({
   }, []);
   
   const baseInputClassName = `
-    w-full px-3 py-2 border border-gray-300 rounded-lg
+    w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
+    bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100
     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
     transition-all duration-200 ease-in-out
     ${className}
@@ -307,17 +344,24 @@ export function TypeaheadInput({
   const DropdownPortal = () => {
     if (!showSuggestions || suggestions.length === 0) return null;
     
+    // Theme-aware colors
+    const dropdownBgColor = isDarkMode ? 'rgba(31, 41, 55, 1)' : 'rgba(255, 255, 255, 1)'; // gray-800 : white
+    const borderColor = isDarkMode ? 'rgba(75, 85, 99, 1)' : 'rgba(209, 213, 219, 1)'; // gray-600 : gray-300
+    
     return createPortal(
       <div
         ref={suggestionsRef}
-        className="fixed bg-white border-2 border-gray-300 rounded-xl shadow-2xl max-h-96 overflow-y-auto"
+        className="fixed border-2 rounded-xl shadow-2xl max-h-96 overflow-y-auto"
         style={{
           top: dropdownPosition.top + 8, // 8px gap below input
           left: dropdownPosition.left,
           width: dropdownPosition.width,
           zIndex: 9999, // Higher than table headers (z-index: 10)
-          backgroundColor: 'rgba(255, 255, 255, 1)',
+          backgroundColor: dropdownBgColor,
-          boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)'
+          borderColor: borderColor,
+          boxShadow: isDarkMode 
+            ? '0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.3)'
+            : '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05)'
         }}
       >
         <div className="py-2">
@@ -326,6 +370,11 @@ export function TypeaheadInput({
             const label = suggestion.label || '';
             const description = suggestion.description || '';
             
+            // Theme-aware item colors
+            const itemBgColor = isSelected 
+              ? (isDarkMode ? 'rgba(30, 58, 138, 0.3)' : 'rgba(239, 246, 255, 1)') // blue-900/30 : blue-50
+              : dropdownBgColor;
+            
             return (
               <div
                 key={suggestion.id}
@@ -333,21 +382,29 @@ export function TypeaheadInput({
                   relative px-4 py-4 cursor-pointer transition-all duration-200 ease-in-out
                   border-l-4 mx-2 my-1 rounded-lg
                   ${isSelected 
-                    ? 'bg-blue-50 border-l-blue-500 shadow-md' 
+                    ? 'border-l-blue-500 shadow-md' 
-                    : 'border-l-transparent hover:bg-gray-50 hover:border-l-gray-300 hover:shadow-sm'
+                    : 'border-l-transparent hover:shadow-sm'
                   }
+                  ${isSelected 
+                    ? '' 
+                    : (isDarkMode ? 'hover:bg-gray-700' : 'hover:bg-gray-50')
+                  }
+                  ${!isSelected && isDarkMode ? 'hover:border-l-gray-500' : ''}
+                  ${!isSelected && !isDarkMode ? 'hover:border-l-gray-300' : ''}
                 `}
                 onClick={() => handleSuggestionClick(suggestion)}
                 onMouseEnter={() => setSelectedIndex(index)}
                 style={{
-                  backgroundColor: isSelected ? 'rgba(239, 246, 255, 1)' : 'rgba(255, 255, 255, 1)'
+                  backgroundColor: itemBgColor
                 }}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1 min-w-0 space-y-2">
                     {/* Main label */}
                     <div className={`font-semibold text-base leading-tight ${
-                      isSelected ? 'text-blue-900' : 'text-gray-900'
+                      isSelected 
+                        ? (isDarkMode ? 'text-blue-100' : 'text-blue-900')
+                        : (isDarkMode ? 'text-gray-100' : 'text-gray-900')
                     }`}>
                       {label}
                     </div>
@@ -355,7 +412,9 @@ export function TypeaheadInput({
                     {/* Description */}
                     {description && (
                       <div className={`text-sm leading-relaxed ${
-                        isSelected ? 'text-blue-700' : 'text-gray-600'
+                        isSelected 
+                          ? (isDarkMode ? 'text-blue-200' : 'text-blue-700')
+                          : (isDarkMode ? 'text-gray-300' : 'text-gray-600')
                       }`}>
                         {description}
                       </div>
@@ -363,10 +422,16 @@ export function TypeaheadInput({
                     
                     {/* Wikidata ID */}
                     <div className="flex items-center space-x-2">
-                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
+                      <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border ${
                         isSelected 
-                          ? 'bg-blue-100 text-blue-800 border border-blue-200' 
+                          ? (isDarkMode 
-                          : 'bg-gray-100 text-gray-700 border border-gray-200'
+                              ? 'bg-blue-800 text-blue-100 border-blue-600' 
+                              : 'bg-blue-100 text-blue-800 border-blue-200'
+                            )
+                          : (isDarkMode 
+                              ? 'bg-gray-700 text-gray-300 border-gray-600' 
+                              : 'bg-gray-100 text-gray-700 border-gray-200'
+                            )
                       }`}>
                         <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                           <path fillRule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm2 6a2 2 0 104 0 2 2 0 00-4 0zm8-2a2 2 0 11-4 0 2 2 0 014 0z" clipRule="evenodd" />
@@ -380,8 +445,8 @@ export function TypeaheadInput({
                   <div className="ml-4 flex-shrink-0">
                     <div className={`w-6 h-6 rounded-full flex items-center justify-center transition-all duration-200 ${
                       isSelected 
-                        ? 'bg-blue-500 text-white shadow-lg' 
+                        ? (isDarkMode ? 'bg-blue-600 text-white shadow-lg' : 'bg-blue-500 text-white shadow-lg')
-                        : 'bg-gray-200 text-gray-400'
+                        : (isDarkMode ? 'bg-gray-600 text-gray-300' : 'bg-gray-200 text-gray-400')
                     }`}>
                       <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@@ -392,7 +457,9 @@ export function TypeaheadInput({
                 
                 {/* Subtle bottom border for separation */}
                 {index < suggestions.length - 1 && (
-                  <div className="absolute bottom-0 left-4 right-4 h-px bg-gray-200"></div>
+                  <div className={`absolute bottom-0 left-4 right-4 h-px ${
+                    isDarkMode ? 'bg-gray-600' : 'bg-gray-200'
+                  }`}></div>
                 )}
               </div>
             );