v2-dashboard: created a new ui for the dashboard #116

apps/web/package.json

@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
+    "geist": "^1.5.1",
     "lucide-react": "^0.456.0",
     "next": "15.5.3",
     "next-auth": "^4.24.11",

apps/web/src/app/(main)/dashboard/home/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import React from "react";
 import { useProjectTitleStore } from "@/store/useProjectTitleStore";
 import Dashboard from "../page";
 import { useProjectsData } from "@/store/useProjectsDataStore";
@@ -16,7 +16,7 @@ const Home = () => {
     const initializeState = () => {
       setData(projectsOfTheWeek);
       setRenderProjects(true);
-      setProjectTitle("Projects of the week");
+      setProjectTitle("Featured projects");
     };
 
     initializeState();

apps/web/src/app/(main)/dashboard/layout.tsx

@@ -1,30 +1,34 @@
 "use client";
-import { DashboardHeader } from "@/components/dashboard/DashboardHeader";
 import Sidebar from "@/components/dashboard/Sidebar";
 import FiltersContainer from "@/components/ui/FiltersContainer";
 import { useFilterStore } from "@/store/useFilterStore";
 import { useShowSidebar } from "@/store/useShowSidebar";
+import { IconWrapper } from "@/components/ui/IconWrapper";
+import { Bars3Icon } from "@heroicons/react/24/outline";
 
 export default function DashboardLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const { showFilters } = useFilterStore();
-  const { showSidebar } = useShowSidebar();
+  const { showSidebar, setShowSidebar } = useShowSidebar();
   return (
-    <div className="flex flex-col md:gap-3">
-      <div className="flex w-full h-16">
-        <DashboardHeader></DashboardHeader>
-      </div>
-      <div className="flex flex-row w-full">
-        {showFilters && <FiltersContainer></FiltersContainer>}
-        <aside
-          className={`w-48 md:w-[40%] xl:w-[20%] ${showSidebar ? "block relative" : "hidden"} xl:block`}
-        >
-          <Sidebar></Sidebar>
-        </aside>
-        <main className="flex-grow">{children}</main>
+    <div className="flex w-screen h-screen bg-[#0a0a0b] overflow-hidden">
+      {showFilters && <FiltersContainer />}
+      <aside className={`h-full ${!showSidebar && "hidden xl:block"}`}>
+        <Sidebar />
+      </aside>
+      <div className="flex-1 flex flex-col h-full">
+        <div className="xl:hidden flex items-center h-16 px-4 border-b border-[#1a1a1d]">
+          <IconWrapper onClick={() => setShowSidebar(true)}>
+            <Bars3Icon className="size-5 text-ox-purple" />
+          </IconWrapper>
+          <h1 className="ml-4 text-lg font-semibold text-ox-white">Opensox</h1>
+        </div>
+        <main className="flex-1 h-full overflow-auto">
+          {children}
+        </main>
       </div>
     </div>
   );

apps/web/src/app/(main)/dashboard/projects/page.tsx

@@ -4,17 +4,20 @@ import { useRenderProjects } from "@/store/useRenderProjectsStore";
 import Dashboard from "../page";
 import { useEffect } from "react";
 import { useProjectTitleStore } from "@/store/useProjectTitleStore";
+import { useProjectsData } from "@/store/useProjectsDataStore";
 
 const Projects = () => {
   const { setRenderProjects } = useRenderProjects();
   const { setProjectTitle } = useProjectTitleStore();
+  const { setData } = useProjectsData();
 
   useEffect(() => {
-    setRenderProjects(false);
-    setProjectTitle("Projects of the week");
-  }, [setRenderProjects, setProjectTitle]);
+    setRenderProjects(true); // Change to true to always render the container
+    setProjectTitle("Projects");
+    setData([]); // Clear any existing projects
+  }, [setRenderProjects, setProjectTitle, setData]);
 
-  return <Dashboard></Dashboard>;
+  return <Dashboard />;
 };
 
 export default Projects;

apps/web/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { authConfig } from "@/lib/auth/config";
 import { SessionWrapper } from "./SessionWrapper";
 import SupportDropdown from "@/components/landing-sections/SupportDropdown";
 import { TRPCProvider } from "@/providers/trpc-provider";
+import { GeistSans } from "geist/font/sans";
 
 const dmReg = localFont({
   src: "./fonts/DMMono-Regular.ttf",
@@ -39,7 +40,7 @@ export default async function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body
-        className={`${dmMed.variable} ${dmReg.variable} antialiased bg-background`}
+        className={`${GeistSans.className} ${dmMed.variable} ${dmReg.variable} antialiased bg-background`}
       >
         <PostHogProvider>
           <ThemeProvider

apps/web/src/components/dashboard/DashboardContainer.tsx

@@ -7,34 +7,36 @@ import { useLoading } from "@/store/useLoadingStore";
 import { useProjectsNotFoundStore } from "@/store/useProjectsFoundStore";
 import { ErrMsg } from "../ui/ErrMsg";
 import SpinnerElm from "../ui/SpinnerElm";
+import { usePathname } from "next/navigation";
 
 export default function DashboardContainer() {
   const { renderProjects } = useRenderProjects();
   const { data } = useProjectsData();
   const { loading } = useLoading();
   const { projectsNotFound } = useProjectsNotFoundStore();
+  const pathname = usePathname();
+
+  const isProjectsPage = pathname === "/dashboard/projects";
+
   return (
-    <div
-      className={`h-[80vh] md:h-[88vh] rounded-lg mx-1 md:mx-4 bg-ox-black-1 border border-ox-gray ${!renderProjects ? "flex items-center justify-center" : ""}`}
-    >
-      <div className={`max-h-full ${!loading ? "overflow-y-scroll" : ""}`}>
-        {renderProjects && (
+    <div className={`min-h-[calc(100vh-64px)] ${isProjectsPage ? "flex items-center justify-center" : ""}`}>
+      <div className={`w-full ${!loading ? "h-full" : ""}`}>
+        {renderProjects && !loading && (
           <ProjectsContainer projects={data}></ProjectsContainer>
         )}
         {loading && (
-          <SpinnerElm text={"loading cool projects for you..."}></SpinnerElm>
-        )}
-        {projectsNotFound && (
-          <ErrMsg
-            text={
-              "No projects were found matching the selected filters. Please adjust the filters and try again."
-            }
-          ></ErrMsg>
+          <div className="flex items-center justify-center h-full">
+            <SpinnerElm text={"loading cool projects for you..."}></SpinnerElm>
+          </div>
         )}
-        {!renderProjects && !loading && (
-          <ErrMsg
-            text={"Click on 'Find Projects' to see the magic."}
-          ></ErrMsg>
+        {projectsNotFound && !loading && (
+          <div className="flex items-center justify-center h-full">
+            <ErrMsg
+              text={
+                "No projects were found matching the selected filters. Please adjust the filters and try again."
+              }
+            ></ErrMsg>
+          </div>
         )}
       </div>
     </div>