+2 -2

src/components/hover-card/base.tsx

··· 1 1 import { A } from "@solidjs/router"; 2 2 import { createSignal, JSX, onCleanup, Show } from "solid-js"; 3 3 import { Portal } from "solid-js/web"; 4 4 - import { isTouchDevice } from "../../layout"; 4 4 + import { canHover } from "../../layout"; 5 5 6 6 interface HoverCardProps { 7 7 /** Link href - if provided, renders an A tag */ ··· 112 112 {props.label} 113 113 </A> 114 114 )} 115 115 - <Show when={show() && !isTouchDevice}> 115 115 + <Show when={show() && canHover}> 116 116 <Portal> 117 117 <div 118 118 ref={setupResizeObserver}

+4 -4

src/components/navbar.tsx

··· 1 1 import * as TID from "@atcute/tid"; 2 2 import { A, Params } from "@solidjs/router"; 3 3 import { createEffect, createMemo, createSignal, Show } from "solid-js"; 4 4 - import { isTouchDevice } from "../layout"; 4 4 + import { canHover } from "../layout"; 5 5 import { didDocCache } from "../utils/api"; 6 6 import { addToClipboard } from "../utils/copy"; 7 7 import { localDateFromTimestamp } from "../utils/date"; ··· 11 11 12 12 const CopyButton = (props: { content: string; label: string }) => { 13 13 return ( 14 14 - <Show when={!isTouchDevice}> 14 14 + <Show when={canHover}> 15 15 <Tooltip text={props.label}> 16 16 <button 17 17 type="button" ··· 108 108 <div 109 109 class="group relative flex items-center justify-between gap-1 rounded-md border-[0.5px] border-transparent bg-transparent px-2 transition-all duration-200 hover:border-neutral-300 hover:bg-neutral-50/40 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40" 110 110 onMouseEnter={() => { 111 111 - if (!isTouchDevice) { 111 111 + if (canHover) { 112 112 setRepoHovered(true); 113 113 setHasHoveredRepo(true); 114 114 } 115 115 }} 116 116 onMouseLeave={() => { 117 117 - if (!isTouchDevice) { 117 117 + if (canHover) { 118 118 setRepoHovered(false); 119 119 } 120 120 }}

+2 -2

src/components/search.tsx

··· 10 10 onMount, 11 11 Show, 12 12 } from "solid-js"; 13 13 - import { isTouchDevice } from "../layout"; 13 13 + import { canHover } from "../layout"; 14 14 import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../utils/api"; 15 15 import { appHandleLink, appList, AppUrl } from "../utils/app-urls"; 16 16 import { createDebouncedValue } from "../utils/hooks/debounced"; ··· 99 99 <Button onClick={() => setShowSearch(!showSearch())}> 100 100 <span class="iconify lucide--search"></span> 101 101 <span>Search</span> 102 102 - <Show when={!isTouchDevice}> 102 102 + <Show when={canHover}> 103 103 <kbd class="font-sans text-neutral-400 dark:text-neutral-500"> 104 104 {/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K 105 105 </kbd>

+2 -2

src/components/tooltip.tsx

··· 1 1 import { JSX, Show } from "solid-js"; 2 2 - import { isTouchDevice } from "../layout"; 2 2 + import { canHover } from "../layout"; 3 3 4 4 const Tooltip = (props: { text: string; children: JSX.Element }) => ( 5 5 <span class="group/tooltip relative inline-flex items-center"> 6 6 {props.children} 7 7 - <Show when={!isTouchDevice}> 7 7 + <Show when={canHover}> 8 8 <span 9 9 style={`transform: translate(-50%, 28px)`} 10 10 class={`dark:shadow-dark-700 dark:bg-dark-300 pointer-events-none absolute left-[50%] z-20 hidden min-w-fit rounded border-[0.5px] border-neutral-300 bg-white p-1 text-center font-sans text-xs font-normal whitespace-nowrap text-neutral-900 shadow-md select-none group-hover/tooltip:inline first-letter:capitalize dark:border-neutral-600 dark:text-neutral-200`}

+1 -1

src/layout.tsx

··· 14 14 import { resolveHandle } from "./utils/api.js"; 15 15 import { plcDirectory } from "./views/settings.jsx"; 16 16 17 17 - export const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1; 17 17 + export const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches; 18 18 19 19 const headers: Record<string, string> = { 20 20 "did:plc:ia76kvnndjutgedggx2ibrem": "bunny.jpg",

+3 -5

src/views/repo.tsx

··· 29 29 removeNotification, 30 30 updateNotification, 31 31 } from "../components/notification.jsx"; 32 32 - import { isTouchDevice } from "../layout.jsx"; 32 32 + import { canHover } from "../layout.jsx"; 33 33 import { 34 34 didDocCache, 35 35 type HandleResolveResult, ··· 419 419 </ErrorBoundary> 420 420 </Show> 421 421 <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}> 422 422 - <div 423 423 - class={`flex flex-col ${isTouchDevice ? "pb-12" : "pb-16"} text-sm wrap-anywhere`} 424 424 - > 422 422 + <div class={`flex flex-col ${canHover ? "pb-16" : "pb-12"} text-sm wrap-anywhere`}> 425 423 <Show 426 424 when={Object.keys(nsids() ?? {}).length != 0} 427 425 fallback={<span class="mt-3 text-center text-base">No collections found.</span>} ··· 745 743 </Show> 746 744 747 745 <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}> 748 748 - <div class={`fixed ${isTouchDevice ? "bottom-8" : "bottom-12"} z-10 w-full max-w-lg`}> 746 746 + <div class={`fixed ${canHover ? "bottom-12" : "bottom-8"} z-10 w-full max-w-lg`}> 749 747 <div 750 748 class="dark:bg-dark-200 dark:shadow-dark-700 mx-3 flex cursor-text items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3 shadow-sm dark:border-neutral-700" 751 749 onClick={(e) => {