chat client UI restructure + added all projects view and settings view(placeholder)

2026-04-13 17:08:52 -07:00
parent 7501fc54f1
commit 699592071f
10 changed files with 1077 additions and 27 deletions
@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const COLOURS = ['#3d3a79', '#2d6a4f', '#7b2d8b', '#c0392b', '#d4800a', '#1a6b8a'];
+
+export default function ProjectModal({ project, mode, onSave, onDelete, onClose }) {
+  const [name, setName] = useState(project?.name ?? '');
+  const [description, setDescription] = useState(project?.description ?? '');
+  const [colour, setColour] = useState(project?.colour ?? COLOURS[0]);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (mode !== 'confirm-delete') inputRef.current?.focus();
+  }, [mode]);
+
+  function handleSubmit() {
+    const trimmed = name.trim();
+    if (!trimmed) return;
+    onSave({ name: trimmed, description: description.trim() || null, colour, icon: null });
+    onClose();
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter' && mode !== 'confirm-delete') handleSubmit();
+    if (e.key === 'Escape') onClose();
+  }
+
+  return (
+    <div onClick={onClose} style={{
+      position: 'fixed', inset: 0,
+      background: 'rgba(0,0,0,0.5)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      zIndex: 100,
+    }}>
+      <div onClick={e => e.stopPropagation()} onKeyDown={handleKeyDown} style={{
+        background: 'var(--bg-surface)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        padding: '24px', width: '380px',
+        display: 'flex', flexDirection: 'column', gap: '16px',
+      }}>
+        {mode === 'confirm-delete' ? (
+          <>
+            <h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
+              Delete project?
+            </h2>
+            <p className="text-sm text-secondary">
+              Are you sure you want to delete{' '}
+              <span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{project.name}</span>?
+              Sessions in this project will not be deleted.
+            </p>
+            <div className="flex" style={{ gap: '8px', justifyContent: 'flex-end' }}>
+              <button className="btn-reset text-base text-muted"
+                onClick={onClose}
+                style={{ padding: '8px 14px', borderRadius: 'var(--radius-md)' }}>
+                Cancel
+              </button>
+              <button className="btn-reset text-base"
+                onClick={() => { onDelete(project.id); onClose(); }}
+                style={{ padding: '8px 16px', borderRadius: 'var(--radius-md)', background: '#c0392b', color: 'white' }}>
+                Delete
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <h2 style={{ fontSize: '15px', fontWeight: 600, color: 'var(--text-primary)' }}>
+              {mode === 'create' ? 'New Project' : 'Edit Project'}
+            </h2>
+
+            {/* Name */}
+            <div className="flex-col" style={{ gap: '6px' }}>
+              <label className="label-upper">Name</label>
+              <input
+                ref={inputRef}
+                value={name}
+                onChange={e => setName(e.target.value)}
+                placeholder="Project name..."
+                style={{
+                  background: 'var(--bg-elevated)', border: '1px solid var(--border)',
+                  borderRadius: 'var(--radius-md)', padding: '8px 12px',
+                  color: 'var(--text-primary)', fontSize: '14px', outline: 'none', width: '100%',
+                }}
+              />
+            </div>
+
+            {/* Description */}
+            <div className="flex-col" style={{ gap: '6px' }}>
+              <label className="label-upper">Description <span style={{ opacity: 0.5 }}>(optional)</span></label>
+              <textarea
+                value={description}
+                onChange={e => setDescription(e.target.value)}
+                placeholder="What's this project about..."
+                rows={2}
+                style={{
+                  background: 'var(--bg-elevated)', border: '1px solid var(--border)',
+                  borderRadius: 'var(--radius-md)', padding: '8px 12px',
+                  color: 'var(--text-primary)', fontSize: '14px', outline: 'none',
+                  width: '100%', resize: 'none', fontFamily: 'inherit',
+                }}
+              />
+            </div>
+
+            {/* Colour picker */}
+            <div className="flex-col" style={{ gap: '6px' }}>
+              <label className="label-upper">Colour</label>
+              <div className="flex" style={{ gap: '8px' }}>
+                {COLOURS.map(c => (
+                  <button
+                    key={c}
+                    onClick={() => setColour(c)}
+                    className="btn-reset"
+                    style={{
+                      width: '24px', height: '24px',
+                      borderRadius: '50%',
+                      background: c,
+                      border: colour === c ? '2px solid var(--text-primary)' : '2px solid transparent',
+                      outline: colour === c ? '2px solid var(--accent-hover)' : 'none',
+                      outlineOffset: '2px',
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+
+            <div className="flex" style={{ gap: '8px', justifyContent: 'flex-end' }}>
+              <button className="btn-reset text-base text-muted"
+                onClick={onClose}
+                style={{ padding: '8px 14px', borderRadius: 'var(--radius-md)' }}>
+                Cancel
+              </button>
+              <button className="btn-primary"
+                onClick={handleSubmit}
+                disabled={!name.trim()}
+                style={{ padding: '8px 16px' }}>
+                {mode === 'create' ? 'Create' : 'Save'}
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}