Tighten CauseStarter home lists and chips

ui/src/causestarter/components/ProjectCard.tsx

@@ -1,15 +1,29 @@
-import { Paper, Stack, Typography } from '@mui/material'
+import { Box, Paper, Stack, Typography } from '@mui/material'
+import {
+  getProjectStatus,
+  STATUS_COLORS,
+  STATUS_LABELS,
+  STATUS_TOOLTIPS,
+} from '@ui/lazy-giving'
 import { InfoChip, projectPathForAddress } from '@ui/shared'
 import { Link as RouterLink } from 'react-router-dom'
 import type { ProjectRelation, UserProject } from '../lib/userProjects'
 
 const RELATION_LABEL: Record<ProjectRelation, string> = {
-  created: 'Created',
+  created: 'Owner',
   contributed: 'Contributed',
   bookmarked: 'Bookmarked',
 }
 
+const RELATION_TOOLTIP: Record<ProjectRelation, string> = {
+  created: 'This wallet created the project.',
+  contributed: 'This wallet contributed to this project.',
+  bookmarked: 'You bookmarked this project.',
+}
+
 export function ProjectCard({ project }: { project: UserProject }) {
+  const status = getProjectStatus(project.project)
+
   return (
     <Paper
       component={RouterLink}
@@ -18,8 +32,9 @@ export function ProjectCard({ project }: { project: UserProject }) {
       data-testid="home-project"
       sx={{
         display: 'block',
-        p: 2.5,
-        borderRadius: 3,
+        px: 1.5,
+        py: 1,
+        borderRadius: 2,
         border: '1px solid',
         borderColor: 'divider',
         textDecoration: 'none',
@@ -28,26 +43,42 @@ export function ProjectCard({ project }: { project: UserProject }) {
         '&:active': { transform: 'scale(0.99)' },
         '&:hover': {
           borderColor: 'primary.main',
-          boxShadow: (theme) => `0 8px 24px ${theme.palette.mode === 'light' ? 'rgba(15,118,110,0.12)' : 'rgba(0,0,0,0.35)'}`,
+          boxShadow: (theme) => `0 4px 12px ${theme.palette.mode === 'light' ? 'rgba(15,118,110,0.10)' : 'rgba(0,0,0,0.28)'}`,
         },
       }}
     >
-      <Typography variant="h6" sx={{ fontWeight: 700, lineHeight: 1.25 }}>
-        {project.title}
-      </Typography>
-      {project.relations.length > 0 && (
-        <Stack direction="row" spacing={0.75} useFlexGap flexWrap="wrap" sx={{ mt: 1.25 }}>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1.5}>
+        <Box sx={{ minWidth: 0 }}>
+          <Typography variant="subtitle1" noWrap sx={{ fontWeight: 700, lineHeight: 1.3 }}>
+            {project.title}
+          </Typography>
+        </Box>
+        <Stack
+          direction="row"
+          alignItems="center"
+          spacing={0.75}
+          useFlexGap
+          flexWrap="wrap"
+          justifyContent="flex-end"
+          sx={{ flexShrink: 0 }}
+        >
+          <InfoChip
+            size="small"
+            label={STATUS_LABELS[status]}
+            color={STATUS_COLORS[status]}
+            title={STATUS_TOOLTIPS[status]}
+          />
           {project.relations.map((relation) => (
             <InfoChip
               key={relation}
               size="small"
               label={RELATION_LABEL[relation]}
               color="default"
-              title={RELATION_LABEL[relation]}
+              title={RELATION_TOOLTIP[relation]}
             />
           ))}
         </Stack>
-      )}
+      </Stack>
     </Paper>
   )
 }

ui/src/causestarter/components/YourCauses.tsx

@@ -34,11 +34,15 @@ export function YourCauses({
           gap: 2,
         }}
       >
-        <Box sx={{ minWidth: 0 }}>
+        <Stack direction="row" alignItems="center" sx={{ minWidth: 0 }}>
           <Typography variant="h4" component={headingComponent} sx={{ fontWeight: 800, fontSize: { xs: '1.6rem', sm: '2rem' } }}>
             Cause boards
           </Typography>
-        </Box>
+          <HeaderInfoTip
+            title="A published mix of independent statements, plus fundable projects aligned with them — not a club you join."
+            label="About cause boards"
+          />
+        </Stack>
         <Stack direction="row" spacing={1} sx={{ flexShrink: 0, mt: 0.35 }}>
           <Button
             variant="outlined"

ui/src/causestarter/components/YourDashboard.tsx

@@ -37,7 +37,7 @@ export function YourDashboard({
           Fundable projects
         </Typography>
         <HeaderInfoTip
-          title="Work vouched for as advancing statements this wallet has signed."
+          title="Projects vouched for as advancing statements this wallet has signed."
           label="About your fundable-projects board"
         />
       </Stack>

ui/src/causestarter/components/YourNudgersAndNudges.test.tsx

@@ -52,9 +52,26 @@ describe('YourNudgersAndNudges', () => {
     )
     expect(screen.getByTestId('home-nudgers')).toBeInTheDocument()
     expect(screen.getByText(/No suggesters yet/)).toBeInTheDocument()
+    expect(screen.getByText(/No suggestions/)).toBeInTheDocument()
     expect(getNudgerPublications).not.toHaveBeenCalled()
   })
 
+  it('shows a short empty suggestions line when subscribed suggesters have published none', async () => {
+    useTrustedNudgers.mockReturnValue([
+      { address: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd', name: 'Housing mediator' },
+    ])
+    getNudgerPublications.mockResolvedValue([])
+
+    render(
+      <MemoryRouter>
+        <YourNudgersAndNudges />
+      </MemoryRouter>,
+    )
+
+    expect(await screen.findByText(/No suggestions/)).toBeInTheDocument()
+    expect(screen.queryByText(/No published suggestions/)).not.toBeInTheDocument()
+  })
+
   it('lists subscribed suggesters and their recent suggestions', async () => {
     useTrustedNudgers.mockReturnValue([
       { address: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd', name: 'Housing mediator' },

ui/src/causestarter/components/YourNudgersAndNudges.tsx

@@ -93,16 +93,15 @@ export function YourNudgersAndNudges() {
             Suggesters you've subscribed to
           </Typography>
           <HeaderInfoTip
-            title="Opt-ins stay on this device. Suggestions from these services appear here and on statement pages."
+            title="Suggesters offer suggestions like 'If you signed X, you may want to sign Y.'"
             label="About subscribed suggesters"
           />
         </Stack>
       </Box>
 
       {trustedNudgers.length === 0 ? (
         <Alert severity="info" sx={{ borderRadius: 2 }}>
-          No suggesters yet. Opt in on a cause if you would sign a better wording but
-          do not want to hunt for it — a mediator can nudge you when a bridge fits.
+          No suggesters yet. Suggesters offer suggestions like 'If you signed X, you may want to sign Y.'
         </Alert>
       ) : (
         <Stack direction="row" spacing={1} useFlexGap flexWrap="wrap">
@@ -134,10 +133,11 @@ export function YourNudgersAndNudges() {
 
       {error && <Alert severity="warning">{error}</Alert>}
 
-      {!loading && !error && trustedNudgers.length > 0 && nudges.length === 0 && (
-        <Typography variant="body2" color="text.secondary">
-          No published suggestions from these suggesters yet.
-        </Typography>
+      {!loading && !error && nudges.length === 0 && (
+        <Alert severity="info" sx={{ borderRadius: 2 }}>
+          No suggestions. Suggesters you subscribe to can publish notes like 'If you
+          signed X, you may want to sign Y.'
+        </Alert>
       )}
 
       {!loading && nudges.map((nudge) => {

ui/src/causestarter/components/YourProjects.test.tsx

@@ -32,14 +32,19 @@ describe('YourProjects', () => {
     expect(screen.getByText(/No projects yet/)).toBeInTheDocument()
   })
 
-  it('lists related projects', () => {
+  it('lists related projects with funding status and Owner, not Created', () => {
     useUserProjects.mockReturnValue({
       connected: true,
       loading: false,
       projects: [{
         title: 'Garden beds',
         relations: ['created', 'contributed'],
-        project: { id: '0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' },
+        project: {
+          id: '0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+          totalReceived: '100',
+          threshold: '100',
+          deadline: '9999999999',
+        },
       }],
     })
     render(
@@ -48,7 +53,9 @@ describe('YourProjects', () => {
       </MemoryRouter>,
     )
     expect(screen.getByText('Garden beds')).toBeInTheDocument()
-    expect(screen.getByText('Created')).toBeInTheDocument()
+    expect(screen.getByText('Succeeded')).toBeInTheDocument()
+    expect(screen.getByText('Owner')).toBeInTheDocument()
     expect(screen.getByText('Contributed')).toBeInTheDocument()
+    expect(screen.queryByText('Created')).not.toBeInTheDocument()
   })
 })

ui/src/causestarter/components/YourProjects.tsx

@@ -68,9 +68,13 @@ export function YourProjects() {
         </Alert>
       )}
 
-      {projects.map((project) => (
-        <ProjectCard key={project.project.id} project={project} />
-      ))}
+      {projects.length > 0 && (
+        <Stack spacing={0.75}>
+          {projects.map((project) => (
+            <ProjectCard key={project.project.id} project={project} />
+          ))}
+        </Stack>
+      )}
     </Stack>
   )
 }