fix modal and invalid frequency

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

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')}

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({
+          {t('whenLabel', {
-            frequency: habit.frequency,
+            frequency: convertMachineReadableFrequencyToHumanReadable({
-            isRecurRule,
+              frequency: habit.frequency,
-            timezone: settings.system.timezone
+              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" />

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
+                <span>{t('settingsLink')}</span>
-                  href="/settings"
-                  aria-label={t('settingsLink')}
-                >
-                  <span>{t('settingsLink')}</span>
-                </Link>
               </div>
-            </div>
+            </Link>
           </DropdownMenuItem>
           <DropdownMenuItem className="cursor-pointer px-2 py-1.5" onClick={() => {
             setOpen(false);  // Close the dropdown

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}
               >

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}

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",

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",

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",

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",

messages/ja.json

@@ -423,6 +423,7 @@
     "cancel": "キャンセル"
   },
   "useCoins": {
+    "addedCoinsDescription": "{amount}コインを追加しました",
     "invalidAmountTitle": "無効な値です",
     "invalidAmountDescription": "有効な正の数を入力してください",
     "successTitle": "成功しました",

messages/ru.json

@@ -423,6 +423,7 @@
     "cancel": "Отмена"
   },
   "useCoins": {
+    "addedCoinsDescription": "Добавлено {amount} монет",
     "invalidAmountTitle": "Неверная сумма",
     "invalidAmountDescription": "Пожалуйста, введите положительное число",
     "successTitle": "Успех",

messages/zh.json

@@ -423,6 +423,7 @@
     "cancel": "取消"
   },
   "useCoins": {
+    "addedCoinsDescription": "已添加 {amount} 个金币",
     "invalidAmountTitle": "无效金额",
     "invalidAmountDescription": "请输入有效的正数",
     "successTitle": "成功",

package.json

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