From 95203426a3918db48985befff8212a87bfaf0f58 Mon Sep 17 00:00:00 2001
From: dohsimpson <mydohsimpson@gmail.com>
Date: Mon, 26 May 2025 22:58:16 -0400
Subject: [PATCH] fix modal and invalid frequency

---
 CHANGELOG.md                     |  8 ++++++++
 components/AddEditHabitModal.tsx |  9 +++++----
 components/HabitItem.tsx         | 16 +++++++++-------
 components/Profile.tsx           | 17 +++++++++--------
 components/WishlistItem.tsx      |  4 ++--
 components/ui/dialog.tsx         |  2 +-
 messages/de.json                 |  1 +
 messages/en.json                 |  1 +
 messages/es.json                 |  1 +
 messages/fr.json                 |  1 +
 messages/ja.json                 |  1 +
 messages/ru.json                 |  1 +
 messages/zh.json                 |  1 +
 package.json                     |  2 +-
 14 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 268ec6b..c4edfbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## Version 0.2.19
+
+### Fixed
+
+* settings button not working
+* fixed delete dialog modal blocks page interaction (#149)
+* disable submit button when frequency is invaid
+
 ## Version 0.2.18
 
 ### Improved
diff --git a/components/AddEditHabitModal.tsx b/components/AddEditHabitModal.tsx
index 37f6739..53bbc1e 100644
--- a/components/AddEditHabitModal.tsx
+++ b/components/AddEditHabitModal.tsx
@@ -44,7 +44,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
   const [ruleText, setRuleText] = useState<string>(initialRuleText)
   const { currentUser } = useHelpers()
   const [isQuickDatesOpen, setIsQuickDatesOpen] = useState(false)
-  const [ruleError, setRuleError] = useState<string | null>(null); // State for validation message
+  const [errorMessage, setErrorMessage] = useState<string | null>(null); // State for validation message
   const [selectedUserIds, setSelectedUserIds] = useState<string[]>((habit?.userIds || []).filter(id => id !== currentUser?.id))
   const [usersData] = useAtom(usersAtom)
   const users = usersData.users
@@ -183,9 +183,10 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
               <div className="col-start-2 col-span-3 text-sm">
                 {(() => {
                   let displayText = '';
-                  let errorMessage: string | null = null;
                   const { result, message } = convertHumanReadableFrequencyToMachineReadable({ text: ruleText, timezone: settings.system.timezone, isRecurring: isRecurRule });
-                  errorMessage = message;
+                  if (message !== errorMessage) { // Only update if it changed to avoid re-renders
+                    setErrorMessage(message);
+                  }
                   displayText = convertMachineReadableFrequencyToHumanReadable({ frequency: result, isRecurRule, timezone: settings.system.timezone })
 
                   return (
@@ -320,7 +321,7 @@ export default function AddEditHabitModal({ onClose, onSave, habit, isTask }: Ad
             )}
           </div>
           <DialogFooter>
-            <Button type="submit">
+            <Button type="submit" disabled={!!errorMessage}>
               {habit
                 ? t('saveChangesButton')
                 : t(isTask ? 'addTaskButton' : 'addHabitButton')}
diff --git a/components/HabitItem.tsx b/components/HabitItem.tsx
index 1ebcf77..5b7579d 100644
--- a/components/HabitItem.tsx
+++ b/components/HabitItem.tsx
@@ -29,7 +29,7 @@ interface HabitItemProps {
 
 const renderUserAvatars = (habit: Habit, currentUser: User | null, usersData: { users: User[] }) => {
   if (!habit.userIds || habit.userIds.length <= 1) return null;
-  
+
   return (
     <div className="flex -space-x-2 ml-2 flex-shrink-0">
       {habit.userIds?.filter((u) => u !== currentUser?.id).map(userId => {
@@ -113,11 +113,13 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
       </CardHeader>
       <CardContent className="flex-1">
         <p className={`text-sm ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500'}`}>
-          {t('whenLabel', { frequency: convertMachineReadableFrequencyToHumanReadable({
-            frequency: habit.frequency,
-            isRecurRule,
-            timezone: settings.system.timezone
-          })})}
+          {t('whenLabel', {
+            frequency: convertMachineReadableFrequencyToHumanReadable({
+              frequency: habit.frequency,
+              isRecurRule,
+              timezone: settings.system.timezone
+            })
+          })}
         </p>
         <div className="flex items-center mt-2">
           <Coins className={`h-4 w-4 mr-1 ${habit.archived ? 'text-gray-400 dark:text-gray-500' : 'text-yellow-400'}`} />
@@ -190,7 +192,7 @@ export default function HabitItem({ habit, onEdit, onDelete }: HabitItemProps) {
               <span className="ml-2">{t('editButton')}</span>
             </Button>
           )}
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                 <MoreVertical className="h-4 w-4" />
diff --git a/components/Profile.tsx b/components/Profile.tsx
index fac72df..2006119 100644
--- a/components/Profile.tsx
+++ b/components/Profile.tsx
@@ -110,17 +110,18 @@ export function Profile() {
             </div>
           </DropdownMenuItem>
           <DropdownMenuItem className="cursor-pointer px-2 py-1.5" asChild>
-            <div className="flex items-center justify-between w-full">
+            {/* need the Link element to be the direct child of the DropdownMenuItem, since we are using asChild here */}
+            <Link
+              href="/settings"
+              aria-label={t('settingsLink')}
+              className="flex items-center justify-between w-full"
+              onClick={() => setOpen(false)} // Ensure dropdown closes on click
+            >
               <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>
+                <span>{t('settingsLink')}</span>
               </div>
-            </div>
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem className="cursor-pointer px-2 py-1.5" onClick={() => {
             setOpen(false);  // Close the dropdown
diff --git a/components/WishlistItem.tsx b/components/WishlistItem.tsx
index 11b634f..cb10da7 100644
--- a/components/WishlistItem.tsx
+++ b/components/WishlistItem.tsx
@@ -141,7 +141,7 @@ export default function WishlistItem({
               <span className="ml-2">{t('editButton')}</span>
             </Button>
           )}
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                 <MoreVertical className="h-4 w-4" />
@@ -166,7 +166,7 @@ export default function WishlistItem({
               </DropdownMenuItem>
               <DropdownMenuSeparator className="sm:hidden" />
               <DropdownMenuItem
-                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400 cursor-pointer"
+                className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
                 onClick={onDelete}
                 disabled={!canWrite}
               >
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index afbac43..1647513 100644
--- 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=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:pointer-events-none",
+      "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",
       className
     )}
     {...props}
diff --git a/messages/de.json b/messages/de.json
index 66101aa..bfdfca0 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -423,6 +423,7 @@
     "cancel": "Abbrechen"
   },
   "useCoins": {
+    "addedCoinsDescription": "{amount} Münzen hinzugefügt",
     "invalidAmountTitle": "Ungültiger Betrag",
     "invalidAmountDescription": "Bitte geben Sie eine gültige positive Zahl ein",
     "successTitle": "Erfolg",
diff --git a/messages/en.json b/messages/en.json
index 43b4767..fc73841 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -408,6 +408,7 @@
     "notEnoughCoinsDescription": "You need {coinsNeeded} more coins to redeem this reward."
   },
   "useCoins": {
+    "addedCoinsDescription": "Added {amount} coins",
     "invalidAmountTitle": "Invalid amount",
     "invalidAmountDescription": "Please enter a valid positive number",
     "successTitle": "Success",
diff --git a/messages/es.json b/messages/es.json
index dfddd39..e04a2b9 100644
--- a/messages/es.json
+++ b/messages/es.json
@@ -423,6 +423,7 @@
     "cancel": "Cancelar"
   },
   "useCoins": {
+    "addedCoinsDescription": "Se añadieron {amount} monedas",
     "invalidAmountTitle": "Cantidad inválida",
     "invalidAmountDescription": "Por favor ingresa un número positivo válido",
     "successTitle": "Éxito",
diff --git a/messages/fr.json b/messages/fr.json
index 6bfbbf5..cec1418 100644
--- a/messages/fr.json
+++ b/messages/fr.json
@@ -423,6 +423,7 @@
     "cancel": "Annuler"
   },
   "useCoins": {
+    "addedCoinsDescription": "{amount} pièces ajoutées",
     "invalidAmountTitle": "Montant invalide",
     "invalidAmountDescription": "Veuillez entrer un nombre positif valide",
     "successTitle": "Succès",
diff --git a/messages/ja.json b/messages/ja.json
index af36799..b136366 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -423,6 +423,7 @@
     "cancel": "キャンセル"
   },
   "useCoins": {
+    "addedCoinsDescription": "{amount}コインを追加しました",
     "invalidAmountTitle": "無効な値です",
     "invalidAmountDescription": "有効な正の数を入力してください",
     "successTitle": "成功しました",
diff --git a/messages/ru.json b/messages/ru.json
index 0eb3582..45bdae5 100644
--- a/messages/ru.json
+++ b/messages/ru.json
@@ -423,6 +423,7 @@
     "cancel": "Отмена"
   },
   "useCoins": {
+    "addedCoinsDescription": "Добавлено {amount} монет",
     "invalidAmountTitle": "Неверная сумма",
     "invalidAmountDescription": "Пожалуйста, введите положительное число",
     "successTitle": "Успех",
diff --git a/messages/zh.json b/messages/zh.json
index 4da1dcd..f1d9f9b 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -423,6 +423,7 @@
     "cancel": "取消"
   },
   "useCoins": {
+    "addedCoinsDescription": "已添加 {amount} 个金币",
     "invalidAmountTitle": "无效金额",
     "invalidAmountDescription": "请输入有效的正数",
     "successTitle": "成功",
diff --git a/package.json b/package.json
index 0e96f11..e8fb78d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "habittrove",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",