fix(mobile): improve checkbox alignment and remove notification badges

typelets · typelets · commit a41f216a0d40 · 2025-10-23T09:46:24.000-04:00
- Fix checkbox text alignment in note editor and viewer
- Use flexbox with align-items: center for proper vertical alignment
- Apply display: contents to labels to remove wrapper interference
- Hide empty Tiptap spans that caused misalignment
- Remove p tag margins inside task items (key fix)
 - Standardize to 16x16px checkboxes with 8px text spacing
diff --git a/apps/mobile/v1/app/folder-notes.tsx b/apps/mobile/v1/app/folder-notes.tsx
@@ -10,7 +10,6 @@ import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { Input } from '@/src/components/ui/Input';
 import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop, BottomSheetScrollView, BottomSheetTextInput } from '@gorhom/bottom-sheet';
 import { FOLDER_COLORS } from '@/src/constants/ui';
-import { useVersionNotification } from '@/src/hooks/useVersionNotification';
 
 function getViewTitle(viewType: string): string {
   switch (viewType) {
@@ -27,7 +26,6 @@ export default function FolderNotesScreen() {
   const router = useRouter();
   const theme = useTheme();
   const api = useApiService();
-  const { hasNewVersion } = useVersionNotification();
   const [breadcrumbs, setBreadcrumbs] = useState<string[]>([]);
   const [breadcrumbFolders, setBreadcrumbFolders] = useState<Folder[]>([]);
   const [allFolders, setAllFolders] = useState<Folder[]>([]);
@@ -327,9 +325,6 @@ export default function FolderNotesScreen() {
                     onPress={() => setShowSettingsDropdown(!showSettingsDropdown)}
                   >
                     <Ionicons name="settings-outline" size={20} color={theme.colors.mutedForeground} />
-                    {hasNewVersion && (
-                      <View style={styles.notificationBadge} />
-                    )}
                   </TouchableOpacity>
 
                   {showSettingsDropdown && (
@@ -764,13 +759,4 @@ const styles = StyleSheet.create({
   headerDivider: {
     height: StyleSheet.hairlineWidth,
   },
-  notificationBadge: {
-    position: 'absolute',
-    top: 4,
-    right: 4,
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#ef4444',
-  },
 });
diff --git a/apps/mobile/v1/src/screens/EditNote/index.tsx b/apps/mobile/v1/src/screens/EditNote/index.tsx
@@ -81,6 +81,62 @@ export default function EditNoteScreen() {
         const formats = items.map(item => typeof item === 'string' ? item : item.type);
         setActiveFormats(formats);
       });
+
+      // Inject custom JavaScript to handle Enter key in checkbox lists using command method
+      setTimeout(() => {
+        richTextRef.current?.command(`
+          (function() {
+            if (window.checkboxEnterHandlerAdded) return;
+            window.checkboxEnterHandlerAdded = true;
+
+            document.addEventListener('keydown', function(e) {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                const selection = window.getSelection();
+                if (!selection.rangeCount) return;
+
+                const range = selection.getRangeAt(0);
+                let node = range.startContainer;
+
+                // Find parent list item
+                let listItem = node;
+                while (listItem && listItem.nodeName !== 'LI') {
+                  listItem = listItem.parentElement;
+                  if (!listItem || listItem === document.body) break;
+                }
+
+                if (listItem && listItem.nodeName === 'LI') {
+                  // Check if this list item contains a checkbox
+                  const checkbox = listItem.querySelector('input[type="checkbox"]');
+                  if (checkbox) {
+                    e.preventDefault();
+
+                    // Create new list item with checkbox
+                    const newLi = document.createElement('li');
+                    const newCheckbox = document.createElement('input');
+                    newCheckbox.type = 'checkbox';
+                    newCheckbox.style.cssText = 'width: 16px !important; height: 16px !important; margin: 0 8px 0 0 !important; flex-shrink: 0 !important;';
+
+                    const textNode = document.createTextNode('\\u200B'); // Zero-width space
+
+                    newLi.appendChild(newCheckbox);
+                    newLi.appendChild(textNode);
+
+                    // Insert new list item after current one
+                    listItem.parentNode.insertBefore(newLi, listItem.nextSibling);
+
+                    // Move cursor to new list item
+                    const newRange = document.createRange();
+                    newRange.setStart(textNode, 1);
+                    newRange.collapse(true);
+                    selection.removeAllRanges();
+                    selection.addRange(newRange);
+                  }
+                }
+              }
+            }, true);
+          })();
+        `);
+      }, 500);
     }
   }, [editorReady]);
 
@@ -96,13 +152,80 @@ export default function EditNoteScreen() {
     }
   };
 
+  const transformCheckboxHtml = (html: string): string => {
+    // Transform plain checkbox lists to Tiptap-compatible format using regex
+    let transformed = html;
+
+    // First, identify and transform UL elements containing checkboxes
+    // Match UL tags that contain checkbox inputs
+    transformed = transformed.replace(
+      /<ul([^>]*)>([\s\S]*?)<\/ul>/gi,
+      (match, ulAttrs, ulContent) => {
+        // Check if this UL contains checkboxes
+        if (ulContent.includes('type="checkbox"') || ulContent.includes("type='checkbox'")) {
+          // Add data-type="taskList" if not already present
+          const hasDataType = /data-type/i.test(ulAttrs);
+          const newUlAttrs = hasDataType ? ulAttrs : `${ulAttrs} data-type="taskList"`;
+
+          // Transform each LI that contains a checkbox
+          const transformedContent = ulContent.replace(
+            /<li([^>]*)>([\s\S]*?)<\/li>/gi,
+            (liMatch, liAttrs, liContent) => {
+              // Check if this LI contains a checkbox
+              const checkboxMatch = liContent.match(/<input([^>]*type=["']checkbox["'][^>]*)>/i);
+              if (checkboxMatch) {
+                // Add data-type="taskItem" to LI
+                const hasLiDataType = /data-type/i.test(liAttrs);
+                const newLiAttrs = hasLiDataType ? liAttrs : `${liAttrs} data-type="taskItem"`;
+
+                // Extract checkbox and remaining content
+                const checkbox = checkboxMatch[0];
+                let remainingContent = liContent.replace(checkbox, '').trim();
+
+                // Remove non-breaking spaces that might be at the start
+                remainingContent = remainingContent.replace(/^(&nbsp;|\u00A0)+/, '');
+
+                // Wrap checkbox in label if not already
+                const wrappedCheckbox = checkbox.includes('<label>')
+                  ? checkbox
+                  : `<label>${checkbox}</label>`;
+
+                // Wrap remaining content in div if it's not empty and not already wrapped
+                let wrappedContent = '';
+                if (remainingContent) {
+                  // Check if content is already wrapped in a div or p
+                  if (!/^<(div|p)[\s>]/i.test(remainingContent)) {
+                    wrappedContent = `<div>${remainingContent}</div>`;
+                  } else {
+                    wrappedContent = remainingContent;
+                  }
+                }
+
+                return `<li${newLiAttrs}>${wrappedCheckbox}${wrappedContent}</li>`;
+              }
+              return liMatch;
+            }
+          );
+
+          return `<ul${newUlAttrs}>${transformedContent}</ul>`;
+        }
+        return match;
+      }
+    );
+
+    return transformed;
+  };
+
   const handleSave = async (options?: { skipNavigation?: boolean }) => {
     const titleToUse = title.trim() || 'Untitled';
 
     setIsSaving(true);
 
     try {
-      const htmlContent = await richTextRef.current?.getContentHtml() || '';
+      let htmlContent = await richTextRef.current?.getContentHtml() || '';
+
+      // Transform checkbox lists to Tiptap format
+      htmlContent = transformCheckboxHtml(htmlContent);
 
       let savedNote: Note;
 
@@ -333,6 +456,56 @@ export default function EditNoteScreen() {
               margin: 4px 0;
             }
 
+            /* Task list checkbox styling - unified for both mobile and web */
+            ul[data-type="taskList"],
+            ul:has(> li > input[type="checkbox"]) {
+              list-style: none !important;
+              padding-left: 0 !important;
+              margin: 8px 0 !important;
+            }
+
+            li[data-type="taskItem"],
+            li:has(> input[type="checkbox"]),
+            li:has(> label > input[type="checkbox"]) {
+              display: flex !important;
+              align-items: center !important;
+              margin: 4px 0 !important;
+              list-style: none !important;
+            }
+
+            input[type="checkbox"] {
+              width: 16px !important;
+              height: 16px !important;
+              min-width: 16px !important;
+              min-height: 16px !important;
+              margin: 0 8px 0 0 !important;
+              flex-shrink: 0 !important;
+              cursor: pointer !important;
+            }
+
+            li[data-type="taskItem"] label,
+            li label:has(> input[type="checkbox"]) {
+              display: contents !important;
+            }
+
+            /* Hide the empty span that Tiptap adds */
+            li[data-type="taskItem"] label > span {
+              display: none !important;
+            }
+
+            li[data-type="taskItem"] > div,
+            li[data-type="taskItem"] > p {
+              flex: 1 !important;
+              line-height: 1.6 !important;
+              margin: 0 !important;
+            }
+
+            /* Remove p tag margins inside task items */
+            li[data-type="taskItem"] p {
+              margin: 0 !important;
+              line-height: 1.6 !important;
+            }
+
             pre {
               background-color: ${theme.isDark ? 'rgba(255, 255, 255, 0.05)' : theme.colors.muted} !important;
               color: ${theme.colors.foreground} !important;
diff --git a/apps/mobile/v1/src/screens/SettingsScreen.tsx b/apps/mobile/v1/src/screens/SettingsScreen.tsx
@@ -13,7 +13,6 @@ import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop, BottomSheetScro
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { APP_VERSION } from '../constants/version';
 import { UsageBottomSheet } from '../components/settings/UsageBottomSheet';
-import { useVersionNotification } from '../hooks/useVersionNotification';
 
 // Type for valid Ionicons names
 type IconName = keyof typeof Ionicons.glyphMap;
@@ -36,7 +35,6 @@ export default function SettingsScreen({ onLogout }: Props) {
   const theme = useTheme();
   const { user } = useUser();
   const router = useRouter();
-  const { hasNewVersion, markVersionAsSeen } = useVersionNotification();
 
   // Bottom sheet refs
   const themeModeSheetRef = useRef<BottomSheetModal>(null);
@@ -243,10 +241,7 @@ export default function SettingsScreen({ onLogout }: Props) {
           title: "What's New",
           subtitle: 'See latest updates and changes',
           icon: 'newspaper-outline',
-          onPress: async () => {
-            await markVersionAsSeen();
-            Linking.openURL('https://github.com/typelets/typelets-app/blob/main/CHANGELOG.md');
-          },
+          onPress: () => Linking.openURL('https://github.com/typelets/typelets-app/blob/main/CHANGELOG.md'),
         },
         {
           title: 'Support',
@@ -330,9 +325,6 @@ export default function SettingsScreen({ onLogout }: Props) {
                           size={20}
                           color={theme.colors.foreground}
                         />
-                        {item.title === "What's New" && hasNewVersion && (
-                          <View style={styles.notificationBadge} />
-                        )}
                       </View>
                       <View style={styles.settingItemText}>
                         <Text style={[
@@ -1044,13 +1036,4 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
   },
-  notificationBadge: {
-    position: 'absolute',
-    top: 2,
-    right: 2,
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: '#ef4444',
-  },
 });
diff --git a/apps/mobile/v1/src/screens/ViewNote/htmlGenerator.ts b/apps/mobile/v1/src/screens/ViewNote/htmlGenerator.ts
@@ -68,37 +68,42 @@ export function generateNoteHtml(
         li {
           margin: 4px 0;
         }
-        /* Task list styling */
+        /* Task list styling - unified and simple */
         ul[data-type="taskList"] {
           list-style: none !important;
           padding-left: 0 !important;
           margin: 16px 0 !important;
         }
         li[data-type="taskItem"] {
           display: flex !important;
-          align-items: flex-start !important;
-          margin: 8px 0 !important;
+          align-items: center !important;
+          margin: 4px 0 !important;
         }
         li[data-type="taskItem"] label {
-          display: flex !important;
-          margin-right: 8px !important;
-          flex-shrink: 0 !important;
-          line-height: 1.5 !important;
-          height: 24px !important;
-          align-items: center !important;
+          display: contents !important;
+        }
+        /* Hide the empty span that Tiptap adds */
+        li[data-type="taskItem"] label > span {
+          display: none !important;
         }
         li[data-type="taskItem"] input[type="checkbox"] {
           width: 16px !important;
           height: 16px !important;
-          margin: 0 !important;
+          min-width: 16px !important;
+          min-height: 16px !important;
+          margin: 0 8px 0 0 !important;
           flex-shrink: 0 !important;
         }
         li[data-type="taskItem"] > div,
         li[data-type="taskItem"] > p {
           flex: 1 !important;
-          color: ${themeColors.foreground} !important;
-          line-height: 1.5 !important;
+          line-height: 1.6 !important;
+          margin: 0 !important;
+        }
+        /* Remove p tag margins inside task items */
+        li[data-type="taskItem"] p {
           margin: 0 !important;
+          line-height: 1.6 !important;
         }
         strong {
           font-weight: 600;
