LF-5215: Note list and item display components#4093
Open
litefarm-pr-bot wants to merge 1 commit intointegrationfrom
Open
LF-5215: Note list and item display components#4093litefarm-pr-bot wants to merge 1 commit intointegrationfrom
litefarm-pr-bot wants to merge 1 commit intointegrationfrom
Conversation
Pure presentational components for browsing farm notes — reviewable in Storybook independently of the backend and RTK Query layer (LF-5214/5216). - FarmNotesFloatingButton: teal-bordered button with message-text-square-02 icon, Farm notes label, and optional red unread dot badge - FarmNoteItem: collapsed (1-line/2-line clamp, author, date badge, lock icon for private) and expanded (chevron, author+date header, optional image with enlarge link, full text, author-only edit/delete actions) states; muted opacity with Pending sync label when to_sync is true - FarmNoteList: scrollable list owning expansion state via useExpandable (isSingleExpandable), pending notes surfaced above server notes, Add a note button, empty state; resolves author names from users lookup map prop - message-text-square-02.svg: exact SVG paths from Figma asset, currentColor stroke so it inherits teal from CSS - FARM_NOTE i18n keys added to translation.json (alphabetized via pnpm i18n) - Storybook stories for all three components covering all documented states Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
litefarm-pr-bot
requested review from
kathyavini
and removed request for
a team
kathyavini
reviewed
Mar 17, 2026
Collaborator
kathyavini
left a comment
kathyavini
left a comment
There was a problem hiding this comment.
Oooh this one is going to be a bit of a tricky review; lots of liberties taken with this one 😂
I was interested to see how far it could take the Figma... looks like, maybe ~60% accuracy?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds three pure presentational components for browsing farm notes, reviewable in Storybook independently of the backend and RTK Query layer. These components have no dependencies on data-fetching or store setup — all state flows in via props.
FarmNoteItemmanages two distinct layouts: a collapsed row (1-line clamp on desktop, 2-line on mobile) showing note preview, author name, optional lock icon for private notes, and a date badge with "TODAY" formatting; and an expanded card with a teal-background chevron, author + date header, optional image thumbnail with enlarge link, full note text, and author-only Delete / Edit action buttons.FarmNoteListowns the accordion expansion state viauseExpandable({ isSingleExpandable: true }), surfaces offline-queued notes (to_sync: true) above server-fetched notes, resolves author names from ausers: Record<string, string>lookup map, and renders an empty state when there are no notes.FarmNotesFloatingButtonis a teal-bordered button with themessage-text-square-02SVG icon (exact paths from Figma,currentColorstroke) and an optional red unread dot badge.The
FarmNoteinterface is defined locally incomponents/FarmNotes/types.tsrather thanstore/api/types/index.tssince that addition belongs to LF-5214 (RTK Query API layer). Once LF-5214 merges, the import path should be updated to the shared location. All user-visible strings use a newFARM_NOTEi18n key intranslation.json, alphabetized viapnpm i18n.Jira link: https://lite-farm.atlassian.net/browse/LF-5215
Type of change
How Has This Been Tested?
All component states are covered by Storybook stories: collapsed public/private, expanded with/without image, expanded as author (with delete/edit), pending sync, past date, empty list, and list with pending notes. No local frontend running; visual review was not performed against a running app.
Checklist:
pnpm i18nto help with this)