From eb7da996a7c2d617d276f296cac07a6fd5648664 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 27 Oct 2024 12:03:14 +0000
Subject: ui: Redesign the settings page and move it to its own layout

---
 apps/web/components/dashboard/sidebar/AllLists.tsx |  2 +-
 .../components/dashboard/sidebar/ModileSidebar.tsx |  3 +-
 .../dashboard/sidebar/ModileSidebarItem.tsx        | 27 -----------
 apps/web/components/dashboard/sidebar/Sidebar.tsx  |  2 +-
 .../components/dashboard/sidebar/SidebarItem.tsx   | 55 ----------------------
 5 files changed, 3 insertions(+), 86 deletions(-)
 delete mode 100644 apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
 delete mode 100644 apps/web/components/dashboard/sidebar/SidebarItem.tsx

(limited to 'apps/web/components/dashboard/sidebar')

diff --git a/apps/web/components/dashboard/sidebar/AllLists.tsx b/apps/web/components/dashboard/sidebar/AllLists.tsx
index b6cadea9..c48ddb0f 100644
--- a/apps/web/components/dashboard/sidebar/AllLists.tsx
+++ b/apps/web/components/dashboard/sidebar/AllLists.tsx
@@ -3,6 +3,7 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import SidebarItem from "@/components/shared/sidebar/SidebarItem";
 import { Button } from "@/components/ui/button";
 import { CollapsibleTriggerTriangle } from "@/components/ui/collapsible";
 import { MoreHorizontal, Plus } from "lucide-react";
@@ -13,7 +14,6 @@ import { ZBookmarkListTreeNode } from "@hoarder/shared/utils/listUtils";
 import { CollapsibleBookmarkLists } from "../lists/CollapsibleBookmarkLists";
 import { EditListModal } from "../lists/EditListModal";
 import { ListOptions } from "../lists/ListOptions";
-import SidebarItem from "./SidebarItem";
 
 export default function AllLists({
   initialData,
diff --git a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
index 7ccf6b8d..bfa91afa 100644
--- a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
@@ -1,8 +1,7 @@
+import MobileSidebarItem from "@/components/shared/sidebar/ModileSidebarItem";
 import HoarderLogoIcon from "@/public/icons/logo-icon.svg";
 import { ClipboardList, Search, Tag } from "lucide-react";
 
-import MobileSidebarItem from "./ModileSidebarItem";
-
 export default async function MobileSidebar() {
   return (
     <aside className="w-full">
diff --git a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx b/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
deleted file mode 100644
index 4d3436ea..00000000
--- a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-
-export default function MobileSidebarItem({
-  logo,
-  path,
-}: {
-  logo: React.ReactNode;
-  path: string;
-}) {
-  const currentPath = usePathname();
-  return (
-    <li
-      className={cn(
-        "flex w-full rounded-lg hover:bg-background",
-        path == currentPath ? "bg-background" : "",
-      )}
-    >
-      <Link href={path} className="m-auto px-3 py-2">
-        {logo}
-      </Link>
-    </li>
-  );
-}
diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx
index 14d019ff..8021ad36 100644
--- a/apps/web/components/dashboard/sidebar/Sidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx
@@ -1,4 +1,5 @@
 import { redirect } from "next/navigation";
+import SidebarItem from "@/components/shared/sidebar/SidebarItem";
 import { Separator } from "@/components/ui/separator";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
@@ -7,7 +8,6 @@ import { Archive, Home, Search, Tag } from "lucide-react";
 import serverConfig from "@hoarder/shared/config";
 
 import AllLists from "./AllLists";
-import SidebarItem from "./SidebarItem";
 
 export default async function Sidebar() {
   const session = await getServerAuthSession();
diff --git a/apps/web/components/dashboard/sidebar/SidebarItem.tsx b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
deleted file mode 100644
index 83ce776e..00000000
--- a/apps/web/components/dashboard/sidebar/SidebarItem.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
-
-export default function SidebarItem({
-  name,
-  logo,
-  path,
-  className,
-  linkClassName,
-  style,
-  collapseButton,
-  right = null,
-}: {
-  name: string;
-  logo: React.ReactNode;
-  path: string;
-  style?: React.CSSProperties;
-  className?: string;
-  linkClassName?: string;
-  right?: React.ReactNode;
-  collapseButton?: React.ReactNode;
-}) {
-  const currentPath = usePathname();
-  return (
-    <li
-      className={cn(
-        "relative rounded-lg hover:bg-accent",
-        path == currentPath ? "bg-accent/50" : "",
-        className,
-      )}
-      style={style}
-    >
-      {collapseButton}
-      <Link
-        href={path}
-        className={cn(
-          "flex w-full items-center rounded-[inherit] px-3 py-2",
-          linkClassName,
-        )}
-      >
-        <div className="flex w-full justify-between">
-          <div className="flex items-center gap-x-2">
-            {logo}
-            <span>{name}</span>
-          </div>
-          {right}
-        </div>
-      </Link>
-    </li>
-  );
-}
-- 
cgit v1.2.3-70-g09d2