fix remove place button

vladkens · Feb 8, 2024 · f0c263f · f0c263f
1 parent a0f207c
commit f0c263f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 18 deletions.
diff --git a/src/components/Board.tsx b/src/components/Board.tsx
@@ -3,14 +3,15 @@ import { useAtomValue, useSetAtom } from "jotai"
 import { FC, useEffect, useRef, useState } from "react"
 import { ActiveTab, TlSelected, useMutateTab } from "../store"
 import { Place } from "../utils/geonames"
+import { makePlaceName } from "../utils/misc"
 import { BoardHead } from "./BoardHead"
 import { BoardLine } from "./BoardLine"
 import { Timeline } from "./Timeline"
 
 export const Board: FC = () => {
-  const { places: rawPlaces } = useAtomValue(ActiveTab)
+  const { places: rawPlaces, home } = useAtomValue(ActiveTab)
   const [ordered, setOrdered] = useState<Place[]>([])
-  const { reorderPlaces } = useMutateTab()
+  const { reorderPlaces, delPlace } = useMutateTab()
   const setTlSelected = useSetAtom(TlSelected)
 
   const rtRef = useRef<HTMLDivElement>(null)
@@ -144,11 +145,32 @@ export const Board: FC = () => {
   }, [rawPlaces])
 
   return (
-    <div ref={rtRef} className="flex flex-col">
+    <div ref={rtRef} className="relative flex flex-col">
       <div className="h-[48px] w-full">
         <BoardHead />
       </div>
 
+      <div className="absolute ml-[-32px] flex h-full w-[32px] flex-col items-center justify-end py-2">
+        {ordered.map((x) => (
+          <div key={x.id} className="flex h-[44px] w-full items-center justify-center">
+            <button
+              onClick={() => delPlace(x.id)}
+              disabled={x.id === home.id}
+              title={`Remove ${makePlaceName(x)}`}
+              className={clsx(
+                "h-[24px] w-[24px] rounded-full border border-transparent font-mono leading-none",
+                "text-[20px]",
+                x.id === home.id
+                  ? "hidden"
+                  : "text-body-content/20 hover:border-red-500/30 hover:bg-red-500/20 hover:text-red-500",
+              )}
+            >
+              &times;
+            </button>
+          </div>
+        ))}
+      </div>
+
       <div
         ref={tlRef}
         onWheel={(e) => (e.currentTarget.scrollLeft += e.deltaY > 0 ? 75 : -75)}

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -206,19 +206,7 @@ export const Timeline: FC<{ place: Place }> = ({ place }) => {
       data-drag-root
       className="group relative flex grow items-center justify-between gap-2.5 px-4 even:bg-body/50"
     >
-      <button
-        onClick={() => delPlace(place.id)}
-        disabled={isHome}
-        className={clsx(
-          "absolute ml-[-56px] h-[32px] w-[32px]",
-          "rounded-full font-mono leading-none",
-          isHome ? "invisible text-[20px]" : "text-[22px] text-body-content/20 hover:text-red-500",
-        )}
-      >
-        {isHome ? "🏠" : <>&times;</>}
-      </button>
-
-      <div className="flex w-[212px] shrink-0 items-center gap-2 text-sm leading-none">
+      <div className="flex min-w-[212px] shrink-0 grow items-center gap-2 text-sm leading-none">
         <div className="flex grow flex-col gap-1" data-drag-node>
           <div className="max-w-[134px] truncate text-ellipsis text-nowrap text-[13px]">
             {makePlaceName(place)}

diff --git a/src/index.css b/src/index.css
@@ -46,15 +46,15 @@
   }
 
   body {
-    @apply !bg-body text-body-content;
+    @apply overflow-hidden !bg-body text-body-content;
   }
 
   [data-drag-node] {
     @apply cursor-move;
   }
 
   #root {
-    @apply mx-auto max-w-[1040px] overflow-hidden px-2.5 pb-8;
+    @apply mx-auto max-w-[1040px] px-2.5 pb-8;
   }
 }