From 9e0ae1e0dade75589ce5f119807e8acd2944455b Mon Sep 17 00:00:00 2001
From: Doh <mydohsimpson@gmail.com>
Date: Thu, 29 May 2025 08:46:08 -0400
Subject: [PATCH] Fix emojipicker (#152)

---
 CHANGELOG.md                            |   6 +
 components/AddEditHabitModal.tsx        | 466 ++++++++++++------------
 components/AddEditWishlistItemModal.tsx | 356 +++++++++---------
 components/EmojiPickerButton.tsx        |   2 +-
 components/ModalOverlay.tsx             |   9 +
 components/WishlistManager.tsx          |  18 +-
 6 files changed, 441 insertions(+), 416 deletions(-)
 create mode 100644 components/ModalOverlay.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e32251..79318ab 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Version 0.2.21
+
+### Fixed
+
+* emoji picker overlay issue (#150)
+
 ## Version 0.2.20
 
 ### Fixed
diff --git a/components/AddEditHabitModal.tsx b/components/AddEditHabitModal.tsx
index ed0f3f0..f4adb3b 100644
--- a/components/AddEditHabitModal.tsx
+++ b/components/AddEditHabitModal.tsx
@@ -15,6 +15,7 @@ import { Zap } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Habit, SafeUser } from '@/lib/types'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay' // Import the new component
 import { convertHumanReadableFrequencyToMachineReadable, convertMachineReadableFrequencyToHumanReadable, d2s, d2t, serializeRRule } from '@/lib/utils'
 import { INITIAL_DUE, INITIAL_RECURRENCE_RULE, QUICK_DATES, RECURRENCE_RULE_MAP, MAX_COIN_LIMIT } from '@/lib/constants'
 import { DateTime } from 'luxon'
@@ -87,249 +88,252 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   }
 
   return (
-    <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>
-            {habit
-              ? t(isTask ? 'editTaskTitle' : 'editHabitTitle')
-              : t(isTask ? 'addNewTaskTitle' : 'addNewHabitTitle')}
-          </DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                {t('nameLabel')}
-              </Label>
-              <div className='flex col-span-3 gap-2'>
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  required
-                />
-                <EmojiPickerButton
-                  inputIdToFocus="name"
-                  onEmojiSelect={(emoji) => {
-                    setName(prev => {
-                      const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
-                      return `${prev}${space}${emoji}`;
-                    })
-                  }}
-                />
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="description" className="text-right">
-                {t('descriptionLabel')}
-              </Label>
-              <Textarea
-                id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="recurrence" className="text-right">
-                {t('whenLabel')}
-              </Label>
-              {/* date input (task) */}
-              <div className="col-span-3 space-y-2">
-                <div className="flex gap-2">
+    <>
+      <ModalOverlay />
+      <Dialog open={true} onOpenChange={onClose} modal={false}>
+        <DialogContent> {/* DialogContent from shadcn/ui is typically z-50, ModalOverlay is z-40 */}
+          <DialogHeader>
+            <DialogTitle>
+              {habit
+                ? t(isTask ? 'editTaskTitle' : 'editHabitTitle')
+                : t(isTask ? 'addNewTaskTitle' : 'addNewHabitTitle')}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  {t('nameLabel')}
+                </Label>
+                <div className='flex col-span-3 gap-2'>
                   <Input
-                    id="recurrence"
-                    value={ruleText}
-                    onChange={(e) => setRuleText(e.target.value)}
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
                     required
                   />
-                  {isTask && (
-                    <Popover open={isQuickDatesOpen} onOpenChange={setIsQuickDatesOpen}>
-                      <PopoverTrigger asChild>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          size="icon"
-                          className="h-8 w-8"
-                        >
-                          <Zap className="h-4 w-4" />
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="p-3 w-[280px] max-h-[40vh] overflow-y-auto" align="start">
-                        <div className="space-y-1">
-                          <div className="grid grid-cols-2 gap-2">
-                            {QUICK_DATES.map((date) => (
-                              <Button
-                                key={date.value}
-                                variant="outline"
-                                className="justify-start h-9 px-3 hover:bg-primary hover:text-primary-foreground transition-colors"
-                                onClick={() => {
-                                  setRuleText(date.value);
-                                  setIsQuickDatesOpen(false);
-                                }}
-                              >
-                                {date.label}
-                              </Button>
-                            ))}
-                          </div>
-                        </div>
-                      </PopoverContent>
-                    </Popover>
-                  )}
+                  <EmojiPickerButton
+                    inputIdToFocus="name"
+                    onEmojiSelect={(emoji) => {
+                      setName(prev => {
+                        const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                        return `${prev}${space}${emoji}`;
+                      })
+                    }}
+                  />
                 </div>
               </div>
-              {/* rrule input (habit) */}
-              <div className="col-start-2 col-span-3 text-sm">
-                {(() => {
-                  let displayText = '';
-                  const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
-                  if (message !== errorMessage) { // Only update if it changed to avoid re-renders
-                    setErrorMessage(message);
-                  }
-                  displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
-
-                  return (
-                    <>
-                      <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
-                        {displayText}
-                      </span>
-                      {errorMessage && (
-                        <p className="text-destructive text-xs mt-1">{errorMessage}</p>
-                      )}
-                    </>
-                  );
-                })()}
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="targetCompletions">
-                  {t('completeLabel')}
-                </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => Math.max(1, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="targetCompletions"
-                      type="number"
-                      value={targetCompletions}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value)
-                        setTargetCompletions(isNaN(value) ? 1 : Math.max(1, value))
-                      }}
-                      min={1}
-                      max={10}
-                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => Math.min(10, prev + 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('timesSuffix')}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="coinReward">
-                  {t('rewardLabel')}
-                </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setCoinReward(prev => Math.max(0, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="coinReward"
-                      type="number"
-                      value={coinReward}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value === "" ? "0" : e.target.value)
-                        setCoinReward(Math.min(value, MAX_COIN_LIMIT))
-                      }}
-                      min={0}
-                      max={MAX_COIN_LIMIT}
-                      required
-                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setCoinReward(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('coinsSuffix')}
-                  </span>
-                </div>
-              </div>
-            </div>
-            {users && users.length > 1 && (
               <div className="grid grid-cols-4 items-center gap-4">
-                <div className="flex items-center justify-end gap-2">
-                  <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                <Label htmlFor="description" className="text-right">
+                  {t('descriptionLabel')}
+                </Label>
+                <Textarea
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  className="col-span-3"
+                />
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="recurrence" className="text-right">
+                  {t('whenLabel')}
+                </Label>
+                {/* date input (task) */}
+                <div className="col-span-3 space-y-2">
+                  <div className="flex gap-2">
+                    <Input
+                      id="recurrence"
+                      value={ruleText}
+                      onChange={(e) => setRuleText(e.target.value)}
+                      required
+                    />
+                    {isTask && (
+                      <Popover open={isQuickDatesOpen} onOpenChange={setIsQuickDatesOpen}>
+                        <PopoverTrigger asChild>
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            className="h-8 w-8"
+                          >
+                            <Zap className="h-4 w-4" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="p-3 w-[280px] max-h-[40vh] overflow-y-auto" align="start">
+                          <div className="space-y-1">
+                            <div className="grid grid-cols-2 gap-2">
+                              {QUICK_DATES.map((date) => (
+                                <Button
+                                  key={date.value}
+                                  variant="outline"
+                                  className="justify-start h-9 px-3 hover:bg-primary hover:text-primary-foreground transition-colors"
+                                  onClick={() => {
+                                    setRuleText(date.value);
+                                    setIsQuickDatesOpen(false);
+                                  }}
+                                >
+                                  {date.label}
+                                </Button>
+                              ))}
+                            </div>
+                          </div>
+                        </PopoverContent>
+                      </Popover>
+                    )}
+                  </div>
+                </div>
+                {/* rrule input (habit) */}
+                <div className="col-start-2 col-span-3 text-sm">
+                  {(() => {
+                    let displayText = '';
+                    const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
+                    if (message !== errorMessage) { // Only update if it changed to avoid re-renders
+                      setErrorMessage(message);
+                    }
+                    displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
+
+                    return (
+                      <>
+                        <span className={errorMessage ? 'text-destructive' : 'text-muted-foreground'}>
+                          {displayText}
+                        </span>
+                        {errorMessage && (
+                          <p className="text-destructive text-xs mt-1">{errorMessage}</p>
+                        )}
+                      </>
+                    );
+                  })()}
+                </div>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="targetCompletions">
+                    {t('completeLabel')}
+                  </Label>
                 </div>
                 <div className="col-span-3">
-                  <div className="flex flex-wrap gap-2">
-                    {users.filter((u) => u.id !== currentUser?.id).map(user => (
-                      <Avatar
-                        key={user.id}
-                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id)
-                            ? 'border-primary'
-                            : 'border-muted'
-                          }`}
-                        title={user.username}
-                        onClick={() => {
-                          setSelectedUserIds(prev =>
-                            prev.includes(user.id)
-                              ? prev.filter(id => id !== user.id)
-                              : [...prev, user.id]
-                          )
-                        }}
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => Math.max(1, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                       >
-                        <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
-                        <AvatarFallback>{user.username[0]}</AvatarFallback>
-                      </Avatar>
-                    ))}
+                        -
+                      </button>
+                      <Input
+                        id="targetCompletions"
+                        type="number"
+                        value={targetCompletions}
+                        onChange={(e) => {
+                          const value = parseInt(e.target.value)
+                          setTargetCompletions(isNaN(value) ? 1 : Math.max(1, value))
+                        }}
+                        min={1}
+                        max={10}
+                        className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => Math.min(10, prev + 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('timesSuffix')}
+                    </span>
                   </div>
                 </div>
               </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button type="submit" disabled={!!errorMessage}>
-              {habit
-                ? t('saveChangesButton')
-                : t(isTask ? 'addTaskButton' : 'addHabitButton')}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="coinReward">
+                    {t('rewardLabel')}
+                  </Label>
+                </div>
+                <div className="col-span-3">
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setCoinReward(prev => Math.max(0, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        -
+                      </button>
+                      <Input
+                        id="coinReward"
+                        type="number"
+                        value={coinReward}
+                        onChange={(e) => {
+                          const value = parseInt(e.target.value === "" ? "0" : e.target.value)
+                          setCoinReward(Math.min(value, MAX_COIN_LIMIT))
+                        }}
+                        min={0}
+                        max={MAX_COIN_LIMIT}
+                        required
+                        className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setCoinReward(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('coinsSuffix')}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              {users && users.length > 1 && (
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <div className="flex items-center justify-end gap-2">
+                    <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                  </div>
+                  <div className="col-span-3">
+                    <div className="flex flex-wrap gap-2">
+                      {users.filter((u) => u.id !== currentUser?.id).map(user => (
+                        <Avatar
+                          key={user.id}
+                          className={`h-8 w-8 border-2 cursor-pointer
+                          ${selectedUserIds.includes(user.id)
+                              ? 'border-primary'
+                              : 'border-muted'
+                            }`}
+                          title={user.username}
+                          onClick={() => {
+                            setSelectedUserIds(prev =>
+                              prev.includes(user.id)
+                                ? prev.filter(id => id !== user.id)
+                                : [...prev, user.id]
+                            )
+                          }}
+                        >
+                          <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
+                          <AvatarFallback>{user.username[0]}</AvatarFallback>
+                        </Avatar>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button type="submit" disabled={!!errorMessage}>
+                {habit
+                  ? t('saveChangesButton')
+                  : t(isTask ? 'addTaskButton' : 'addHabitButton')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }
 
diff --git a/components/AddEditWishlistItemModal.tsx b/components/AddEditWishlistItemModal.tsx
index 4433f47..53b3c80 100644
--- a/components/AddEditWishlistItemModal.tsx
+++ b/components/AddEditWishlistItemModal.tsx
@@ -10,6 +10,7 @@ import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { WishlistItemType } from '@/lib/types'
 import EmojiPickerButton from './EmojiPickerButton'
+import ModalOverlay from './ModalOverlay'
 import { MAX_COIN_LIMIT } from '@/lib/constants'
 
 interface AddEditWishlistItemModalProps {
@@ -115,196 +116,199 @@ export default function AddEditWishlistItemModal({
   }
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{editingItem ? t('editTitle') : t('addTitle')}</DialogTitle>
-        </DialogHeader>
-        <form onSubmit={handleSave}>
-          <div className="grid gap-4 py-4">
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="name" className="text-right">
-                {t('nameLabel')}
-              </Label>
-              <div className="col-span-3 flex gap-2">
-                <Input
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  className="flex-1"
-                  required
-                />
-                <EmojiPickerButton
-                  inputIdToFocus="name"
-                  onEmojiSelect={(emoji) => {
-                    setName(prev => {
-                      const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
-                      return `${prev}${space}${emoji}`;
-                    })
-                  }}
-                />
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="description" className="text-right">
-                {t('descriptionLabel')}
-              </Label>
-              <Textarea
-                id="description"
-                value={description}
-                onChange={(e) => setDescription(e.target.value)}
-                className="col-span-3"
-              />
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="coinReward">
-                  {t('costLabel')}
+    <>
+      <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>
+          <form onSubmit={handleSave}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="name" className="text-right">
+                  {t('nameLabel')}
                 </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="coinReward"
-                      type="number"
-                      value={coinCost}
-                      onChange={(e) => {
-                        const value = parseInt(e.target.value === "" ? "0" : e.target.value)
-                        setCoinCost(Math.min(value, MAX_COIN_LIMIT))
-                      }}
-                      min={0}
-                      max={MAX_COIN_LIMIT}
-                      required
-                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setCoinCost(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('coinsSuffix')}
-                  </span>
+                <div className="col-span-3 flex gap-2">
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="flex-1"
+                    required
+                  />
+                  <EmojiPickerButton
+                    inputIdToFocus="name"
+                    onEmojiSelect={(emoji) => {
+                      setName(prev => {
+                        const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
+                        return `${prev}${space}${emoji}`;
+                      })
+                    }}
+                  />
                 </div>
               </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <div className="flex items-center gap-2 justify-end">
-                <Label htmlFor="targetCompletions">
-                  {t('redeemableLabel')}
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="description" className="text-right">
+                  {t('descriptionLabel')}
                 </Label>
-              </div>
-              <div className="col-span-3">
-                <div className="flex items-center gap-4">
-                  <div className="flex items-center border rounded-lg overflow-hidden">
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      -
-                    </button>
-                    <Input
-                      id="targetCompletions"
-                      type="number"
-                      value={targetCompletions || ''}
-                      onChange={(e) => {
-                        const value = e.target.value
-                        setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
-                      }}
-                      min={0}
-                      placeholder="∞"
-                      className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
-                      className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
-                    >
-                      +
-                    </button>
-                  </div>
-                  <span className="text-sm text-muted-foreground">
-                    {t('timesSuffix')}
-                  </span>
-                </div>
-                {errors.targetCompletions && (
-                  <div className="text-sm text-red-500">
-                    {errors.targetCompletions}
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className="grid grid-cols-4 items-center gap-4">
-              <Label htmlFor="link" className="text-right">
-                {t('linkLabel')}
-              </Label>
-              <div className="col-span-3">
-                <Input
-                  id="link"
-                  type="url"
-                  placeholder="https://..."
-                  value={link}
-                  onChange={(e) => setLink(e.target.value)}
+                <Textarea
+                  id="description"
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
                   className="col-span-3"
                 />
-                {errors.link && (
-                  <div className="text-sm text-red-500">
-                    {errors.link}
-                  </div>
-                )}
               </div>
-            </div>
-            {usersData.users && usersData.users.length > 1 && (
               <div className="grid grid-cols-4 items-center gap-4">
-                <div className="flex items-center justify-end gap-2">
-                  <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="coinReward">
+                    {t('costLabel')}
+                  </Label>
                 </div>
                 <div className="col-span-3">
-                  <div className="flex flex-wrap gap-2">
-                    {usersData.users.filter((u) => u.id !== currentUser?.id).map(user => (
-                      <Avatar
-                        key={user.id}
-                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id)
-                            ? 'border-primary'
-                            : 'border-muted'
-                          }`}
-                        title={user.username}
-                        onClick={() => {
-                          setSelectedUserIds(prev =>
-                            prev.includes(user.id)
-                              ? prev.filter(id => id !== user.id)
-                              : [...prev, user.id]
-                          )
-                        }}
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setCoinCost(prev => Math.max(0, prev - 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
                       >
-                        <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
-                        <AvatarFallback>{user.username[0]}</AvatarFallback>
-                      </Avatar>
-                    ))}
+                        -
+                      </button>
+                      <Input
+                        id="coinReward"
+                        type="number"
+                        value={coinCost}
+                        onChange={(e) => {
+                          const value = parseInt(e.target.value === "" ? "0" : e.target.value)
+                          setCoinCost(Math.min(value, MAX_COIN_LIMIT))
+                        }}
+                        min={0}
+                        max={MAX_COIN_LIMIT}
+                        required
+                        className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setCoinCost(prev => Math.min(prev + 1, MAX_COIN_LIMIT))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('coinsSuffix')}
+                    </span>
                   </div>
                 </div>
               </div>
