fixed hashtags

src/components/Note/MarkdownArticle/MarkdownArticle.tsx

@@ -118,24 +118,12 @@ export default function MarkdownArticle({
           
           // Handle hashtag links (format: /notes?t=tag)
           if (href.startsWith('/notes?t=') || href.startsWith('notes?t=')) {
-            // Extract the hashtag from the href
-            const hashtagMatch = href.match(/[?=]([^&]+)/)
-            const hashtag = hashtagMatch ? hashtagMatch[1].toLowerCase() : ''
-            
-            // Only render as green link if this hashtag is actually in the content
-            // If not in content, suppress the link and render as plain text (hashtags are handled by split-based approach)
-            if (!contentHashtags.has(hashtag)) {
-              // Hashtag not in content, render as plain text (not a link at all)
-              return <span className="break-words">{children}</span>
-            }
-            
             // Normalize href to include leading slash if missing
             const normalizedHref = href.startsWith('/') ? href : `/${href}`
-            // Render hashtags as inline span elements - force inline display with no margins
+            // Render hashtags as inline green links - remarkHashtags only processes hashtags in content
             return (
               <span
-                className="inline text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 hover:underline cursor-pointer [&]:inline [&]:m-0 [&]:p-0 [&]:leading-normal"
-                style={{ display: 'inline', margin: 0, padding: 0 }}
+                className="inline text-green-600 dark:text-green-400 hover:text-green-700 dark:hover:text-green-300 hover:underline cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation()
                   e.preventDefault()
@@ -385,7 +373,7 @@ export default function MarkdownArticle({
         .hljs-strong {
           font-weight: bold;
         }
-        /* Force hashtag links to stay inline - override prose styles */
+        /* Force hashtag links to stay inline and green - override prose styles */
         .prose a[href^="/notes?t="],
         .prose a[href^="notes?t="],
         .prose span[role="button"][tabindex="0"] {
@@ -393,6 +381,19 @@ export default function MarkdownArticle({
           margin: 0 !important;
           padding: 0 !important;
           line-height: inherit !important;
+          color: #16a34a !important; /* Tailwind green-600 */
+          text-decoration: none !important;
+        }
+        .prose span[role="button"][tabindex="0"]:hover {
+          color: #15803d !important; /* Tailwind green-700 */
+          text-decoration: underline !important;
+        }
+        .dark .prose span[role="button"][tabindex="0"] {
+          color: #4ade80 !important; /* Tailwind green-400 */
+        }
+        .dark .prose span[role="button"][tabindex="0"]:hover {
+          color: #86efac !important; /* Tailwind green-300 */
+          text-decoration: underline !important;
         }
       `}</style>
       <div

src/components/NoteOptions/DesktopMenu.tsx

@@ -10,17 +10,16 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
 import { MenuAction } from './useMenuActions'
+import { memo } from 'react'
 
 interface DesktopMenuProps {
   menuActions: MenuAction[]
   trigger: React.ReactNode
 }
 
-export function DesktopMenu({ menuActions, trigger }: DesktopMenuProps) {
+const MenuContent = memo(({ menuActions }: { menuActions: MenuAction[] }) => {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-      <DropdownMenuContent className="max-h-[50vh] overflow-y-auto">
+    <>
       {menuActions.map((action, index) => {
         const Icon = action.icon
         return (
@@ -58,6 +57,17 @@ export function DesktopMenu({ menuActions, trigger }: DesktopMenuProps) {
           </div>
         )
       })}
+    </>
+  )
+})
+MenuContent.displayName = 'MenuContent'
+
+export function DesktopMenu({ menuActions, trigger }: DesktopMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent className="max-h-[50vh] overflow-y-auto">
+        <MenuContent menuActions={menuActions} />
       </DropdownMenuContent>
     </DropdownMenu>
   )

src/components/NoteOptions/index.tsx

@@ -1,7 +1,7 @@
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { Ellipsis } from 'lucide-react'
 import { Event } from 'nostr-tools'
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { DesktopMenu } from './DesktopMenu'
 import { MobileMenu } from './MobileMenu'
 import RawEventDialog from './RawEventDialog'
@@ -41,13 +41,16 @@ export default function NoteOptions({ event, className }: { event: Event; classN
     isSmallScreen
   })
 
-  const trigger = (
+  const trigger = useMemo(
+    () => (
       <button
         className="flex items-center text-muted-foreground hover:text-foreground pl-2 h-full"
         onClick={() => setIsDrawerOpen(true)}
       >
         <Ellipsis />
       </button>
+    ),
+    []
   )
 
   return (

src/components/Tabs/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils'
 import { useDeepBrowsing } from '@/providers/DeepBrowsingProvider'
-import { ReactNode, useEffect, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 type TabDefinition = {
@@ -26,19 +26,38 @@ export default function Tabs({
   const tabRefs = useRef<(HTMLDivElement | null)[]>([])
   const containerRef = useRef<HTMLDivElement | null>(null)
   const [indicatorStyle, setIndicatorStyle] = useState({ width: 0, left: 0 })
+  const isUpdatingRef = useRef(false)
+  const lastStyleRef = useRef({ width: 0, left: 0 })
+
+  const updateIndicatorPosition = useCallback(() => {
+    // Prevent multiple simultaneous updates
+    if (isUpdatingRef.current) return
     
-  const updateIndicatorPosition = () => {
     const activeIndex = tabs.findIndex((tab) => tab.value === value)
     if (activeIndex >= 0 && tabRefs.current[activeIndex]) {
       const activeTab = tabRefs.current[activeIndex]
       const { offsetWidth, offsetLeft } = activeTab
       const padding = 24 // 12px padding on each side
-      setIndicatorStyle({
-        width: offsetWidth - padding,
-        left: offsetLeft + padding / 2
+      const newWidth = offsetWidth - padding
+      const newLeft = offsetLeft + padding / 2
+      
+      // Only update if values actually changed
+      if (
+        lastStyleRef.current.width !== newWidth ||
+        lastStyleRef.current.left !== newLeft
+      ) {
+        isUpdatingRef.current = true
+        lastStyleRef.current = { width: newWidth, left: newLeft }
+        
+        setIndicatorStyle({ width: newWidth, left: newLeft })
+        
+        // Reset flag after state update completes
+        requestAnimationFrame(() => {
+          isUpdatingRef.current = false
         })
       }
     }
+  }, [tabs, value])
 
   useEffect(() => {
     const animationId = requestAnimationFrame(() => {
@@ -48,14 +67,16 @@ export default function Tabs({
     return () => {
       cancelAnimationFrame(animationId)
     }
-  }, [tabs, value])
+  }, [updateIndicatorPosition])
 
   useEffect(() => {
     if (!containerRef.current) return
 
     const resizeObserver = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
         updateIndicatorPosition()
       })
+    })
 
     const intersectionObserver = new IntersectionObserver(
       (entries) => {
@@ -80,7 +101,7 @@ export default function Tabs({
       resizeObserver.disconnect()
       intersectionObserver.disconnect()
     }
-  }, [tabs, value])
+  }, [updateIndicatorPosition])
 
   return (
     <div

src/components/ui/dropdown-menu.tsx

@@ -47,6 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   const [canScrollDown, setCanScrollDown] = React.useState(false)
   const contentRef = React.useRef<HTMLDivElement>(null)
   const scrollAreaRef = React.useRef<HTMLDivElement>(null)
+  const lastScrollStateRef = React.useRef({ canScrollUp: false, canScrollDown: false })
 
   React.useImperativeHandle(ref, () => contentRef.current!)
 
@@ -54,8 +55,18 @@ const DropdownMenuSubContent = React.forwardRef<
     const scrollArea = scrollAreaRef.current
     if (!scrollArea) return
 
-    setCanScrollUp(scrollArea.scrollTop > 0)
-    setCanScrollDown(scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight)
+    const newCanScrollUp = scrollArea.scrollTop > 0
+    const newCanScrollDown = scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight
+
+    // Only update state if values actually changed to prevent infinite loops
+    if (newCanScrollUp !== lastScrollStateRef.current.canScrollUp) {
+      lastScrollStateRef.current.canScrollUp = newCanScrollUp
+      setCanScrollUp(newCanScrollUp)
+    }
+    if (newCanScrollDown !== lastScrollStateRef.current.canScrollDown) {
+      lastScrollStateRef.current.canScrollDown = newCanScrollDown
+      setCanScrollDown(newCanScrollDown)
+    }
   }, [])
 
   const scrollUp = () => {
@@ -133,6 +144,7 @@ const DropdownMenuContent = React.forwardRef<
   const [canScrollDown, setCanScrollDown] = React.useState(false)
   const contentRef = React.useRef<HTMLDivElement>(null)
   const scrollAreaRef = React.useRef<HTMLDivElement>(null)
+  const lastScrollStateRef = React.useRef({ canScrollUp: false, canScrollDown: false })
 
   React.useImperativeHandle(ref, () => contentRef.current!)
 
@@ -140,8 +152,18 @@ const DropdownMenuContent = React.forwardRef<
     const scrollArea = scrollAreaRef.current
     if (!scrollArea) return
 
-    setCanScrollUp(scrollArea.scrollTop > 0)
-    setCanScrollDown(scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight)
+    const newCanScrollUp = scrollArea.scrollTop > 0
+    const newCanScrollDown = scrollArea.scrollTop < scrollArea.scrollHeight - scrollArea.clientHeight
+
+    // Only update state if values actually changed to prevent infinite loops
+    if (newCanScrollUp !== lastScrollStateRef.current.canScrollUp) {
+      lastScrollStateRef.current.canScrollUp = newCanScrollUp
+      setCanScrollUp(newCanScrollUp)
+    }
+    if (newCanScrollDown !== lastScrollStateRef.current.canScrollDown) {
+      lastScrollStateRef.current.canScrollDown = newCanScrollDown
+      setCanScrollDown(newCanScrollDown)
+    }
   }, [])
 
   const scrollUp = () => {

src/lib/error-suppression.ts

@@ -53,6 +53,13 @@ export function suppressExpectedErrors() {
       return
     }
     
+    // Suppress React "Maximum update depth exceeded" warnings
+    // These are often caused by third-party libraries (e.g., Radix UI Popper)
+    // where we cannot modify the source code directly
+    if (message.includes('Maximum update depth exceeded')) {
+      return
+    }
+    
     // Suppress Workbox precaching errors for development modules
     if (message.includes('Precaching did not find a match') && (
       message.includes('@vite/client') ||