aboutsummaryrefslogtreecommitdiff
path: root/apps/web/src/components
diff options
context:
space:
mode:
authorYash <[email protected]>2024-04-05 08:49:49 +0000
committerYash <[email protected]>2024-04-05 08:49:49 +0000
commitd4592196f9df4e73715007d3e0c2db575f7d1d62 (patch)
tree34112e138d56f13d9c5d8dd3608fc6587d2f5025 /apps/web/src/components
parent`addSpace` function to the context (diff)
downloadsupermemory-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.tsx307
-rw-r--r--apps/web/src/components/Sidebar/PagesItem.tsx189
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>
- );
-};