diff --git a/web/app/(pages)/layout.tsx b/web/app/(pages)/layout.tsx index 71592f77..f12905a6 100644 --- a/web/app/(pages)/layout.tsx +++ b/web/app/(pages)/layout.tsx @@ -3,6 +3,8 @@ 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" +import { LearnAnythingOnboarding } from "@/components/custom/learn-anything-onboarding" export default function PageLayout({ children }: { children: React.ReactNode }) { const { me } = useAccountOrGuest() @@ -10,10 +12,12 @@ export default function PageLayout({ children }: { children: React.ReactNode }) return (
+ {me._type !== "Anonymous" && } -
+
+
{children}
diff --git a/web/app/layout.tsx b/web/app/layout.tsx index 785a5550..c9fd5e6c 100644 --- a/web/app/layout.tsx +++ b/web/app/layout.tsx @@ -10,7 +10,6 @@ import { DeepLinkProvider } from "@/lib/providers/deep-link-provider" import { GeistMono, GeistSans } from "./fonts" import { JazzAndAuth } from "@/lib/providers/jazz-provider" import { TooltipProvider } from "@/components/ui/tooltip" -import { LearnAnythingOnboarding } from "@/components/custom/learn-anything-onboarding" export const metadata: Metadata = { title: "Learn Anything", @@ -43,7 +42,7 @@ export default function RootLayout({ {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..1381d753 --- /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)