From a6fe168a88cf4babd447ea597494bdcba21f837c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andri=20=C3=93skarsson?= <account+github@andri.dk>
Date: Sat, 16 Nov 2024 20:31:23 +0100
Subject: [PATCH] dygtig

---
 src/app-sidebar.tsx            |  7 ++-----
 src/example/PlanExample.tsx    |  2 +-
 src/example/UnplannedTasks.tsx |  2 +-
 src/example/task-card.tsx      |  6 +++---
 src/example/use-canhover.ts    | 21 +++++++++++++++++++++
 src/tiny-dnd/dragable.tsx      |  4 +++-
 6 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 src/example/use-canhover.ts

diff --git a/src/app-sidebar.tsx b/src/app-sidebar.tsx
index e2e1ad3..b9e5318 100644
--- a/src/app-sidebar.tsx
+++ b/src/app-sidebar.tsx
@@ -1,4 +1,4 @@
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader } from "./components/ui/sidebar";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from "./components/ui/sidebar";
 import { UnplannedTasks } from "./example/UnplannedTasks";
 
 export function AppSidebar() {
@@ -6,10 +6,7 @@ export function AppSidebar() {
       <Sidebar>
          <SidebarHeader />
          <SidebarContent>
-            <SidebarGroup>
-               <UnplannedTasks />
-            </SidebarGroup>
-            <SidebarGroup />
+            <UnplannedTasks />
          </SidebarContent>
          <SidebarFooter />
       </Sidebar>
diff --git a/src/example/PlanExample.tsx b/src/example/PlanExample.tsx
index df9eef0..210f9c9 100644
--- a/src/example/PlanExample.tsx
+++ b/src/example/PlanExample.tsx
@@ -50,7 +50,7 @@ export function PlanExample() {
          <div className="grid gap-2 items-center grid-cols-8plus grid-rows-2 overflow-x-auto">
             {employees.map((employee) => (
                <Fragment key={employee.id}>
-                  <div>{employee.name}</div>
+                  <div className="select-none">{employee.name}</div>
                   {days.map((day) => {
                      return (
                         <Dropable
diff --git a/src/example/UnplannedTasks.tsx b/src/example/UnplannedTasks.tsx
index 0151682..c4565d3 100644
--- a/src/example/UnplannedTasks.tsx
+++ b/src/example/UnplannedTasks.tsx
@@ -5,7 +5,7 @@ export function UnplannedTasks() {
    const { tasks } = useTasksContext();
 
    return (
-      <div className="relative p-6 mt-8 flex flex-col gap-4">
+      <div className="p-6 mt-8 flex flex-col gap-4">
          <h1>Unplanned</h1>
          {tasks
             .filter((task) => task.employeeId.length === 0)
diff --git a/src/example/task-card.tsx b/src/example/task-card.tsx
index 7c513cf..53eb446 100644
--- a/src/example/task-card.tsx
+++ b/src/example/task-card.tsx
@@ -15,9 +15,9 @@ export const employees: Array<{
    id: string;
    name: string;
 }> = [
-   { id: "1", name: "Mikkel" },
-   { id: "2", name: "Lars" },
-   { id: "3", name: "Andri" },
+   { id: "1", name: "Zero Cool" },
+   { id: "2", name: "Acid Burn" },
+   { id: "3", name: "Cerialkiller" },
 ];
 
 export const days = ["2024-01-01", "2024-01-02", "2024-01-03", "2024-01-04", "2024-01-05", "2024-01-06", "2024-01-07"];
diff --git a/src/example/use-canhover.ts b/src/example/use-canhover.ts
new file mode 100644
index 0000000..ac09427
--- /dev/null
+++ b/src/example/use-canhover.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export const useMediaQuery = (query: string) => {
+   const [matches, setMatches] = useState(false);
+
+   useEffect(() => {
+      const media = window.matchMedia(query);
+      if (media.matches !== matches) {
+         setMatches(media.matches);
+      }
+      const listener = () => setMatches(media.matches);
+      window.addEventListener("resize", listener);
+      return () => window.removeEventListener("resize", listener);
+   }, [matches, query]);
+
+   return matches;
+};
+
+export function useCanHover(): boolean | undefined {
+   return useMediaQuery("(hover: hover)");
+}
diff --git a/src/tiny-dnd/dragable.tsx b/src/tiny-dnd/dragable.tsx
index 46b8a5c..bd06e00 100644
--- a/src/tiny-dnd/dragable.tsx
+++ b/src/tiny-dnd/dragable.tsx
@@ -1,3 +1,4 @@
+import { useCanHover } from "@/example/use-canhover";
 import { Slot } from "@radix-ui/react-slot";
 import { ReactNode, useId, useRef } from "react";
 import { createRoot } from "react-dom/client";
@@ -37,6 +38,7 @@ export function Dragable<T extends object>({
    const id = useId();
    const Comp = asChild ? Slot : "div";
    const ref = useRef<HTMLDivElement | null>(null); // Used by the slot
+   const canHover = useCanHover();
 
    function isSelf(e: React.DragEvent<HTMLDivElement>) {
       if (!ref.current) return false;
@@ -92,7 +94,7 @@ export function Dragable<T extends object>({
 
       e.dataTransfer.effectAllowed = "move";
 
-      if (renderDragLayer) {
+      if (renderDragLayer && canHover) {
          /** This is the craziest hack I've ever made! */
          const el = document.createElement("div");
          const root = createRoot(el!);
-- 
2.51.2