diff --git a/src/views/Chores/ChoreListView.jsx b/src/views/Chores/ChoreListView.jsx
index 0fdf1ff..5825a24 100644
--- a/src/views/Chores/ChoreListView.jsx
+++ b/src/views/Chores/ChoreListView.jsx
@@ -1,3 +1,11 @@
+import {
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
import {
Check,
Delete,
@@ -10,14 +18,6 @@ import {
} from '@mui/icons-material'
import { Box, Typography } from '@mui/joy'
import { useNavigate } from 'react-router-dom'
-import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
import ChoreCard from './ChoreCard'
import CompactChoreCard from './CompactChoreCard'
diff --git a/src/views/Filters/FilterView.jsx b/src/views/Filters/FilterView.jsx
index dd1a1c0..c097057 100644
--- a/src/views/Filters/FilterView.jsx
+++ b/src/views/Filters/FilterView.jsx
@@ -1,3 +1,11 @@
+import {
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import {
@@ -12,16 +20,15 @@ import {
} from '@mui/joy'
import { useEffect, useMemo, useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
-import { Add, FilterAlt, Star, StarBorder, Task } from '@mui/icons-material'
+import {
+ Add,
+ FilterAlt,
+ MoreVert,
+ Star,
+ StarBorder,
+ Task,
+} from '@mui/icons-material'
import { useChores } from '../../queries/ChoreQueries'
import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
import { getFilterCount, getFilterOverdueCount } from '../../utils/FilterEngine'
@@ -39,7 +46,12 @@ import {
useUpdateFilter,
} from './FilterQueries'
-const FilterCardContent = ({ filter, taskCount = 0, overdueCount = 0 }) => {
+const FilterCardContent = ({
+ filter,
+ taskCount = 0,
+ overdueCount = 0,
+ onToggleActions,
+}) => {
// Get condition labels for display
const getConditionSummary = () => {
if (!filter.conditions || filter.conditions.length === 0) {
@@ -212,6 +224,21 @@ const FilterCardContent = ({ filter, taskCount = 0, overdueCount = 0 }) => {
)}
+
+ {onToggleActions && (
+ {
+ e.stopPropagation()
+ onToggleActions()
+ }}
+ >
+
+
+ )}
+
)
}
@@ -236,7 +263,7 @@ const FilterView = () => {
useState(false)
const [editingFilter, setEditingFilter] = useState(null)
const [confirmationModel, setConfirmationModel] = useState({})
-
+ const [showMoreInfoId, setShowMoreInfoId] = useState(null)
// Sort filters: pinned first, then by usage count, then by last used
const savedFilters = useMemo(() => {
return [...filtersData].sort((a, b) => {
@@ -415,99 +442,119 @@ const FilterView = () => {
) : (
- {savedFilters.map(filter => (
-
- navigate(`/chores?filterId=${encodeURIComponent(filter.id)}`)
- }
- key={filter.id}
- trailingActions={
-
-
- handlePinFilter(filter.id)}>
-
- {filter.isPinned ? (
-
- ) : (
-
- )}
-
- {filter.isPinned ? 'Unpin' : 'Pin'}
-
-
-
- handleEditFilter(filter)}>
-
-
-
- Edit
-
-
-
- handleDeleteClicked(filter.id)}
+ {savedFilters.map(filter => {
+ return (
+
+ navigate(
+ `/chores?filterId=${encodeURIComponent(filter.id)}`,
+ )
+ }
+ key={filter.id}
+ trailingActions={
+
+
-
-
- handlePinFilter(filter.id)}>
+
- Delete
-
-
-
-
-
- }
- >
-
-
- ))}
+ {filter.isPinned ? (
+
+ ) : (
+
+ )}
+
+ {filter.isPinned ? 'Unpin' : 'Pin'}
+
+
+
+ handleEditFilter(filter)}>
+
+
+
+ Edit
+
+
+
+ handleDeleteClicked(filter.id)}
+ >
+
+
+
+ Delete
+
+
+
+
+
+ }
+ >
+ {
+ console.log(
+ 'Toggling actions for filter:',
+ filter.id,
+ showMoreInfoId,
+ )
+
+ if (showMoreInfoId === filter.id) {
+ setShowMoreInfoId(null)
+ } else {
+ setShowMoreInfoId(filter.id)
+ }
+ }}
+ filter={filter}
+ taskCount={filterCounts[filter.id]?.count || 0}
+ overdueCount={filterCounts[filter.id]?.overdueCount || 0}
+ />
+
+ )
+ })}
)}
diff --git a/src/views/History/ChoreHistory.jsx b/src/views/History/ChoreHistory.jsx
index c89bf52..ca1371e 100644
--- a/src/views/History/ChoreHistory.jsx
+++ b/src/views/History/ChoreHistory.jsx
@@ -1,12 +1,20 @@
import {
- Analytics,
- Checklist,
- EventBusy,
- Group,
- History,
- Star,
- Timelapse,
- TrendingUp,
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
+import {
+ Analytics,
+ Checklist,
+ EventBusy,
+ Group,
+ History,
+ Star,
+ Timelapse,
+ TrendingUp,
} from '@mui/icons-material'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
@@ -14,19 +22,11 @@ import { Box, Button, Card, Container, Grid, Sheet, Typography } from '@mui/joy'
import moment from 'moment'
import { useEffect, useState } from 'react'
import { Link, useParams } from 'react-router-dom'
-import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
import useConfirmationModal from '../../hooks/useConfirmationModal'
import {
- useChoreHistory,
- useDeleteChoreHistory,
- useUpdateChoreHistory,
+ useChoreHistory,
+ useDeleteChoreHistory,
+ useUpdateChoreHistory,
} from '../../queries/ChoreQueries'
import { useCircleMembers } from '../../queries/UserQueries'
import { ChoreHistoryStatus } from '../../utils/Chores'
diff --git a/src/views/Labels/LabelView.jsx b/src/views/Labels/LabelView.jsx
index 1a6ddcb..4f60801 100644
--- a/src/views/Labels/LabelView.jsx
+++ b/src/views/Labels/LabelView.jsx
@@ -13,16 +13,16 @@ import {
import { useEffect, useState } from 'react'
import LabelModal from '../Modals/Inputs/LabelModal'
-import { Add } from '@mui/icons-material'
-import { useQueryClient } from '@tanstack/react-query'
import {
Type as ListType,
SwipeableList,
SwipeableListItem,
SwipeAction,
TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
+import { Add } from '@mui/icons-material'
+import { useQueryClient } from '@tanstack/react-query'
import { useUserProfile } from '../../queries/UserQueries'
import { getTextColorFromBackgroundColor } from '../../utils/Colors'
import { DeleteLabel } from '../../utils/Fetcher'
diff --git a/src/views/Projects/ProjectView.jsx b/src/views/Projects/ProjectView.jsx
index 8d4da1d..8552858 100644
--- a/src/views/Projects/ProjectView.jsx
+++ b/src/views/Projects/ProjectView.jsx
@@ -1,29 +1,29 @@
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import {
- Avatar,
- Box,
- Chip,
- CircularProgress,
- Container,
- IconButton,
- Stack,
- Typography,
+ Avatar,
+ Box,
+ Chip,
+ CircularProgress,
+ Container,
+ IconButton,
+ Stack,
+ Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import ProjectModal from '../Modals/Inputs/ProjectModal'
+import {
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
import { Add, Task } from '@mui/icons-material'
import { useQueryClient } from '@tanstack/react-query'
-import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
import { useChores } from '../../queries/ChoreQueries'
import { useUserProfile } from '../../queries/UserQueries'
import { getTextColorFromBackgroundColor } from '../../utils/Colors'
diff --git a/src/views/Things/ThingsView.jsx b/src/views/Things/ThingsView.jsx
index 0384ed2..c63bfcd 100644
--- a/src/views/Things/ThingsView.jsx
+++ b/src/views/Things/ThingsView.jsx
@@ -1,39 +1,39 @@
import {
- Add,
- Delete,
- Edit,
- Flip,
- PlusOne,
- ToggleOff,
- ToggleOn,
- Widgets,
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
+import {
+ Add,
+ Delete,
+ Edit,
+ Flip,
+ PlusOne,
+ ToggleOff,
+ ToggleOn,
+ Widgets,
} from '@mui/icons-material'
import {
- Avatar,
- Box,
- Chip,
- Container,
- IconButton,
- Stack,
- Typography,
+ Avatar,
+ Box,
+ Chip,
+ Container,
+ IconButton,
+ Stack,
+ Typography,
} from '@mui/joy'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
import { useNotification } from '../../service/NotificationProvider'
import {
- CreateThing,
- DeleteThing,
- GetThings,
- SaveThing,
- UpdateThingState,
+ CreateThing,
+ DeleteThing,
+ GetThings,
+ SaveThing,
+ UpdateThingState,
} from '../../utils/Fetcher'
import { getSafeBottomStyles } from '../../utils/SafeAreaUtils'
import ConfirmationModal from '../Modals/Inputs/ConfirmationModal'
diff --git a/src/views/Timer/TimerDetails.jsx b/src/views/Timer/TimerDetails.jsx
index d162ba4..f54017b 100644
--- a/src/views/Timer/TimerDetails.jsx
+++ b/src/views/Timer/TimerDetails.jsx
@@ -1,47 +1,47 @@
import {
- AccessTime,
- Add,
- BrowseGallery,
- Delete,
- Edit,
- PauseCircle,
- Person,
- PlayArrow,
+ Type as ListType,
+ SwipeableList,
+ SwipeableListItem,
+ SwipeAction,
+ TrailingActions,
+} from '@meauxt/react-swipeable-list'
+import '@meauxt/react-swipeable-list/dist/styles.css'
+import {
+ AccessTime,
+ Add,
+ BrowseGallery,
+ Delete,
+ Edit,
+ PauseCircle,
+ Person,
+ PlayArrow,
} from '@mui/icons-material'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import {
- Alert,
- Avatar,
- Box,
- Button,
- Card,
- CardContent,
- Chip,
- Container,
- FormControl,
- FormHelperText,
- Grid,
- IconButton,
- Input,
- Typography,
+ Alert,
+ Avatar,
+ Box,
+ Button,
+ Card,
+ CardContent,
+ Chip,
+ Container,
+ FormControl,
+ FormHelperText,
+ Grid,
+ IconButton,
+ Input,
+ Typography,
} from '@mui/joy'
import moment from 'moment'
import { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import {
- Type as ListType,
- SwipeableList,
- SwipeableListItem,
- SwipeAction,
- TrailingActions,
-} from 'react-swipeable-list'
-import 'react-swipeable-list/dist/styles.css'
-import {
- useChoreTimer,
- usePauseChore,
- useStartChore,
- useUpdateTimeSession,
+ useChoreTimer,
+ usePauseChore,
+ useStartChore,
+ useUpdateTimeSession,
} from '../../queries/TimeQueries'
import { useCircleMembers } from '../../queries/UserQueries'
import { useNotification } from '../../service/NotificationProvider'