Session 2026-05-30: task detail page overhaul

- New TaskDetail replaces /tasks/:id (was v2 at /requests/:id/v2)
- Overview tab: R00 request info, Requested By/Date/Sign Count inline row, Notes, Sign Family, files, amendments
- Revisions tab: R01+ from submissions, newest first, same layout as overview, per-entry Amend button
- Comments tab: single-line input, post on Enter, delete own comments, Supabase task_comments table
- Folder tab: placeholder for file sharing
- Tab badges showing revision/comment counts
- Amend Request modal: drag-drop file zone, popupOverlayStyle/Surface, Save+Cancel buttons
- Request Revision modal for clients on approved/invoiced/paid tasks
- JSZip download-all with progress popup for submission files
- Upload progress popup for Add Task and amend file uploads
- FileAttachment drop zone: 8px radius, transparent bg, label style fix (no all-caps override)
- PageLoader on task detail load
- task_comments migration with RLS policies

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/RequestForm.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { supabase } from '../lib/supabase';
 import { serviceTypes } from '../data/mockData';
 import FileAttachment from './FileAttachment';
@@ -12,6 +12,7 @@ const emptyForm = (companyId = '') => ({
   companyId,
   project: '',
   serviceType: '',
+  signFamily: '',
   title: '',
   deadline: defaultDeadline(),
   description: '',
@@ -39,14 +40,41 @@ export default function RequestForm({
   error = '',
   submitLabel = 'Submit Request',
   initialCompanyId = '',
+  initialValues = null,
 }) {
-  const [form, setForm] = useState(() => emptyForm(initialCompanyId));
+  const [form, setForm] = useState(() => ({ ...emptyForm(initialCompanyId), ...(initialValues || {}) }));
+  const prevCompanyIdRef = useRef(initialValues?.companyId || initialCompanyId || null);
   const [files, setFiles] = useState([]);
   const [existingProjects, setExistingProjects] = useState([]);
   const [customProjects, setCustomProjects] = useState([]);
   const [isTypingProject, setIsTypingProject] = useState(false);
   const [newProjectName, setNewProjectName] = useState('');
   const [companyUsers, setCompanyUsers] = useState([]);
+  const [signFamilies, setSignFamilies] = useState([]);
+  const [signCount, setSignCount] = useState('');
+  const [signs, setSigns] = useState([]);
+
+  const isBrandBook = form.serviceType === 'Brand Book';
+
+  useEffect(() => {
+    supabase.from('sign_families').select('name').order('sort_order').then(({ data }) => setSignFamilies((data || []).map(r => r.name)));
+  }, []);
+
+  useEffect(() => {
+    if (!isBrandBook) { setSignCount(''); setSigns([]); }
+  }, [isBrandBook]);
+
+  useEffect(() => {
+    const n = Math.max(0, parseInt(signCount) || 0);
+    setSigns(prev => {
+      if (n < prev.length) return prev.slice(0, n);
+      if (n > prev.length) {
+        const extra = Array.from({ length: n - prev.length }, () => ({ id: crypto.randomUUID(), signName: '', signFamily: '' }));
+        return [...prev, ...extra];
+      }
+      return prev;
+    });
+  }, [signCount]);
 
   const companyId = form.companyId || initialCompanyId;
 
@@ -75,14 +103,19 @@ export default function RequestForm({
         setCompanyUsers(merged);
       }
     });
-    setForm(f => ({ ...f, project: '', requestedBy: '' }));
-    setCustomProjects([]);
-    setIsTypingProject(false);
-    setNewProjectName('');
+    if (companyId !== prevCompanyIdRef.current) {
+      setForm(f => ({ ...f, project: '', requestedBy: '' }));
+      setCustomProjects([]);
+      setIsTypingProject(false);
+      setNewProjectName('');
+    }
+    prevCompanyIdRef.current = companyId;
   }, [companyId]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const set = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
 
+  const setSign = (id, field, value) => setSigns(prev => prev.map(s => s.id === id ? { ...s, [field]: value } : s));
+
   const allProjectNames = [
     ...existingProjects.map(p => p.name),
     ...customProjects.filter(name => !existingProjects.some(p => p.name === name)),
@@ -108,62 +141,70 @@ export default function RequestForm({
     setNewProjectName('');
   };
 
-  const requesterOptions = showRequester ? [
-    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
-    ...companyUsers.filter(u => u.id !== currentUser?.id),
-  ] : [];
-
   const showCompanySelect = companies.length > 1 || showRequester;
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    const requester = requesterOptions.find(u => u.id === form.requestedBy);
-    const requestedByName = requester ? requester.name.replace(' (You)', '') : '';
-    onSubmit({ ...form, companyId, requestedByName }, files, existingProjects);
+    const requestedByName = currentUser?.name || '';
+    onSubmit(
+      {
+        ...form,
+        companyId,
+        requestedBy: currentUser?.id || '',
+        requestedByName,
+        signCount: isBrandBook ? (parseInt(signCount) || null) : null,
+        signs: isBrandBook ? signs : [],
+      },
+      files,
+      existingProjects
+    );
   };
 
   return (
     <form onSubmit={handleSubmit}>
-      {showCompanySelect && (
-        <div className="form-group">
-          <label style={modalLabelStyle}>Company *</label>
-          <select
-            value={form.companyId}
-            onChange={e => setForm(f => ({ ...f, companyId: e.target.value }))}
-            required
-            style={modalInputStyle}
-          >
-            <option value="">Select company...</option>
-            {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
-          </select>
-        </div>
-      )}
-
-      <div className="form-group">
-        <label style={modalLabelStyle}>Project *</label>
-        {isTypingProject ? (
-          <div style={{ display: 'flex', gap: 8 }}>
-            <input
-              type="text"
-              placeholder="Enter project name..."
-              value={newProjectName}
-              onChange={e => setNewProjectName(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProject(); } }}
-              autoFocus
-              style={{ ...modalInputStyle, flex: 1 }}
-            />
-            <button type="button" className="btn btn-outline" onClick={handleAddProject} disabled={!newProjectName.trim()}>Add</button>
-            <button type="button" className="btn btn-outline" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
+      {/* Row 1: Company + Project */}
+      <div className="grid-2">
+        {showCompanySelect ? (
+          <div className="form-group">
+            <label style={modalLabelStyle}>Company *</label>
+            <select
+              value={form.companyId}
+              onChange={e => setForm(f => ({ ...f, companyId: e.target.value }))}
+              required
+              style={modalInputStyle}
+            >
+              <option value="">Select company...</option>
+              {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+            </select>
           </div>
-        ) : (
-          <select value={form.project} onChange={handleProjectSelect} required disabled={showCompanySelect && !companyId} style={modalInputStyle}>
-            <option value="">{showCompanySelect && !companyId ? 'Select company first' : 'Select a project...'}</option>
-            {allProjectNames.map(name => <option key={name} value={name}>{name}</option>)}
-            {(!showCompanySelect || companyId) && <option value="__new__">＋ Create new project...</option>}
-          </select>
-        )}
+        ) : <div />}
+        <div className="form-group">
+          <label style={modalLabelStyle}>Project *</label>
+          {isTypingProject ? (
+            <div style={{ display: 'flex', gap: 8 }}>
+              <input
+                type="text"
+                placeholder="Enter project name..."
+                value={newProjectName}
+                onChange={e => setNewProjectName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProject(); } }}
+                autoFocus
+                style={{ ...modalInputStyle, flex: 1 }}
+              />
+              <button type="button" className="btn btn-outline" onClick={handleAddProject} disabled={!newProjectName.trim()}>Add</button>
+              <button type="button" className="btn btn-outline" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
+            </div>
+          ) : (
+            <select value={form.project} onChange={handleProjectSelect} required disabled={showCompanySelect && !companyId} style={modalInputStyle}>
+              <option value="">{showCompanySelect && !companyId ? 'Select company first' : 'Select a project...'}</option>
+              {allProjectNames.map(name => <option key={name} value={name}>{name}</option>)}
+              {(!showCompanySelect || companyId) && <option value="__new__">＋ Create new project...</option>}
+            </select>
+          )}
+        </div>
       </div>
 
+      {/* Row 2: Service Type + Desired Deadline */}
       <div className="grid-2">
         <div className="form-group">
           <label style={modalLabelStyle}>Service Type *</label>
@@ -178,32 +219,57 @@ export default function RequestForm({
         </div>
       </div>
 
-      <div className="form-group" style={{ marginTop: -4 }}>
-        <label style={{ ...modalLabelStyle, display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', marginBottom: 0 }}>
+      {/* Row 3: Title/Location + Mark as Hot inline */}
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'end', marginBottom: 16 }}>
+        <div className="form-group" style={{ marginBottom: 0 }}>
+          <label style={modalLabelStyle}>Title / Location *</label>
+          <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required style={modalInputStyle} />
+        </div>
+        <label style={{ ...modalLabelStyle, display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', marginBottom: 4, whiteSpace: 'nowrap' }}>
           <input type="checkbox" checked={form.isHot} onChange={e => setForm(f => ({ ...f, isHot: e.target.checked }))} />
           <span>Mark as Hot</span>
         </label>
       </div>
 
-      {showRequester && (
+      {isBrandBook && (
         <div className="form-group">
-          <label style={modalLabelStyle}>Requested By *</label>
-          <select value={form.requestedBy} onChange={set('requestedBy')} disabled={!companyId} required style={modalInputStyle}>
-            <option value="">{companyId ? 'Select requester...' : 'Select company first'}</option>
-            {requesterOptions.map(user => (
-              <option key={user.id} value={user.id}>{user.name}{user.email ? ` (${user.email})` : ''}</option>
-            ))}
-          </select>
+          <label style={modalLabelStyle}>Sign Count *</label>
+          <input
+            type="number"
+            min="1"
+            max="50"
+            placeholder="How many signs?"
+            value={signCount}
+            onChange={e => setSignCount(e.target.value)}
+            required
+            style={{ ...modalInputStyle, width: '100%' }}
+          />
+        </div>
+      )}
+
+      {isBrandBook && signs.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
+          {signs.map((sign, i) => (
+            <div key={sign.id} style={{ border: '1px solid var(--border)', borderRadius: 6, padding: '10px 12px' }}>
+              <div style={{ ...modalLabelStyle, marginBottom: 8 }}>Sign {i + 1}</div>
+              <div className="form-group" style={{ marginBottom: 0 }}>
+                <label style={modalLabelStyle}>Sign Information *</label>
+                <input
+                  type="text"
+                  placeholder="e.g. Main Entry, Drive Thru"
+                  value={sign.signName}
+                  onChange={e => setSign(sign.id, 'signName', e.target.value)}
+                  required
+                  style={modalInputStyle}
+                />
+              </div>
+            </div>
+          ))}
         </div>
       )}
 
       <div className="form-group">
-        <label style={modalLabelStyle}>Request Title *</label>
-        <input type="text" placeholder="e.g. City, State or Site Name" value={form.title} onChange={set('title')} required style={modalInputStyle} />
-      </div>
-
-      <div className="form-group">
-        <label style={modalLabelStyle}>Description *</label>
+        <label style={modalLabelStyle}>{isBrandBook ? 'Notes' : 'Description'} *</label>
         <textarea placeholder="Notes on the request..." value={form.description} onChange={set('description')} style={modalTextAreaStyle} required />
       </div>