Merge Tag v0.2.21

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.2.21
+
+### Fixed
+
+* emoji picker overlay issue (#150)
+
 ## Version 0.2.20
 
 ### Fixed

components/AddEditHabitModal.tsx

@@ -18,6 +18,7 @@ import { useTranslations } from 'next-intl'
 import { useState } from 'react'
 import { RRule } from 'rrule'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'; // Import the new component
 
 
 interface AddEditHabitModalProps {
@@ -88,8 +89,10 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   const { result, message: errorMessage } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
 
   return (
-    <Dialog open={true} onOpenChange={onClose}>
+    <>
-      <DialogContent>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={onClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
           <DialogHeader>
             <DialogTitle>
               {habit
@@ -120,7 +123,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                     }}
                   />
                 </div>
-            </div>
+              </div>ohsimpson
               <div className="grid grid-cols-4 items-center gap-4">
                 <Label htmlFor="description" className="text-right">
                   {t('descriptionLabel')}
@@ -315,6 +318,6 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
           </form>
         </DialogContent>
       </Dialog>
+    </>
   )
 }
-

components/AddEditWishlistItemModal.tsx

@@ -10,10 +10,10 @@ import { useAtom } from 'jotai'
 import { useTranslations } from 'next-intl'
 import { useEffect, useState } from 'react'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
 
 interface AddEditWishlistItemModalProps {
-  isOpen: boolean
   setIsOpen: (isOpen: boolean) => void
   editingItem: WishlistItemType | null
   setEditingItem: (item: WishlistItemType | null) => void
@@ -22,7 +22,6 @@ interface AddEditWishlistItemModalProps {
 }
 
 export default function AddEditWishlistItemModal({
-  isOpen,
   setIsOpen,
   editingItem,
   setEditingItem,
@@ -115,8 +114,10 @@ export default function AddEditWishlistItemModal({
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
+    <>
-      <DialogContent>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={handleClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
           <DialogHeader>
             <DialogTitle>{editingItem ? t('editTitle') : t('addTitle')}</DialogTitle>
           </DialogHeader>
@@ -305,6 +306,7 @@ export default function AddEditWishlistItemModal({
           </form>
         </DialogContent>
       </Dialog>
+    </>
   )
 }
 

components/EmojiPickerButton.tsx

@@ -16,7 +16,7 @@ export default function EmojiPickerButton({ onEmojiSelect, inputIdToFocus }: Emo
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
 
   return (
-    <Popover modal={true} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
+    <Popover modal={false} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
       <PopoverTrigger asChild>
         <Button
           type="button"

components/HabitContextMenuItems.tsx

@@ -1,4 +1,4 @@
-import { Habit, User } from '@/lib/types';
+import { Habit } from '@/lib/types';
 import { useHabits } from '@/hooks/useHabits';
 import { useAtom } from 'jotai';
 import { pomodoroAtom, settingsAtom, currentUserAtom } from '@/lib/atoms';

components/ModalOverlay.tsx

@@ -0,0 +1,9 @@
+/**
+ * ModalOverlay provides a dimming effect for non-modal dialogs or popovers
+ * that need to appear modal (e.g., to prevent interaction with background elements).
+ * It should be rendered alongside the dialog/popover it's intended to overlay for.
+ * Ensure the dialog/popover has a z-index higher than this overlay (default z-40).
+ */
+export default function ModalOverlay() {
+  return <div className="fixed inset-0 z-50 bg-black/80" />
+}

components/WishlistManager.tsx

@@ -152,14 +152,15 @@ export default function WishlistManager() {
           </>
         )}
       </div>
+      {isModalOpen &&
         <AddEditWishlistItemModal
-        isOpen={isModalOpen}
           setIsOpen={setIsModalOpen}
           editingItem={editingItem}
           setEditingItem={setEditingItem}
           addWishlistItem={addWishlistItem}
           editWishlistItem={editWishlistItem}
         />
+      }
       <ConfirmDialog
         isOpen={deleteConfirmation.isOpen}
         onClose={() => setDeleteConfirmation({ isOpen: false, itemId: null })}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",