Add categories

.github/workflows/pull-request.yml

@@ -29,9 +29,18 @@ jobs:
         id: docker_tag
         run: echo "TAG=${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:pr-${{ github.event.pull_request.number }}" >> $GITHUB_ENV
 
+      - name: Set up QEMU for cross-platform builds
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          install: true
+
       - name: Build and Push Docker image for Testing
         uses: docker/build-push-action@v5
         with:
           context: .
           push: true
-          tags: ${{ env.TAG }}
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: ${{ env.TAG }}

.github/workflows/release.yml

@@ -27,11 +27,20 @@ jobs:
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      - name: Set up QEMU for cross-platform builds
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        with:
+          install: true
+
       - name: Build and Push Docker image
         uses: docker/build-push-action@v5
         with:
           context: .
           push: true
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
           tags: |
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
             ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.event.release.tag_name }}

client/src/components/common/Modal.tsx

@@ -27,15 +27,17 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children }) => {
     >
       <div 
         ref={modalRef} 
-        className={`bg-gray-800 rounded-lg max-w-3xl w-full max-h-[80vh] overflow-y-auto transition-all duration-300 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}
+        className={`bg-gray-800 rounded-lg max-w-3xl w-full max-h-[80vh] flex flex-col transition-all duration-300 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`}
       >
-        <div className="p-4">
+        <div className="px-4 pt-4 pb-4">
           <button 
             onClick={onClose}
             className="float-right text-gray-400 hover:text-white"
           >
             <X size={24} />
           </button>
+        </div>
+        <div className="px-4 overflow-y-auto flex-1">
           {children}
         </div>
       </div>

client/src/components/settings/SettingsModal.tsx

@@ -7,9 +7,18 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings
   const [showCodePreview, setShowCodePreview] = useState(settings.showCodePreview);
   const [previewLines, setPreviewLines] = useState(settings.previewLines);
   const [includeCodeInSearch, setIncludeCodeInSearch] = useState(settings.includeCodeInSearch);
+  const [showCategories, setShowCategories] = useState(settings.showCategories);
+  const [expandCategories, setExpandCategories] = useState(settings.expandCategories);
 
   const handleSave = () => {
-    onSettingsChange({ compactView, showCodePreview, previewLines, includeCodeInSearch });
+    onSettingsChange({
+      compactView,
+      showCodePreview,
+      previewLines,
+      includeCodeInSearch,
+      showCategories,
+      expandCategories
+    });
     onClose();
   };
 
@@ -61,6 +70,29 @@ const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, settings
             className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
           />
         </div>
+        <div className="flex items-center justify-between">
+          <label htmlFor="showCategories" className="text-gray-300">Show Categories</label>
+          <input
+            type="checkbox"
+            id="showCategories"
+            checked={showCategories}
+            onChange={(e) => setShowCategories(e.target.checked)}
+            className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
+          />
+        </div>
+
+        {showCategories && (
+          <div className="flex items-center justify-between">
+            <label htmlFor="expandCategories" className="text-gray-300">Expand Categories</label>
+            <input
+              type="checkbox"
+              id="expandCategories"
+              checked={expandCategories}
+              onChange={(e) => setExpandCategories(e.target.checked)}
+              className="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500"
+            />
+          </div>
+        )}
       </div>
       <div className="mt-6 flex justify-end">
         <button

client/src/components/snippets/CustomDropdown.tsx

@@ -0,0 +1,112 @@
+import { CustomDropdownProps } from '../../types/types';
+import React, { useState, useRef, useEffect } from 'react';
+
+const CustomDropdown: React.FC<CustomDropdownProps> = ({ options, value, onChange, maxLength }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(value || '');
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setInternalValue(value || '');
+  }, [value]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        matchCaseAndUpdate();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [options, internalValue]);
+
+  const matchCaseAndUpdate = () => {
+    const match = options.find(option => 
+      option.toLowerCase() === internalValue.toLowerCase()
+    );
+    if (match) {
+      setInternalValue(match);
+      onChange(match);
+    } else {
+      onChange(internalValue);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value.slice(0, maxLength);
+    setInternalValue(newValue);
+  };
+
+  const handleOptionClick = (option: string) => {
+    setInternalValue(option);
+    onChange(option);
+    setIsOpen(false);
+  };
+
+  const handleInputFocus = () => {
+    setIsOpen(true);
+    if (inputRef.current) {
+      inputRef.current.select();
+    }
+  };
+
+  const handleInputBlur = () => {
+    matchCaseAndUpdate();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      setIsOpen(false);
+      matchCaseAndUpdate();
+    }
+  };
+
+  const filteredOptions = options.filter(option =>
+    option.toLowerCase().includes(internalValue.toLowerCase())
+  );
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <input
+        ref={inputRef}
+        type="text"
+        className="mt-1 block w-full rounded-md bg-gray-700 border border-gray-600 text-white p-2 text-sm"
+        value={internalValue}
+        onChange={handleInputChange}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
+        onKeyDown={handleKeyDown}
+        placeholder="Select or type a language"
+        maxLength={maxLength}
+      />
+      {isOpen && (
+        <ul className="absolute z-10 mt-1 w-full bg-gray-700 border border-gray-600 rounded-md shadow-lg max-h-60 overflow-auto">
+          {filteredOptions.length > 0 ? (
+            filteredOptions.map((option, index) => (
+              <li
+                key={index}
+                className="px-4 py-2 hover:bg-gray-600 cursor-pointer text-white text-sm"
+                onClick={() => handleOptionClick(option)}
+                onMouseDown={(e) => e.preventDefault()}
+              >
+                {option}
+              </li>
+            ))
+          ) : (
+            <li className="px-4 py-2 text-gray-400 text-sm italic">
+              No matching languages found
+            </li>
+          )}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default CustomDropdown;

client/src/components/snippets/DynamicCodeEditor.tsx

@@ -162,7 +162,7 @@ const DynamicCodeEditor: React.FC<DynamicCodeEditorProps> = ({
   };
 
   return (
-    <div className="relative rounded-md" style={{ backgroundColor: '#1e1e1e', height: editorHeight, minHeight: '400px' }}>
+    <div className="relative rounded-md" style={{ backgroundColor: '#1e1e1e', height: editorHeight, minHeight: '400px', zIndex: 0 }}>
       <textarea
         ref={textareaRef}
         value={code}
@@ -195,6 +195,7 @@ const DynamicCodeEditor: React.FC<DynamicCodeEditorProps> = ({
           pointerEvents: 'none',
           backgroundColor: 'transparent',
           overflow: 'hidden',
+          zIndex: 0,
         }}
       >
         <SyntaxHighlighter