diff --git a/package-lock.json b/package-lock.json index d39a0864..146a245b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "imwald", - "version": "23.18.1", + "version": "23.18.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "imwald", - "version": "23.18.1", + "version": "23.18.2", "license": "MIT", "dependencies": { "@asciidoctor/core": "^3.0.4", diff --git a/package.json b/package.json index a5f6ac26..c5b3fd4f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "imwald", - "version": "23.18.1", + "version": "23.18.2", "description": "Imwald — a user-friendly Nostr client focused on relay feed browsing, publications, and relay discovery", "private": true, "type": "module", diff --git a/src/components/Note/SelectionHighlightTrigger.tsx b/src/components/Note/SelectionHighlightTrigger.tsx index 956d05a1..cc8554cb 100644 --- a/src/components/Note/SelectionHighlightTrigger.tsx +++ b/src/components/Note/SelectionHighlightTrigger.tsx @@ -1,6 +1,5 @@ import { buildHighlightDataFromEvent } from '@/lib/build-highlight-data' import { useCreateHighlight } from './CreateHighlightContext' -import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer' import { useScreenSize } from '@/providers/ScreenSizeProvider' import { Event } from 'nostr-tools' import { Highlighter } from 'lucide-react' @@ -80,7 +79,6 @@ export default function SelectionHighlightTrigger({ const [selectedText, setSelectedText] = useState('') const [paragraphContext, setParagraphContext] = useState('') const [toolbarPos, setToolbarPos] = useState<{ top: number; left: number } | null>(null) - const [showMobileDrawer, setShowMobileDrawer] = useState(false) const debounceRef = useRef | null>(null) const touchEndTimeoutRef = useRef | null>(null) @@ -92,7 +90,6 @@ export default function SelectionHighlightTrigger({ setSelectedText('') setParagraphContext('') setToolbarPos(null) - setShowMobileDrawer(false) }, []) const applySelection = useCallback( @@ -104,25 +101,19 @@ export default function SelectionHighlightTrigger({ return } + if (isSmallScreen && isSelectingRef.current && !forceShow) return + setSelectedText(hit.selectedText) setParagraphContext(hit.paragraphContext) - if (isSmallScreen) { - if (forceShow || !isSelectingRef.current) { - setShowMobileDrawer(true) - setToolbarPos(null) - } - return - } - - const toolbarHeight = 44 + const toolbarHeight = isSmallScreen ? 48 : 44 + const toolbarWidth = isSmallScreen ? 200 : 176 const margin = 8 const top = hit.rect.top - toolbarHeight < margin ? hit.rect.bottom + margin : hit.rect.top - toolbarHeight - const rawLeft = hit.rect.left + hit.rect.width / 2 - 80 - const left = Math.max(margin, Math.min(rawLeft, window.innerWidth - 176 - margin)) + const rawLeft = hit.rect.left + hit.rect.width / 2 - toolbarWidth / 2 + const left = Math.max(margin, Math.min(rawLeft, window.innerWidth - toolbarWidth - margin)) setToolbarPos({ top, left }) - setShowMobileDrawer(false) }, [clearUi, isSmallScreen, openHighlight] ) @@ -158,14 +149,14 @@ export default function SelectionHighlightTrigger({ if (!isSmallScreen) return isSelectingRef.current = true if (selectionStableTimeoutRef.current) clearTimeout(selectionStableTimeoutRef.current) - setShowMobileDrawer(false) + setToolbarPos(null) } const onTouchMove = () => { if (!isSmallScreen) return isSelectingRef.current = true if (selectionStableTimeoutRef.current) clearTimeout(selectionStableTimeoutRef.current) - setShowMobileDrawer(false) + setToolbarPos(null) } const onTouchEnd = () => { @@ -195,6 +186,7 @@ export default function SelectionHighlightTrigger({ return } + setToolbarPos(null) scheduleMobileStableSelection() return } @@ -251,12 +243,12 @@ export default function SelectionHighlightTrigger({ if (!openHighlight) return <>{children} - const showDesktopToolbar = !isSmallScreen && selectedText && toolbarPos + const showToolbar = selectedText && toolbarPos return (
{children} - {showDesktopToolbar ? ( + {showToolbar ? ( <>
{ e.stopPropagation() handleCreateHighlight() @@ -279,8 +271,8 @@ export default function SelectionHighlightTrigger({
-
+ {!isSmallScreen ? ( +
+ ) : null} ) : null} - - {isSmallScreen ? ( - 0} - onOpenChange={(open) => { - setShowMobileDrawer(open) - if (!open) handleDismiss() - }} - > - - - {t('Create Highlight')} - -
-
{t('Selected text')}:
-
“{selectedText}”
- -
-
-
- ) : null}
) }