fix(link): Keybind, scroll behaviour, restrict drag to vertical (#176)

* chore: expose scrollActiveElementIntoView

* feat(utils): editable element

* fix: memoize exceptionRefs, use animation frame and check editable element

* fix: improve btn on mobile

* chore(drps): bump framer motion version

* fix(link): big fix

* chore: remove comment code

* feat: touch device

web/components/routes/link/bottom-bar.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import React, { useCallback, useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import type { icons } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import { cn, getShortcutKeys } from "@/lib/utils"
+import { cn, getShortcutKeys, isEditableElement } from "@/lib/utils"
 import { LaIcon } from "@/components/custom/la-icon"
 import { useAtom } from "jotai"
 import { parseAsBoolean, useQueryState } from "nuqs"
@@ -70,13 +70,13 @@ export const LinkBottomBar: React.FC = () => {
 
 	const handleCreateMode = useCallback(() => {
 		setEditId(null)
-		setTimeout(() => {
+		requestAnimationFrame(() => {
 			setCreateMode(prev => !prev)
-		}, 100)
+		})
 	}, [setEditId, setCreateMode])
 
-	useEffect(() => {
-		setGlobalLinkFormExceptionRefsAtom([
+	const exceptionRefs = useMemo(
+		() => [
 			overlayRef,
 			contentRef,
 			deleteBtnRef,
@@ -85,8 +85,13 @@ export const LinkBottomBar: React.FC = () => {
 			confirmBtnRef,
 			plusBtnRef,
 			plusMoreBtnRef
-		])
-	}, [setGlobalLinkFormExceptionRefsAtom])
+		],
+		[]
+	)
+
+	useEffect(() => {
+		setGlobalLinkFormExceptionRefsAtom(exceptionRefs)
+	}, [setGlobalLinkFormExceptionRefsAtom, exceptionRefs])
 
 	const handleDelete = async (e: React.MouseEvent) => {
 		if (!personalLink || !me) return
@@ -122,8 +127,9 @@ export const LinkBottomBar: React.FC = () => {
 	const handleKeydown = useCallback(
 		(event: KeyboardEvent) => {
 			const isCreateShortcut = event.key === "c"
+			const target = event.target as HTMLElement
 
-			if (isCreateShortcut) {
+			if (isCreateShortcut && !isEditableElement(target)) {
 				event.preventDefault()
 				handleCreateMode()
 			}
@@ -136,29 +142,26 @@ export const LinkBottomBar: React.FC = () => {
 	const shortcutText = getShortcutKeys(["c"])
 
 	return (
-		<motion.div
-			className="bg-background absolute bottom-0 left-0 right-0 h-11 border-t"
-			animate={{ y: 0 }}
-			initial={{ y: "100%" }}
-		>
+		<div className="bg-background min-h-11 border-t">
 			<AnimatePresence mode="wait">
 				{editId && (
 					<motion.div
 						key="expanded"
-						className="flex h-full items-center justify-center gap-1 px-2"
+						className="flex h-full items-center justify-center gap-1 border-t px-2"
 						initial={{ opacity: 0, y: 20 }}
 						animate={{ opacity: 1, y: 0 }}
 						exit={{ opacity: 0, y: 20 }}
 						transition={{ duration: 0.1 }}
 					>
-						<ToolbarButton icon={"ArrowLeft"} onClick={() => setEditId(null)} />
+						<ToolbarButton icon={"ArrowLeft"} onClick={() => setEditId(null)} aria-label="Go back" />
 						<ToolbarButton
 							icon={"Trash"}
 							onClick={handleDelete}
 							className="text-destructive hover:text-destructive"
 							ref={deleteBtnRef}
+							aria-label="Delete link"
 						/>
-						<ToolbarButton icon={"Ellipsis"} ref={editMoreBtnRef} />
+						<ToolbarButton icon={"Ellipsis"} ref={editMoreBtnRef} aria-label="More options" />
 					</motion.div>
 				)}
 
@@ -171,19 +174,20 @@ export const LinkBottomBar: React.FC = () => {
 						exit={{ opacity: 0, y: -20 }}
 						transition={{ duration: 0.1 }}
 					>
-						{createMode && <ToolbarButton icon={"ArrowLeft"} onClick={handleCreateMode} />}
+						{createMode && <ToolbarButton icon={"ArrowLeft"} onClick={handleCreateMode} aria-label="Go back" />}
 						{!createMode && (
 							<ToolbarButton
 								icon={"Plus"}
 								onClick={handleCreateMode}
 								tooltip={`New Link (${shortcutText.map(s => s.symbol).join("")})`}
 								ref={plusBtnRef}
+								aria-label="New link"
 							/>
 						)}
 					</motion.div>
 				)}
 			</AnimatePresence>
-		</motion.div>
+		</div>
 	)
 }