Add theme toggle, add create and edit task model, cleanup old endpoin…

…ts, add type check script
vguleaev · Sep 8, 2024 · 483f937 · 483f937
1 parent fc61069
commit 483f937
Show file tree

Hide file tree

Showing 25 changed files with 492 additions and 579 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" class="light">
 
 <head>
   <meta charset="UTF-8" />

diff --git a/frontend/package.json b/frontend/package.json
@@ -7,7 +7,8 @@
     "dev": "bunx --bun vite",
     "build": "bunx --bun vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.1",

diff --git a/frontend/src/components/backlog.tsx b/frontend/src/components/backlog.tsx
@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
-import { useBacklog, useDeleteGroup } from '@/hooks/expenses.hooks';
+import { useBacklog, useDeleteGroup } from '@/hooks/backlog-tasks.hooks';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
   CalendarIcon,
@@ -26,6 +26,8 @@ import { ConfirmDialog } from './confirm-dialog';
 import { BacklogTaskGroupWithTasks } from '@server/routes/backlog.route';
 import { useState } from 'react';
 import { useGroupModalStore } from '@/stores/group-modal.store';
+import { useTaskModalStore } from '@/stores/task-modal.store';
+import { BacklogTask } from '@server/db/schema';
 
 export function Backlog() {
   const { isPending, data: backlog } = useBacklog();
@@ -37,6 +39,11 @@ export function Backlog() {
     setSelectedGroup: state.setSelectedGroup,
   }));
 
+  const { setIsTaskModalOpen, setSelectedTask } = useTaskModalStore((state) => ({
+    setIsTaskModalOpen: state.setIsOpen,
+    setSelectedTask: state.setSelectedTask,
+  }));
+
   const onDelete = async (id: string) => {
     await deleteGroup({ id });
   };
@@ -46,6 +53,11 @@ export function Backlog() {
     setIsGroupModalOpen(true);
   };
 
+  const onTaskTitleClick = (task: BacklogTask) => {
+    setSelectedTask(task);
+    setIsTaskModalOpen(true);
+  };
+
   const renderSkeletons = () => {
     return (
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 min-h-[600px]">
@@ -69,7 +81,7 @@ export function Backlog() {
 
   const renderSingleNewGroupPlaceholder = (key: number) => {
     return (
-      <Card key={key} className="min-h-full bg-muted/20">
+      <Card key={key} className="min-h-full bg-muted/40 dark:bg-muted/20">
         <CardContent className="p-4">
           <div>
             <Button variant={'outline'} onClick={() => setIsGroupModalOpen(true)}>
@@ -127,7 +139,7 @@ export function Backlog() {
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6 min-h-[600px]">
       {backlog &&
         backlog.groups.map((group) => (
-          <Card key={group.name} className="min-h-full bg-muted/20">
+          <Card key={group.name} className="min-h-full bg-muted/40 dark:bg-muted/20">
             <CardHeader className="flex flex-row justify-between items-start">
               <CardTitle>{group.name}</CardTitle>
               {renderGroupOptionsDropdown(group)}
@@ -139,7 +151,11 @@ export function Backlog() {
                     <CardContent className="p-4">
                       <div className="grid grid-cols-[1fr,auto] gap-2">
                         <div className="space-y-2">
-                          <h3 className="font-semibold line-clamp-2">{task.title}</h3>
+                          <h3
+                            className="font-semibold line-clamp-2 hover:underline cursor-pointer"
+                            onClick={() => onTaskTitleClick(task)}>
+                            {task.title}
+                          </h3>
                           <div className="flex items-center space-x-2 text-sm text-gray-500">
                             <PriorityIcon priority={task.priority} />
                             <span>{startCase(toLower(task.priority))}</span>

diff --git a/frontend/src/components/group-modal.tsx b/frontend/src/components/group-modal.tsx
@@ -5,7 +5,7 @@ import { LoaderCircle } from 'lucide-react';
 import { zodValidator } from '@tanstack/zod-form-adapter';
 import { useForm } from '@tanstack/react-form';
 import { createBacklogTaskGroupSchema } from '@server/validation/backlog-task-groups.schema';
-import { useCreateGroup, useUpdateGroup } from '@/hooks/expenses.hooks';
+import { useCreateGroup, useUpdateGroup } from '@/hooks/backlog-tasks.hooks';
 import { useGroupModalStore } from '@/stores/group-modal.store';
 
 export function GroupModal() {

diff --git a/frontend/src/components/navbar.tsx b/frontend/src/components/navbar.tsx
@@ -1,4 +1,4 @@
-import { CircleUser, Menu, Package2, Search } from 'lucide-react';
+import { CircleUser, Menu, Search } from 'lucide-react';
 import { Link } from '@tanstack/react-router';
 
 import { Button } from '@/components/ui/button';
@@ -14,6 +14,7 @@ import Logo from '@/assets/app-logo.svg?react';
 import { Input } from '@/components/ui/input';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { useCurrentUser } from '@/hooks/user.hooks';
+import { ThemeToggle } from './theme-toggle';
 
 export function Navbar() {
   const { data } = useCurrentUser();
@@ -28,16 +29,10 @@ export function Navbar() {
         <Link to="/backlog" className="text-muted-foreground transition-colors hover:text-foreground">
           Backlog
         </Link>
-        <Link to="/expenses" className="text-muted-foreground transition-colors hover:text-foreground">
-          Expenses
-        </Link>
-        <Link to="/create-expense" className="text-muted-foreground transition-colors hover:text-foreground">
-          Create
-        </Link>
         <Link to="/about" className="text-muted-foreground transition-colors hover:text-foreground">
           About
         </Link>
-        <Link to="/profile" className="text-foreground transition-colors hover:text-foreground">
+        <Link to="/profile" className="text-muted-foreground transition-colors hover:text-foreground">
           Profile
         </Link>
       </nav>
@@ -51,23 +46,17 @@ export function Navbar() {
         <SheetContent side="left">
           <nav className="grid gap-6 text-lg font-medium">
             <Link href="#" className="flex items-center gap-2 text-lg font-semibold">
-              <Package2 className="h-6 w-6" />
-              <span className="sr-only">Acme Inc</span>
-            </Link>
-            <Link href="#" className="text-muted-foreground hover:text-foreground">
-              Dashboard
-            </Link>
-            <Link href="#" className="text-muted-foreground hover:text-foreground">
-              Orders
+              <Logo className="h-7 w-7 mr-2"></Logo>
+              Planner
             </Link>
-            <Link href="#" className="text-muted-foreground hover:text-foreground">
-              Products
+            <Link to="/backlog" className="text-muted-foreground hover:text-foreground">
+              Backlog
             </Link>
-            <Link href="#" className="text-muted-foreground hover:text-foreground">
-              Customers
+            <Link to="/about" className="text-muted-foreground hover:text-foreground">
+              About
             </Link>
-            <Link href="#" className="hover:text-foreground">
-              Settings
+            <Link to="/profile" className="text-muted-foreground hover:text-foreground">
+              Profile
             </Link>
           </nav>
         </SheetContent>
@@ -83,6 +72,9 @@ export function Navbar() {
             />
           </div>
         </form>
+        <div>
+          <ThemeToggle />
+        </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="secondary" size="icon" className="rounded-full">

diff --git a/frontend/src/components/providers/theme-provider.tsx b/frontend/src/components/providers/theme-provider.tsx
@@ -0,0 +1,67 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+
+  return context;
+};
diff --git a/frontend/src/components/task-creation-modal.tsx b/frontend/src/components/task-creation-modal.tsx