diff --git a/package.json b/package.json index 3d94d0f8..42acf914 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,10 @@ "@clerk/themes": "^2.1.30", "@tauri-apps/cli": "^2.0.0-rc.16", "@tauri-apps/plugin-fs": "^2.0.0-rc.2", - "jazz-nodejs": "0.7.35-guest-auth.5", - "react-icons": "^5.3.0" + "jazz-nodejs": "0.8.0" }, "devDependencies": { - "bun-types": "^1.1.28" + "bun-types": "^1.1.29" }, "prettier": { "plugins": [ diff --git a/web/app/(pages)/layout.tsx b/web/app/(pages)/layout.tsx index 3b897096..6f3decf8 100644 --- a/web/app/(pages)/layout.tsx +++ b/web/app/(pages)/layout.tsx @@ -3,7 +3,7 @@ import { Sidebar } from "@/components/custom/sidebar/sidebar" import { CommandPalette } from "@/components/custom/command-palette/command-palette" import { LearnAnythingOnboarding } from "@/components/custom/learn-anything-onboarding" import { Shortcut } from "@/components/custom/Shortcut/shortcut" -import { GlobalKeydownHandler } from "@/components/custom/global-keydown-handler" +import { GlobalKeyboardHandler } from "@/components/custom/global-keyboard-handler" export const viewport: Viewport = { width: "device-width, shrink-to-fit=no", @@ -16,8 +16,7 @@ export default function PageLayout({ children }: { children: React.ReactNode })
- - + diff --git a/web/app/custom.css b/web/app/custom.css new file mode 100644 index 00000000..3d0b3660 --- /dev/null +++ b/web/app/custom.css @@ -0,0 +1,11 @@ +:root { + --link-background-muted: hsl(0, 0%, 97.3%); + --link-border-after: hsl(0, 0%, 91%); + --link-shadow: hsl(240, 5.6%, 82.5%); +} + +.dark { + --link-background-muted: hsl(220, 6.7%, 8.8%); + --link-border-after: hsl(230, 10%, 11.8%); + --link-shadow: hsl(234.9, 27.1%, 25.3%); +} diff --git a/web/app/globals.css b/web/app/globals.css index 8bdc5be5..0b181a0d 100644 --- a/web/app/globals.css +++ b/web/app/globals.css @@ -73,3 +73,4 @@ } @import "./command-palette.css"; +@import "./custom.css"; diff --git a/web/components/custom/Shortcut/shortcut.tsx b/web/components/custom/Shortcut/shortcut.tsx index a8918077..070d446d 100644 --- a/web/components/custom/Shortcut/shortcut.tsx +++ b/web/components/custom/Shortcut/shortcut.tsx @@ -38,6 +38,14 @@ const SHORTCUTS: ShortcutSection[] = [ { label: "Go to page", keys: ["G"], then: ["P"] }, { label: "Go to topic", keys: ["G"], then: ["T"] } ] + }, + { + title: "Links", + shortcuts: [{ label: "Create new link", keys: ["c"] }] + }, + { + title: "Pages", + shortcuts: [{ label: "Create new page", keys: ["p"] }] } ] diff --git a/web/components/custom/command-palette/command-palette.tsx b/web/components/custom/command-palette/command-palette.tsx index 11feb4dd..db76b28b 100644 --- a/web/components/custom/command-palette/command-palette.tsx +++ b/web/components/custom/command-palette/command-palette.tsx @@ -11,7 +11,6 @@ import { searchSafeRegExp } from "@/lib/utils" import { GraphNode } from "@/components/routes/public/PublicHomeRoute" import { useCommandActions } from "./hooks/use-command-actions" import { atom, useAtom } from "jotai" -import { useKeydownListener } from "@/hooks/use-keydown-listener" const graph_data_promise = import("@/components/routes/public/graph-data.json").then(a => a.default) @@ -40,18 +39,6 @@ export function RealCommandPalette() { const raw_graph_data = React.use(graph_data_promise) as GraphNode[] - const handleKeydown = React.useCallback( - (e: KeyboardEvent) => { - if (e.key === "k" && (e.metaKey || e.ctrlKey)) { - e.preventDefault() - setOpen(prev => !prev) - } - }, - [setOpen] - ) - - useKeydownListener(handleKeydown) - const bounce = React.useCallback(() => { if (dialogRef.current) { dialogRef.current.style.transform = "scale(0.99) translateX(-50%)" diff --git a/web/components/custom/content-header.tsx b/web/components/custom/content-header.tsx index 500e0254..550f3459 100644 --- a/web/components/custom/content-header.tsx +++ b/web/components/custom/content-header.tsx @@ -1,12 +1,12 @@ "use client" -import React from "react" +import * as React from "react" import { Button } from "../ui/button" -import { PanelLeftIcon } from "lucide-react" import { useAtom } from "jotai" import { isCollapseAtom, toggleCollapseAtom } from "@/store/sidebar" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { cn } from "@/lib/utils" +import { LaIcon } from "./la-icon" type ContentHeaderProps = Omit, "title"> @@ -15,7 +15,7 @@ export const ContentHeader = React.forwardRef { className="text-primary/60" onClick={handleClick} > - +
) diff --git a/web/components/custom/global-keyboard-handler.tsx b/web/components/custom/global-keyboard-handler.tsx new file mode 100644 index 00000000..4c7aa6ba --- /dev/null +++ b/web/components/custom/global-keyboard-handler.tsx @@ -0,0 +1,130 @@ +"use client" + +import { useState, useEffect, useCallback } from "react" +import { useKeyDown, KeyFilter, Options } from "@/hooks/use-key-down" +import { useAccountOrGuest } from "@/lib/providers/jazz-provider" +import { useRouter } from "next/navigation" +import queryString from "query-string" +import { usePageActions } from "../routes/page/hooks/use-page-actions" +import { useAuth } from "@clerk/nextjs" +import { isModKey } from "@/lib/utils" +import { useAtom } from "jotai" +import { commandPaletteOpenAtom } from "./command-palette/command-palette" + +type RegisterKeyDownProps = { + trigger: KeyFilter + handler: (event: KeyboardEvent) => void + options?: Options +} + +function RegisterKeyDown({ trigger, handler, options }: RegisterKeyDownProps) { + useKeyDown(trigger, handler, options) + return null +} + +type Sequence = { + [key: string]: string +} + +const SEQUENCES: Sequence = { + GL: "/links", + GP: "/pages", + GT: "/topics" +} + +const MAX_SEQUENCE_TIME = 1000 + +export function GlobalKeyboardHandler() { + const [openCommandPalette, setOpenCommandPalette] = useAtom(commandPaletteOpenAtom) + const [sequence, setSequence] = useState([]) + const { signOut } = useAuth() + const router = useRouter() + const { me } = useAccountOrGuest() + const { newPage } = usePageActions() + + const resetSequence = useCallback(() => { + setSequence([]) + }, []) + + const checkSequence = useCallback(() => { + const sequenceStr = sequence.join("") + const route = SEQUENCES[sequenceStr] + + if (route) { + console.log(`Navigating to ${route}...`) + router.push(route) + resetSequence() + } + }, [sequence, router, resetSequence]) + + const goToNewLink = useCallback( + (event: KeyboardEvent) => { + if (event.metaKey || event.altKey) { + return + } + + router.push(`/links?${queryString.stringify({ create: true })}`) + }, + [router] + ) + + const goToNewPage = useCallback( + (event: KeyboardEvent) => { + if (event.metaKey || event.altKey) { + return + } + + if (!me || me._type === "Anonymous") { + return + } + + const page = newPage(me) + + router.push(`/pages/${page.id}`) + }, + [me, newPage, router] + ) + + useKeyDown( + e => e.altKey && e.shiftKey && e.code === "KeyQ", + () => { + signOut() + } + ) + + useKeyDown( + () => true, + e => { + const key = e.key.toUpperCase() + setSequence(prev => [...prev, key]) + } + ) + + useKeyDown( + e => isModKey(e) && e.code === "KeyK", + e => { + e.preventDefault() + setOpenCommandPalette(prev => !prev) + } + ) + + useEffect(() => { + checkSequence() + + const timeoutId = setTimeout(() => { + resetSequence() + }, MAX_SEQUENCE_TIME) + + return () => clearTimeout(timeoutId) + }, [sequence, checkSequence, resetSequence]) + + return ( + me && + me._type !== "Anonymous" && ( + <> + + + + ) + ) +} diff --git a/web/components/custom/global-keydown-handler.tsx b/web/components/custom/global-keydown-handler.tsx deleted file mode 100644 index 527162cd..00000000 --- a/web/components/custom/global-keydown-handler.tsx +++ /dev/null @@ -1,63 +0,0 @@ -"use client" - -import { useState, useEffect, useCallback } from "react" -import { useKeydownListener } from "@/hooks/use-keydown-listener" -import { useAuth } from "@clerk/nextjs" -import { useRouter } from "next/navigation" - -type Sequence = { - [key: string]: string -} - -const SEQUENCES: Sequence = { - GL: "/links", - GP: "/pages", - GT: "/topics" -} - -const MAX_SEQUENCE_TIME = 1000 - -export function GlobalKeydownHandler() { - const [sequence, setSequence] = useState([]) - const { signOut } = useAuth() - const router = useRouter() - - const resetSequence = useCallback(() => { - setSequence([]) - }, []) - - const checkSequence = useCallback(() => { - const sequenceStr = sequence.join("") - const route = SEQUENCES[sequenceStr] - - if (route) { - console.log(`Navigating to ${route}...`) - router.push(route) - resetSequence() - } - }, [sequence, router, resetSequence]) - - useKeydownListener((e: KeyboardEvent) => { - // Check for logout shortcut - if (e.altKey && e.shiftKey && e.code === "KeyQ") { - signOut() - return - } - - // Key sequence handling - const key = e.key.toUpperCase() - setSequence(prev => [...prev, key]) - }) - - useEffect(() => { - checkSequence() - - const timeoutId = setTimeout(() => { - resetSequence() - }, MAX_SEQUENCE_TIME) - - return () => clearTimeout(timeoutId) - }, [sequence, checkSequence, resetSequence]) - - return null -} diff --git a/web/components/custom/learning-state-selector.tsx b/web/components/custom/learning-state-selector.tsx index 5b467b86..6f00af5c 100644 --- a/web/components/custom/learning-state-selector.tsx +++ b/web/components/custom/learning-state-selector.tsx @@ -8,6 +8,7 @@ import { LEARNING_STATES, LearningStateValue } from "@/lib/constants" import { linkLearningStateSelectorAtom } from "@/store/link" import { Command, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command" import { ScrollArea } from "@/components/ui/scroll-area" +import type { icons } from "lucide-react" interface LearningStateSelectorProps { showSearch?: boolean @@ -16,6 +17,7 @@ interface LearningStateSelectorProps { value?: string onChange: (value: LearningStateValue) => void className?: string + defaultIcon?: keyof typeof icons } export const LearningStateSelector: React.FC = ({ @@ -24,7 +26,8 @@ export const LearningStateSelector: React.FC = ({ searchPlaceholder = "Search state...", value, onChange, - className + className, + defaultIcon }) => { const [isLearningStateSelectorOpen, setIsLearningStateSelectorOpen] = useAtom(linkLearningStateSelectorAtom) const selectedLearningState = useMemo(() => LEARNING_STATES.find(ls => ls.value === value), [value]) @@ -44,21 +47,24 @@ export const LearningStateSelector: React.FC = ({ variant="secondary" className={cn("gap-x-2 text-sm", className)} > - {selectedLearningState?.icon && ( - - )} - - {selectedLearningState?.label || defaultLabel} - + {selectedLearningState?.icon || + (defaultIcon && ( + + ))} + + {selectedLearningState?.label || + (defaultLabel && ( + + {selectedLearningState?.label || defaultLabel} + + ))} - e.preventDefault()} - > + = ({ pageCount, isActi isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground" )} > - +

Pages {pageCount > 0 && {pageCount}} diff --git a/web/components/custom/sidebar/partial/profile-section.tsx b/web/components/custom/sidebar/partial/profile-section.tsx index 2396c7ac..09c73624 100644 --- a/web/components/custom/sidebar/partial/profile-section.tsx +++ b/web/components/custom/sidebar/partial/profile-section.tsx @@ -1,6 +1,6 @@ "use client" -import { useEffect, useState } from "react" +import * as React from "react" import { SignInButton, useAuth, useUser } from "@clerk/nextjs" import { useAtom } from "jotai" import Link from "next/link" @@ -27,13 +27,13 @@ import { useKeyboardManager } from "@/hooks/use-keyboard-manager" export const ProfileSection: React.FC = () => { const { user, isSignedIn } = useUser() const { signOut } = useAuth() - const [menuOpen, setMenuOpen] = useState(false) + const [menuOpen, setMenuOpen] = React.useState(false) const pathname = usePathname() const [, setShowShortcut] = useAtom(showShortcutAtom) const { disableKeydown } = useKeyboardManager("profileSection") - useEffect(() => { + React.useEffect(() => { disableKeydown(menuOpen) }, [menuOpen, disableKeydown]) diff --git a/web/components/custom/sidebar/sidebar.tsx b/web/components/custom/sidebar/sidebar.tsx index 8bbf2637..591bad35 100644 --- a/web/components/custom/sidebar/sidebar.tsx +++ b/web/components/custom/sidebar/sidebar.tsx @@ -3,9 +3,8 @@ import * as React from "react" import Link from "next/link" import { usePathname } from "next/navigation" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { useAtom } from "jotai" -import { SearchIcon } from "lucide-react" import { Logo } from "@/components/custom/logo" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" @@ -16,6 +15,7 @@ import { TopicSection } from "./partial/topic-section" import { ProfileSection } from "./partial/profile-section" import { TaskSection } from "./partial/task-section" import { useAccountOrGuest } from "@/lib/providers/jazz-provider" +import { LaIcon } from "../la-icon" interface SidebarContextType { isCollapsed: boolean @@ -99,7 +99,7 @@ const LogoAndSearch: React.FC = React.memo(() => { type="button" className="text-primary/60 flex w-20 items-center justify-start py-4 pl-2" > - + )} @@ -120,13 +120,13 @@ const SidebarContent: React.FC = React.memo(() => {

-
+
{me._type === "Account" && } - {me._type === "Account" && } {me._type === "Account" && } {/* {me._type === "Account" && } */} + {me._type === "Account" && }
diff --git a/web/components/custom/topic-selector.tsx b/web/components/custom/topic-selector.tsx index 8a1f6691..2807b1fc 100644 --- a/web/components/custom/topic-selector.tsx +++ b/web/components/custom/topic-selector.tsx @@ -79,12 +79,7 @@ export const TopicSelector = forwardRef( - e.preventDefault()} - > + {group?.root.topics && ( , "value"> { output?: "html" | "json" | "text" @@ -25,10 +25,6 @@ export interface LAEditorRef { editor: Editor | null } -interface CustomEditor extends Editor { - previousBlockCount?: number -} - export const LAEditor = React.forwardRef( ( { @@ -46,32 +42,13 @@ export const LAEditor = React.forwardRef( }, ref ) => { - const [content, setContent] = React.useState(value) - const throttledContent = useThrottleFn(defaultContent => defaultContent, throttleDelay, [content]) - const [lastThrottledContent, setLastThrottledContent] = React.useState(throttledContent) + const throttledSetValue = useThrottle((value: Content) => onUpdate?.(value), throttleDelay) const handleUpdate = React.useCallback( (editor: Editor) => { - const newContent = getOutput(editor, output) - setContent(newContent) - - const customEditor = editor as CustomEditor - const json = customEditor.getJSON() - - if (json.content && Array.isArray(json.content)) { - const currentBlockCount = json.content.length - - if ( - typeof customEditor.previousBlockCount === "number" && - currentBlockCount > customEditor.previousBlockCount - ) { - onNewBlock?.(newContent) - } - - customEditor.previousBlockCount = currentBlockCount - } + throttledSetValue(getOutput(editor, output)) }, - [output, onNewBlock] + [output, throttledSetValue] ) const editor = useEditor({ @@ -96,13 +73,6 @@ export const LAEditor = React.forwardRef( } }) - React.useEffect(() => { - if (lastThrottledContent !== throttledContent) { - setLastThrottledContent(throttledContent) - onUpdate?.(throttledContent!) - } - }, [throttledContent, lastThrottledContent, onUpdate]) - React.useImperativeHandle( ref, () => ({ diff --git a/web/components/routes/link/LinkRoute.tsx b/web/components/routes/link/LinkRoute.tsx index bfbc424a..8b31f071 100644 --- a/web/components/routes/link/LinkRoute.tsx +++ b/web/components/routes/link/LinkRoute.tsx @@ -1,71 +1,20 @@ "use client" -import React, { useEffect, useState, useCallback, useRef } from "react" +import * as React from "react" import { LinkHeader } from "@/components/routes/link/header" import { LinkList } from "@/components/routes/link/list" import { LinkManage } from "@/components/routes/link/manage" -import { parseAsBoolean, useQueryState } from "nuqs" -import { atom, useAtom } from "jotai" +import { atom } from "jotai" import { LinkBottomBar } from "./bottom-bar" -import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" -import { useKey } from "react-use" export const isDeleteConfirmShownAtom = atom(false) export function LinkRoute(): React.ReactElement { - const [nuqsEditId, setNuqsEditId] = useQueryState("editId") - const [activeItemIndex, setActiveItemIndex] = useState(null) - const [isInCreateMode] = useQueryState("create", parseAsBoolean) - const [isCommandPaletteOpen] = useAtom(commandPaletteOpenAtom) - const [isDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom) - const [disableEnterKey, setDisableEnterKey] = useState(false) - const timeoutRef = useRef(null) - - const handleCommandPaletteClose = useCallback(() => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current) - } - - setDisableEnterKey(true) - timeoutRef.current = setTimeout(() => { - setDisableEnterKey(false) - timeoutRef.current = null - }, 100) - }, []) - - useEffect(() => { - if (isDeleteConfirmShown || isCommandPaletteOpen || isInCreateMode) { - setDisableEnterKey(true) - if (timeoutRef.current) { - clearTimeout(timeoutRef.current) - timeoutRef.current = null - } - } else if (!isCommandPaletteOpen) { - handleCommandPaletteClose() - } - - return () => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current) - } - } - }, [isDeleteConfirmShown, isCommandPaletteOpen, isInCreateMode, handleCommandPaletteClose]) - - useKey("Escape", () => { - setDisableEnterKey(false) - setNuqsEditId(null) - }) - return ( <> - + ) diff --git a/web/components/routes/link/bottom-bar.tsx b/web/components/routes/link/bottom-bar.tsx index df2165ab..aa4a812b 100644 --- a/web/components/routes/link/bottom-bar.tsx +++ b/web/components/routes/link/bottom-bar.tsx @@ -1,6 +1,6 @@ "use client" -import React, { useCallback, useEffect, useRef } from "react" +import * as React from "react" import { motion, AnimatePresence } from "framer-motion" import type { icons } from "lucide-react" import { Button } from "@/components/ui/button" @@ -15,7 +15,6 @@ 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 { useKeydownListener } from "@/hooks/use-keydown-listener" interface ToolbarButtonProps extends React.ComponentPropsWithoutRef { icon: keyof typeof icons @@ -55,28 +54,28 @@ export const LinkBottomBar: React.FC = () => { const { me } = useAccount({ root: { personalLinks: [] } }) const personalLink = useCoState(PersonalLink, editId as ID) - const cancelBtnRef = useRef(null) - const confirmBtnRef = useRef(null) - const overlayRef = useRef(null) - const contentRef = useRef(null) + const cancelBtnRef = React.useRef(null) + const confirmBtnRef = React.useRef(null) + const overlayRef = React.useRef(null) + const contentRef = React.useRef(null) - const deleteBtnRef = useRef(null) - const editMoreBtnRef = useRef(null) - const plusBtnRef = useRef(null) - const plusMoreBtnRef = useRef(null) + const deleteBtnRef = React.useRef(null) + const editMoreBtnRef = React.useRef(null) + const plusBtnRef = React.useRef(null) + const plusMoreBtnRef = React.useRef(null) const { deleteLink } = useLinkActions() const confirm = useConfirm() - const handleCreateMode = useCallback(() => { + const handleCreateMode = React.useCallback(() => { setEditId(null) - setTimeout(() => { + requestAnimationFrame(() => { setCreateMode(prev => !prev) - }, 100) + }) }, [setEditId, setCreateMode]) - useEffect(() => { - setGlobalLinkFormExceptionRefsAtom([ + const exceptionRefs = React.useMemo( + () => [ overlayRef, contentRef, deleteBtnRef, @@ -85,8 +84,13 @@ export const LinkBottomBar: React.FC = () => { confirmBtnRef, plusBtnRef, plusMoreBtnRef - ]) - }, [setGlobalLinkFormExceptionRefsAtom]) + ], + [] + ) + + React.useEffect(() => { + setGlobalLinkFormExceptionRefsAtom(exceptionRefs) + }, [setGlobalLinkFormExceptionRefsAtom, exceptionRefs]) const handleDelete = async (e: React.MouseEvent) => { if (!personalLink || !me) return @@ -119,46 +123,29 @@ export const LinkBottomBar: React.FC = () => { } } - const handleKeydown = useCallback( - (event: KeyboardEvent) => { - const isCreateShortcut = event.key === "c" - - if (isCreateShortcut) { - event.preventDefault() - handleCreateMode() - } - }, - [handleCreateMode] - ) - - useKeydownListener(handleKeydown) - const shortcutText = getShortcutKeys(["c"]) return ( - +
{editId && ( - setEditId(null)} /> + setEditId(null)} aria-label="Go back" /> - + )} @@ -171,19 +158,20 @@ export const LinkBottomBar: React.FC = () => { exit={{ opacity: 0, y: -20 }} transition={{ duration: 0.1 }} > - {createMode && } + {createMode && } {!createMode && ( s.symbol).join("")})`} ref={plusBtnRef} + aria-label="New link" /> )} )} - +
) } diff --git a/web/components/routes/link/header.tsx b/web/components/routes/link/header.tsx index 93d14e7c..bc6ecbe1 100644 --- a/web/components/routes/link/header.tsx +++ b/web/components/routes/link/header.tsx @@ -1,10 +1,9 @@ "use client" import * as React from "react" -import { ListFilterIcon } from "lucide-react" import { Button } from "@/components/ui/button" import { ContentHeader, SidebarToggleButton } from "@/components/custom/content-header" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" @@ -15,6 +14,7 @@ import { LEARNING_STATES } from "@/lib/constants" import { useQueryState, parseAsStringLiteral } from "nuqs" import { FancySwitch } from "@omit/react-fancy-switch" import { cn } from "@/lib/utils" +import { LaIcon } from "@/components/custom/la-icon" const ALL_STATES = [{ label: "All", value: "all", icon: "List", className: "text-foreground" }, ...LEARNING_STATES] const ALL_STATES_STRING = ALL_STATES.map(ls => ls.value) @@ -42,7 +42,7 @@ export const LinkHeader = React.memo(() => { {isTablet && ( -
+
)} @@ -115,8 +115,8 @@ const FilterAndSort = React.memo(() => {
- diff --git a/web/components/routes/link/hooks/use-link-actions.ts b/web/components/routes/link/hooks/use-link-actions.ts index 98fb4428..02d576db 100644 --- a/web/components/routes/link/hooks/use-link-actions.ts +++ b/web/components/routes/link/hooks/use-link-actions.ts @@ -9,18 +9,20 @@ export const useLinkActions = () => { try { const index = me.root.personalLinks.findIndex(item => item?.id === link.id) if (index === -1) { - console.error("Delete operation fail", { index, link }) - return + throw new Error(`Link with id ${link.id} not found`) } + me.root.personalLinks.splice(index, 1) + toast.success("Link deleted.", { position: "bottom-right", description: `${link.title} has been deleted.` }) - - me.root.personalLinks.splice(index, 1) } catch (error) { - toast.error("Failed to delete link") + console.error("Failed to delete link:", error) + toast.error("Failed to delete link", { + description: error instanceof Error ? error.message : "An unknown error occurred" + }) } }, []) diff --git a/web/components/routes/link/list.tsx b/web/components/routes/link/list.tsx index 4a4f1f49..9710c83b 100644 --- a/web/components/routes/link/list.tsx +++ b/web/components/routes/link/list.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useMemo } from "react" +import * as React from "react" import { DndContext, closestCenter, @@ -8,50 +8,55 @@ import { useSensors, DragEndEvent, DragStartEvent, - UniqueIdentifier + UniqueIdentifier, + MeasuringStrategy, + TouchSensor } from "@dnd-kit/core" -import { Primitive } from "@radix-ui/react-primitive" import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable" +import type { MeasuringConfiguration } from "@dnd-kit/core" +import { restrictToVerticalAxis } from "@dnd-kit/modifiers" import { useAccount } from "@/lib/providers/jazz-provider" import { PersonalLinkLists } from "@/lib/schema/personal-link" import { useAtom } from "jotai" import { linkSortAtom } from "@/store/link" -import { useKey } from "react-use" import { LinkItem } from "./partials/link-item" -import { useQueryState } from "nuqs" +import { parseAsBoolean, useQueryState } from "nuqs" import { learningStateAtom } from "./header" -import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" import { useConfirm } from "@omit/react-confirm-dialog" import { useLinkActions } from "./hooks/use-link-actions" import { isDeleteConfirmShownAtom } from "./LinkRoute" import { useActiveItemScroll } from "@/hooks/use-active-item-scroll" -import { useKeyboardManager } from "@/hooks/use-keyboard-manager" -import { useKeydownListener } from "@/hooks/use-keydown-listener" +import { useTouchSensor } from "@/hooks/use-touch-sensor" +import { useKeyDown } from "@/hooks/use-key-down" +import { isModKey } from "@/lib/utils" -interface LinkListProps { - activeItemIndex: number | null - setActiveItemIndex: React.Dispatch> - disableEnterKey: boolean +interface LinkListProps {} + +const measuring: MeasuringConfiguration = { + droppable: { + strategy: MeasuringStrategy.Always + } } -const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex, disableEnterKey }) => { - const [isCommandPalettePpen] = useAtom(commandPaletteOpenAtom) +const LinkList: React.FC = () => { + const isTouchDevice = useTouchSensor() + const lastActiveIndexRef = React.useRef(null) + const [activeItemIndex, setActiveItemIndex] = React.useState(null) + const [keyboardActiveIndex, setKeyboardActiveIndex] = React.useState(null) const [, setIsDeleteConfirmShown] = useAtom(isDeleteConfirmShownAtom) const [editId, setEditId] = useQueryState("editId") + const [createMode] = useQueryState("create", parseAsBoolean) const [activeLearningState] = useAtom(learningStateAtom) const [draggingId, setDraggingId] = React.useState(null) + const [sort] = useAtom(linkSortAtom) const { deleteLink } = useLinkActions() const confirm = useConfirm() + const { me } = useAccount({ root: { personalLinks: [] } }) - const { me } = useAccount({ - root: { personalLinks: [] } - }) - const personalLinks = useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks]) + const personalLinks = React.useMemo(() => me?.root?.personalLinks || [], [me?.root?.personalLinks]) - const [sort] = useAtom(linkSortAtom) - - const filteredLinks = useMemo( + const filteredLinks = React.useMemo( () => personalLinks.filter(link => { if (activeLearningState === "all") return true @@ -61,7 +66,7 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex [personalLinks, activeLearningState] ) - const sortedLinks = useMemo( + const sortedLinks = React.useMemo( () => sort === "title" ? [...filteredLinks].sort((a, b) => (a?.title || "").localeCompare(b?.title || "")) @@ -69,10 +74,22 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex [filteredLinks, sort] ) + React.useEffect(() => { + if (editId !== null) { + const index = sortedLinks.findIndex(link => link?.id === editId) + if (index !== -1) { + lastActiveIndexRef.current = index + setActiveItemIndex(index) + setKeyboardActiveIndex(index) + } + } + }, [editId, setActiveItemIndex, setKeyboardActiveIndex, sortedLinks]) + const sensors = useSensors( - useSensor(PointerSensor, { + useSensor(isTouchDevice ? TouchSensor : PointerSensor, { activationConstraint: { - distance: 8 + ...(isTouchDevice ? { delay: 100, tolerance: 5 } : {}), + distance: 5 } }), useSensor(KeyboardSensor, { @@ -80,52 +97,7 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex }) ) - useKey( - event => (event.metaKey || event.ctrlKey) && event.key === "Backspace", - async () => { - if (activeItemIndex !== null) { - setIsDeleteConfirmShown(true) - const activeLink = sortedLinks[activeItemIndex] - if (activeLink) { - const result = await confirm({ - title: `Delete "${activeLink.title}"?`, - description: "This action cannot be undone.", - alertDialogTitle: { - className: "text-base" - }, - cancelButton: { - variant: "outline" - }, - confirmButton: { - variant: "destructive" - } - }) - - if (result) { - if (!me) return - deleteLink(me, activeLink) - - setIsDeleteConfirmShown(false) - } else { - setIsDeleteConfirmShown(false) - } - } - } - }, - { event: "keydown" } - ) - - // on mounted, if editId is set, set activeItemIndex to the index of the item with the editId - useEffect(() => { - if (editId) { - const index = sortedLinks.findIndex(link => link?.id === editId) - if (index !== -1) { - setActiveItemIndex(index) - } - } - }, [editId, sortedLinks, setActiveItemIndex]) - - const updateSequences = useCallback((links: PersonalLinkLists) => { + const updateSequences = React.useCallback((links: PersonalLinkLists) => { links.forEach((link, index) => { if (link) { link.sequence = index @@ -133,62 +105,73 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex }) }, []) - const { isKeyboardDisabled } = useKeyboardManager("XComponent") + const handleDeleteLink = React.useCallback(async () => { + if (activeItemIndex === null) return + setIsDeleteConfirmShown(true) + const activeLink = sortedLinks[activeItemIndex] + if (!activeLink || !me) return - useKeydownListener((e: KeyboardEvent) => { - if ( - isKeyboardDisabled || - isCommandPalettePpen || - !me?.root?.personalLinks || - sortedLinks.length === 0 || - editId !== null - ) - return + const result = await confirm({ + title: `Delete "${activeLink.title}"?`, + description: "This action cannot be undone.", + alertDialogTitle: { className: "text-base" }, + cancelButton: { variant: "outline" }, + confirmButton: { variant: "destructive" } + }) - if (e.key === "ArrowUp" || e.key === "ArrowDown") { - e.preventDefault() - setActiveItemIndex(prevIndex => { - if (prevIndex === null) return 0 - const newIndex = - e.key === "ArrowUp" ? Math.max(0, prevIndex - 1) : Math.min(sortedLinks.length - 1, prevIndex + 1) - - if (e.metaKey && sort === "manual") { - const linksArray = [...me.root.personalLinks] - const newLinks = arrayMove(linksArray, prevIndex, newIndex) - - while (me.root.personalLinks.length > 0) { - me.root.personalLinks.pop() - } - - newLinks.forEach(link => { - if (link) { - me.root.personalLinks.push(link) - } - }) - - updateSequences(me.root.personalLinks) - } - - return newIndex - }) - } else if (e.key === "Enter" && !disableEnterKey && activeItemIndex !== null) { - e.preventDefault() - const activeLink = sortedLinks[activeItemIndex] - if (activeLink) { - setEditId(activeLink.id) - } + if (result) { + deleteLink(me, activeLink) } - }) + setIsDeleteConfirmShown(false) + }, [activeItemIndex, sortedLinks, me, confirm, deleteLink, setIsDeleteConfirmShown]) - const handleDragStart = useCallback( + useKeyDown(e => isModKey(e) && e.key === "Backspace", handleDeleteLink) + + const next = () => Math.min((activeItemIndex ?? 0) + 1, sortedLinks.length - 1) + + const prev = () => Math.max((activeItemIndex ?? 0) - 1, 0) + + const handleKeyDown = (ev: KeyboardEvent) => { + switch (ev.key) { + case "ArrowDown": + ev.preventDefault() + ev.stopPropagation() + setActiveItemIndex(next()) + setKeyboardActiveIndex(next()) + break + case "ArrowUp": + ev.preventDefault() + ev.stopPropagation() + setActiveItemIndex(prev()) + setKeyboardActiveIndex(prev()) + } + } + + useKeyDown(() => true, handleKeyDown) + + const handleDragStart = React.useCallback( (event: DragStartEvent) => { if (sort !== "manual") return + if (!me) return + const { active } = event + const activeIndex = me?.root.personalLinks.findIndex(item => item?.id === active.id) + + if (activeIndex === -1) { + console.error("Drag operation fail", { activeIndex, activeId: active.id }) + return + } + + setActiveItemIndex(activeIndex) setDraggingId(active.id) }, - [sort] + [sort, me, setActiveItemIndex] ) + const handleDragCancel = React.useCallback(() => { + setDraggingId(null) + }, []) + const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event @@ -226,51 +209,70 @@ const LinkList: React.FC = ({ activeItemIndex, setActiveItemIndex }) updateSequences(me.root.personalLinks) - setActiveItemIndex(newIndex) } catch (error) { console.error("Error during link reordering:", error) } } + setActiveItemIndex(null) setDraggingId(null) } - const setElementRef = useActiveItemScroll({ activeIndex: activeItemIndex }) + const { setElementRef } = useActiveItemScroll({ + activeIndex: keyboardActiveIndex + }) return ( - - +
item?.id || "") || []} strategy={verticalListSortingStrategy}> -
    - {sortedLinks.map( - (linkItem, index) => - linkItem && ( - setElementRef(el, index)} - /> - ) - )} -
+
+
+
+ {sortedLinks.map( + (linkItem, index) => + linkItem && ( + { + if (editId !== null || draggingId !== null || createMode) { + return undefined + } + + setKeyboardActiveIndex(null) + setActiveItemIndex(index) + }} + onFormClose={() => { + setEditId(null) + setActiveItemIndex(lastActiveIndexRef.current) + setKeyboardActiveIndex(lastActiveIndexRef.current) + console.log(keyboardActiveIndex) + }} + index={index} + onItemSelected={link => setEditId(link.id)} + data-keyboard-active={keyboardActiveIndex === index} + ref={el => setElementRef(el, index)} + /> + ) + )} +
+
+
- - +
+ ) } diff --git a/web/components/routes/link/manage.tsx b/web/components/routes/link/manage.tsx index 438ea906..4884ef1c 100644 --- a/web/components/routes/link/manage.tsx +++ b/web/components/routes/link/manage.tsx @@ -1,7 +1,6 @@ "use client" import React from "react" -import { useKey } from "react-use" import { LinkForm } from "./partials/form/link-form" import { motion, AnimatePresence } from "framer-motion" import { parseAsBoolean, useQueryState } from "nuqs" @@ -12,9 +11,6 @@ const LinkManage: React.FC = () => { const [createMode, setCreateMode] = useQueryState("create", parseAsBoolean) const handleFormClose = () => setCreateMode(false) - const handleFormFail = () => {} - - useKey("Escape", handleFormClose) return ( @@ -25,7 +21,7 @@ const LinkManage: React.FC = () => { exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.1 }} > - + )} diff --git a/web/components/routes/link/partials/form/link-form.tsx b/web/components/routes/link/partials/form/link-form.tsx index 3fbce3d7..a74b610e 100644 --- a/web/components/routes/link/partials/form/link-form.tsx +++ b/web/components/routes/link/partials/form/link-form.tsx @@ -19,6 +19,7 @@ import { FormField, FormItem, FormLabel } from "@/components/ui/form" import { LearningStateSelector } from "@/components/custom/learning-state-selector" import { TopicSelector, topicSelectorAtom } from "@/components/custom/topic-selector" import { JAZZ_GLOBAL_GROUP_ID } from "@/lib/constants" +import { useOnClickOutside } from "@/hooks/use-on-click-outside" export const globalLinkFormExceptionRefsAtom = atom[]>([]) @@ -78,26 +79,16 @@ export const LinkForm: React.FC = ({ [exceptionsRefs, globalExceptionRefs] ) - React.useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - const isClickInsideForm = formRef.current && formRef.current.contains(event.target as Node) - - const isClickInsideExceptions = allExceptionRefs.some((ref, index) => { - const isInside = ref.current && ref.current.contains(event.target as Node) - return isInside - }) - - if (!isClickInsideForm && !istopicSelectorOpen && !islearningStateSelectorOpen && !isClickInsideExceptions) { - onClose?.() - } + useOnClickOutside(formRef, event => { + if ( + !istopicSelectorOpen && + !islearningStateSelectorOpen && + !allExceptionRefs.some(ref => ref.current?.contains(event.target as Node)) + ) { + console.log("clicking outside") + onClose?.() } - - document.addEventListener("mousedown", handleClickOutside) - - return () => { - document.removeEventListener("mousedown", handleClickOutside) - } - }, [islearningStateSelectorOpen, istopicSelectorOpen, allExceptionRefs, onClose]) + }) React.useEffect(() => { if (selectedLink) { @@ -193,7 +184,15 @@ export const LinkForm: React.FC = ({ const canSubmit = form.formState.isValid && !form.formState.isSubmitting return ( -
+
{ + if (e.key === "Escape") { + handleCancel() + } + }} + >
@@ -213,7 +212,6 @@ export const LinkForm: React.FC = ({ { - // toggle, if already selected set undefined form.setValue("learningState", field.value === value ? undefined : value) }} showSearch={false} diff --git a/web/components/routes/link/partials/link-item.tsx b/web/components/routes/link/partials/link-item.tsx index 9a430d8b..8340aac4 100644 --- a/web/components/routes/link/partials/link-item.tsx +++ b/web/components/routes/link/partials/link-item.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from "react" +import * as React from "react" import Image from "next/image" import Link from "next/link" import { useAtom } from "jotai" @@ -15,41 +15,35 @@ import { cn, ensureUrlProtocol } from "@/lib/utils" import { LEARNING_STATES, LearningStateValue } from "@/lib/constants" import { linkOpenPopoverForIdAtom } from "@/store/link" -interface LinkItemProps extends React.HTMLAttributes { +interface LinkItemProps extends React.HTMLAttributes { personalLink: PersonalLink disabled?: boolean - isEditing: boolean - setEditId: (id: string | null) => void - isDragging: boolean + editId: string | null isActive: boolean - setActiveItemIndex: (index: number | null) => void index: number + onItemSelected?: (personalLink: PersonalLink) => void + onFormClose?: () => void } -export const LinkItem = React.forwardRef( - ({ personalLink, disabled, isEditing, setEditId, isDragging, isActive, setActiveItemIndex, index }, ref) => { +export const LinkItem = React.forwardRef( + ({ personalLink, disabled, editId, isActive, index, onItemSelected, onFormClose, ...props }, ref) => { const [openPopoverForId, setOpenPopoverForId] = useAtom(linkOpenPopoverForIdAtom) const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: personalLink.id, disabled }) - const style = useMemo( + const style = React.useMemo( () => ({ transform: CSS.Transform.toString(transform), - transition, - pointerEvents: isDragging ? "none" : "auto" + transition }), - [transform, transition, isDragging] + [transform, transition] ) - const handleSuccess = useCallback(() => setEditId(null), [setEditId]) - const handleOnClose = useCallback(() => setEditId(null), [setEditId]) - const handleRowDoubleClick = useCallback(() => setEditId(personalLink.id), [setEditId, personalLink.id]) - - const selectedLearningState = useMemo( + const selectedLearningState = React.useMemo( () => LEARNING_STATES.find(ls => ls.value === personalLink.learningState), [personalLink.learningState] ) - const handleLearningStateSelect = useCallback( + const handleLearningStateSelect = React.useCallback( (value: string) => { const learningState = value as LearningStateValue personalLink.learningState = personalLink.learningState === learningState ? undefined : learningState @@ -58,14 +52,23 @@ export const LinkItem = React.forwardRef( [personalLink, setOpenPopoverForId] ) - if (isEditing) { - return ( - {}} /> - ) + const handleKeyDown = React.useCallback( + (ev: React.KeyboardEvent) => { + if (ev.key === "Enter") { + ev.preventDefault() + ev.stopPropagation() + onItemSelected?.(personalLink) + } + }, + [personalLink, onItemSelected] + ) + + if (editId === personalLink.id) { + return {}} /> } return ( -
  • { setNodeRef(node) if (typeof ref === "function") { @@ -75,61 +78,68 @@ export const LinkItem = React.forwardRef( } }} style={style as React.CSSProperties} + {...props} {...attributes} {...listeners} tabIndex={0} - onFocus={() => setActiveItemIndex(index)} - onBlur={() => setActiveItemIndex(null)} - className={cn( - "relative cursor-default outline-none", - "grid grid-cols-[auto_1fr_auto] items-center gap-x-2 py-2 max-lg:px-4 sm:px-5 sm:py-2", - { - "bg-muted-foreground/5": isActive, - "hover:bg-muted/50": !isActive - } - )} - onDoubleClick={handleRowDoubleClick} + onDoubleClick={() => onItemSelected?.(personalLink)} + aria-disabled={disabled} + aria-selected={isActive} + data-disabled={disabled} + data-active={isActive} + className="w-full overflow-visible border-b-[0.5px] border-transparent outline-none data-[active='true']:bg-[var(--link-background-muted)] data-[keyboard-active='true']:focus-visible:shadow-[var(--link-shadow)_0px_0px_0px_1px_inset]" + onKeyDown={handleKeyDown} > - setOpenPopoverForId(open ? personalLink.id : null)} - > - - - - e.preventDefault()} - > - - - - -
    - {personalLink.icon && ( - {personalLink.title} +
    -

    {personalLink.title}

    + > + setOpenPopoverForId(open ? personalLink.id : null)} + > + + + + + + + + +
    +
    + {personalLink.icon && ( + {personalLink.title} + )} +

    {personalLink.title}

    +
    {personalLink.url && (
    )}
    + +
    + +
    + {personalLink.topic && ( + + {personalLink.topic.prettyName} + + )} +
    -
    - {personalLink.topic && ( - - {personalLink.topic.prettyName} - - )} -
    -
    • +
    +
    ) } ) diff --git a/web/components/routes/page/detail/PageDetailRoute.tsx b/web/components/routes/page/detail/PageDetailRoute.tsx index 0c6467ff..d819e7d8 100644 --- a/web/components/routes/page/detail/PageDetailRoute.tsx +++ b/web/components/routes/page/detail/PageDetailRoute.tsx @@ -13,7 +13,7 @@ import { Editor } from "@tiptap/core" import { generateUniqueSlug } from "@/lib/utils" import { FocusClasses } from "@tiptap/extension-focus" import { DetailPageHeader } from "./header" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { TopicSelector } from "@/components/custom/topic-selector" import { Button } from "@/components/ui/button" import { LaIcon } from "@/components/custom/la-icon" diff --git a/web/components/routes/page/hooks/use-column-styles.ts b/web/components/routes/page/hooks/use-column-styles.ts index 30f1171e..46cc5884 100644 --- a/web/components/routes/page/hooks/use-column-styles.ts +++ b/web/components/routes/page/hooks/use-column-styles.ts @@ -1,4 +1,4 @@ -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" export const useColumnStyles = () => { const isTablet = useMedia("(max-width: 640px)") diff --git a/web/components/routes/page/list.tsx b/web/components/routes/page/list.tsx index 62be86d2..cd085729 100644 --- a/web/components/routes/page/list.tsx +++ b/web/components/routes/page/list.tsx @@ -4,7 +4,7 @@ import { useAccount } from "@/lib/providers/jazz-provider" import { useAtom } from "jotai" import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" import { PageItem } from "./partials/page-item" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { useColumnStyles } from "./hooks/use-column-styles" import { PersonalPage, PersonalPageLists } from "@/lib/schema" import { useRouter } from "next/navigation" @@ -89,7 +89,7 @@ interface PageListItemsProps { } const PageListItems: React.FC = ({ personalPages, activeItemIndex }) => { - const setElementRef = useActiveItemScroll({ activeIndex: activeItemIndex }) + const { setElementRef } = useActiveItemScroll({ activeIndex: activeItemIndex }) return ( (null) - const [open, setOpen] = useState(false) - const isMounted = useMountedState() - const [inputValue, setInputValue] = useState("") - const [hasInteracted, setHasInteracted] = useState(false) - const [showDropdown, setShowDropdown] = useState(false) + const inputRef = React.useRef(null) + const [, setOpen] = React.useState(false) + const isMounted = useIsMounted() + const [inputValue, setInputValue] = React.useState("") + const [hasInteracted, setHasInteracted] = React.useState(false) + const [showDropdown, setShowDropdown] = React.useState(false) - const initialShuffledTopics = useMemo(() => shuffleArray(topics).slice(0, 5), [topics]) + const initialShuffledTopics = React.useMemo(() => shuffleArray(topics).slice(0, 5), [topics]) - const filteredTopics = useMemo(() => { + const filteredTopics = React.useMemo(() => { if (!inputValue) { return initialShuffledTopics } @@ -44,7 +44,7 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl .slice(0, 10) }, [inputValue, topics, initialShuffledTopics]) - const handleSelect = useCallback( + const handleSelect = React.useCallback( (topic: GraphNode) => { setOpen(false) onSelect(topic.name) @@ -52,7 +52,7 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl [onSelect] ) - const handleInputChange = useCallback( + const handleInputChange = React.useCallback( (value: string) => { setInputValue(value) setShowDropdown(true) @@ -62,34 +62,27 @@ export function Autocomplete({ topics = [], onSelect, onInputChange }: Autocompl [onInputChange] ) - const handleFocus = useCallback(() => { + const handleFocus = React.useCallback(() => { setHasInteracted(true) }, []) - const handleClick = useCallback(() => { + const handleClick = React.useCallback(() => { setShowDropdown(true) setHasInteracted(true) }, []) - const commandKey = useMemo(() => { + const commandKey = React.useMemo(() => { return filteredTopics .map(topic => `${topic.name}:${topic.prettyName}:${topic.connectedTopics.join(",")}`) .join("__") }, [filteredTopics]) - useEffect(() => { + React.useEffect(() => { if (inputRef.current && isMounted() && hasInteracted) { inputRef.current.focus() } }, [commandKey, isMounted, hasInteracted]) - const animationProps = { - initial: { opacity: 0, y: -10 }, - animate: { opacity: 1, y: 0 }, - exit: { opacity: 0, y: -10 }, - transition: { duration: 0.1 } - } - return (
    diff --git a/web/components/routes/topics/detail/Header.tsx b/web/components/routes/topics/detail/Header.tsx index 0987e9a0..1349271b 100644 --- a/web/components/routes/topics/detail/Header.tsx +++ b/web/components/routes/topics/detail/Header.tsx @@ -8,6 +8,7 @@ import { useAccountOrGuest } from "@/lib/providers/jazz-provider" import { LearningStateValue } from "@/lib/constants" import { useClerk } from "@clerk/nextjs" import { usePathname } from "next/navigation" +import { useMedia } from "@/hooks/use-media" interface TopicDetailHeaderProps { topic: Topic @@ -16,6 +17,7 @@ interface TopicDetailHeaderProps { export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic }: TopicDetailHeaderProps) { const clerk = useClerk() const pathname = usePathname() + const isMobile = useMedia("(max-width: 770px)") const { me } = useAccountOrGuest({ root: { topicsWantToLearn: [], @@ -90,20 +92,19 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({ topic } return ( -
    +
    -
    - {topic.prettyName} +
    +

    {topic.prettyName}

    -
    - ) diff --git a/web/components/routes/topics/detail/partials/link-item.tsx b/web/components/routes/topics/detail/partials/link-item.tsx index 77964333..b232b425 100644 --- a/web/components/routes/topics/detail/partials/link-item.tsx +++ b/web/components/routes/topics/detail/partials/link-item.tsx @@ -151,12 +151,7 @@ export const LinkItem = React.memo( )} - e.preventDefault()} - > + { const isTablet = useMedia("(max-width: 640px)") diff --git a/web/components/routes/topics/list.tsx b/web/components/routes/topics/list.tsx index dc96124b..4d951498 100644 --- a/web/components/routes/topics/list.tsx +++ b/web/components/routes/topics/list.tsx @@ -4,7 +4,7 @@ import { useAccount } from "@/lib/providers/jazz-provider" import { atom, useAtom } from "jotai" import { commandPaletteOpenAtom } from "@/components/custom/command-palette/command-palette" import { TopicItem } from "./partials/topic-item" -import { useMedia } from "react-use" +import { useMedia } from "@/hooks/use-media" import { useRouter } from "next/navigation" import { useActiveItemScroll } from "@/hooks/use-active-item-scroll" import { Column } from "@/components/custom/column" @@ -132,7 +132,7 @@ interface TopicListItemsProps { } const TopicListItems: React.FC = ({ personalTopics, activeItemIndex }) => { - const setElementRef = useActiveItemScroll({ activeIndex: activeItemIndex }) + const { setElementRef } = useActiveItemScroll({ activeIndex: activeItemIndex }) return ( (({ top side="bottom" align="end" onClick={e => e.stopPropagation()} - onCloseAutoFocus={e => e.preventDefault()} > (options: ActiveItemSc const { activeIndex } = options const elementRefs = useRef>([]) - const scrollActiveElementIntoView = useCallback((index: number) => { + const scrollActiveElementIntoView = (index: number) => { const activeElement = elementRefs.current[index] - activeElement?.scrollIntoView({ block: "nearest" }) - }, []) + activeElement?.focus() + // activeElement?.scrollIntoView({ block: "nearest" }) + } useEffect(() => { if (activeIndex !== null) { @@ -26,5 +27,5 @@ export function useActiveItemScroll(options: ActiveItemSc elementRefs.current[index] = element }, []) - return setElementRef + return { setElementRef, scrollActiveElementIntoView } } diff --git a/web/hooks/use-event-listener.ts b/web/hooks/use-event-listener.ts new file mode 100644 index 00000000..6bb50a22 --- /dev/null +++ b/web/hooks/use-event-listener.ts @@ -0,0 +1,33 @@ +import * as React from "react" + +type EventMap = WindowEventMap & HTMLElementEventMap & VisualViewportEventMap + +export function useEventListener< + K extends keyof EventMap, + T extends Window | HTMLElement | VisualViewport | null = Window +>( + eventName: K, + handler: (event: EventMap[K]) => void, + element: T = window as unknown as T, // Cast to `unknown` first, then `T` + options: AddEventListenerOptions = {} +) { + const savedHandler = React.useRef<(event: EventMap[K]) => void>() + const { capture, passive, once } = options + + React.useEffect(() => { + savedHandler.current = handler + }, [handler]) + + React.useEffect(() => { + const isSupported = element && element.addEventListener + if (!isSupported) return + + const eventListener = (event: EventMap[K]) => savedHandler.current?.(event) + + const opts = { capture, passive, once } + element.addEventListener(eventName, eventListener as EventListener, opts) + return () => { + element.removeEventListener(eventName, eventListener as EventListener, opts) + } + }, [eventName, element, capture, passive, once]) +} diff --git a/web/hooks/use-is-mounted.ts b/web/hooks/use-is-mounted.ts new file mode 100644 index 00000000..334b1a17 --- /dev/null +++ b/web/hooks/use-is-mounted.ts @@ -0,0 +1,19 @@ +import * as React from "react" + +/** + * Hook to check if component is still mounted + * + * @returns {boolean} true if the component is mounted, false otherwise + */ +export function useIsMounted() { + const isMounted = React.useRef(false) + + React.useEffect(() => { + isMounted.current = true + return () => { + isMounted.current = false + } + }, []) + + return React.useCallback(() => isMounted.current, []) +} diff --git a/web/hooks/use-key-down.ts b/web/hooks/use-key-down.ts new file mode 100644 index 00000000..ac42fed6 --- /dev/null +++ b/web/hooks/use-key-down.ts @@ -0,0 +1,79 @@ +import { isModKey, isTextInput } from "@/lib/utils" +import * as React from "react" + +type Callback = (event: KeyboardEvent) => void + +export type KeyFilter = ((event: KeyboardEvent) => boolean) | string + +export type Options = { + allowInInput?: boolean +} + +type RegisteredCallback = { + callback: Callback + options?: Options +} + +// Registered keyboard event callbacks +let callbacks: RegisteredCallback[] = [] + +// Track if IME input suggestions are open so we can ignore keydown shortcuts +// in this case, they should never be triggered from mobile keyboards. +let imeOpen = false + +// Based on implementation in react-use +// https://github.com/streamich/react-use/blob/master/src/useKey.ts#L15-L22 +const createKeyPredicate = (keyFilter: KeyFilter) => + typeof keyFilter === "function" + ? keyFilter + : typeof keyFilter === "string" + ? (event: KeyboardEvent) => event.key === keyFilter + : keyFilter + ? (_event: KeyboardEvent) => true + : (_event: KeyboardEvent) => false + +export function useKeyDown(key: KeyFilter, fn: Callback, options?: Options): void { + const predicate = createKeyPredicate(key) + + React.useEffect(() => { + const handler = (event: KeyboardEvent) => { + if (predicate(event)) { + fn(event) + } + } + + callbacks.push({ + callback: handler, + options + }) + + return () => { + callbacks = callbacks.filter(cb => cb.callback !== handler) + } + }, [fn, predicate, options]) +} + +window.addEventListener("keydown", event => { + if (imeOpen) { + return + } + + // reverse so that the last registered callbacks get executed first + for (const registered of callbacks.reverse()) { + if (event.defaultPrevented === true) { + break + } + + if (!isTextInput(event.target as HTMLElement) || registered.options?.allowInInput || isModKey(event)) { + registered.callback(event) + } + } +}) + +window.addEventListener("compositionstart", () => { + imeOpen = true +}) + +window.addEventListener("compositionend", () => { + imeOpen = false +}) diff --git a/web/hooks/use-keyboard-manager.ts b/web/hooks/use-keyboard-manager.ts index f73d0994..076f483d 100644 --- a/web/hooks/use-keyboard-manager.ts +++ b/web/hooks/use-keyboard-manager.ts @@ -2,7 +2,18 @@ import { useAtom } from "jotai" import { useEffect, useCallback } from "react" import { keyboardDisableSourcesAtom } from "@/store/keydown-manager" -const allowedKeys = ["Escape", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"] +const allowedKeys = [ + "Escape", + "ArrowUp", + "ArrowDown", + "ArrowLeft", + "ArrowRight", + "Enter", + "Tab", + "Backspace", + "Home", + "End" +] export function useKeyboardManager(sourceId: string) { const [disableSources, setDisableSources] = useAtom(keyboardDisableSourcesAtom) diff --git a/web/hooks/use-keydown-listener.ts b/web/hooks/use-keydown-listener.ts deleted file mode 100644 index 888f140e..00000000 --- a/web/hooks/use-keydown-listener.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { useAtomValue } from "jotai" -import { useEffect, useCallback } from "react" -import { keyboardDisableSourcesAtom } from "@/store/keydown-manager" - -export function useKeydownListener(callback: (event: KeyboardEvent) => void) { - const disableSources = useAtomValue(keyboardDisableSourcesAtom) - - const handleKeyDown = useCallback( - (event: KeyboardEvent) => { - if (disableSources.size === 0) { - callback(event) - } - }, - [disableSources, callback] - ) - - useEffect(() => { - window.addEventListener("keydown", handleKeyDown) - return () => window.removeEventListener("keydown", handleKeyDown) - }, [handleKeyDown]) -} diff --git a/web/hooks/use-media.ts b/web/hooks/use-media.ts new file mode 100644 index 00000000..6f68e6bf --- /dev/null +++ b/web/hooks/use-media.ts @@ -0,0 +1,23 @@ +import { useState, useEffect } from "react" + +export function useMedia(query: string): boolean { + const [matches, setMatches] = useState(false) + + useEffect(() => { + if (window.matchMedia) { + const media = window.matchMedia(query) + if (media.matches !== matches) { + setMatches(media.matches) + } + const listener = () => { + setMatches(media.matches) + } + media.addListener(listener) + return () => media.removeListener(listener) + } + + return undefined + }, [matches, query]) + + return matches +} diff --git a/web/hooks/use-on-click-outside.ts b/web/hooks/use-on-click-outside.ts new file mode 100644 index 00000000..faed4679 --- /dev/null +++ b/web/hooks/use-on-click-outside.ts @@ -0,0 +1,28 @@ +import * as React from "react" +import { useEventListener } from "./use-event-listener" + +/** + * Hook to detect clicks outside of a specified element. + * + * @param ref The React ref to the element. + * @param callback The handler to call when a click outside the element is detected. + */ +export function useOnClickOutside( + ref: React.RefObject, + callback?: (event: MouseEvent | TouchEvent) => void, + options: AddEventListenerOptions = {} +) { + const listener = React.useCallback( + (event: MouseEvent | TouchEvent) => { + // Do nothing if clicking ref's element or descendent elements + if (!ref.current || ref.current.contains(event.target as Node)) { + return + } + callback?.(event) + }, + [ref, callback] + ) + + useEventListener("mousedown", listener, window, options) + useEventListener("touchstart", listener, window, options) +} diff --git a/web/hooks/use-throttle.ts b/web/hooks/use-throttle.ts new file mode 100644 index 00000000..7b58a4da --- /dev/null +++ b/web/hooks/use-throttle.ts @@ -0,0 +1,34 @@ +import { useRef, useCallback } from "react" + +export function useThrottle void>( + callback: T, + delay: number +): (...args: Parameters) => void { + const lastRan = useRef(Date.now()) + const timeoutRef = useRef(null) + + return useCallback( + (...args: Parameters) => { + const handler = () => { + if (Date.now() - lastRan.current >= delay) { + callback(...args) + lastRan.current = Date.now() + } else { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current) + } + timeoutRef.current = setTimeout( + () => { + callback(...args) + lastRan.current = Date.now() + }, + delay - (Date.now() - lastRan.current) + ) + } + } + + handler() + }, + [callback, delay] + ) +} diff --git a/web/hooks/use-touch-sensor.ts b/web/hooks/use-touch-sensor.ts new file mode 100644 index 00000000..c0fa78ba --- /dev/null +++ b/web/hooks/use-touch-sensor.ts @@ -0,0 +1,27 @@ +import { useState, useEffect } from "react" + +const SSR = typeof window === "undefined" + +export function useTouchSensor() { + const [isTouchDevice, setIsTouchDevice] = useState(false) + + useEffect(() => { + const detectTouch = () => { + setIsTouchDevice( + !SSR && + (window.matchMedia?.("(hover: none) and (pointer: coarse)")?.matches || + "ontouchstart" in window || + navigator.maxTouchPoints > 0) + ) + } + + detectTouch() + window.addEventListener("touchstart", detectTouch, false) + + return () => { + window.removeEventListener("touchstart", detectTouch) + } + }, []) + + return isTouchDevice +} diff --git a/web/lib/utils/index.ts b/web/lib/utils/index.ts index 7e4dfbe3..43f9bd26 100644 --- a/web/lib/utils/index.ts +++ b/web/lib/utils/index.ts @@ -34,6 +34,18 @@ export function shuffleArray(array: T[]): T[] { return shuffled } +const inputs = ["input", "select", "button", "textarea"] // detect if node is a text input element + +export function isTextInput(element: Element): boolean { + return !!( + element && + element.tagName && + (inputs.indexOf(element.tagName.toLowerCase()) !== -1 || + element.attributes.getNamedItem("role")?.value === "textbox" || + element.attributes.getNamedItem("contenteditable")?.value === "true") + ) +} + export * from "./urls" export * from "./slug" export * from "./keyboard" diff --git a/web/lib/utils/keyboard.ts b/web/lib/utils/keyboard.ts index 50255db7..27e8c208 100644 --- a/web/lib/utils/keyboard.ts +++ b/web/lib/utils/keyboard.ts @@ -1,47 +1,4 @@ -let isMac: boolean | undefined - -interface Navigator { - userAgentData?: { - brands: { brand: string; version: string }[] - mobile: boolean - platform: string - getHighEntropyValues: (hints: string[]) => Promise<{ - platform: string - platformVersion: string - uaFullVersion: string - }> - } -} - -function getPlatform(): string { - const nav = navigator as Navigator - - if (nav.userAgentData) { - if (nav.userAgentData.platform) { - return nav.userAgentData.platform - } - - nav.userAgentData.getHighEntropyValues(["platform"]).then(highEntropyValues => { - if (highEntropyValues.platform) { - return highEntropyValues.platform - } - }) - } - - if (typeof navigator.platform === "string") { - return navigator.platform - } - - return "" -} - -export function isMacOS() { - if (isMac === undefined) { - isMac = getPlatform().toLowerCase().includes("mac") - } - - return isMac -} +const SSR = typeof window === "undefined" interface ShortcutKeyResult { symbol: string @@ -51,11 +8,11 @@ interface ShortcutKeyResult { export function getShortcutKey(key: string): ShortcutKeyResult { const lowercaseKey = key.toLowerCase() if (lowercaseKey === "mod") { - return isMacOS() ? { symbol: "⌘", readable: "Command" } : { symbol: "Ctrl", readable: "Control" } + return isMac() ? { symbol: "⌘", readable: "Command" } : { symbol: "Ctrl", readable: "Control" } } else if (lowercaseKey === "alt") { - return isMacOS() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" } + return isMac() ? { symbol: "⌥", readable: "Option" } : { symbol: "Alt", readable: "Alt" } } else if (lowercaseKey === "shift") { - return isMacOS() ? { symbol: "⇧", readable: "Shift" } : { symbol: "Shift", readable: "Shift" } + return isMac() ? { symbol: "⇧", readable: "Shift" } : { symbol: "Shift", readable: "Shift" } } else { return { symbol: key.toUpperCase(), readable: key } } @@ -64,3 +21,39 @@ export function getShortcutKey(key: string): ShortcutKeyResult { export function getShortcutKeys(keys: string[]): ShortcutKeyResult[] { return keys.map(key => getShortcutKey(key)) } + +export function isModKey(event: KeyboardEvent | MouseEvent | React.KeyboardEvent) { + return isMac() ? event.metaKey : event.ctrlKey +} + +export function isMac(): boolean { + if (SSR) { + return false + } + return window.navigator.platform === "MacIntel" +} + +export function isWindows(): boolean { + if (SSR) { + return false + } + return window.navigator.platform === "Win32" +} + +let supportsPassive = false + +try { + const opts = Object.defineProperty({}, "passive", { + get() { + supportsPassive = true + } + }) + // @ts-expect-error ts-migrate(2769) testPassive is not a real event + window.addEventListener("testPassive", null, opts) + // @ts-expect-error ts-migrate(2769) testPassive is not a real event + window.removeEventListener("testPassive", null, opts) +} catch (e) { + // No-op +} + +export const supportsPassiveListener = supportsPassive diff --git a/web/package.json b/web/package.json index 67037938..0135be5a 100644 --- a/web/package.json +++ b/web/package.json @@ -1,127 +1,128 @@ { - "name": "web", - "version": "0.1.0", - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint", - "test": "jest" - }, - "dependencies": { - "@clerk/nextjs": "^5.6.0", - "@dnd-kit/core": "^6.1.0", - "@dnd-kit/sortable": "^8.0.0", - "@hookform/resolvers": "^3.9.0", - "@nothing-but/force-graph": "^0.9.5", - "@nothing-but/utils": "^0.16.0", - "@omit/react-confirm-dialog": "^1.1.5", - "@omit/react-fancy-switch": "^0.1.3", - "@radix-ui/react-alert-dialog": "^1.1.1", - "@radix-ui/react-avatar": "^1.1.0", - "@radix-ui/react-checkbox": "^1.1.1", - "@radix-ui/react-context-menu": "^2.2.1", - "@radix-ui/react-dialog": "^1.1.1", - "@radix-ui/react-dismissable-layer": "^1.1.0", - "@radix-ui/react-dropdown-menu": "^2.1.1", - "@radix-ui/react-focus-scope": "^1.1.0", - "@radix-ui/react-icons": "^1.3.0", - "@radix-ui/react-label": "^2.1.0", - "@radix-ui/react-popover": "^1.1.1", - "@radix-ui/react-scroll-area": "^1.1.0", - "@radix-ui/react-select": "^2.1.1", - "@radix-ui/react-separator": "^1.1.0", - "@radix-ui/react-slot": "^1.1.0", - "@radix-ui/react-switch": "^1.1.0", - "@radix-ui/react-toggle": "^1.1.0", - "@radix-ui/react-toggle-group": "^1.1.0", - "@radix-ui/react-tooltip": "^1.1.2", - "@sentry/nextjs": "^8.30.0", - "@tanstack/react-virtual": "^3.10.8", - "@tiptap/core": "^2.7.2", - "@tiptap/extension-blockquote": "^2.7.2", - "@tiptap/extension-bold": "^2.7.2", - "@tiptap/extension-bullet-list": "^2.7.2", - "@tiptap/extension-code": "^2.7.2", - "@tiptap/extension-code-block-lowlight": "^2.7.2", - "@tiptap/extension-color": "^2.7.2", - "@tiptap/extension-document": "^2.7.2", - "@tiptap/extension-dropcursor": "^2.7.2", - "@tiptap/extension-focus": "^2.7.2", - "@tiptap/extension-gapcursor": "^2.7.2", - "@tiptap/extension-hard-break": "^2.7.2", - "@tiptap/extension-heading": "^2.7.2", - "@tiptap/extension-history": "^2.7.2", - "@tiptap/extension-horizontal-rule": "^2.7.2", - "@tiptap/extension-image": "^2.7.2", - "@tiptap/extension-italic": "^2.7.2", - "@tiptap/extension-link": "^2.7.2", - "@tiptap/extension-list-item": "^2.7.2", - "@tiptap/extension-ordered-list": "^2.7.2", - "@tiptap/extension-paragraph": "^2.7.2", - "@tiptap/extension-placeholder": "^2.7.2", - "@tiptap/extension-strike": "^2.7.2", - "@tiptap/extension-task-item": "^2.7.2", - "@tiptap/extension-task-list": "^2.7.2", - "@tiptap/extension-text": "^2.7.2", - "@tiptap/extension-typography": "^2.7.2", - "@tiptap/pm": "^2.7.2", - "@tiptap/react": "^2.7.2", - "@tiptap/starter-kit": "^2.7.2", - "@tiptap/suggestion": "^2.7.2", - "axios": "^1.7.7", - "cheerio": "1.0.0", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.1", - "cmdk": "^1.0.0", - "date-fns": "^3.6.0", - "framer-motion": "^11.5.5", - "geist": "^1.3.1", - "jazz-browser-auth-clerk": "0.7.35-guest-auth.5", - "jazz-react": "0.7.35-guest-auth.5", - "jazz-react-auth-clerk": "0.7.35-guest-auth.5", - "jazz-tools": "0.7.35-guest-auth.5", - "jotai": "^2.9.3", - "lowlight": "^3.1.0", - "lucide-react": "^0.429.0", - "next": "14.2.10", - "next-themes": "^0.3.0", - "nuqs": "^1.19.1", - "react": "^18.3.1", - "react-day-picker": "^8.10.1", - "react-dom": "^18.3.1", - "react-hook-form": "^7.53.0", - "react-textarea-autosize": "^8.5.3", - "react-use": "^17.5.1", - "ronin": "^4.3.1", - "slugify": "^1.6.6", - "sonner": "^1.5.0", - "streaming-markdown": "^0.0.14", - "tailwind-merge": "^2.5.2", - "tailwindcss-animate": "^1.0.7", - "vaul": "^0.9.4", - "zod": "^3.23.8", - "zsa": "^0.6.0", - "zsa-react": "^0.2.2" - }, - "devDependencies": { - "@ronin/learn-anything": "^0.0.0-3452357373461", - "@testing-library/jest-dom": "^6.5.0", - "@testing-library/react": "^16.0.1", - "@types/jest": "^29.5.13", - "@types/node": "^22.5.5", - "@types/react": "^18.3.7", - "@types/react-dom": "^18.3.0", - "dotenv": "^16.4.5", - "eslint": "^8.57.1", - "eslint-config-next": "14.2.5", - "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", - "postcss": "^8.4.47", - "prettier-plugin-tailwindcss": "^0.6.6", - "tailwindcss": "^3.4.12", - "ts-jest": "^29.2.5", - "ts-node": "^10.9.2", - "typescript": "^5.6.2" - } + "name": "web", + "version": "0.1.0", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint", + "test": "jest" + }, + "dependencies": { + "@clerk/nextjs": "^5.6.0", + "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", + "@dnd-kit/sortable": "^8.0.0", + "@hookform/resolvers": "^3.9.0", + "@nothing-but/force-graph": "^0.9.5", + "@nothing-but/utils": "^0.16.0", + "@omit/react-confirm-dialog": "^1.1.5", + "@omit/react-fancy-switch": "^0.1.3", + "@radix-ui/react-alert-dialog": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-context-menu": "^2.2.1", + "@radix-ui/react-dialog": "^1.1.1", + "@radix-ui/react-dismissable-layer": "^1.1.0", + "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-focus-scope": "^1.1.0", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-popover": "^1.1.1", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-toggle": "^1.1.0", + "@radix-ui/react-toggle-group": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", + "@sentry/nextjs": "^8.30.0", + "@tanstack/react-virtual": "^3.10.8", + "@tiptap/core": "^2.7.2", + "@tiptap/extension-blockquote": "^2.7.2", + "@tiptap/extension-bold": "^2.7.2", + "@tiptap/extension-bullet-list": "^2.7.2", + "@tiptap/extension-code": "^2.7.2", + "@tiptap/extension-code-block-lowlight": "^2.7.2", + "@tiptap/extension-color": "^2.7.2", + "@tiptap/extension-document": "^2.7.2", + "@tiptap/extension-dropcursor": "^2.7.2", + "@tiptap/extension-focus": "^2.7.2", + "@tiptap/extension-gapcursor": "^2.7.2", + "@tiptap/extension-hard-break": "^2.7.2", + "@tiptap/extension-heading": "^2.7.2", + "@tiptap/extension-history": "^2.7.2", + "@tiptap/extension-horizontal-rule": "^2.7.2", + "@tiptap/extension-image": "^2.7.2", + "@tiptap/extension-italic": "^2.7.2", + "@tiptap/extension-link": "^2.7.2", + "@tiptap/extension-list-item": "^2.7.2", + "@tiptap/extension-ordered-list": "^2.7.2", + "@tiptap/extension-paragraph": "^2.7.2", + "@tiptap/extension-placeholder": "^2.7.2", + "@tiptap/extension-strike": "^2.7.2", + "@tiptap/extension-task-item": "^2.7.2", + "@tiptap/extension-task-list": "^2.7.2", + "@tiptap/extension-text": "^2.7.2", + "@tiptap/extension-typography": "^2.7.2", + "@tiptap/pm": "^2.7.2", + "@tiptap/react": "^2.7.2", + "@tiptap/starter-kit": "^2.7.2", + "@tiptap/suggestion": "^2.7.2", + "axios": "^1.7.7", + "cheerio": "1.0.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", + "cmdk": "^1.0.0", + "date-fns": "^3.6.0", + "framer-motion": "^11.5.6", + "geist": "^1.3.1", + "jazz-browser-auth-clerk": "0.8.0", + "jazz-react": "0.8.0", + "jazz-react-auth-clerk": "0.8.0", + "jazz-tools": "0.8.0", + "jotai": "^2.10.0", + "lowlight": "^3.1.0", + "lucide-react": "^0.429.0", + "next": "14.2.10", + "next-themes": "^0.3.0", + "nuqs": "^1.19.1", + "query-string": "^9.1.0", + "react": "^18.3.1", + "react-day-picker": "^8.10.1", + "react-dom": "^18.3.1", + "react-hook-form": "^7.53.0", + "react-textarea-autosize": "^8.5.3", + "ronin": "^4.3.1", + "slugify": "^1.6.6", + "sonner": "^1.5.0", + "streaming-markdown": "^0.0.14", + "tailwind-merge": "^2.5.2", + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.4", + "zod": "^3.23.8", + "zsa": "^0.6.0", + "zsa-react": "^0.2.3" + }, + "devDependencies": { + "@ronin/learn-anything": "0.0.0-3452357373461", + "@testing-library/jest-dom": "^6.5.0", + "@testing-library/react": "^16.0.1", + "@types/jest": "^29.5.13", + "@types/node": "^22.5.5", + "@types/react": "^18.3.8", + "@types/react-dom": "^18.3.0", + "dotenv": "^16.4.5", + "eslint": "^8.57.1", + "eslint-config-next": "14.2.5", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "postcss": "^8.4.47", + "prettier-plugin-tailwindcss": "^0.6.6", + "tailwindcss": "^3.4.12", + "ts-jest": "^29.2.5", + "ts-node": "^10.9.2", + "typescript": "^5.6.2" + } }