fix emoji picker and about modal (#146)

2026-01-20 22:24:28 +01:00 · 2025-05-25 20:33:08 -04:00
parent 3ac311c3fd
commit 42c8d14d6d
12 changed files with 122 additions and 107 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog

+## Version 0.2.17
+
+### Fixed
+
+* fix emoji selector (#142)
+* fix about modal (#145)
+
 ## Version 0.2.16

 ### Improved
--- a/components/AboutModal.tsx
+++ b/components/AboutModal.tsx
@@ -11,17 +11,16 @@ import ChangelogModal from "./ChangelogModal"
 import { useState } from "react"

 interface AboutModalProps {
-  isOpen: boolean
  onClose: () => void
 }

-export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
+export default function AboutModal({ onClose }: AboutModalProps) {
  const t = useTranslations('AboutModal')
  const version = packageJson.version
  const [changelogOpen, setChangelogOpen] = useState(false)

  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
+    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-sm">
        <DialogHeader>
          <DialogTitle aria-label={t('dialogArisLabel')}></DialogTitle>
--- a/components/AddEditHabitModal.tsx
+++ b/components/AddEditHabitModal.tsx
@@ -8,26 +8,16 @@ import { settingsAtom, browserSettingsAtom, usersAtom } from '@/lib/atoms'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
-import { Switch } from '@/components/ui/switch'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
-import { Info, SmilePlus, Zap } from 'lucide-react'
+import { Zap } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import data from '@emoji-mart/data'
-import Picker from '@emoji-mart/react'
 import { Habit, SafeUser } from '@/lib/types'
+import EmojiPickerButton from './EmojiPickerButton'
 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 * as chrono from 'chrono-node';
 import { DateTime } from 'luxon'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
 import { useHelpers } from '@/lib/client-helpers'

 interface AddEditHabitModalProps {
@@ -46,9 +36,9 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
  const [targetCompletions, setTargetCompletions] = useState(habit?.targetCompletions || 1)
  const isRecurRule = !isTask
  // Initialize ruleText with the actual frequency string or default, not the display text
-  const initialRuleText = habit?.frequency ? convertMachineReadableFrequencyToHumanReadable({ 
+  const initialRuleText = habit?.frequency ? convertMachineReadableFrequencyToHumanReadable({
    frequency: habit.frequency,
-    isRecurRule, 
+    isRecurRule,
    timezone: settings.system.timezone
  }) : (isRecurRule ? INITIAL_RECURRENCE_RULE : INITIAL_DUE);
  const [ruleText, setRuleText] = useState<string>(initialRuleText)
@@ -119,33 +109,15 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
                  onChange={(e) => setName(e.target.value)}
                  required
                />
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                    >
-                      <SmilePlus className="h-8 w-8" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Picker
-                      data={data}
-                      onEmojiSelect={(emoji: { native: string }) => {
-                        setName(prev => {
-                          // Add space before emoji if there isn't one already
-                          const space = prev.length > 0 && !prev.endsWith(' ') ? ' ' : '';
-                          return `${prev}${space}${emoji.native}`;
-                        })
-                        // Focus back on input after selection
-                        const input = document.getElementById('name') as HTMLInputElement
-                        input?.focus()
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
+                <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">
--- a/components/AddEditWishlistItemModal.tsx
+++ b/components/AddEditWishlistItemModal.tsx
@@ -9,12 +9,8 @@ import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { SmilePlus, Info } from 'lucide-react'
-import data from '@emoji-mart/data'
-import Picker from '@emoji-mart/react'
 import { WishlistItemType } from '@/lib/types'
+import EmojiPickerButton from './EmojiPickerButton'
 import { MAX_COIN_LIMIT } from '@/lib/constants'

 interface AddEditWishlistItemModalProps {
@@ -114,7 +110,7 @@ export default function AddEditWishlistItemModal({
    } else {
      addWishlistItem(itemData)
    }
-    
+
    setIsOpen(false)
    setEditingItem(null)
  }
@@ -139,29 +135,15 @@ export default function AddEditWishlistItemModal({
                  className="flex-1"
                  required
                />
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8"
-                    >
-                      <SmilePlus className="h-4 w-4" />
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent className="w-[300px] p-0">
-                    <Picker
-                      data={data}
-                      onEmojiSelect={(emoji: { native: string }) => {
-                        setName(prev => `${prev}${emoji.native}`)
-                        // Focus back on input after selection
-                        const input = document.getElementById('name') as HTMLInputElement
-                        input?.focus()
-                      }}
-                    />
-                  </PopoverContent>
-                </Popover>
+                <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">
@@ -296,13 +278,13 @@ export default function AddEditWishlistItemModal({
                      <Avatar
                        key={user.id}
                        className={`h-8 w-8 border-2 cursor-pointer
-                          ${selectedUserIds.includes(user.id) 
-                            ? 'border-primary' 
+                          ${selectedUserIds.includes(user.id)
+                            ? 'border-primary'
                            : 'border-muted'
                          }`}
                        title={user.username}
                        onClick={() => {
-                          setSelectedUserIds(prev => 
+                          setSelectedUserIds(prev =>
                            prev.includes(user.id)
                              ? prev.filter(id => id !== user.id)
                              : [...prev, user.id]
--- a/components/ClientWrapper.tsx
+++ b/components/ClientWrapper.tsx
@@ -2,14 +2,16 @@

 import { ReactNode, useEffect } from 'react'
 import { useAtom } from 'jotai'
-import { pomodoroAtom, userSelectAtom } from '@/lib/atoms'
+import { aboutOpenAtom, pomodoroAtom, userSelectAtom } from '@/lib/atoms'
 import PomodoroTimer from './PomodoroTimer'
 import UserSelectModal from './UserSelectModal'
 import { useSession } from 'next-auth/react'
+import AboutModal from './AboutModal'

 export default function ClientWrapper({ children }: { children: ReactNode }) {
  const [pomo] = useAtom(pomodoroAtom)
  const [userSelect, setUserSelect] = useAtom(userSelectAtom)
+  const [aboutOpen, setAboutOpen] = useAtom(aboutOpenAtom)
  const { data: session, status } = useSession()
  const currentUserId = session?.user.id

@@ -27,7 +29,10 @@ export default function ClientWrapper({ children }: { children: ReactNode }) {
        <PomodoroTimer />
      )}
      {userSelect && (
-        <UserSelectModal onClose={() => setUserSelect(false)}/>
+        <UserSelectModal onClose={() => setUserSelect(false)} />
+      )}
+      {aboutOpen && (
+        <AboutModal onClose={() => setAboutOpen(false)} />
      )}
    </>
  )
--- a/components/EmojiPickerButton.tsx
+++ b/components/EmojiPickerButton.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { SmilePlus } from 'lucide-react'
+import data from '@emoji-mart/data'
+import Picker from '@emoji-mart/react'
+
+interface EmojiPickerButtonProps {
+  onEmojiSelect: (emoji: string) => void
+  inputIdToFocus?: string // Optional: ID of the input to focus after selection
+}
+
+export default function EmojiPickerButton({ onEmojiSelect, inputIdToFocus }: EmojiPickerButtonProps) {
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false)
+
+  return (
+    <Popover modal={true} open={isEmojiPickerOpen} onOpenChange={setIsEmojiPickerOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8" // Consistent sizing
+        >
+          <SmilePlus className="h-4 w-4" /> {/* Consistent icon size */}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-[300px] p-0"
+        onCloseAutoFocus={(event) => {
+          if (inputIdToFocus) {
+            event.preventDefault();
+            const input = document.getElementById(inputIdToFocus) as HTMLInputElement;
+            input?.focus();
+          }
+        }}
+      >
+        <Picker
+          data={data}
+          onEmojiSelect={(emoji: { native: string }) => {
+            onEmojiSelect(emoji.native);
+            setIsEmojiPickerOpen(false);
+            // Focus is handled by onCloseAutoFocus
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -16,7 +16,6 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import AboutModal from './AboutModal'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { Profile } from './Profile'
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -6,7 +6,6 @@ import { useAtom } from 'jotai'
 import { browserSettingsAtom } from '@/lib/atoms'
 import { useEffect, useState } from 'react'
 import { useTranslations } from 'next-intl'
-import AboutModal from './AboutModal'
 import { HabitIcon, TaskIcon } from '@/lib/constants'
 import { useHelpers } from '@/lib/client-helpers'

@@ -71,7 +70,6 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
            ))}
          </div>
        </nav>
-        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
      </>
    )
  }
@@ -97,7 +95,6 @@ export default function Navigation({ className, viewPort }: NavigationProps) {
            </div>
          </div>
        </div>
-        <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
      </div>
    )
  }
--- a/components/Profile.tsx
+++ b/components/Profile.tsx
@@ -8,8 +8,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog'
 import UserForm from './UserForm'
 import Link from "next/link"
 import { useAtom } from "jotai"
-import { settingsAtom, userSelectAtom } from "@/lib/atoms"
-import AboutModal from "./AboutModal"
+import { aboutOpenAtom, settingsAtom, userSelectAtom } from "@/lib/atoms"
 import { useEffect, useState } from "react"
 import { useTheme } from "next-themes"
 import { signOut } from "@/app/actions/user"
@@ -22,7 +21,7 @@ export function Profile() {
  const [settings] = useAtom(settingsAtom)
  const [userSelect, setUserSelect] = useAtom(userSelectAtom)
  const [isEditing, setIsEditing] = useState(false)
-  const [showAbout, setShowAbout] = useState(false)
+  const [aboutOpen, setAboutOpen] = useAtom(aboutOpenAtom)
  const { theme, setTheme } = useTheme()
  const { currentUser: user } = useHelpers()
  const [open, setOpen] = useState(false)
@@ -111,27 +110,32 @@ export function Profile() {
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
-            <Link
-              href="/settings"
-              aria-label={t('settingsLink')}
-              className="flex items-center w-full gap-3"
-            >
-              <Settings className="h-4 w-4" />
-              <span>{t('settingsLink')}</span>
-            </Link>
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-2">
+                <Settings className="h-4 w-4" />
+                <Link
+                  href="/settings"
+                  aria-label={t('settingsLink')}
+                >
+                  <span>{t('settingsLink')}</span>
+                </Link>
+              </div>
+            </div>
          </DropdownMenuItem>
-          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
-            <button
-              onClick={() => setShowAbout(true)}
-              className="flex items-center w-full gap-3"
-            >
-              <Info className="h-4 w-4" />
-              <span>{t('aboutButton')}</span>
-            </button>
+          <DropdownMenuItem className="cursor-pointer px-2 py-1.5" onClick={() => {
+            setOpen(false);  // Close the dropdown
+            setAboutOpen(true);  // Open the about modal
+          }}>
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-2">
+                <Info className="h-4 w-4" />
+                <span>{t('aboutButton')}</span>
+              </div>
+            </div>
          </DropdownMenuItem>
          <DropdownMenuItem className="cursor-pointer px-2 py-1.5">
-            <div className="flex items-center justify-between w-full gap-3">
-              <div className="flex items-center gap-3">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-2">
                <Palette className="h-4 w-4" />
                <span>{t('themeLabel')}</span>
              </div>
@@ -169,8 +173,6 @@ export function Profile() {
        </DropdownMenuContent>
      </DropdownMenu>

-      <AboutModal isOpen={showAbout} onClose={() => setShowAbout(false)} />
-
      {/* Add the UserForm dialog */}
      {isEditing && user && (
        <Dialog open={isEditing} onOpenChange={() => setIsEditing(false)}>
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:pointer-events-none",
      className
    )}
    {...props}
--- a/lib/atoms.ts
+++ b/lib/atoms.ts
@@ -107,6 +107,7 @@ export const pomodoroAtom = atom<PomodoroAtom>({
 })

 export const userSelectAtom = atom<boolean>(false)
+export const aboutOpenAtom = atom<boolean>(false)

 // Derived atom for completion cache
 export const completionCacheAtom = atom((get) => {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "habittrove",
-  "version": "0.2.16",
+  "version": "0.2.17",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",