From 3b68836378c87d6eb4c65ce192e334296b567f98 Mon Sep 17 00:00:00 2001 From: Kisuyo <93681660+Kisuyo@users.noreply.github.com> Date: Wed, 11 Sep 2024 14:47:12 +0300 Subject: [PATCH 1/2] sliding model (#162) --- web/app/(pages)/layout.tsx | 4 +- web/components/routes/link/bottom-bar.tsx | 14 +++- web/components/ui/sliding-menu.tsx | 82 +++++++++++++++++++++++ web/store/sidebar.ts | 1 + 4 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 web/components/ui/sliding-menu.tsx diff --git a/web/app/(pages)/layout.tsx b/web/app/(pages)/layout.tsx index 4b11bfbc..f39bb728 100644 --- a/web/app/(pages)/layout.tsx +++ b/web/app/(pages)/layout.tsx @@ -3,6 +3,7 @@ import { Sidebar } from "@/components/custom/sidebar/sidebar" import { CommandPalette } from "@/components/custom/command-palette/command-palette" import { useAccountOrGuest } from "@/lib/providers/jazz-provider" +import SlidingMenu from "@/components/ui/sliding-menu" export default function PageLayout({ children }: { children: React.ReactNode }) { const { me } = useAccountOrGuest() @@ -13,7 +14,8 @@ export default function PageLayout({ children }: { children: React.ReactNode }) {me._type !== "Anonymous" && } -
+
+
{children}
diff --git a/web/components/routes/link/bottom-bar.tsx b/web/components/routes/link/bottom-bar.tsx index c5144889..d41e5dd1 100644 --- a/web/components/routes/link/bottom-bar.tsx +++ b/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 { 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 = () => { )} +
+ { + setShowHotkeyPanel(true) + }} + /> +
) } diff --git a/web/components/ui/sliding-menu.tsx b/web/components/ui/sliding-menu.tsx new file mode 100644 index 00000000..5378aeff --- /dev/null +++ b/web/components/ui/sliding-menu.tsx @@ -0,0 +1,82 @@ +import { XIcon } from "lucide-react" +import { useState, useEffect, useRef } from "react" +import { motion, AnimatePresence } from "framer-motion" +import { showHotkeyPanelAtom } from "@/store/sidebar" +import { useAtom } from "jotai/react" + +export default function SlidingMenu() { + const [isOpen, setIsOpen] = useAtom(showHotkeyPanelAtom) + const panelRef = useRef(null) + const [shortcuts] = useState<{ name: string; shortcut: string[] }[]>([ + // TODO: change to better keybind + // TODO: windows users don't understand these symbols, figure out better way to show keybinds + { name: "New Todo", shortcut: ["⌘", "⌃", "n"] }, + { name: "CMD Palette", shortcut: ["⌘", "k"] } + // TODO: add + // { name: "Global Search", shortcut: ["."] }, + // { name: "(/pages)", shortcut: [".", "."] } + ]) + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (panelRef.current && !panelRef.current.contains(event.target as Node)) { + setIsOpen(false) + } + } + + if (isOpen) { + document.addEventListener("mousedown", handleClickOutside) + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside) + } + }, [isOpen, setIsOpen]) + + return ( + + {isOpen && ( + <> + setIsOpen(false)} + /> + +
+
+
Shortcuts
+ +
+
+ {shortcuts.map((shortcut, index) => ( +
+
{shortcut.name}
+
+ {shortcut.shortcut.join(" ")} +
+
+ ))} +
+
+ + + )} + + ) +} diff --git a/web/store/sidebar.ts b/web/store/sidebar.ts index a3638924..79854872 100644 --- a/web/store/sidebar.ts +++ b/web/store/sidebar.ts @@ -5,3 +5,4 @@ export const toggleCollapseAtom = atom( get => get(isCollapseAtom), (get, set) => set(isCollapseAtom, !get(isCollapseAtom)) ) +export const showHotkeyPanelAtom = atom(false) From d8521a36eb8b3e712dbc7db6a7f90e9c1b06597a Mon Sep 17 00:00:00 2001 From: Kisuyo Date: Wed, 11 Sep 2024 14:13:41 +0200 Subject: [PATCH 2/2] fix: hotkey panel colors --- web/components/ui/sliding-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/ui/sliding-menu.tsx b/web/components/ui/sliding-menu.tsx index 5378aeff..1381d753 100644 --- a/web/components/ui/sliding-menu.tsx +++ b/web/components/ui/sliding-menu.tsx @@ -67,7 +67,7 @@ export default function SlidingMenu() { {shortcuts.map((shortcut, index) => (
{shortcut.name}
-
+
{shortcut.shortcut.join(" ")}