Refactor RichTextEditor, fix slider styling, and adjust theme tones

- Refactored Icons.tsx to use map-based lookup. - Extracted RichTextEditor sub-components to components/rich-text/. - Fixed slider styling in index.html. - Adjusted Warm and Cool light theme palettes.

Author: Tim Sinaeve

components/Icons.tsx

@@ -42,7 +42,7 @@ const TemplateList: React.FC<TemplateListProps> = ({ templates, activeTemplateId
       renameInputRef.current?.select();
     }
   }, [renamingId]);
-  
+
   const handleDelete = (e: React.MouseEvent, id: string) => {
     e.stopPropagation();
     onDeleteTemplate(id, e.shiftKey);
@@ -54,53 +54,53 @@ const TemplateList: React.FC<TemplateListProps> = ({ templates, activeTemplateId
         // Fix: Use template_id instead of id
         const isFocused = focusedItemId === template.template_id;
         return (
-            // Fix: Use template_id for key and data-item-id
-            <li key={template.template_id} data-item-id={template.template_id}>
+          // Fix: Use template_id for key and data-item-id
+          <li key={template.template_id} data-item-id={template.template_id}>
             {renamingId === template.template_id ? (
-                <div className="p-1 flex items-center gap-2">
+              <div className="p-1 flex items-center gap-2">
                 <DocumentDuplicateIcon className="w-3.5 h-3.5 flex-shrink-0" />
                 <input
-                    ref={renameInputRef}
-                    type="text"
-                    value={renameValue}
-                    onChange={(e) => setRenameValue(e.target.value)}
-                    onBlur={handleRenameSubmit}
-                    onKeyDown={handleRenameKeyDown}
-                    className="w-full text-left text-xs px-1.5 py-1 rounded-md bg-background text-text-main border border-border-color focus:outline-none focus:ring-1 focus:ring-primary"
+                  ref={renameInputRef}
+                  type="text"
+                  value={renameValue}
+                  onChange={(e) => setRenameValue(e.target.value)}
+                  onBlur={handleRenameSubmit}
+                  onKeyDown={handleRenameKeyDown}
+                  className="w-full text-left text-xs px-1.5 py-1 rounded-md bg-background text-text-main border border-border-color focus:outline-none focus:ring-1 focus:ring-primary"
                 />
-                </div>
+              </div>
             ) : (
-                <button
+              <button
                 // Fix: Use template_id
                 onClick={() => onSelectTemplate(template.template_id)}
                 onDoubleClick={(e) => handleRenameStart(e, template)}
-                className={`w-full text-left p-1 rounded-md group flex justify-between items-center transition-colors duration-150 text-xs relative focus:outline-none ${
-                    // Fix: Use template_id
-                    activeTemplateId === template.template_id
-                    ? 'bg-background text-text-main'
-                    : 'hover:bg-border-color/30 text-text-secondary hover:text-text-main'
-                } ${isFocused ? 'ring-2 ring-primary ring-offset-[-2px] ring-offset-secondary' : ''}`}
-                >
-                <div className="flex items-center gap-1.5 flex-1 truncate">
-                    <DocumentDuplicateIcon className="w-3.5 h-3.5 flex-shrink-0" />
-                    <span className="truncate flex-1 px-1">{template.title}</span>
+                className={`w-full text-left pr-1 flex justify-between items-center transition-colors duration-0 text-[13px] relative focus:outline-none h-[22px] min-h-[22px] cursor-default ${
+                  // Fix: Use template_id
+                  activeTemplateId === template.template_id
+                    ? 'bg-tree-selected/20 text-text-main font-medium'
+                    : 'hover:bg-tree-selected/10 text-text-secondary hover:text-text-main'
+                  } ${isFocused ? 'ring-1 ring-inset ring-primary' : ''}`}
+              >
+                <div className="flex items-center gap-1 flex-1 truncate pl-[2px]">
+                  <DocumentDuplicateIcon className={`w-3.5 h-3.5 flex-shrink-0 ${activeTemplateId === template.template_id ? 'text-text-main' : 'text-text-secondary'}`} />
+                  <span className="truncate flex-1 px-1">{template.title}</span>
                 </div>
                 {/* Fix: Use template_id */}
                 <div className={`transition-opacity pr-1 flex items-center ${activeTemplateId === template.template_id ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
-                    {/* Fix: Use template_id */}
-                    <IconButton onClick={(e) => handleDelete(e, template.template_id)} tooltip="Delete" size="xs" variant="destructive">
+                  {/* Fix: Use template_id */}
+                  <IconButton onClick={(e) => handleDelete(e, template.template_id)} tooltip="Delete" size="xs" variant="destructive">
                     <TrashIcon className="w-3.5 h-3.5" />
-                    </IconButton>
+                  </IconButton>
                 </div>
-                </button>
+              </button>
             )}
-            </li>
+          </li>
         )
       })}
-       {templates.length === 0 && (
-          <li className="text-center text-text-secondary p-4 text-xs">
-              No templates yet.
-          </li>
+      {templates.length === 0 && (
+        <li className="text-center text-text-secondary p-4 text-xs">
+          No templates yet.
+        </li>
       )}
     </ul>
   );

components/PromptTreeItem.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ChevronDownIcon } from '../Icons';
+
+interface FontDropDownProps {
+    value: string;
+    options: { label: string; value: string }[];
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    placeholder?: string;
+}
+
+const FontDropDown: React.FC<FontDropDownProps> = ({
+    value,
+    options,
+    onChange,
+    disabled = false,
+    className = '',
+    placeholder = 'Select...',
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const toggleOpen = useCallback(() => {
+        if (!disabled) {
+            setIsOpen((prev) => !prev);
+        }
+    }, [disabled]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                close();
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen, close]);
+
+    const handleSelect = (optionValue: string) => {
+        onChange(optionValue);
+        close();
+    };
+
+    const selectedOption = options.find((opt) => opt.value === value);
+
+    return (
+        <div ref={containerRef} className={`relative inline-block text-left ${className}`}>
+            <button
+                type="button"
+                onClick={toggleOpen}
+                disabled={disabled}
+                className={`flex items-center justify-between w-full rounded-md border border-border-color/50 bg-secondary/30 px-2 py-1 text-xs font-medium text-text-main hover:bg-secondary-hover focus:outline-none focus:ring-1 focus:ring-primary/50 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+            >
+                <span className="block truncate max-w-[100px]">{selectedOption ? selectedOption.label : placeholder}</span>
+                <ChevronDownIcon className="ml-1 h-3 w-3 text-text-secondary" />
+            </button>
+
+            {isOpen && (
+                <div className="absolute left-0 z-50 mt-1 w-40 origin-top-left rounded-md bg-secondary shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none max-h-60 overflow-auto">
+                    <div className="py-1">
+                        {options.map((option) => (
+                            <button
+                                key={option.value}
+                                onClick={() => handleSelect(option.value)}
+                                className={`block w-full px-4 py-2 text-left text-xs ${option.value === value
+                                        ? 'bg-primary/10 text-primary'
+                                        : 'text-text-main hover:bg-secondary-hover'
+                                    }`}
+                            >
+                                <span style={{ fontFamily: option.value }}>{option.label}</span>
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default FontDropDown;

components/RichTextEditor.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useState, useEffect } from 'react';
+import Modal from '../Modal';
+import Button from '../Button';
+
+interface LinkModalProps {
+    isOpen: boolean;
+    initialUrl: string;
+    onSubmit: (url: string) => void;
+    onRemove: () => void;
+    onClose: () => void;
+}
+
+export const LinkModal: React.FC<LinkModalProps> = ({ isOpen, initialUrl, onSubmit, onRemove, onClose }) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [url, setUrl] = useState(initialUrl);
+
+    useEffect(() => {
+        setUrl(initialUrl);
+    }, [initialUrl]);
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+        onSubmit(url);
+    };
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <Modal onClose={onClose} title="Insert link" initialFocusRef={inputRef}>
+            <form onSubmit={handleSubmit}>
+                <div className="p-6 space-y-3">
+                    <label className="block text-sm font-semibold text-text-main" htmlFor="link-url-input">
+                        Link URL
+                    </label>
+                    <input
+                        id="link-url-input"
+                        ref={inputRef}
+                        type="text"
+                        inputMode="url"
+                        autoComplete="url"
+                        required
+                        value={url}
+                        onChange={event => setUrl(event.target.value)}
+                        className="w-full rounded-md border border-border-color bg-background px-3 py-2 text-sm text-text-main focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/30"
+                        placeholder="https://example.com"
+                    />
+                    <p className="text-xs text-text-secondary">
+                        Enter a valid URL. If you omit the protocol, https:// will be added automatically.
+                    </p>
+                </div>
+                <div className="flex justify-end gap-3 px-6 py-4 bg-background/50 border-t border-border-color rounded-b-lg">
+                    <Button type="button" variant="secondary" onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button type="button" variant="secondary" onClick={onRemove}>
+                        Remove link
+                    </Button>
+                    <Button type="submit">Save link</Button>
+                </div>
+            </form>
+        </Modal>
+    );
+};