From 2d5eaed434051028e99afcb51e6343f2c1893095 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Nov 2026 12:14:30 +0000 Subject: [PATCH 1/3] design-audit: use the h3 typography token for FeedItem's species name instead of raw 1.1rem Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01WA2AWip5Xj5kQDeaYG8mav --- frontend/src/components/feed/FeedItem.tsx | 42 ++++++++++++++++++----- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/feed/FeedItem.tsx b/frontend/src/components/feed/FeedItem.tsx index 7709b598..e01af0b7 100644 --- a/frontend/src/components/feed/FeedItem.tsx +++ b/frontend/src/components/feed/FeedItem.tsx @@ -1,6 +1,12 @@ import { memo } from "react"; import { useNavigate } from "react-router-dom"; -import { Box, Typography, Card, CardContent, CardActionArea } from "@mui/material"; +import { + Box, + Typography, + Card, + CardContent, + CardActionArea, +} from "@mui/material"; import type { Occurrence } from "../../services/types"; import { useAppSelector } from "../../store"; import { useIsPending } from "../../store/pendingSlice"; @@ -22,7 +28,11 @@ interface FeedItemProps { onDelete?: (observation: Occurrence) => void; } -export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete }: FeedItemProps) { +export const FeedItem = memo(function FeedItem({ + observation, + onEdit, + onDelete, +}: FeedItemProps) { // Like state lives in the query cache: the optimistic mutation patches the // occurrence in every cache that holds it, so reading the prop is reactive. const liked = observation.viewerHasLiked ?? false; @@ -39,9 +49,12 @@ export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete } const timeAgo = ; const taxonomy = observation.effectiveTaxonomy; - const species = observation.communityId || taxonomy?.scientificName || undefined; + const species = + observation.communityId || taxonomy?.scientificName || undefined; - const imageUrl = observation.images[0] ? getImageUrl(observation.images[0].url) : ""; + const imageUrl = observation.images[0] + ? getImageUrl(observation.images[0].url) + : ""; const observationUrl = getObservationUrl(observation.uri); @@ -88,8 +101,12 @@ export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete } onEdit(observation) } : {})} - {...(isOwnPost && onDelete ? { onDelete: () => onDelete(observation) } : {})} + {...(isOwnPost && onEdit + ? { onEdit: () => onEdit(observation) } + : {})} + {...(isOwnPost && onDelete + ? { onDelete: () => onDelete(observation) } + : {})} /> @@ -115,7 +132,12 @@ export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete } gap: 1, }} > - + theme.typography.h3.fontSize, + minWidth: 0, + }} + > {species ? ( - like.mutate({ uri: observation.uri, cid: observation.cid, liked: !liked }) + like.mutate({ + uri: observation.uri, + cid: observation.cid, + liked: !liked, + }) } /> From 39c668640adafa6c5441847f9da20c1cdce734d5 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Nov 2026 12:15:15 +0000 Subject: [PATCH 2/3] design-audit: drop unrelated reformatting from FeedItem Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01WA2AWip5Xj5kQDeaYG8mav --- frontend/src/components/feed/FeedItem.tsx | 42 +++++------------------ 1 file changed, 8 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/feed/FeedItem.tsx b/frontend/src/components/feed/FeedItem.tsx index e01af0b7..7709b598 100644 --- a/frontend/src/components/feed/FeedItem.tsx +++ b/frontend/src/components/feed/FeedItem.tsx @@ -1,12 +1,6 @@ import { memo } from "react"; import { useNavigate } from "react-router-dom"; -import { - Box, - Typography, - Card, - CardContent, - CardActionArea, -} from "@mui/material"; +import { Box, Typography, Card, CardContent, CardActionArea } from "@mui/material"; import type { Occurrence } from "../../services/types"; import { useAppSelector } from "../../store"; import { useIsPending } from "../../store/pendingSlice"; @@ -28,11 +22,7 @@ interface FeedItemProps { onDelete?: (observation: Occurrence) => void; } -export const FeedItem = memo(function FeedItem({ - observation, - onEdit, - onDelete, -}: FeedItemProps) { +export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete }: FeedItemProps) { // Like state lives in the query cache: the optimistic mutation patches the // occurrence in every cache that holds it, so reading the prop is reactive. const liked = observation.viewerHasLiked ?? false; @@ -49,12 +39,9 @@ export const FeedItem = memo(function FeedItem({ const timeAgo = ; const taxonomy = observation.effectiveTaxonomy; - const species = - observation.communityId || taxonomy?.scientificName || undefined; + const species = observation.communityId || taxonomy?.scientificName || undefined; - const imageUrl = observation.images[0] - ? getImageUrl(observation.images[0].url) - : ""; + const imageUrl = observation.images[0] ? getImageUrl(observation.images[0].url) : ""; const observationUrl = getObservationUrl(observation.uri); @@ -101,12 +88,8 @@ export const FeedItem = memo(function FeedItem({ onEdit(observation) } - : {})} - {...(isOwnPost && onDelete - ? { onDelete: () => onDelete(observation) } - : {})} + {...(isOwnPost && onEdit ? { onEdit: () => onEdit(observation) } : {})} + {...(isOwnPost && onDelete ? { onDelete: () => onDelete(observation) } : {})} /> @@ -132,12 +115,7 @@ export const FeedItem = memo(function FeedItem({ gap: 1, }} > - theme.typography.h3.fontSize, - minWidth: 0, - }} - > + {species ? ( - like.mutate({ - uri: observation.uri, - cid: observation.cid, - liked: !liked, - }) + like.mutate({ uri: observation.uri, cid: observation.cid, liked: !liked }) } /> From 21965d9a21d3f4f0004ed3d346f14c553791f1da Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 8 Nov 2026 12:15:37 +0000 Subject: [PATCH 3/3] design-audit: use the h3 typography token for FeedItem's species name Co-Authored-By: Claude Sonnet 5.5 Claude-Session: https://claude.ai/code/session_01WA2AWip5Xj5kQDeaYG8mav --- frontend/src/components/feed/FeedItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/feed/FeedItem.tsx b/frontend/src/components/feed/FeedItem.tsx index 7709b598..847f93fe 100644 --- a/frontend/src/components/feed/FeedItem.tsx +++ b/frontend/src/components/feed/FeedItem.tsx @@ -115,7 +115,7 @@ export const FeedItem = memo(function FeedItem({ observation, onEdit, onDelete } gap: 1, }} > - + theme.typography.h3.fontSize, minWidth: 0 }}> {species ? (