Disable highlight effect on mobile

This commit is contained in:
2026-02-19 23:45:36 +00:00
parent 9d153e95d1
commit 82fcd6bc94
2 changed files with 24 additions and 2 deletions
+6 -2
View File
@@ -15,6 +15,7 @@ const RepeatMedicationsSubsection = lazy(() => import('./RepeatMedicationsSubsec
const ChatWidget = lazy(() => import('./ChatWidget').then(m => ({ default: m.ChatWidget })))
import { useActiveSection } from '@/hooks/useActiveSection'
import { useIsMobileNav } from '@/hooks/useIsMobileNav'
import { useIsTabletOrBelow } from '@/hooks/useIsTabletOrBelow'
import { useDetailPanel } from '@/contexts/DetailPanelContext'
import { timelineConsultations, timelineEntities } from '@/data/timeline'
import { skills } from '@/data/skills'
@@ -46,6 +47,7 @@ export function DashboardLayout() {
const [chronologyHeight, setChronologyHeight] = useState<number | null>(null)
const [constellationReady, setConstellationReady] = useState(false)
const isMobileNav = useIsMobileNav()
const isTabletOrBelow = useIsTabletOrBelow()
const chronologyRef = useRef<HTMLDivElement>(null)
const patientSummaryRef = useRef<HTMLDivElement>(null)
const constellationWrapperRef = useRef<HTMLDivElement>(null)
@@ -186,15 +188,17 @@ export function DashboardLayout() {
)
const handleNodeHighlight = useCallback((id: string | null) => {
if (isTabletOrBelow) return
setHighlightedNodeId(id)
setGlobalFocusId(id)
}, [])
}, [isTabletOrBelow])
const handleNodeHover = useCallback((id: string | null) => {
if (isTabletOrBelow) return
const nodeType = id ? nodeTypeById.get(id) : null
setHighlightedRoleId(nodeType !== 'skill' ? id : null)
setGlobalFocusId(id)
}, [nodeTypeById])
}, [isTabletOrBelow, nodeTypeById])
// Global Ctrl+K listener to open command palette
useEffect(() => {
+18
View File
@@ -0,0 +1,18 @@
import { useState, useEffect } from 'react'
const TABLET_QUERY = '(max-width: 767px)'
export function useIsTabletOrBelow(): boolean {
const [isTablet, setIsTablet] = useState(
() => window.matchMedia(TABLET_QUERY).matches,
)
useEffect(() => {
const mq = window.matchMedia(TABLET_QUERY)
const handler = (e: MediaQueryListEvent) => setIsTablet(e.matches)
mq.addEventListener('change', handler)
return () => mq.removeEventListener('change', handler)
}, [])
return isTablet
}