upgrade pages, fix bugs, command pallet improvements (#25)

* upgrade pages, fix bugs, command pallet improvements

* Fix calendar from package upgrade

package.json

@@ -19,54 +19,56 @@
     "@heroicons/react": "^2.1.5",
     "@material-tailwind/react": "^2.1.10",
     "@mdxeditor/editor": "^3.14.0",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
+    "@reduxjs/toolkit": "^2.3.0",
     "@tanstack/react-table": "^8.20.5",
     "bcrypt": "^5.1.1",
-    "cache-manager": "^5.7.6",
+    "cache-manager": "^6.1.1",
+    "cacheable": "^1.8.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "date-fns": "^3.6.0",
-    "jose": "^5.8.0",
-    "lucide-react": "^0.438.0",
-    "mongodb": "^6.8.0",
+    "date-fns": "^4.1.0",
+    "jose": "^5.9.6",
+    "keyv": "^5.1.0",
+    "lucide-react": "^0.453.0",
+    "mongodb": "^6.9.0",
     "nanoid": "^5.0.7",
     "next": "14.2.15",
     "next-auth": "^4.24.8",
-    "openai": "^4.67.3",
+    "openai": "^4.68.1",
     "prismjs": "^1.29.0",
     "react": "^18",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "^9.1.4",
     "react-dom": "^18",
     "react-hotkeys-hook": "^4.5.1",
     "react-markdown": "^9.0.1",
     "react-redux": "^9.1.2",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@testing-library/react": "^16.0.1",
     "@types/bcrypt": "^5.0.2",
-    "@types/jsonwebtoken": "^9.0.6",
-    "@types/node": "^20",
+    "@types/jsonwebtoken": "^9.0.7",
+    "@types/node": "^22.7.7",
     "@types/prismjs": "^1.26.4",
     "@types/react": "18.2.42",
     "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.3",
     "eslint": "^8",
-    "eslint-config-next": "14.2.7",
+    "eslint-config-next": "14.2.15",
     "jsdom": "^25.0.1",
     "postcss": "^8",
     "rollup": ">=4.22.4",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5",
     "vite": ">=5.4.9",
     "vitest": "^2.1.3"

public/favicons/site.webmanifest

@@ -3,13 +3,13 @@
   "short_name": "MySite",
   "icons": [
     {
-      "src": "/web-app-manifest-192x192.png",
+      "src": "/favicons/web-app-manifest-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "/web-app-manifest-512x512.png",
+      "src": "/favicons/web-app-manifest-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"
@@ -18,4 +18,4 @@
   "theme_color": "#ffffff",
   "background_color": "#ffffff",
   "display": "standalone"
-}
+}

src/app/auth/login/page.tsx

@@ -46,6 +46,13 @@ export default function Page() {
         <div className="flex items-center justify-center py-12">
           <div className="mx-auto grid w-[350px] gap-6">
             <div className="grid gap-2 text-center">
+              <Image
+                src="/logo-trimmed.svg"
+                width={64}
+                height={64}
+                alt="Logo"
+                className="mx-auto"
+              />
               <h1 className="text-3xl font-bold">Login</h1>
               <p className="text-balance text-muted-foreground">
                 Enter your email below to login to your account
@@ -112,6 +119,7 @@ export default function Page() {
             width="1920"
             height="1080"
             className="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+            priority
           />
         </div>
       </div>

src/app/courses/[courseId]/enrollments/page.tsx

@@ -62,7 +62,7 @@ export default function Page() {
               group: "Page Actions",
               actionType: "callback",
               action: () => {
-                console.log("create enrollment")
+                setShowEnrollUserDialog(true)
               },
             }}
           >

src/components/command-pallete/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/redux/slices/commands.slice"
 import { PackageIcon } from "lucide-react"
 import { useParams } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import { useHotkeys, useHotkeysContext } from "react-hotkeys-hook"
 import { useDispatch, useSelector } from "react-redux"
 import OutsideClickClose from "../events/outside-click"
@@ -38,11 +38,21 @@ export const CommandPallete = () => {
   const scopedCommands = useSelector(selectScopedCommands)
   const isVisible = useSelector(selectIsCommandsVisible)
 
+  const toggle = useCallback(() => {
+    setIsOpen(!isOpen)
+    toggleScope("commands")
+    setIsActionMode(false)
+
+    if (!isOpen) {
+      dispatch(setIsCommandsVisible(false))
+    }
+  }, [dispatch, isOpen, setIsOpen, toggleScope])
+
   useEffect(() => {
     if (isVisible) {
       toggle()
     }
-  }, [isVisible])
+  }, [isVisible, toggle])
 
   const allCommands = [...(commands || []), ...scopedCommands]
   const filteredCommands = allCommands.filter((c) => {
@@ -62,16 +72,6 @@ export const CommandPallete = () => {
       return acc
     }, {} as { [key: string]: CommandModel[] }) || {}
 
-  const toggle = () => {
-    setIsOpen(!isOpen)
-    toggleScope("commands")
-    setIsActionMode(false)
-
-    if (!isOpen) {
-      dispatch(setIsCommandsVisible(false))
-    }
-  }
-
   useHotkeys("meta+k", () => toggle(), { scopes: ["global"] })
   useHotkeys("ctrl+k", () => toggle(), { scopes: ["global"] })
   useHotkeys("esc", () => toggle(), { scopes: ["commands"] })
@@ -130,6 +130,7 @@ export const CommandPallete = () => {
                   {value.map((command, commandIndex) => (
                     <CommandItem
                       key={key + i + command.name + commandIndex}
+                      className="cursor-pointer"
                       onSelect={() => {
                         setIsOpen(false)
                         toggle()

src/components/dialogs/create-announcement.dialog.tsx

@@ -134,7 +134,7 @@ export const CreateAnnouncementDialog = ({ isOpen, onClose }: Props) => {
                       console.log(date)
                       setVisibilityStartDate(date)
                     }}
-                    initialFocus
+                    autoFocus
                   />
                 </PopoverContent>
               </Popover>
@@ -171,7 +171,7 @@ export const CreateAnnouncementDialog = ({ isOpen, onClose }: Props) => {
                     mode="single"
                     selected={visibilityEndDate}
                     onSelect={(date) => setVisibilityEndDate(date)}
-                    initialFocus
+                    autoFocus
                   />
                 </PopoverContent>
               </Popover>

src/components/providers/index.tsx

@@ -4,11 +4,12 @@ import { useColorScheme } from "@/hooks/use-color-scheme.hook"
 import { useIsInstall } from "@/hooks/use-install.hook"
 import { THEMES } from "@/lib/theme"
 import { ColorScheme } from "@/models/user-settings.model"
+import { selectToken } from "@/redux/slices/auth.slice"
 import { store } from "@/redux/store"
 import { ThemeProvider } from "@material-tailwind/react"
 import { usePathname } from "next/navigation"
 import { HotkeysProvider } from "react-hotkeys-hook"
-import { Provider } from "react-redux"
+import { Provider, useSelector } from "react-redux"
 import { CommandPallete } from "../command-pallete"
 import { Spinner } from "../loaders/spinner"
 import { SideNav } from "../sidenav"
@@ -34,6 +35,10 @@ export const Providers = ({ children }: { children: React.ReactNode }) => {
 }
 
 const CommandsProvider = ({ children }: { children: React.ReactNode }) => {
+  const token = useSelector(selectToken)
+
+  if (!token) return <>{children}</>
+
   return (
     <>
       <CommandPallete />
@@ -73,7 +78,8 @@ const AuthProvider = ({ children }: { children: React.ReactNode }) => {
 }
 
 export const CustomThemeProvider = ({ children }: { children: any }) => {
-  const scheme = useColorScheme()
+  const token = useSelector(selectToken)
+  const scheme = useColorScheme(!token)
 
   return (
     <ThemeProvider value={THEMES[scheme || ColorScheme.Light]}>

src/components/ui/calendar.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import * as React from "react"
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import * as React from "react"
 import { DayPicker } from "react-day-picker"
 
-import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
@@ -60,8 +60,12 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+        PreviousMonthButton: ({ ...props }) => (
+          <ChevronLeftIcon className="h-4 w-4" />
+        ),
+        NextMonthButton: ({ ...props }) => (
+          <ChevronRightIcon className="h-4 w-4" />
+        ),
       }}
       {...props}
     />

src/models/enrollment.model.ts

@@ -15,10 +15,10 @@ export interface Enrollment {
 }
 
 export enum EnrollmentRole {
-  student = "student",
-  teacher = "teacher",
-  admin = "admin",
-  owner = "owner",
+  student = "Student",
+  teacher = "Teacher",
+  admin = "Admin",
+  owner = "Owner",
 }
 
 export type EnrollmentCreatePayload = Omit<Enrollment, "id">

src/redux/slices/auth.slice.ts

@@ -30,6 +30,7 @@ export const authSlice = createSlice({
 })
 
 export const selectUser = (state: { auth: AuthState }) => state.auth.user
+export const selectToken = (state: { auth: AuthState }) => state.auth.token
 
 export const { setToken, setUserId, setUser } = authSlice.actions
 

src/server/services/cache.service.ts

@@ -1,20 +1,17 @@
-import { caching, MemoryCache } from "cache-manager"
-import { logService } from "./log.service"
+import { createCache } from "cache-manager"
+import { CacheableMemory } from "cacheable"
+import { Keyv } from "keyv"
 
-let cache: MemoryCache | undefined
+const cache = createCache({
+  stores: [
+    //  High performance in-memory cache with LRU and TTL
+    new Keyv({
+      store: new CacheableMemory({ ttl: 60000, lruSize: 5000 }),
+    }),
+  ],
+})
 
 export const getCacheItem = async <T>(key: string) => {
-  if (!cache) {
-    try {
-      cache = await caching("memory", {
-        max: 1000,
-        ttl: 60 * 60 * 1000 /*milliseconds*/,
-      })
-    } catch (err) {
-      logService.error("Error initializing cache", err)
-    }
-  }
-
   return await cache!.get<T>(key)
 }