starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

chore(layout): remove overflow

Browse Source
This commit is contained in:
Aslam H
2024-09-11 19:30:01 +07:00
parent fb774f3814 d8521a36eb
commit 8d6ec8748c
5 changed files with 102 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/(pages)/layout.tsx
View File

@@ -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 (
<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
<Sidebar />
<LearnAnythingOnboarding />
{me._type !== "Anonymous" && <CommandPalette />}
<div className="flex min-w-0 flex-1 flex-col">
<div className="relative flex min-w-0 flex-1 flex-col">
<SlidingMenu />
<main className="relative flex flex-auto flex-col place-items-stretch lg:my-2 lg:mr-2 lg:rounded-md lg:border">
{children}
</main>

3
web/app/layout.tsx
View File

@@ -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({
<body className={cn("h-full w-full font-sans antialiased", GeistSans.variable, GeistMono.variable)}>
<Providers>
{children}
<LearnAnythingOnboarding />
<Toaster expand={false} />
</Providers>
</body>

14
web/components/routes/link/bottom-bar.tsx
View File

@@ -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>
)
}

82
web/components/ui/sliding-menu.tsx Normal file
View File

@@ -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<HTMLDivElement>(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 (
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-[99] bg-black bg-opacity-50"
onClick={() => setIsOpen(false)}
/>
<motion.div
ref={panelRef}
initial={{ x: "100%" }}
animate={{ x: 0 }}
exit={{ x: "100%", transition: { duration: 0.1, ease: "easeIn" } }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="fixed right-0 top-0 z-[100] h-full p-4"
>
<div className="flex h-full w-[300px] flex-col gap-4 rounded-lg border border-slate-400/20 bg-white p-3 pl-4 drop-shadow-md dark:bg-neutral-950">
<div className="flex flex-row items-center justify-between gap-4">
<div className="">Shortcuts</div>
<button
onClick={() => setIsOpen(false)}
className="flex h-[28px] w-[28px] items-center justify-center rounded-md border border-slate-400/20 text-black/60 dark:text-white/60"
>
<XIcon className="h-[16px] w-[16px]" />
</button>
</div>
<div className="flex flex-col gap-1 text-[12px]">
{shortcuts.map((shortcut, index) => (
<div key={index} className="flex flex-row items-center justify-between gap-4">
<div className="opacity-40">{shortcut.name}</div>
<div className="flex min-w-[20px] items-center justify-center rounded-sm bg-gray-100 p-1 px-2 dark:bg-neutral-900">
{shortcut.shortcut.join(" ")}
</div>
</div>
))}
</div>
</div>
</motion.div>
</>
)}
</AnimatePresence>
)
}

1
web/store/sidebar.ts
View File

@@ -5,3 +5,4 @@ export const toggleCollapseAtom = atom(
get => get(isCollapseAtom),
(get, set) => set(isCollapseAtom, !get(isCollapseAtom))
)
export const showHotkeyPanelAtom = atom(false)