diff --git a/apps/web/package.json b/apps/web/package.json index 8e8a70ed..7ca13deb 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -27,6 +27,7 @@ "framer-motion": "^11.0.24", "lucide-react": "^0.338.0", "next": "14.1.0", + "novel": "0.1.22", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.2.1", diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx deleted file mode 100644 index 66ca1652..00000000 --- a/apps/web/src/components/Sidebar.tsx +++ /dev/null @@ -1,145 +0,0 @@ -'use client'; -import { StoredContent } from '@/server/db/schema'; -import { - Plus, - MoreHorizontal, - ArrowUpRight, - Edit3, - Trash2, -} from 'lucide-react'; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from './ui/dropdown-menu'; - -import { useState, useEffect, useRef } from 'react'; - -export default function Sidebar() { - const websites: StoredContent[] = [ - { - id: 1, - content: '', - title: 'Visual Studio Code', - url: 'https://code.visualstudio.com', - description: '', - image: 'https://code.visualstudio.com/favicon.ico', - baseUrl: 'https://code.visualstudio.com', - savedAt: new Date() - }, - { - id: 1, - content: '', - title: "yxshv/vscode: An unofficial remake of vscode's landing page", - url: 'https://github.com/yxshv/vscode', - description: '', - image: 'https://github.com/favicon.ico', - baseUrl: 'https://github.com', - savedAt: new Date() - }, - ]; - - return ( - - ); -} - -export const ListItem: React.FC<{ item: StoredContent }> = ({ item }) => { - const [isEditing, setIsEditing] = useState(false); - const editInputRef = useRef(null); - - useEffect(() => { - if (isEditing) { - setTimeout(() => { - editInputRef.current?.focus(); - }, 500); - } - }, [isEditing]); - - return ( -
- isEditing && e.preventDefault()} - className="flex w-[90%] items-center gap-2 focus:outline-none" - > - {isEditing ? ( - - ) : ( - <> - {item.title - - - )} - {isEditing ? ( - setIsEditing(false)} - onKeyDown={(e) => e.key === 'Escape' && setIsEditing(false)} - /> - ) : ( - - {item.title ?? 'Untitled website'} - - )} - - - - - - - window.open(item.url)}> - - Open - - { - setIsEditing(true); - }} - > - - Edit - - - - Delete - - - -
- ); -}; diff --git a/apps/web/src/components/Sidebar/AddMemoryDialog.tsx b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx new file mode 100644 index 00000000..1bd4b688 --- /dev/null +++ b/apps/web/src/components/Sidebar/AddMemoryDialog.tsx @@ -0,0 +1,39 @@ +import { useEffect, useRef } from "react"; +import { + DialogClose, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "../ui/dialog"; +import { Input } from "../ui/input"; +import { Label } from "../ui/label"; + +export default function AddMemoryPage() { + return ( + <> + + Add a web page to memory + + This will take you the web page you are trying to add to memory, where + the extension will save the page to memory + + + + + + + Add + + + Cancel + + + + ); +} diff --git a/apps/web/src/components/Sidebar/MemoriesBar.tsx b/apps/web/src/components/Sidebar/MemoriesBar.tsx index d7d8b5b5..779dea25 100644 --- a/apps/web/src/components/Sidebar/MemoriesBar.tsx +++ b/apps/web/src/components/Sidebar/MemoriesBar.tsx @@ -1,10 +1,13 @@ +import { Editor } from "novel"; import { useAutoAnimate } from "@formkit/auto-animate/react"; import { MemoryWithImage, MemoryWithImages3, MemoryWithImages2, } from "@/assets/MemoryWithImages"; -import { type CollectedSpaces } from "../../../types/memory"; +import { type CollectedSpaces } + +from "../../../types/memory"; import { Input, InputWithIcon } from "../ui/input"; import { ArrowUpRight, @@ -22,7 +25,7 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { Variant, useAnimate, motion } from "framer-motion"; import { useMemory } from "@/contexts/MemoryContext"; import { SpaceIcon } from "@/assets/Memories"; @@ -38,6 +41,8 @@ import { import { Label } from "../ui/label"; import useViewport from "@/hooks/useViewport"; import useTouchHold from "@/hooks/useTouchHold"; +import { DialogTrigger } from "@radix-ui/react-dialog"; +import AddMemoryPage from "./AddMemoryDialog"; export function MemoriesBar() { const [parent, enableAnimations] = useAutoAnimate(); @@ -59,38 +64,43 @@ export function MemoriesBar() { />
- - - - - - { - setIsDropdownOpen(false); - setAddMemoryState("page"); - }} - > - - Page to Memory - - - - Note - - - - Space - - - + + + + + + e.preventDefault()}> + + { + setAddMemoryState("page"); + }} + > + + Page to Memory + + + + { + setAddMemoryState("note"); + }} + > + + Note + + + + + Space + + + +
-
void; + type: "page" | "note" | "space" | null; + children?: React.ReactNode | React.ReactNode[]; + isOpen: boolean; }) { return ( - <> - onStateChange(open ? "page" : null)} + + {children} + { + e.preventDefault(); + ( + document.querySelector("[data-autofocus]") as + | HTMLInputElement + | undefined + )?.focus(); + }} > - - - Add a web page to memory - - This will take you the web page you are trying to add to memory, - where the extension will save the page to memory - - - - - - - Add - - - Cancel - - - - - - - - Add a web page to memory - - This will take you the web page you are trying to add to memory, - where the extension will save the page to memory - - - - - - - Add - - - Cancel - - - - - + {type === "page" && } + {type === "note" && ( + <> + + + + + Add + + + Cancel + + + + )} + + ); }