diff options
| author | Yash <[email protected]> | 2024-04-05 08:49:49 +0000 |
|---|---|---|
| committer | Yash <[email protected]> | 2024-04-05 08:49:49 +0000 |
| commit | d4592196f9df4e73715007d3e0c2db575f7d1d62 (patch) | |
| tree | 34112e138d56f13d9c5d8dd3608fc6587d2f5025 /apps/web/src/components | |
| parent | `addSpace` function to the context (diff) | |
| download | supermemory-d4592196f9df4e73715007d3e0c2db575f7d1d62.tar.xz supermemory-d4592196f9df4e73715007d3e0c2db575f7d1d62.zip | |
delete no longer needed components
Diffstat (limited to 'apps/web/src/components')
| -rw-r--r-- | apps/web/src/components/Sidebar/CategoryItem.tsx | 307 | ||||
| -rw-r--r-- | apps/web/src/components/Sidebar/PagesItem.tsx | 189 |
2 files changed, 0 insertions, 496 deletions
diff --git a/apps/web/src/components/Sidebar/CategoryItem.tsx b/apps/web/src/components/Sidebar/CategoryItem.tsx deleted file mode 100644 index c2e72ba5..00000000 --- a/apps/web/src/components/Sidebar/CategoryItem.tsx +++ /dev/null @@ -1,307 +0,0 @@ -"use client"; -import { cleanUrl } from "@/lib/utils"; -import { StoredContent } from "@/server/db/schema"; -import { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuItem, -} from "../ui/dropdown-menu"; -import { Label } from "../ui/label"; -import { - ArrowUpRight, - MoreHorizontal, - Tags, - ChevronDown, - Edit3, - Trash2, - Save, - ChevronRight, - Plus, - Minus, -} from "lucide-react"; -import { useState } from "react"; -import { - Drawer, - DrawerContent, - DrawerHeader, - DrawerTitle, - DrawerDescription, - DrawerFooter, - DrawerClose, -} from "../ui/drawer"; -import { Input } from "../ui/input"; -import { Textarea } from "../ui/textarea"; -import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; -import { - AnimatePresence, - motion, - Reorder, - useMotionValue, -} from "framer-motion"; - -const pages: 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(), - space: "" - }, - { - id: 2, - 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(), - space: "" - }, - { - id: 3, - 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(), - space: "" - }, - { - id: 4, - 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(), - space: "" - }, - { - id: 5, - 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(), - space: "" - }, - { - id: 6, - 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(), - space: "" - }, - { - id: 7, - 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(), - space: "" - }, - { - id: 8, - 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(), - space: "" - }, - { - id: 9, - 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(), - space: "" - }, -]; -export const CategoryItem: React.FC<{ item: StoredContent }> = ({ item }) => { - const [isExpanded, setIsExpanded] = useState(false); - const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false); - - const [items, setItems] = useState<StoredContent[]>(pages); - - return ( - <> - <div className="hover:bg-rgray-5 has-[button:focus]:bg-rgray-5 flex w-full items-center rounded-full py-1 pl-3 pr-2 transition [&:hover>button>div>[data-down-icon]]:scale-125 [&:hover>button>div>[data-down-icon]]:opacity-100 [&:hover>button>div>[data-down-icon]]:delay-150 [&:hover>button>div>[data-tags-icon]]:scale-75 [&:hover>button>div>[data-tags-icon]]:opacity-0 [&:hover>button>div>[data-tags-icon]]:delay-0 [&:hover>button]:opacity-100"> - <button - onClick={() => setIsExpanded((prev) => !prev)} - className="flex w-full items-center gap-2 focus-visible:outline-none" - > - <div className="relative h-5 min-w-5"> - <Tags - data-tags-icon - className="z-1 h-5 w-5 transition-[transform,opacity] delay-150 duration-150" - strokeWidth={1.5} - /> - <ChevronDown - data-down-icon - className={`absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150 ${isExpanded ? "rotate-180" : "rotate-0"}`} - strokeWidth={1.5} - /> - </div> - - <span className="w-full truncate text-nowrap text-left"> - {item.title ?? "Untitled website"} - </span> - </button> - <Drawer - shouldScaleBackground - open={isEditDrawerOpen} - onOpenChange={setIsEditDrawerOpen} - > - <DrawerContent className="pb-10 lg:px-[25vw]"> - <DrawerHeader className="relative mt-10 px-0"> - <DrawerTitle className=" flex w-full justify-between"> - Edit Page Details - </DrawerTitle> - <DrawerDescription>Change the page details</DrawerDescription> - <a - target="_blank" - href={item.url} - className="text-rgray-11/90 bg-rgray-3 text-md absolute right-0 top-0 flex w-min translate-y-1/2 items-center justify-center gap-1 rounded-full px-5 py-1" - > - <img src={item.image ?? "/brain.png"} className="h-4 w-4" /> - {cleanUrl(item.url)} - </a> - </DrawerHeader> - - <div className="mt-5"> - <Label>Title</Label> - <Input - className="" - required - value={item.title ?? ""} - placeholder={item.title ?? "Enter the title for the page"} - /> - </div> - <div className="mt-5"> - <Label>Additional Context</Label> - <Textarea - className="" - value={item.content ?? ""} - placeholder={"Enter additional context for this page"} - /> - </div> - <DrawerFooter className="flex flex-row-reverse items-center justify-end px-0 pt-5"> - <DrawerClose className="flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition hover:bg-blue-100 hover:text-blue-400 focus-visible:bg-blue-100 focus-visible:text-blue-400 focus-visible:outline-none focus-visible:ring-blue-200 dark:hover:bg-blue-100/10 dark:focus-visible:bg-blue-100/10 dark:focus-visible:ring-blue-200/30"> - <Save className="mr-2 h-4 w-4 " strokeWidth={1.5} /> - Save - </DrawerClose> - <DrawerClose className="hover:bg-rgray-3 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition focus-visible:outline-none"> - Cancel - </DrawerClose> - <DrawerClose className="mr-auto flex items-center justify-center rounded-md bg-red-100 px-3 py-2 text-red-400 ring-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-red-200 dark:bg-red-100/10 dark:focus-visible:ring-red-200/30"> - <Trash2 className="mr-2 h-4 w-4 " strokeWidth={1.5} /> - Delete - </DrawerClose> - </DrawerFooter> - </DrawerContent> - </Drawer> - </div> - <AnimatePresence> - {isExpanded && ( - <Reorder.Group - axis="y" - values={items} - onReorder={setItems} - as="div" - initial={{ height: 0 }} - animate={{ height: "auto" }} - exit={{ - height: 0, - transition: {}, - }} - layoutScroll - className="flex max-h-32 w-full flex-col items-center overflow-y-auto pl-7" - > - <AnimatePresence> - {items.map((item, i) => ( - <CategoryPage - key={item.id} - index={i} - item={item} - onRemove={() => - setItems((prev) => prev.filter((_, index) => i !== index)) - } - /> - ))} - </AnimatePresence> - </Reorder.Group> - )} - </AnimatePresence> - </> - ); -}; - -export const CategoryPage: React.FC<{ - item: StoredContent; - index: number; - onRemove?: () => void; -}> = ({ item, onRemove, index }) => { - return ( - <Reorder.Item - value={item} - as="div" - key={index} - exit={{ opacity: 0, scale: 0.8 }} - dragListener={false} - className="hover:bg-rgray-5 has-[a:focus]:bg-rgray-5 flex w-full items-center rounded-full py-1 pl-3 pr-2 transition [&:hover>a>div>[data-icon]]:scale-125 [&:hover>a>div>[data-icon]]:opacity-100 [&:hover>a>div>[data-icon]]:delay-150 [&:hover>a>div>img]:scale-75 [&:hover>a>div>img]:opacity-0 [&:hover>a>div>img]:delay-0 [&:hover>button]:opacity-100" - > - <a - href={item.url} - target="_blank" - className="flex w-[90%] items-center gap-2 focus-visible:outline-none" - > - <div className="relative h-4 min-w-4"> - <img - src={item.image ?? "/brain.png"} - alt={item.title ?? "Untitiled website"} - className="z-1 h-4 w-4 transition-[transform,opacity] delay-150 duration-150" - /> - <ArrowUpRight - data-icon - className="absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150" - strokeWidth={1.5} - /> - </div> - - <span className="w-full truncate text-nowrap"> - {item.title ?? "Untitled website"} - </span> - </a> - <button - onClick={() => onRemove?.()} - className="ml-auto w-4 min-w-4 rounded-[0.15rem] opacity-0 focus-visible:opacity-100 focus-visible:outline-none" - > - <Minus className="h-4 w-4 min-w-4" /> - </button> - </Reorder.Item> - ); -}; diff --git a/apps/web/src/components/Sidebar/PagesItem.tsx b/apps/web/src/components/Sidebar/PagesItem.tsx deleted file mode 100644 index fea8bf33..00000000 --- a/apps/web/src/components/Sidebar/PagesItem.tsx +++ /dev/null @@ -1,189 +0,0 @@ -"use client"; -import { cleanUrl } from "@/lib/utils"; -import { StoredContent } from "@/server/db/schema"; -import { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuItem, -} from "../ui/dropdown-menu"; -import { Label } from "../ui/label"; -import { - ArrowUpRight, - MoreHorizontal, - Edit3, - Trash2, - Save, - ChevronRight, - Plus, -} from "lucide-react"; -import { useState } from "react"; -import { - Drawer, - DrawerContent, - DrawerHeader, - DrawerTitle, - DrawerDescription, - DrawerFooter, - DrawerClose, -} from "../ui/drawer"; -import { Input } from "../ui/input"; -import { Textarea } from "../ui/textarea"; -import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; - -export const PageItem: React.FC<{ item: StoredContent }> = ({ item }) => { - const [isDropdownOpen, setIsDropdownOpen] = useState(false); - const [isEditDrawerOpen, setIsEditDrawerOpen] = useState(false); - - return ( - <div className="hover:bg-rgray-5 has-[a:focus]:bg-rgray-5 flex w-full items-center rounded-full py-1 pl-3 pr-2 transition [&:hover>a>div>[data-icon]]:scale-125 [&:hover>a>div>[data-icon]]:opacity-100 [&:hover>a>div>[data-icon]]:delay-150 [&:hover>a>div>img]:scale-75 [&:hover>a>div>img]:opacity-0 [&:hover>a>div>img]:delay-0 [&:hover>button]:opacity-100"> - <a - href={item.url} - target="_blank" - className="flex w-[90%] items-center gap-2 focus-visible:outline-none" - > - <div className="relative h-4 min-w-4"> - <img - src={item.image ?? "/brain.png"} - alt={item.title ?? "Untitiled website"} - className="z-1 h-4 w-4 transition-[transform,opacity] delay-150 duration-150" - /> - <ArrowUpRight - data-icon - className="absolute left-1/2 top-1/2 z-[2] h-4 w-4 min-w-4 -translate-x-1/2 -translate-y-1/2 scale-75 opacity-0 transition-[transform,opacity] duration-150" - strokeWidth={1.5} - /> - </div> - - <span className="w-full truncate text-nowrap"> - {item.title ?? "Untitled website"} - </span> - </a> - <DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}> - <DropdownMenuTrigger asChild> - <button className="ml-auto w-4 min-w-4 rounded-[0.15rem] opacity-0 focus-visible:opacity-100 focus-visible:outline-none"> - <MoreHorizontal className="h-4 w-4 min-w-4" /> - </button> - </DropdownMenuTrigger> - <DropdownMenuContent className="w-5"> - <DropdownMenuItem onClick={() => window.open(item.url)}> - <ArrowUpRight - className="mr-2 h-4 w-4 scale-125" - strokeWidth={1.5} - /> - Open - </DropdownMenuItem> - <DropdownMenuItem - onClick={() => { - setIsDropdownOpen(false); - setIsEditDrawerOpen(true); - }} - > - <Edit3 className="mr-2 h-4 w-4" strokeWidth={1.5} /> - Edit - </DropdownMenuItem> - <DropdownMenuItem className="focus-visible:bg-red-100 focus-visible:text-red-400 dark:focus-visible:bg-red-100/10"> - <Trash2 className="mr-2 h-4 w-4" strokeWidth={1.5} /> - Delete - </DropdownMenuItem> - </DropdownMenuContent> - </DropdownMenu> - <Drawer - shouldScaleBackground - open={isEditDrawerOpen} - onOpenChange={setIsEditDrawerOpen} - > - <DrawerContent className="pb-10 lg:px-[25vw]"> - <DrawerHeader className="relative mt-10 px-0"> - <DrawerTitle className=" flex w-full justify-between"> - Edit Page Details - </DrawerTitle> - <DrawerDescription>Change the page details</DrawerDescription> - <a - target="_blank" - href={item.url} - className="text-rgray-11/90 bg-rgray-3 text-md absolute right-0 top-0 flex w-min translate-y-1/2 items-center justify-center gap-1 rounded-full px-5 py-1" - > - <img src={item.image ?? "/brain.png"} className="h-4 w-4" /> - {cleanUrl(item.url)} - </a> - </DrawerHeader> - - <div className="mt-5"> - <Label>Title</Label> - <Input - className="" - required - value={item.title ?? ""} - placeholder={item.title ?? "Enter the title for the page"} - /> - </div> - <div className="mt-5"> - <Label>Additional Context</Label> - <Textarea - className="" - value={item.content ?? ""} - placeholder={"Enter additional context for this page"} - /> - </div> - <DrawerFooter className="flex flex-row-reverse items-center justify-end px-0 pt-5"> - <DrawerClose className="flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition hover:bg-blue-100 hover:text-blue-400 focus-visible:bg-blue-100 focus-visible:text-blue-400 focus-visible:outline-none focus-visible:ring-blue-200 dark:hover:bg-blue-100/10 dark:focus-visible:bg-blue-100/10 dark:focus-visible:ring-blue-200/30"> - <Save className="mr-2 h-4 w-4 " strokeWidth={1.5} /> - Save - </DrawerClose> - <DrawerClose className="hover:bg-rgray-3 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 flex items-center justify-center rounded-md px-3 py-2 ring-2 ring-transparent transition focus-visible:outline-none"> - Cancel - </DrawerClose> - <DrawerClose className="mr-auto flex items-center justify-center rounded-md bg-red-100 px-3 py-2 text-red-400 ring-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-red-200 dark:bg-red-100/10 dark:focus-visible:ring-red-200/30"> - <Trash2 className="mr-2 h-4 w-4 " strokeWidth={1.5} /> - Delete - </DrawerClose> - </DrawerFooter> - </DrawerContent> - </Drawer> - </div> - ); -}; - -export const AddNewPagePopover: React.FC<{ - addNewUrl?: (url: string) => Promise<void>; -}> = ({ addNewUrl }) => { - const [isOpen, setIsOpen] = useState(false); - const [url, setUrl] = useState(""); - - return ( - <Popover open={isOpen} onOpenChange={setIsOpen}> - <PopoverTrigger asChild> - <button className="focus-visible:ring-rgray-7 ring-offset-rgray-3 ml-auto rounded-sm ring-2 ring-transparent ring-offset-2 focus-visible:outline-none"> - <Plus className="h-4 w-4 min-w-4" /> - </button> - </PopoverTrigger> - <PopoverContent align="start" side="top"> - <h1 className="mb-2 flex items-center justify-between "> - Add a new page - <button - onClick={() => { - setIsOpen(false); - addNewUrl?.(url); - }} - className="hover:bg-rgray-3 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 ring-offset-rgray-3 rounded-sm ring-2 ring-transparent ring-offset-2 transition focus-visible:outline-none" - > - <ChevronRight className="h-4 w-4" /> - </button> - </h1> - <Input - className="w-full" - autoFocus - onChange={(e) => setUrl(e.target.value)} - onKeyDown={(e) => { - if (e.key === "Enter") { - setIsOpen(false); - addNewUrl?.(url); - } - }} - placeholder="Enter the URL of the page" - /> - </PopoverContent> - </Popover> - ); -}; |