From 6d3eb2cb50388d1ece97e471799dc0e3158a304d Mon Sep 17 00:00:00 2001
From: Juliet <m@juli.ee>
Date: Thu, 29 Jan 2026 23:20:31 +0100
Subject: [PATCH] replace isTouchDevice with canHover

---
 src/components/hover-card/base.tsx | 4 ++--
 src/components/navbar.tsx          | 8 ++++----
 src/components/search.tsx          | 4 ++--
 src/components/tooltip.tsx         | 4 ++--
 src/layout.tsx                     | 2 +-
 src/views/repo.tsx                 | 8 +++-----
 6 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/hover-card/base.tsx b/src/components/hover-card/base.tsx
index 64809c9..5b2d3fe 100644
--- a/src/components/hover-card/base.tsx
+++ b/src/components/hover-card/base.tsx
@@ -1,7 +1,7 @@
 import { A } from "@solidjs/router";
 import { createSignal, JSX, onCleanup, Show } from "solid-js";
 import { Portal } from "solid-js/web";
-import { isTouchDevice } from "../../layout";
+import { canHover } from "../../layout";
 
 interface HoverCardProps {
   /** Link href - if provided, renders an A tag */
@@ -112,7 +112,7 @@ const HoverCard = (props: HoverCardProps) => {
           {props.label}
         </A>
       )}
-      <Show when={show() && !isTouchDevice}>
+      <Show when={show() && canHover}>
         <Portal>
           <div
             ref={setupResizeObserver}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 0d646bd..4d8b1b6 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,7 +1,7 @@
 import * as TID from "@atcute/tid";
 import { A, Params } from "@solidjs/router";
 import { createEffect, createMemo, createSignal, Show } from "solid-js";
-import { isTouchDevice } from "../layout";
+import { canHover } from "../layout";
 import { didDocCache } from "../utils/api";
 import { addToClipboard } from "../utils/copy";
 import { localDateFromTimestamp } from "../utils/date";
@@ -11,7 +11,7 @@ export const [pds, setPDS] = createSignal<string>();
 
 const CopyButton = (props: { content: string; label: string }) => {
   return (
-    <Show when={!isTouchDevice}>
+    <Show when={canHover}>
       <Tooltip text={props.label}>
         <button
           type="button"
@@ -108,13 +108,13 @@ export const NavBar = (props: { params: Params }) => {
           <div
             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"
             onMouseEnter={() => {
-              if (!isTouchDevice) {
+              if (canHover) {
                 setRepoHovered(true);
                 setHasHoveredRepo(true);
               }
             }}
             onMouseLeave={() => {
-              if (!isTouchDevice) {
+              if (canHover) {
                 setRepoHovered(false);
               }
             }}
diff --git a/src/components/search.tsx b/src/components/search.tsx
index 9cdc428..3a059b7 100644
--- a/src/components/search.tsx
+++ b/src/components/search.tsx
@@ -10,7 +10,7 @@ import {
   onMount,
   Show,
 } from "solid-js";
-import { isTouchDevice } from "../layout";
+import { canHover } from "../layout";
 import { resolveLexiconAuthority, resolveLexiconAuthorityDirect } from "../utils/api";
 import { appHandleLink, appList, AppUrl } from "../utils/app-urls";
 import { createDebouncedValue } from "../utils/hooks/debounced";
@@ -99,7 +99,7 @@ export const SearchButton = () => {
     <Button onClick={() => setShowSearch(!showSearch())}>
       <span class="iconify lucide--search"></span>
       <span>Search</span>
-      <Show when={!isTouchDevice}>
+      <Show when={canHover}>
         <kbd class="font-sans text-neutral-400 dark:text-neutral-500">
           {/Mac/i.test(navigator.platform) ? "⌘" : "⌃"}K
         </kbd>
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
index b5c2872..9cd472d 100644
--- a/src/components/tooltip.tsx
+++ b/src/components/tooltip.tsx
@@ -1,10 +1,10 @@
 import { JSX, Show } from "solid-js";
-import { isTouchDevice } from "../layout";
+import { canHover } from "../layout";
 
 const Tooltip = (props: { text: string; children: JSX.Element }) => (
   <span class="group/tooltip relative inline-flex items-center">
     {props.children}
-    <Show when={!isTouchDevice}>
+    <Show when={canHover}>
       <span
         style={`transform: translate(-50%, 28px)`}
         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`}
diff --git a/src/layout.tsx b/src/layout.tsx
index 2c3f570..40fb269 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -14,7 +14,7 @@ import { themeEvent } from "./components/theme.jsx";
 import { resolveHandle } from "./utils/api.js";
 import { plcDirectory } from "./views/settings.jsx";
 
-export const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+export const canHover = window.matchMedia("(hover: hover) and (pointer: fine)").matches;
 
 const headers: Record<string, string> = {
   "did:plc:ia76kvnndjutgedggx2ibrem": "bunny.jpg",
diff --git a/src/views/repo.tsx b/src/views/repo.tsx
index 8762de9..1bf13b1 100644
--- a/src/views/repo.tsx
+++ b/src/views/repo.tsx
@@ -29,7 +29,7 @@ import {
   removeNotification,
   updateNotification,
 } from "../components/notification.jsx";
-import { isTouchDevice } from "../layout.jsx";
+import { canHover } from "../layout.jsx";
 import {
   didDocCache,
   type HandleResolveResult,
@@ -419,9 +419,7 @@ export const RepoView = () => {
               </ErrorBoundary>
             </Show>
             <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-              <div
-                class={`flex flex-col ${isTouchDevice ? "pb-12" : "pb-16"} text-sm wrap-anywhere`}
-              >
+              <div class={`flex flex-col ${canHover ? "pb-16" : "pb-12"} text-sm wrap-anywhere`}>
                 <Show
                   when={Object.keys(nsids() ?? {}).length != 0}
                   fallback={<span class="mt-3 text-center text-base">No collections found.</span>}
@@ -745,7 +743,7 @@ export const RepoView = () => {
       </Show>
 
       <Show when={nsids() && (!location.hash || location.hash.startsWith("#collections"))}>
-        <div class={`fixed ${isTouchDevice ? "bottom-8" : "bottom-12"} z-10 w-full max-w-lg`}>
+        <div class={`fixed ${canHover ? "bottom-12" : "bottom-8"} z-10 w-full max-w-lg`}>
           <div
             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"
             onClick={(e) => {
-- 
2.51.2