@siteboon/claude-code-ui 1.8.2 → 1.8.4

package/src/components/ProtectedRoute.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import { useAuth } from '../contexts/AuthContext';
-import SetupForm from './SetupForm';
-import LoginForm from './LoginForm';
-import { MessageSquare } from 'lucide-react';
-
-const LoadingScreen = () => (
-  <div className="min-h-screen bg-background flex items-center justify-center p-4">
-    <div className="text-center">
-      <div className="flex justify-center mb-4">
-        <div className="w-16 h-16 bg-primary rounded-lg flex items-center justify-center shadow-sm">
-          <MessageSquare className="w-8 h-8 text-primary-foreground" />
-        </div>
-      </div>
-      <h1 className="text-2xl font-bold text-foreground mb-2">Claude Code UI</h1>
-      <div className="flex items-center justify-center space-x-2">
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce"></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
-        <div className="w-2 h-2 bg-blue-500 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
-      </div>
-      <p className="text-muted-foreground mt-2">Loading...</p>
-    </div>
-  </div>
-);
-
-const ProtectedRoute = ({ children }) => {
-  const { user, isLoading, needsSetup } = useAuth();
-
-  if (isLoading) {
-    return <LoadingScreen />;
-  }
-
-  if (needsSetup) {
-    return <SetupForm />;
-  }
-
-  if (!user) {
-    return <LoginForm />;
-  }
-
-  return children;
-};
-
-export default ProtectedRoute;

package/src/components/QuickSettingsPanel.jsx

@@ -1,262 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { 
-  ChevronLeft, 
-  ChevronRight, 
-  Maximize2, 
-  Eye, 
-  Settings2,
-  Moon,
-  Sun,
-  ArrowDown,
-  Mic,
-  Brain,
-  Sparkles,
-  FileText,
-  Languages
-} from 'lucide-react';
-import DarkModeToggle from './DarkModeToggle';
-import { useTheme } from '../contexts/ThemeContext';
-
-const QuickSettingsPanel = ({ 
-  isOpen, 
-  onToggle,
-  autoExpandTools,
-  onAutoExpandChange,
-  showRawParameters,
-  onShowRawParametersChange,
-  autoScrollToBottom,
-  onAutoScrollChange,
-  sendByCtrlEnter,
-  onSendByCtrlEnterChange,
-  isMobile
-}) => {
-  const [localIsOpen, setLocalIsOpen] = useState(isOpen);
-  const [whisperMode, setWhisperMode] = useState(() => {
-    return localStorage.getItem('whisperMode') || 'default';
-  });
-  const { isDarkMode } = useTheme();
-
-  useEffect(() => {
-    setLocalIsOpen(isOpen);
-  }, [isOpen]);
-
-  const handleToggle = () => {
-    const newState = !localIsOpen;
-    setLocalIsOpen(newState);
-    onToggle(newState);
-  };
-
-  return (
-    <>
-      {/* Pull Tab */}
-      <div
-        className={`fixed ${isMobile ? 'bottom-44' : 'top-1/2 -translate-y-1/2'} ${
-          localIsOpen ? 'right-64' : 'right-0'
-        } z-50 transition-all duration-150 ease-out`}
-      >
-        <button
-          onClick={handleToggle}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-l-md p-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shadow-lg"
-          aria-label={localIsOpen ? 'Close settings panel' : 'Open settings panel'}
-        >
-          {localIsOpen ? (
-            <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-          ) : (
-            <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-          )}
-        </button>
-      </div>
-
-      {/* Panel */}
-      <div
-        className={`fixed top-0 right-0 h-full w-64 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-700 shadow-xl transform transition-transform duration-150 ease-out z-40 ${
-          localIsOpen ? 'translate-x-0' : 'translate-x-full'
-        } ${isMobile ? 'h-screen' : ''}`}
-      >
-        <div className="h-full flex flex-col">
-          {/* Header */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-              <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              Quick Settings
-            </h3>
-          </div>
-
-          {/* Settings Content */}
-          <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-white dark:bg-gray-900 ${isMobile ? 'pb-20' : ''}`}>
-            {/* Appearance Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Appearance</h4>
-              
-              <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  {isDarkMode ? <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" /> : <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />}
-                  Dark Mode
-                </span>
-                <DarkModeToggle />
-              </div>
-            </div>
-
-            {/* Tool Display Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Tool Display</h4>
-              
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Maximize2 className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Auto-expand tools
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoExpandTools}
-                  onChange={(e) => onAutoExpandChange(e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                />
-              </label>
-
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Eye className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Show raw parameters
-                </span>
-                <input
-                  type="checkbox"
-                  checked={showRawParameters}
-                  onChange={(e) => onShowRawParametersChange(e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-            {/* View Options */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">View Options</h4>
-              
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <ArrowDown className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Auto-scroll to bottom
-                </span>
-                <input
-                  type="checkbox"
-                  checked={autoScrollToBottom}
-                  onChange={(e) => onAutoScrollChange(e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                />
-              </label>
-            </div>
-
-            {/* Input Settings */}
-            <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Input Settings</h4>
-              
-              <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
-                  <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Send by Ctrl+Enter
-                </span>
-                <input
-                  type="checkbox"
-                  checked={sendByCtrlEnter}
-                  onChange={(e) => onSendByCtrlEnterChange(e.target.checked)}
-                  className="h-4 w-4 rounded border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                />
-              </label>
-              <p className="text-xs text-gray-500 dark:text-gray-400 ml-3">
-                When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.
-              </p>
-            </div>
-
-            {/* Whisper Dictation Settings - HIDDEN */}
-            <div className="space-y-2" style={{ display: 'none' }}>
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Whisper Dictation</h4>
-              
-              <div className="space-y-2">
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="default"
-                    checked={whisperMode === 'default'}
-                    onChange={() => {
-                      setWhisperMode('default');
-                      localStorage.setItem('whisperMode', 'default');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Mic className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Default Mode
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Direct transcription of your speech
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="prompt"
-                    checked={whisperMode === 'prompt'}
-                    onChange={() => {
-                      setWhisperMode('prompt');
-                      localStorage.setItem('whisperMode', 'prompt');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <Sparkles className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Prompt Enhancement
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Transform rough ideas into clear, detailed AI prompts
-                    </p>
-                  </div>
-                </label>
-
-                <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
-                  <input
-                    type="radio"
-                    name="whisperMode"
-                    value="vibe"
-                    checked={whisperMode === 'vibe' || whisperMode === 'instructions' || whisperMode === 'architect'}
-                    onChange={() => {
-                      setWhisperMode('vibe');
-                      localStorage.setItem('whisperMode', 'vibe');
-                      window.dispatchEvent(new Event('whisperModeChanged'));
-                    }}
-                    className="mt-0.5 h-4 w-4 border-gray-300 dark:border-gray-600 text-blue-600 dark:text-blue-500 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-800 dark:checked:bg-blue-600"
-                  />
-                  <div className="ml-3 flex-1">
-                    <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
-                      <FileText className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Vibe Mode
-                    </span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Format ideas as clear agent instructions with details
-                    </p>
-                  </div>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Backdrop */}
-      {localIsOpen && (
-        <div
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm z-30 transition-opacity duration-150 ease-out"
-          onClick={handleToggle}
-        />
-      )}
-    </>
-  );
-};
-
-export default QuickSettingsPanel;