Skip to content

Small layout tweaks for project summary view #1304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
annavik merged 3 commits into from
May 14, 2026
Merged

Small layout tweaks for project summary view #1304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef9159f
layout: streamline summary view layout and styles
annavik May 14, 2026
8e098a5
copy: add "Anonymous user" to translated strings
annavik May 14, 2026
0fbd95d
fix: present "Anonymous user" in summary view when user is missing name
annavik May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions ui/src/data-services/models/occurrence-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
import { STRING, translate } from 'utils/language'
import { UserPermission } from 'utils/user/types'
import { Algorithm } from './algorithm'
import { Occurrence, ServerOccurrence } from './occurrence'
Expand Down Expand Up @@ -66,10 +67,12 @@ export class OccurrenceDetails extends Occurrence {
user: i.user
? {
id: `${i.user.id}`,
name: i.user.name?.length ? i.user.name : 'Anonymous user',
name: i.user.name?.length
? i.user.name
: translate(STRING.ANONYMOUS_USER),
image: i.user.image,
}
: { name: 'Unknown user' },
: { name: translate(STRING.ANONYMOUS_USER) },
comment: i.comment,
userPermissions: i.user_permissions,
createdAt: i.created_at,
Expand Down
7 changes: 5 additions & 2 deletions ui/src/data-services/models/occurrence.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { getFormatedDateString } from 'utils/date/getFormatedDateString/getFormatedDateString'
import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
import { STRING, translate } from 'utils/language'
import { UserPermission } from 'utils/user/types'
import { Taxon } from './taxa'

Expand Down Expand Up @@ -103,9 +104,11 @@ export class Occurrence {
return verifiedBy
? {
id: `${verifiedBy.id}`,
name: verifiedBy.name?.length ? verifiedBy.name : 'Anonymous user',
name: verifiedBy.name?.length
? verifiedBy.name
: translate(STRING.ANONYMOUS_USER),
}
: { name: 'Unknown user' }
: { name: translate(STRING.ANONYMOUS_USER) }
}

get durationLabel(): string | undefined {
Expand Down
10 changes: 6 additions & 4 deletions ui/src/pages/project/summary/list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,15 @@ export const ListItem = ({
<Image image={item.image.src} />
)}
<div className="flex flex-col overflow-hidden">
{item.title ? (
<span className="truncate font-medium">{item.title}</span>
{item.title ? <span className="truncate">{item.title}</span> : null}
{item.text ? (
<span className="truncate body-small text-muted-foreground">
{item.text}
</span>
) : null}
{item.text ? <span className="truncate">{item.text}</span> : null}
</div>
{count !== undefined ? (
<span className="body-small grow text-right">
<span className="grow body-small text-muted-foreground text-right">
{count.toLocaleString()}
</span>
) : null}
Expand Down
14 changes: 8 additions & 6 deletions ui/src/pages/project/summary/summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const SummaryColumn = ({

if (isEmpty) {
return (
<p className="text-small text-muted-foreground">
<p className="body-small text-muted-foreground">
{translate(STRING.MESSAGE_NO_RESULTS_TO_SHOW)}
</p>
)
Expand Down Expand Up @@ -149,10 +149,10 @@ const LatestOccurrences = ({ projectId }: { projectId: string }) => {
})}
>
<ListItem
count={occurrence.dateLabel}
item={{
image: { src: occurrence.images[0]?.src },
text: occurrence.determinationTaxon.name,
text: occurrence.dateLabel,
title: occurrence.determinationTaxon.name,
}}
/>
</Link>
Expand All @@ -176,7 +176,9 @@ const MostIdentifications = ({ projectId }: { projectId: string }) => {
<ListItem
item={{
image: { src: user.image, variant: 'user' },
title: user.name,
title: user.name?.length
? user.name
: translate(STRING.ANONYMOUS_USER),
Comment on lines +179 to +181

@coderabbitai coderabbitai Bot May 14, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Handle whitespace-only names in anonymous fallback.

Line 179 uses .length, so a value like " " bypasses the fallback and renders as an empty-looking label. Trim before checking.

Suggested fix 
-              title: user.name?.length
-                ? user.name
+              title: user.name?.trim().length
+                ? user.name.trim()
                 : translate(STRING.ANONYMOUS_USER),
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
title: user.name?.length
? user.name
: translate(STRING.ANONYMOUS_USER),
title: user.name?.trim().length
? user.name.trim()
: translate(STRING.ANONYMOUS_USER),
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/src/pages/project/summary/summary.tsx` around lines 179 - 181, The current
title expression uses user.name?.length so whitespace-only names like "   "
bypass the anonymous fallback; update the ternary to check the trimmed name and
use the trimmed value for display, e.g. compute const displayName =
user.name?.trim(); then set title: displayName?.length ? displayName :
translate(STRING.ANONYMOUS_USER) (referencing user.name, title, and
translate(STRING.ANONYMOUS_USER) to locate the change).

}}
count={user.identification_count}
/>
Expand Down Expand Up @@ -210,7 +212,7 @@ const MostObservedTaxa = ({ projectId }: { projectId: string }) => {
<ListItem
item={{
image: { src: species.coverImageUrl ?? undefined },
text: species.name,
title: species.name,
}}
count={species.numOccurrences}
/>
Expand All @@ -233,7 +235,7 @@ const Charts = ({ projectId }: { projectId: string }) => {

if (!projectCharts?.length) {
return (
<p className="text-small text-muted-foreground">
<p className="body-small text-muted-foreground">
{translate(STRING.MESSAGE_NO_RESULTS_TO_SHOW)}
</p>
)
Expand Down
2 changes: 2 additions & 0 deletions ui/src/utils/language.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,6 +274,7 @@ export enum STRING {
ABOUT_ROLE,
ABOUT_ROLES,
ALGORITHMS,
ANONYMOUS_USER,
APPLY_ID_SHORT,
APPLY_ID,
BACK_TO_LOGIN,
Expand Down Expand Up @@ -650,6 +651,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
[STRING.ABOUT_ROLE]: 'About role',
[STRING.ABOUT_ROLES]: 'About roles',
[STRING.ALGORITHMS]: 'Algorithms',
[STRING.ANONYMOUS_USER]: 'Anonymous user',
[STRING.APPLY_ID_SHORT]: 'Apply',
[STRING.APPLY_ID]: 'Apply ID',
[STRING.BACK_TO_LOGIN]: 'Back to login',
Expand Down