sliding model (#162)

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from "react"
 import { motion, AnimatePresence } from "framer-motion"
-import { icons } from "lucide-react"
+import { icons, ZapIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { getSpecialShortcut, formatShortcut, isMacOS } from "@/lib/utils"
@@ -13,6 +13,7 @@ import { PersonalLink } from "@/lib/schema"
 import { ID } from "jazz-tools"
 import { globalLinkFormExceptionRefsAtom } from "./partials/form/link-form"
 import { useLinkActions } from "./hooks/use-link-actions"
+import { showHotkeyPanelAtom } from "@/store/sidebar"
 
 interface ToolbarButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
 	icon: keyof typeof icons
@@ -72,6 +73,8 @@ export const LinkBottomBar: React.FC = () => {
 		}, 100)
 	}, [setEditId, setCreateMode])
 
+	const [, setShowHotkeyPanel] = useAtom(showHotkeyPanelAtom)
+
 	useEffect(() => {
 		setGlobalLinkFormExceptionRefsAtom([
 			overlayRef,
@@ -184,6 +187,15 @@ export const LinkBottomBar: React.FC = () => {
 					</motion.div>
 				)}
 			</AnimatePresence>
+			<div className="absolute right-0 top-0 flex h-full items-center justify-center p-2 pr-1">
+				<ToolbarButton
+					icon={"Zap"}
+					tooltip={`Hotkeys`}
+					onClick={() => {
+						setShowHotkeyPanel(true)
+					}}
+				/>
+			</div>
 		</motion.div>
 	)
 }