feat: Enhance UserPoints component with improved filtering and layout

- Updated UserPoints component to include a more user-friendly filter bar with enhanced styling.
- Added a summary section to display the current filter context.
- Refactored user selection and time period filtering logic for better clarity and performance.
- Improved the layout of points cards and history sections for better visual hierarchy.
- Integrated a bar chart for visual representation of points over time.
- Updated redeem points functionality with better user feedback.

feat: Add keyboard shortcuts in AddTaskModal for improved usability

- Implemented keyboard shortcuts for adding descriptions, subtasks, and due dates.
- Enhanced user experience by providing visual hints for keyboard shortcuts.
- Refactored task creation logic to streamline the process.

fix: Refactor ChoreActionMenu to handle mouse events and improve accessibility

- Added mouse enter and leave event handlers for better interaction feedback.
- Adjusted menu positioning for improved usability.

refactor: Update RichTextEditor to support focus handling from parent components

- Converted RichTextEditor to use forwardRef for better integration with parent components.
- Exposed focus and blur methods for external control.
- Improved image upload handling with better error management.

fix: Adjust SubTask component to handle Enter key behavior correctly

- Modified key event handling to prevent unintended task creation when holding meta or ctrl keys.
- Added autoFocus prop to new task input for better user experience.

src/views/Modals/Inputs/EditThingState.jsx

@@ -4,11 +4,10 @@ import {
   FormControl,
   FormHelperText,
   Input,
-  Modal,
-  ModalDialog,
   Typography,
 } from '@mui/joy'
 import { useState } from 'react'
+import FadeModal from '../../../components/common/FadeModal'
 
 function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
   const [state, setState] = useState(currentThing?.state || '')
@@ -39,31 +38,29 @@ function EditThingStateModal({ isOpen, onClose, onSave, currentThing }) {
   }
 
   return (
-    <Modal open={isOpen} onClose={onClose}>
-      <ModalDialog>
-        <Typography level='h4'>Update state</Typography>
+    <FadeModal open={isOpen} onClose={onClose}>
+      <Typography level='h4'>Update state</Typography>
 
-        <FormControl>
-          <Typography>Value</Typography>
-          <Input
-            placeholder='Thing value'
-            value={state || ''}
-            onChange={e => setState(e.target.value)}
-            sx={{ minWidth: 300 }}
-          />
-          <FormHelperText color='danger'>{errors.state}</FormHelperText>
-        </FormControl>
+      <FormControl>
+        <Typography>Value</Typography>
+        <Input
+          placeholder='Thing value'
+          value={state || ''}
+          onChange={e => setState(e.target.value)}
+          sx={{ minWidth: 300 }}
+        />
+        <FormHelperText color='danger'>{errors.state}</FormHelperText>
+      </FormControl>
 
-        <Box display={'flex'} justifyContent={'space-around'} mt={1}>
-          <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
-            {currentThing?.id ? 'Update' : 'Create'}
-          </Button>
-          <Button onClick={onClose} variant='outlined'>
-            {currentThing?.id ? 'Cancel' : 'Close'}
-          </Button>
-        </Box>
-      </ModalDialog>
-    </Modal>
+      <Box display={'flex'} justifyContent={'space-around'} mt={1}>
+        <Button onClick={handleSave} fullWidth sx={{ mr: 1 }}>
+          {currentThing?.id ? 'Update' : 'Create'}
+        </Button>
+        <Button onClick={onClose} variant='outlined'>
+          {currentThing?.id ? 'Cancel' : 'Close'}
+        </Button>
+      </Box>
+    </FadeModal>
   )
 }
 export default EditThingStateModal