v0.3.0

2026-03-09 14:36:19 -04:00
parent f37fe0086f
commit 42ad779750
40 changed files with 1928 additions and 593 deletions
--- a/frontend/src/components/NewChatModal.jsx
+++ b/frontend/src/components/NewChatModal.jsx
@@ -15,6 +15,9 @@ export default function NewChatModal({ onClose, onCreated }) {
  const [selected, setSelected] = useState([]);
  const [loading, setLoading] = useState(false);

+  // True when exactly 1 user selected on private tab = direct message
+  const isDirect = tab === 'private' && selected.length === 1;
+
  useEffect(() => {
    api.searchUsers('').then(({ users }) => setUsers(users)).catch(() => {});
  }, []);
@@ -25,18 +28,37 @@ export default function NewChatModal({ onClose, onCreated }) {
    }
  }, [search]);

+  const toggle = (u) => {
+    if (u.id === user.id) return;
+    setSelected(prev => prev.find(p => p.id === u.id) ? prev.filter(p => p.id !== u.id) : [...prev, u]);
+  };
+
  const handleCreate = async () => {
-    if (!name.trim()) return toast('Name required', 'error');
    if (tab === 'private' && selected.length === 0) return toast('Add at least one member', 'error');
+    if (tab === 'private' && selected.length > 1 && !name.trim()) return toast('Name required', 'error');
+    if (tab === 'public' && !name.trim()) return toast('Name required', 'error');
+
    setLoading(true);
    try {
-      const { group } = await api.createGroup({
-        name: name.trim(),
-        type: tab,
-        memberIds: selected.map(u => u.id),
-        isReadonly: tab === 'public' && isReadonly,
-      });
-      toast(`${tab === 'public' ? 'Channel' : 'Chat'} created!`, 'success');
+      let payload;
+      if (isDirect) {
+        // Direct message: no name, isDirect flag
+        payload = {
+          type: 'private',
+          memberIds: selected.map(u => u.id),
+          isDirect: true,
+        };
+      } else {
+        payload = {
+          name: name.trim(),
+          type: tab,
+          memberIds: selected.map(u => u.id),
+          isReadonly: tab === 'public' && isReadonly,
+        };
+      }
+
+      const { group } = await api.createGroup(payload);
+      toast(isDirect ? 'Direct message started!' : `${tab === 'public' ? 'Public message' : 'Group message'} created!`, 'success');
      onCreated(group);
    } catch (e) {
      toast(e.message, 'error');
@@ -45,10 +67,10 @@ export default function NewChatModal({ onClose, onCreated }) {
    }
  };

-  const toggle = (u) => {
-    if (u.id === user.id) return;
-    setSelected(prev => prev.find(p => p.id === u.id) ? prev.filter(p => p.id !== u.id) : [...prev, u]);
-  };
+  // Placeholder for the name field
+  const namePlaceholder = isDirect
+    ? selected[0]?.name || ''
+    : tab === 'public' ? 'e.g. Announcements' : 'e.g. Project Team';

  return (
    <div className="modal-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
@@ -62,49 +84,66 @@ export default function NewChatModal({ onClose, onCreated }) {

        {user.role === 'admin' && (
          <div className="flex gap-2" style={{ marginBottom: 20 }}>
-            <button className={`btn ${tab === 'private' ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setTab('private')}>Private Group</button>
-            <button className={`btn ${tab === 'public' ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setTab('public')}>Public Channel</button>
+            <button className={`btn ${tab === 'private' ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setTab('private')}>Direct Message</button>
+            <button className={`btn ${tab === 'public' ? 'btn-primary' : 'btn-secondary'} btn-sm`} onClick={() => setTab('public')}>Public Message</button>
          </div>
        )}

-        <div className="flex-col gap-2" style={{ marginBottom: 16 }}>
-          <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
-            {tab === 'public' ? 'Channel Name' : 'Group Name'}
-          </label>
-          <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder={tab === 'public' ? 'e.g. Announcements' : 'e.g. Project Team'} autoFocus />
-        </div>
+        {/* Message Name — hidden for direct (1-user) messages */}
+        {!isDirect && (
+          <div className="flex-col gap-2" style={{ marginBottom: 16 }}>
+            <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Message Name</label>
+            <input
+              className="input"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder={namePlaceholder}
+              autoFocus={tab === 'public'}
+            />
+          </div>
+        )}

+        {/* Readonly toggle for public */}
        {tab === 'public' && user.role === 'admin' && (
          <label className="flex items-center gap-2 text-sm" style={{ marginBottom: 16, cursor: 'pointer', color: 'var(--text-secondary)' }}>
            <input type="checkbox" checked={isReadonly} onChange={e => setIsReadonly(e.target.checked)} />
-            Read-only channel (only admins can post)
+            Read-only message (only admins can post)
          </label>
        )}

+        {/* Member selector for private tab */}
        {tab === 'private' && (
          <>
            <div className="flex-col gap-2" style={{ marginBottom: 12 }}>
-              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>Add Members</label>
-              <input className="input" placeholder="Search users..." value={search} onChange={e => setSearch(e.target.value)} />
+              <label className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>
+                {isDirect ? 'Direct Message with' : 'Add Members'}
+              </label>
+              <input className="input" placeholder="Search users..." value={search} onChange={e => setSearch(e.target.value)} autoFocus />
            </div>

            {selected.length > 0 && (
              <div className="flex gap-2" style={{ flexWrap: 'wrap', marginBottom: 12 }}>
                {selected.map(u => (
                  <span key={u.id} className="chip">
-                    {u.display_name || u.name}
+                    {u.name}
                    <span className="chip-remove" onClick={() => toggle(u)}>×</span>
                  </span>
                ))}
              </div>
            )}

+            {isDirect && (
+              <p className="text-sm" style={{ color: 'var(--text-secondary)', marginBottom: 12, fontStyle: 'italic' }}>
+                A private two-person conversation. Select a second person to create a group instead.
+              </p>
+            )}
+
            <div style={{ maxHeight: 200, overflowY: 'auto', border: '1px solid var(--border)', borderRadius: 'var(--radius)' }}>
              {users.filter(u => u.id !== user.id).map(u => (
                <label key={u.id} className="flex items-center gap-10 pointer" style={{ padding: '10px 14px', gap: 12, borderBottom: '1px solid var(--border)', cursor: 'pointer' }}>
                  <input type="checkbox" checked={!!selected.find(s => s.id === u.id)} onChange={() => toggle(u)} />
                  <Avatar user={u} size="sm" />
-                  <span className="flex-1 text-sm">{u.display_name || u.name}</span>
+                  <span className="flex-1 text-sm">{u.name}</span>
                  <span className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{u.role}</span>
                </label>
              ))}
@@ -115,7 +154,7 @@ export default function NewChatModal({ onClose, onCreated }) {
        <div className="flex gap-2 justify-between" style={{ marginTop: 20 }}>
          <button className="btn btn-secondary" onClick={onClose}>Cancel</button>
          <button className="btn btn-primary" onClick={handleCreate} disabled={loading}>
-            {loading ? 'Creating...' : 'Create'}
+            {loading ? 'Creating...' : isDirect ? 'Start Conversation' : 'Create'}
          </button>
        </div>
      </div>