-            )}
-          </div>
-          <DialogFooter>
-            <Button type="submit">{editingItem ? t('saveButton') : t('addButton')}</Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <div className="flex items-center gap-2 justify-end">
+                  <Label htmlFor="targetCompletions">
+                    {t('redeemableLabel')}
+                  </Label>
+                </div>
+                <div className="col-span-3">
+                  <div className="flex items-center gap-4">
+                    <div className="flex items-center border rounded-lg overflow-hidden">
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => prev !== undefined && prev > 1 ? prev - 1 : undefined)}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        -
+                      </button>
+                      <Input
+                        id="targetCompletions"
+                        type="number"
+                        value={targetCompletions || ''}
+                        onChange={(e) => {
+                          const value = e.target.value
+                          setTargetCompletions(value && value !== "0" ? parseInt(value) : undefined)
+                        }}
+                        min={0}
+                        placeholder="∞"
+                        className="w-20 text-center border-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setTargetCompletions(prev => Math.min(10, (prev || 0) + 1))}
+                        className="px-3 py-2 bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors"
+                      >
+                        +
+                      </button>
+                    </div>
+                    <span className="text-sm text-muted-foreground">
+                      {t('timesSuffix')}
+                    </span>
+                  </div>
+                  {errors.targetCompletions && (
+                    <div className="text-sm text-red-500">
+                      {errors.targetCompletions}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="grid grid-cols-4 items-center gap-4">
+                <Label htmlFor="link" className="text-right">
+                  {t('linkLabel')}
+                </Label>
+                <div className="col-span-3">
+                  <Input
+                    id="link"
+                    type="url"
+                    placeholder="https://..."
+                    value={link}
+                    onChange={(e) => setLink(e.target.value)}
+                    className="col-span-3"
+                  />
+                  {errors.link && (
+                    <div className="text-sm text-red-500">
+                      {errors.link}
+                    </div>
+                  )}
+                </div>
+              </div>
+              {usersData.users && usersData.users.length > 1 && (
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <div className="flex items-center justify-end gap-2">
+                    <Label htmlFor="sharing-toggle">{t('shareLabel')}</Label>
+                  </div>
+                  <div className="col-span-3">
+                    <div className="flex flex-wrap gap-2">
+                      {usersData.users.filter((u) => u.id !== currentUser?.id).map(user => (
+                        <Avatar
+                          key={user.id}
+                          className={`h-8 w-8 border-2 cursor-pointer
+                          ${selectedUserIds.includes(user.id)
+                              ? 'border-primary'
+                              : 'border-muted'
+                            }`}
+                          title={user.username}
+                          onClick={() => {
+                            setSelectedUserIds(prev =>
+                              prev.includes(user.id)
+                                ? prev.filter(id => id !== user.id)
+                                : [...prev, user.id]
+                            )
+                          }}
+                        >
+                          <AvatarImage src={user?.avatarPath && `/api/avatars/${user.avatarPath.split('/').pop()}` || ""} />
+                          <AvatarFallback>{user.username[0]}</AvatarFallback>
+                        </Avatar>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <DialogFooter>
+              <Button type="submit">{editingItem ? t('saveButton') : t('addButton')}</Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+    </>
   )
 }
 
diff --git a/components/EmojiPickerButton.tsx b/components/EmojiPickerButton.tsx
index 04fe7a7..9071b65 100644
--- a/components/EmojiPickerButton.tsx
+++ b/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"
diff --git a/components/ModalOverlay.tsx b/components/ModalOverlay.tsx
new file mode 100644
index 0000000..80cb7b2
--- /dev/null
+++ b/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" />
+}
diff --git a/components/WishlistManager.tsx b/components/WishlistManager.tsx
index 48ac19b..b99b55e 100644
--- a/components/WishlistManager.tsx
+++ b/components/WishlistManager.tsx
@@ -152,14 +152,16 @@ export default function WishlistManager() {
           </>
         )}
       </div>
-      <AddEditWishlistItemModal
-        isOpen={isModalOpen}
-        setIsOpen={setIsModalOpen}
-        editingItem={editingItem}
-        setEditingItem={setEditingItem}
-        addWishlistItem={addWishlistItem}
-        editWishlistItem={editWishlistItem}
-      />
+      {isModalOpen &&
+        <AddEditWishlistItemModal
+          isOpen={isModalOpen}
+          setIsOpen={setIsModalOpen}
+          editingItem={editingItem}
+          setEditingItem={setEditingItem}
+          addWishlistItem={addWishlistItem}
+          editWishlistItem={editWishlistItem}
+        />
+      }
       <ConfirmDialog
         isOpen={deleteConfirmation.isOpen}
         onClose={() => setDeleteConfirmation({ isOpen: false, itemId: null })}