fix: update state initialization and improve Grid component usage in ChoreView

src/components/animations/PageTransition.jsx

@@ -51,6 +51,7 @@ const PageTransition = ({ children }) => {
   const location = useLocation()
   const prevLocation = useRef(location)
   const isNavigatingBack = useRef(false)
+  const nodeRef = useRef(null)
 
   useEffect(() => {
     const currentLevel = getRouteLevel(location.pathname)
@@ -84,8 +85,10 @@ const PageTransition = ({ children }) => {
           enter: 50,
           exit: 50,
         }}
+        nodeRef={nodeRef}
       >
         <div
+          ref={nodeRef}
           className='page-wrapper'
           style={{
             paddingBottom: `var(--safe-area-inset-bottom, 0px)`,

src/components/common/KeyboardShortcutHint.jsx

@@ -10,6 +10,7 @@ function KeyboardShortcutHint({
   shortcut,
   show = true,
   withCmd = true,
+  withCtrl, // Legacy prop for backward compatibility
   withShift = false,
   sx = {},
   ...props
@@ -21,7 +22,9 @@ function KeyboardShortcutHint({
 
   // Build the shortcut display string
   let displayShortcut = ''
-  if (withCmd) {
+  // Support both withCmd and withCtrl for backward compatibility
+  const shouldShowModifier = withCmd || withCtrl
+  if (shouldShowModifier) {
     displayShortcut += modifierKey
   }
   if (withShift) {
@@ -64,6 +67,7 @@ KeyboardShortcutHint.propTypes = {
   shortcut: PropTypes.string.isRequired,
   show: PropTypes.bool,
   withCmd: PropTypes.bool,
+  withCtrl: PropTypes.bool, // Legacy prop for backward compatibility
   withShift: PropTypes.bool,
   sx: PropTypes.object,
 }

src/views/ChoreEdit/ChoreView.jsx

@@ -86,10 +86,12 @@ const ChoreView = () => {
   const [timeoutId, setTimeoutId] = useState(null)
   const [secondsLeftToCancel, setSecondsLeftToCancel] = useState(null)
   const [completedDate, setCompletedDate] = useState(null)
-  const [confirmModelConfig, setConfirmModelConfig] = useState({})
+  const [confirmModelConfig, setConfirmModelConfig] = useState({
+    isOpen: false,
+  })
   const [chorePriority, setChorePriority] = useState(null)
   const [isDescriptionOpen, setIsDescriptionOpen] = useState(false)
-  const [timerActionConfig, setTimerActionConfig] = useState({})
+  const [timerActionConfig, setTimerActionConfig] = useState({ isOpen: false })
   const { data: circleMembersData, isLoading: isCircleMembersLoading } =
     useCircleMembers()
   const { data: userProfile } = useUserProfile()
@@ -447,7 +449,7 @@ const ChoreView = () => {
           }}
         >
           {[ChoreStatus.ACTIVE, ChoreStatus.PAUSED].includes(chore.status) && (
-            <Grid item xs={12}>
+            <Grid xs={12}>
               <TimePassedCard
                 chore={chore}
                 handleAction={action => {
@@ -462,7 +464,7 @@ const ChoreView = () => {
             </Grid>
           )}
           {infoCards.map((card, index) => (
-            <Grid item xs={6} sm={6} key={index}>
+            <Grid xs={6} sm={6} key={index}>
               <Card
                 variant='soft'
                 sx={{
@@ -541,8 +543,8 @@ const ChoreView = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
                 p: 1,
+                width: '100%',
               }}
-              fullWidth
               variant='plain'
             >
               {chorePriority ? chorePriority.icon : <LowPriority />}