From d017dc989cd24b8f38efdd2dd5fc928a8dd1e244 Mon Sep 17 00:00:00 2001 From: Vansh Sharma Date: Thu, 28 May 2026 15:34:49 +0530 Subject: [PATCH 1/2] Added emoji picker and goal icons --- package-lock.json | 3 +- package.json | 3 +- src/App.tsx | 1 + src/api/types.ts | 1 + src/ui/features/goalmanager/GoalManager.tsx | 95 ++++++++++++++++++++- src/ui/pages/Main/goals/GoalCard.tsx | 4 + 6 files changed, 100 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 240aecf..0800a6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", - "@types/emoji-mart": "^3.0.5", "@types/node": "^17.0.41", "@types/react": "^16.9.0", "@types/react-redux": "^7.1.7", @@ -3703,6 +3702,7 @@ "resolved": "https://registry.npmjs.org/@types/emoji-mart/-/emoji-mart-3.0.9.tgz", "integrity": "sha512-qdBo/2Y8MXaJ/2spKjDZocuq79GpnOhkwMHnK2GnVFa8WYFgfA+ei6sil3aeWQPCreOKIx9ogPpR5+7MaOqYAA==", "dev": true, + "license": "MIT", "dependencies": { "@types/react": "*" } @@ -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/package.json b/package.json index 87958ce..b65e60e 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "@material-ui/core": "^4.12.4", "@material-ui/pickers": "^3.3.10", "@reduxjs/toolkit": "^1.5.1", - "@types/emoji-mart": "^3.0.5", "@types/node": "^17.0.41", "@types/react": "^16.9.0", "@types/react-redux": "^7.1.7", @@ -59,4 +58,4 @@ "@types/react-dom": "^18.0.5", "@types/styled-components": "^5.1.25" } -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index 5a862a6..ecdb807 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,3 +1,4 @@ +import 'emoji-mart/css/emoji-mart.css'; import { createTheme, ThemeProvider as ThemeProviderMui } from '@material-ui/core' import React, { useEffect } from 'react' import styled, { ThemeProvider } from 'styled-components' diff --git a/src/api/types.ts b/src/api/types.ts index f75edad..a92640a 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; } export interface Tag { diff --git a/src/ui/features/goalmanager/GoalManager.tsx b/src/ui/features/goalmanager/GoalManager.tsx index 0779dda..24291be 100644 --- a/src/ui/features/goalmanager/GoalManager.tsx +++ b/src/ui/features/goalmanager/GoalManager.tsx @@ -3,7 +3,7 @@ import { faDollarSign, IconDefinition } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { MaterialUiPickersDate } from '@material-ui/pickers/typings/date' import 'date-fns' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import styled from 'styled-components' import { updateGoal as updateGoalApi } from '../../../api/lib' import { Goal } from '../../../api/types' @@ -11,6 +11,9 @@ 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 { BaseEmoji, Picker } from 'emoji-mart' +import 'emoji-mart/css/emoji-mart.css' +import { selectMode } from '../../../store/themeSlice' type Props = { goal: Goal } export function GoalManager(props: Props) { @@ -18,17 +21,36 @@ export function GoalManager(props: Props) { const goal = useAppSelector(selectGoalsMap)[props.goal.id] + const themeMode = useAppSelector(selectMode) + const [name, setName] = useState(null) const [targetDate, setTargetDate] = useState(null) const [targetAmount, setTargetAmount] = useState(null) + const [selectedIcon, setSelectedIcon] = useState('🎯') + const [showEmojiPicker, setShowEmojiPicker] = useState(false) + const emojiPickerRef = useRef(null) + + // Close emoji picker when clicking outside + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (emojiPickerRef.current && !emojiPickerRef.current.contains(event.target as Node)) { + setShowEmojiPicker(false) + } + } + document.addEventListener('mousedown', handleClickOutside) + return () => document.removeEventListener('mousedown', handleClickOutside) + }, []) useEffect(() => { setName(props.goal.name) setTargetDate(props.goal.targetDate) setTargetAmount(props.goal.targetAmount) + setSelectedIcon(props.goal.icon || '🎯') + }, [ props.goal.id, props.goal.name, + props.goal.icon, props.goal.targetDate, props.goal.targetAmount, ]) @@ -75,8 +97,40 @@ export function GoalManager(props: Props) { } } + const updateIconOnSelect = (emoji: BaseEmoji, event: React.MouseEvent) => { + event.stopPropagation() + const nextIcon = emoji.native + setSelectedIcon(nextIcon) + setShowEmojiPicker(false) + const updatedGoal: Goal = { + ...props.goal, + name: name ?? props.goal.name, + targetDate: targetDate ?? props.goal.targetDate, + targetAmount: targetAmount ?? props.goal.targetAmount, + icon: nextIcon, + } + dispatch(updateGoalRedux(updatedGoal)) + updateGoalApi(props.goal.id, updatedGoal) + } + return ( + + { e.stopPropagation(); setShowEmojiPicker(!showEmojiPicker) }}> + {selectedIcon} + + {showEmojiPicker && ( + e.stopPropagation()}> + + + )} + @@ -111,9 +165,42 @@ export function GoalManager(props: Props) { } type FieldProps = { name: string; icon: IconDefinition } -type AddIconButtonContainerProps = { shouldShow: boolean } -type GoalIconContainerProps = { shouldShow: boolean } -type EmojiPickerContainerProps = { isOpen: boolean; hasIcon: boolean } + +const IconRow = styled.div` + display: flex; + flex-direction: row; + align-items: center; + position: relative; + margin-bottom: 0.5rem; +` + +const IconButton = styled.button` + font-size: 3rem; + background: none; + border: 2px solid transparent; + border-radius: 0.75rem; + cursor: pointer; + padding: 0.25rem 0.5rem; + transition: border-color 0.2s ease, transform 0.15s ease; + line-height: 1; + + &:hover { + border-color: rgba(174, 174, 174, 0.4); + transform: scale(1.1); + } +` + +const EmojiPickerDropdown = styled.div` + position: absolute; + top: 100%; + left: 0; + z-index: 100; + margin-top: 0.25rem; + box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.25); + border-radius: 0.75rem; + overflow: hidden; +` + const Field = (props: FieldProps) => ( diff --git a/src/ui/pages/Main/goals/GoalCard.tsx b/src/ui/pages/Main/goals/GoalCard.tsx index e8f6d0a..a62b2e2 100644 --- a/src/ui/pages/Main/goals/GoalCard.tsx +++ b/src/ui/pages/Main/goals/GoalCard.tsx @@ -27,6 +27,10 @@ export default function GoalCard(props: Props) { return ( + {/* Add the icon here. Using a default emoji if none is set yet! */} +
+ {goal.icon ? goal.icon : '🎯'} +
${goal.targetAmount} {asLocaleDateString(goal.targetDate)} From 96f626847d78f997ac0b56dacd4a0c61d8e4e6ed Mon Sep 17 00:00:00 2001 From: Vansh Sharma Date: Thu, 28 May 2026 16:05:04 +0530 Subject: [PATCH 2/2] Completed frontend task --- src/api/lib.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/lib.ts b/src/api/lib.ts index 3c593ca..b74e1d1 100644 --- a/src/api/lib.ts +++ b/src/api/lib.ts @@ -51,3 +51,4 @@ export async function updateGoal(goalId: string, updatedGoal: Goal): Promise