Improved formatting and display of search bar, and generic changes to…

… input field formatting
jordan-dalby · Oct 29, 2024 · 51c6cfa · 51c6cfa
1 parent 456836e
commit 51c6cfa
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/client/src/components/common/BaseDropdown.tsx b/client/src/components/common/BaseDropdown.tsx
@@ -16,6 +16,7 @@ export interface BaseDropdownProps {
   className?: string;
   disabled?: boolean;
   maxLength?: number;
+  showChevron?: boolean;
 }
 
 const BaseDropdown: React.FC<BaseDropdownProps> = ({
@@ -27,7 +28,8 @@ const BaseDropdown: React.FC<BaseDropdownProps> = ({
   placeholder = "Select or type a value",
   className = "",
   disabled = false,
-  maxLength
+  maxLength,
+  showChevron = true,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
@@ -138,7 +140,7 @@ const BaseDropdown: React.FC<BaseDropdownProps> = ({
         <input
           ref={inputRef}
           type="text"
-          className={`mt-1 block w-full rounded-md bg-gray-700 border border-gray-600 text-white p-2 pr-8 text-sm ${className}`}
+          className={`block w-full rounded-md bg-gray-700 text-white p-2 pr-8 text-sm ${className}`}
           value={value}
           onChange={handleInputChange}
           onFocus={() => setIsOpen(true)}
@@ -147,10 +149,13 @@ const BaseDropdown: React.FC<BaseDropdownProps> = ({
           disabled={disabled}
           maxLength={maxLength}
         />
-        <ChevronDown 
-          className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" 
-          size={16}
-        />
+        {showChevron && (
+          <ChevronDown 
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" 
+            size={16}
+          />
+          )
+        }
       </div>
       {isOpen && sections.length > 0 && (
         <ul 

diff --git a/client/src/components/snippets/EditSnippetModal.tsx b/client/src/components/snippets/EditSnippetModal.tsx
@@ -197,7 +197,7 @@ const EditSnippetModal: React.FC<EditSnippetModalProps> = ({
               id="title"
               value={title}
               onChange={(e) => setTitle(e.target.value.slice(0, 100))}
-              className="mt-1 block w-full rounded-md bg-gray-700 border border-gray-600 text-white p-2 text-sm"
+              className="mt-1 block w-full rounded-md bg-gray-700 text-white p-2 text-sm"
               required
               placeholder="Enter the title of the snippet (max 100 characters)"
               maxLength={100}
@@ -223,7 +223,7 @@ const EditSnippetModal: React.FC<EditSnippetModalProps> = ({
               id="description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
-              className="mt-1 block w-full rounded-md bg-gray-700 border border-gray-600 text-white p-2 text-sm"
+              className="mt-1 block w-full rounded-md bg-gray-700 text-white p-2 text-sm"
               rows={3}
               placeholder="Write a short description of the snippet"
             />
@@ -258,7 +258,7 @@ const EditSnippetModal: React.FC<EditSnippetModalProps> = ({
 
           <div className="relative">
             <label htmlFor="code" className="block text-sm font-medium text-gray-300">Code</label>
-            <div className="mt-1 rounded-md bg-gray-800 border border-gray-600 overflow-hidden">
+            <div className="mt-1 rounded-md bg-gray-800 overflow-hidden">
               <DynamicCodeEditor
                 key={key}
                 code={code}

diff --git a/client/src/components/snippets/EnhancedSearch.tsx b/client/src/components/snippets/EnhancedSearch.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Search } from 'lucide-react';
-import CategorySuggestions from './categories/CategorySuggestions';
+import BaseDropdown from '../common/BaseDropdown';
 
 interface EnhancedSearchProps {
   searchTerm: string;
@@ -27,24 +27,70 @@ const EnhancedSearch: React.FC<EnhancedSearchProps> = ({
     }
   }, [searchTerm]);
 
-  const handleInputChange = (value: string) => {
-    setInputValue(value);
-    onSearchChange(value);
+  const getSections = (searchTerm: string) => {
+    if (!searchTerm.includes('#')) return [];
+
+    const term = searchTerm.slice(searchTerm.lastIndexOf('#') + 1).trim().toLowerCase();
+    const sections = [];
+
+    const availableCategories = existingCategories.filter(
+      cat => !selectedCategories.includes(cat.toLowerCase())
+    );
+
+    const filtered = term
+      ? availableCategories.filter(cat => cat.toLowerCase().includes(term))
+      : availableCategories;
+
+    if (filtered.length > 0) {
+      sections.push({
+        title: 'Categories',
+        items: filtered
+      });
+    }
+
+    if (term && !existingCategories.some(cat => cat.toLowerCase() === term)) {
+      sections.push({
+        title: 'Add New',
+        items: [`Add new: ${term}`]
+      });
+    }
+
+    return sections;
+  };
+
+  const handleSelect = (option: string) => {
+    const newCategory = option.startsWith('Add new:') 
+      ? option.slice(9).trim() 
+      : option;
+
+    const hashtagIndex = inputValue.lastIndexOf('#');
+    if (hashtagIndex !== -1) {
+      const newValue = inputValue.substring(0, hashtagIndex).trim();
+      setInputValue(newValue);
+      onSearchChange(newValue);
+    }
+
+    onCategorySelect(newCategory.toLowerCase());
   };
 
   return (
     <div className="relative flex-grow">
-      <CategorySuggestions
-        inputValue={inputValue}
-        onInputChange={handleInputChange}
-        onCategorySelect={onCategorySelect}
-        existingCategories={existingCategories}
-        selectedCategories={selectedCategories}
+      <BaseDropdown
+        value={inputValue}
+        onChange={(value) => {
+          setInputValue(value);
+          onSearchChange(value);
+        }}
+        onSelect={handleSelect}
+        getSections={getSections}
         placeholder="Search snippets... (Type # to see all available categories)"
-        className="w-full bg-gray-800 rounded-lg py-2 px-4 pr-10 focus:outline-none"
-        handleHashtag={true}
+        className="h-10 mt-0 bg-gray-800"
+        showChevron={false}
+      />
+      <Search 
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" 
+        size={20} 
       />
-      <Search className="absolute right-3 top-2.5 text-gray-400" size={20} />
     </div>
   );
 };

diff --git a/client/src/components/snippets/categories/CategorySuggestions.tsx b/client/src/components/snippets/categories/CategorySuggestions.tsx
@@ -110,6 +110,7 @@ const CategorySuggestions: React.FC<CategorySuggestionsProps> = ({
       placeholder={placeholder}
       className={className}
       disabled={disabled || (maxCategories !== undefined && selectedCategories.length >= maxCategories)}
+      showChevron={false}
     />
   );
 };