From d4592196f9df4e73715007d3e0c2db575f7d1d62 Mon Sep 17 00:00:00 2001
From: Yash <yashverma30115@gmail.com>
Date: Fri, 5 Apr 2024 08:49:49 +0000
Subject: [PATCH] delete no longer needed components

---
 .../src/components/Sidebar/CategoryItem.tsx   | 307 ------------------
 apps/web/src/components/Sidebar/PagesItem.tsx | 189 -----------
 2 files changed, 496 deletions(-)
 delete mode 100644 apps/web/src/components/Sidebar/CategoryItem.tsx
 delete mode 100644 apps/web/src/components/Sidebar/PagesItem.tsx

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