flock-core 0.4.543__py3-none-any.whl → 0.5.0__py3-none-any.whl

flock/frontend/src/components/settings/MultiSelect.tsx

@@ -0,0 +1,235 @@
+/**
+ * Multi-Select Component with Autocomplete
+ *
+ * Elegant multi-select dropdown with:
+ * - Autocomplete filtering
+ * - Tag-based selection display
+ * - Keyboard navigation
+ * - Remove on click
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+
+interface MultiSelectProps {
+  options: string[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({
+  options,
+  selected,
+  onChange,
+  placeholder = 'Select items...',
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Filter options based on search term and exclude already selected
+  const filteredOptions = options.filter(
+    option =>
+      !selected.includes(option) &&
+      option.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleSelect = (option: string) => {
+    onChange([...selected, option]);
+    setSearchTerm('');
+    setFocusedIndex(0);
+    inputRef.current?.focus();
+  };
+
+  const handleRemove = (option: string) => {
+    onChange(selected.filter(item => item !== option));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedIndex(prev => Math.min(prev + 1, filteredOptions.length - 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedIndex(prev => Math.max(prev - 1, 0));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredOptions[focusedIndex]) {
+          handleSelect(filteredOptions[focusedIndex]);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setSearchTerm('');
+        break;
+      case 'Backspace':
+        if (searchTerm === '' && selected.length > 0) {
+          const lastItem = selected[selected.length - 1];
+          if (lastItem) {
+            handleRemove(lastItem);
+          }
+        }
+        break;
+    }
+  };
+
+  return (
+    <div ref={containerRef} style={{ position: 'relative' }}>
+      {/* Input Container with Tags */}
+      <div
+        onClick={() => !disabled && inputRef.current?.focus()}
+        style={{
+          minHeight: '38px',
+          padding: 'var(--space-xs)',
+          backgroundColor: disabled ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.3)',
+          border: `1px solid ${isOpen ? 'rgba(96, 165, 250, 0.5)' : 'rgba(255, 255, 255, 0.1)'}`,
+          borderRadius: 'var(--radius-sm)',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 'var(--gap-xs)',
+          cursor: disabled ? 'not-allowed' : 'text',
+          transition: 'border-color 0.2s',
+          opacity: disabled ? 0.6 : 1
+        }}
+      >
+        {/* Selected Tags */}
+        {selected.map(item => (
+          <div
+            key={item}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--gap-xs)',
+              padding: '2px 8px',
+              backgroundColor: 'rgba(96, 165, 250, 0.2)',
+              border: '1px solid rgba(96, 165, 250, 0.4)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: 'var(--font-size-sm)',
+              color: '#60a5fa',
+              maxWidth: '100%',
+              overflow: 'hidden'
+            }}
+          >
+            <span style={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              minWidth: 0
+            }} title={item}>
+              {item}
+            </span>
+            {!disabled && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleRemove(item);
+                }}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  color: '#60a5fa',
+                  cursor: 'pointer',
+                  padding: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontSize: '14px',
+                  lineHeight: 1,
+                  flexShrink: 0
+                }}
+              >
+                ×
+              </button>
+            )}
+          </div>
+        ))}
+
+        {/* Search Input */}
+        <input
+          ref={inputRef}
+          type="text"
+          value={searchTerm}
+          onChange={(e) => {
+            setSearchTerm(e.target.value);
+            setIsOpen(true);
+            setFocusedIndex(0);
+          }}
+          onFocus={() => !disabled && setIsOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder={selected.length === 0 ? placeholder : ''}
+          disabled={disabled}
+          style={{
+            flex: 1,
+            minWidth: '120px',
+            background: 'transparent',
+            border: 'none',
+            outline: 'none',
+            color: 'var(--color-text-primary)',
+            fontSize: 'var(--font-size-base)',
+            padding: '4px'
+          }}
+        />
+      </div>
+
+      {/* Dropdown Options */}
+      {isOpen && !disabled && filteredOptions.length > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 'calc(100% + 4px)',
+            left: 0,
+            right: 0,
+            maxHeight: '240px',
+            overflowY: 'auto',
+            backgroundColor: 'rgba(0, 0, 0, 0.9)',
+            border: '1px solid rgba(96, 165, 250, 0.3)',
+            borderRadius: 'var(--radius-sm)',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.5)',
+            zIndex: 1000
+          }}
+        >
+          {filteredOptions.map((option, index) => (
+            <div
+              key={option}
+              onClick={() => handleSelect(option)}
+              onMouseEnter={() => setFocusedIndex(index)}
+              style={{
+                padding: 'var(--space-xs) var(--space-sm)',
+                cursor: 'pointer',
+                backgroundColor: index === focusedIndex ? 'rgba(96, 165, 250, 0.2)' : 'transparent',
+                color: index === focusedIndex ? '#60a5fa' : 'var(--color-text-primary)',
+                fontSize: 'var(--font-size-sm)',
+                transition: 'background-color 0.15s'
+              }}
+            >
+              {option}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultiSelect;

flock/frontend/src/components/settings/SettingsPanel.css

@@ -0,0 +1,327 @@
+/* ========================================
+   Settings Panel Styles
+   Using Flock Flow Design System
+   ======================================== */
+
+.settings-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 550px;
+  z-index: 1000;
+
+  /* Glassmorphism */
+  background: var(--color-glass-bg);
+  backdrop-filter: blur(var(--blur-lg));
+  border-left: var(--border-default);
+  box-shadow: var(--shadow-xl);
+
+  /* Animation */
+  animation: slideInRight var(--duration-slow) var(--ease-smooth);
+}
+
+.settings-panel-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ========================================
+   Header
+   ======================================== */
+
+.settings-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-layout-sm);
+  border-bottom: var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.settings-title {
+  font-size: var(--font-size-h3);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.settings-close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-all);
+}
+
+.settings-close-button:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-primary);
+}
+
+.settings-close-button:active {
+  background: var(--color-bg-surface);
+  transform: scale(0.95);
+}
+
+/* ========================================
+   Tabs
+   ======================================== */
+
+.settings-tabs {
+  display: flex;
+  gap: var(--gap-xs);
+  padding: var(--space-component-md);
+  border-bottom: var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.settings-tab {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  padding: var(--space-component-sm) var(--space-component-md);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: var(--transition-all);
+  position: relative;
+}
+
+.settings-tab svg {
+  width: 16px;
+  height: 16px;
+}
+
+.settings-tab:hover {
+  background: var(--color-bg-overlay);
+  color: var(--color-text-primary);
+}
+
+.settings-tab.active {
+  background: var(--color-bg-surface);
+  color: var(--color-primary-500);
+  box-shadow: var(--shadow-sm);
+}
+
+.settings-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 40%;
+  height: 2px;
+  background: var(--color-primary-500);
+  border-radius: var(--radius-full);
+}
+
+/* ========================================
+   Content Area
+   ======================================== */
+
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-layout-sm);
+}
+
+/* Custom scrollbar */
+.settings-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.settings-content::-webkit-scrollbar-track {
+  background: var(--color-bg-base);
+}
+
+.settings-content::-webkit-scrollbar-thumb {
+  background: var(--color-bg-overlay);
+  border-radius: var(--radius-full);
+}
+
+.settings-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-border-default);
+}
+
+/* ========================================
+   Footer
+   ======================================== */
+
+.settings-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-component-md);
+  border-top: var(--border-subtle);
+  flex-shrink: 0;
+}
+
+.settings-footer-left {
+  display: flex;
+  align-items: center;
+}
+
+.settings-reset-button {
+  padding: var(--space-component-sm) var(--space-component-md);
+  background: transparent;
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: var(--transition-all);
+}
+
+.settings-reset-button:hover {
+  background: var(--color-bg-overlay);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+
+.settings-reset-button:active {
+  background: var(--color-bg-surface);
+  transform: scale(0.98);
+}
+
+/* ========================================
+   Form Elements (Shared by all tabs)
+   ======================================== */
+
+.settings-section {
+  margin-bottom: var(--space-layout-md);
+}
+
+.settings-section:last-child {
+  margin-bottom: 0;
+}
+
+.settings-section-title {
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--space-component-md) 0;
+  padding-bottom: var(--space-component-sm);
+  border-bottom: var(--border-subtle);
+}
+
+.settings-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+  margin-bottom: var(--space-component-lg);
+}
+
+.settings-label {
+  font-size: var(--font-size-body-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+.settings-description {
+  font-size: var(--font-size-caption);
+  color: var(--color-text-tertiary);
+  margin: 0;
+}
+
+.settings-select,
+.settings-input {
+  width: 100%;
+  padding: var(--space-component-sm) var(--space-component-md);
+  background: var(--color-bg-elevated);
+  border: var(--border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-body-sm);
+  font-family: var(--font-family-sans);
+  transition: var(--transition-all);
+}
+
+.settings-select:hover,
+.settings-input:hover {
+  border-color: var(--color-border-strong);
+}
+
+.settings-select:focus,
+.settings-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--shadow-glow-primary);
+}
+
+.settings-checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+  padding: var(--space-component-sm) 0;
+}
+
+.settings-checkbox {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--color-primary-500);
+  cursor: pointer;
+}
+
+.settings-checkbox-label {
+  font-size: var(--font-size-body-sm);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ========================================
+   Animations
+   ======================================== */
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+/* ========================================
+   Accessibility - Reduced Motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .settings-panel {
+    animation-duration: 0.01ms !important;
+  }
+
+  .settings-tab,
+  .settings-close-button,
+  .settings-reset-button {
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ========================================
+   Responsive Design
+   ======================================== */
+
+@media (max-width: 768px) {
+  .settings-panel {
+    width: 100%;
+    left: 0;
+  }
+}

flock/frontend/src/components/settings/SettingsPanel.tsx

@@ -0,0 +1,131 @@
+/**
+ * Settings Panel
+ *
+ * Main settings container with tabbed interface for:
+ * - Graph Settings (edge customization)
+ * - Appearance Settings (theme, colors)
+ * - Advanced Settings (debug, performance)
+ */
+
+import React, { useState } from 'react';
+import { useSettingsStore } from '../../store/settingsStore';
+import GraphSettings from './GraphSettings';
+import AppearanceSettings from './AppearanceSettings';
+import AdvancedSettings from './AdvancedSettings';
+import BuildInfo from '../common/BuildInfo';
+import './SettingsPanel.css';
+
+type TabName = 'graph' | 'appearance' | 'advanced';
+
+const SettingsPanel: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabName>('graph');
+  const setShowSettings = useSettingsStore((state) => state.setShowSettings);
+  const resetToDefaults = useSettingsStore((state) => state.resetToDefaults);
+
+  const handleClose = () => {
+    setShowSettings(false);
+  };
+
+  const handleReset = () => {
+    if (confirm('Reset all settings to defaults? This cannot be undone.')) {
+      resetToDefaults();
+    }
+  };
+
+  return (
+    <div className="settings-panel">
+      <div className="settings-panel-inner">
+        {/* Header */}
+        <div className="settings-header">
+          <h2 className="settings-title">Settings</h2>
+          <button
+            onClick={handleClose}
+            className="settings-close-button"
+            aria-label="Close settings"
+            title="Close settings (Esc)"
+          >
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path
+                d="M15 5L5 15M5 5l10 10"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div className="settings-tabs">
+          <button
+            onClick={() => setActiveTab('graph')}
+            className={`settings-tab ${activeTab === 'graph' ? 'active' : ''}`}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <circle cx="4" cy="8" r="2" stroke="currentColor" strokeWidth="1.5" />
+              <circle cx="12" cy="4" r="2" stroke="currentColor" strokeWidth="1.5" />
+              <circle cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.5" />
+              <path d="M6 8h4M10 5l2 6" stroke="currentColor" strokeWidth="1.5" />
+            </svg>
+            Graph
+          </button>
+
+          <button
+            onClick={() => setActiveTab('appearance')}
+            className={`settings-tab ${activeTab === 'appearance' ? 'active' : ''}`}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M8 2v12M2 8h12M4.343 4.343l7.314 7.314M11.657 4.343L4.343 11.657"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+            Appearance
+          </button>
+
+          <button
+            onClick={() => setActiveTab('advanced')}
+            className={`settings-tab ${activeTab === 'advanced' ? 'active' : ''}`}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path
+                d="M8 10.667a2.667 2.667 0 100-5.334 2.667 2.667 0 000 5.334z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+              />
+              <path
+                d="M13 8a5 5 0 01-5 5m0-10a5 5 0 015 5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+            Advanced
+          </button>
+        </div>
+
+        {/* Tab Content */}
+        <div className="settings-content">
+          {activeTab === 'graph' && <GraphSettings />}
+          {activeTab === 'appearance' && <AppearanceSettings />}
+          {activeTab === 'advanced' && <AdvancedSettings />}
+        </div>
+
+        {/* Footer Actions */}
+        <div className="settings-footer">
+          <div className="settings-footer-left">
+            <BuildInfo />
+          </div>
+          <button onClick={handleReset} className="settings-reset-button">
+            Reset to Defaults
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPanel;