From 6a9990cdeea33e92ff61928a019fd52cb5534732 Mon Sep 17 00:00:00 2001 From: yeevern Date: Sun, 7 Jun 2026 17:26:52 +1000 Subject: [PATCH 1/3] Display icon on goal card --- src/api/types.ts | 1 + src/ui/pages/Main/goals/GoalCard.tsx | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..8cbabc0 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -27,6 +27,7 @@ export interface Goal { accountId: string transactionIds: string[] tagIds: string[] + icon: string | null } export interface Tag { diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..17863f5 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -29,6 +29,7 @@ export default function GoalCard(props: Props) { ${goal.targetAmount} {asLocaleDateString(goal.targetDate)} + {goal.icon} ) } @@ -54,3 +55,7 @@ const TargetDate = styled.h4` color: rgba(174, 174, 174, 1); font-size: 1rem; ` + +const Icon = styled.h1` + font-size: 5.5rem; +` \ No newline at end of file From 9f2c2d3c39ec6f0182721ea457a1079eef228d86 Mon Sep 17 00:00:00 2001 From: yeevern Date: Mon, 8 Jun 2026 00:23:24 +1000 Subject: [PATCH 2/3] Implemented an emoji picker --- package-lock.json | 1 + src/ui/features/goalmanager/GoalManager.tsx | 56 +++++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/package-lock.json b/package-lock.json index 240aecf..94349f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6611,6 +6611,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-3.0.1.tgz", "integrity": "sha512-sxpmMKxqLvcscu6mFn9ITHeZNkGzIvD0BSNFE/LJESPbCA8s1jM6bCDPjWbV31xHq7JXaxgpHxLB54RCbBZSlg==", + "license": "BSD-3-Clause", "dependencies": { "@babel/runtime": "^7.0.0", "prop-types": "^15.6.0" diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..54d1abb 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -11,8 +11,12 @@ import { selectGoalsMap, updateGoal as updateGoalRedux } from '../../../store/go import { useAppDispatch, useAppSelector } from '../../../store/hooks' import DatePicker from '../../components/DatePicker' import { Theme } from '../../components/Theme' +import EmojiPicker from '../../components/EmojiPicker' +import { BaseEmoji } from 'emoji-mart' +import GoalIcon from './GoalIcon' type Props = { goal: Goal } + export function GoalManager(props: Props) { const dispatch = useAppDispatch() @@ -75,6 +79,35 @@ export function GoalManager(props: Props) { } } + const [icon, setIcon] = useState(null) + const [emojiPickerIsOpen, setEmojiPickerIsOpen] = useState(false) + + useEffect(() => { + setIcon(props.goal.icon) + }, [props.goal.id, props.goal.icon]) + + const hasIcon = () => icon != null + + const addIconOnClick = (event: React.MouseEvent) => { + event.stopPropagation() + setEmojiPickerIsOpen(true) + } + + const pickEmojiOnClick = (emoji: BaseEmoji, event: React.MouseEvent) => { + event.stopPropagation() // stop event propagation + setIcon(emoji.native) // set the emoji locally + setEmojiPickerIsOpen(false) // close emoji + + const updatedGoal: Goal = { // Create updated goal locally + ...props.goal, + icon: emoji.native ?? props.goal.icon, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + } + dispatch(updateGoalRedux(updatedGoal)) // update Redux store + } + return ( @@ -106,6 +139,18 @@ export function GoalManager(props: Props) { {new Date(props.goal.created).toLocaleDateString()} + + event.stopPropagation()} + > + + + + + + ) } @@ -182,3 +227,14 @@ const StringInput = styled.input` const Value = styled.div` margin-left: 2rem; ` + +const EmojiPickerContainer = styled.div` + display: ${(props) => (props.isOpen ? 'flex' : 'none')}; + position: absolute; + top: ${(props) => (props.hasIcon ? '10rem' : '2rem')}; + left: 0; +` + +const GoalIconContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; +` \ No newline at end of file From a9bfbc9f211f76498683cd496108555b50b73dc3 Mon Sep 17 00:00:00 2001 From: yeevern Date: Mon, 8 Jun 2026 01:02:55 +1000 Subject: [PATCH 3/3] Implement icon update persistence with PUT request --- src/ui/features/goalmanager/GoalManager.tsx | 23 ++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 54d1abb..17d4ba0 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -14,6 +14,8 @@ import { Theme } from '../../components/Theme' import EmojiPicker from '../../components/EmojiPicker' import { BaseEmoji } from 'emoji-mart' import GoalIcon from './GoalIcon' +import { TransparentButton } from '../../components/TransparentButton' +import { faSmile } from '@fortawesome/free-regular-svg-icons' type Props = { goal: Goal } @@ -106,6 +108,8 @@ export function GoalManager(props: Props) { targetAmount: targetAmount ?? props.goal.targetAmount, } dispatch(updateGoalRedux(updatedGoal)) // update Redux store + + updateGoalApi(props.goal.id, updatedGoal) // persist change to backend } return ( @@ -147,6 +151,13 @@ export function GoalManager(props: Props) { > + + + + + Add icon + + @@ -237,4 +248,14 @@ const EmojiPickerContainer = styled.div` const GoalIconContainer = styled.div` display: ${(props) => (props.shouldShow ? 'flex' : 'none')}; -` \ No newline at end of file +` + +const AddIconButtonContainer = styled.div` + display: ${(props) => (props.shouldShow ? 'none' : 'flex')}; +` + +const AddIconButtonText = styled.h1` + font-size: 1.8rem; + margin-left: 1rem; + font-weight: normal; +`