flock-core 0.5.0b50__py3-none-any.whl → 0.5.0b51__py3-none-any.whl

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: 400px;
+  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;