Rename client project buttons to '+ New Project'

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

src/pages/client/MyProjects.jsx

@@ -4,8 +4,9 @@ import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
+import { withTimeout } from '../../lib/withTimeout';
 
-const vLabel = (v) => 'v' + String(v || 0).padStart(2, '0');
+const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
 
 function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
   const [open, setOpen] = useState(true);
@@ -20,9 +21,10 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
   if (filter === 'mine' && filteredTasks.length === 0) return null;
 
   return (
-    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
+    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
       {/* Project header — clickable to collapse */}
       <button
+        className="interactive-panel-toggle"
         onClick={() => setOpen(o => !o)}
         style={{
           width: '100%', display: 'flex', alignItems: 'center',
@@ -68,6 +70,7 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
                 <Link
                   key={task.id}
                   to={`/my-requests/${task.id}`}
+                  className="interactive-row"
                   style={{
                     display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                     padding: '12px 16px',
@@ -81,7 +84,7 @@ function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
                         {task.title}
                       </span>
                       <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                        {vLabel(task.current_version)}
+                        {rLabel(task.current_version)}
                       </span>
                       {isMine && (
                         <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 600 }}>
@@ -123,24 +126,37 @@ export default function MyProjects() {
 
   useEffect(() => {
     async function load() {
-      const [{ data: p }, { data: t }] = await Promise.all([
+      try {
+        const [{ data: p }, { data: t }] = await withTimeout(Promise.all([
           supabase.from('projects').select('*').order('created_at', { ascending: false }),
           supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
-      ]);
+        ]), 12000, 'Projects load');
         setProjects(p || []);
         setTasks(t || []);
 
         if (t && t.length > 0) {
-        const { data: subs } = await supabase
+          const { data: subs } = await withTimeout(
+            supabase
               .from('submissions')
               .select('id, task_id, submitted_by, submitted_by_name, version_number, type')
               .in('task_id', t.map(task => task.id))
-          .order('version_number');
+              .order('version_number'),
+            12000,
+            'Project submissions load'
+          );
           setSubmissions(subs || []);
+        } else {
+          setSubmissions([]);
         }
-
+      } catch (error) {
+        console.error('MyProjects load failed:', error);
+        setProjects([]);
+        setTasks([]);
+        setSubmissions([]);
+      } finally {
         setLoading(false);
       }
+    }
     load();
   }, []);
 
@@ -153,11 +169,14 @@ export default function MyProjects() {
           <div className="page-title">Projects</div>
           <div className="page-subtitle">All work for your company.</div>
         </div>
-        <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
+        <Link to="/new-request" className="btn btn-primary">+ New Project</Link>
       </div>
 
-      {/* Filter toggle */}
-      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
+      <div className="card page-toolbar">
+        <div className="page-toolbar-grid">
+          <div className="page-toolbar-section">
+            <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
+            <div className="page-toolbar-filters">
               <button
                 className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`}
                 onClick={() => setFilter('all')}
@@ -171,12 +190,16 @@ export default function MyProjects() {
                 Mine Only
               </button>
             </div>
+          </div>
+
+        </div>
+      </div>
 
       {projects.length === 0 ? (
         <div className="empty-state">
           <h3>No projects yet</h3>
           <p>Submit a request and a project will be created automatically.</p>
-          <Link to="/new-request" className="btn btn-primary" style={{ marginTop: 16 }}>Submit Request</Link>
+          <Link to="/new-request" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
         </div>
       ) : (
         projects.map(project => (