various changes

Author: webdevcody

TODO.md

@@ -1,13 +1,18 @@
-# TODO NOW
+# Bugs
 
-- if a user has purcahsed a course, show a message in the /purchase page so they don't get confused if they happen to navigate to that page on accident and do not show the buy now button or pricing there. instead show a button which will redirect them to the learn/$first-slug (use the slug hook)
-- ability to download the entire video as a zip
-- if on last segment, show a "complete course" button and navigate to a certificate page
-- after clicking the Next Video button, I need to invalidate the queryClient cache for the "progress" entries
-- refactor the approach to instead just fetch the array of progress entries instead of doing the left join stuff
-- rename progress to completed_segments
+- when deleting a segment the app crashes (I think it's related to logic for redirecting the user to a previous segment)
+- when reordering modules, the navigation buttons do not seem to navigate the correct order of modules... are we sorting the modules by order? are we correctly updating the order on modules when we re-arrange them?
 
-# Tech Debt
+# Features
 
-- clean up the code and put all .sh scripts in /infra directory
-- update the setup.sh script to also install docker compose, etc
+- add metric that users can see how many other users completed this segment (help drive more motivation maybe?)
+- add the ability for an admin to email all the premium users in the system to let them know new segments or modules are created. Add some type of MJLM editor / preview feature. This should use AWS SES. Provide a generic update template one can start editing. Hopefully support markdown to generate the MJML and send out the styled emails.
+- analytics for admins to see which students are finishing which segments
+- analytics for admins to get notifications when students comments on segments with a built in way to respond directly on the same notification page
+- analytics for when users view the site, sign up, and purchase by day
+  - analytics on how the ratio between views, sign ups, premiums
+- gamification maybe? badges?
+- certificates on completion?
+- the ability to pick custom lucide-icons for the modules
+- editing the segment should change the nested layout, not go to a new page
+- experiment with having "new segment" show a modal with the form

docs/design.md

@@ -56,19 +56,6 @@ This document outlines the comprehensive design system used for the learning pla
 
 ## 🧩 Component Patterns
 
-### Card System
-
-```css
-.module-card {
-  @apply relative overflow-hidden rounded-xl 
-         bg-gradient-to-br from-white to-gray-50/50 
-         dark:from-gray-900 dark:to-gray-800/50 
-         border border-gray-200/60 dark:border-gray-700/60 
-         shadow-elevation-2 hover:shadow-elevation-3 
-         transition-all duration-300;
-}
-```
-
 ### Button Variants
 
 - **Primary**: `btn-gradient` (Green gradient with glow effects)

src/components/ui/alert-dialog.tsx

@@ -25,16 +25,53 @@ const AlertDialogOverlay = React.forwardRef<
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
+type AnimationType =
+  | "fade"
+  | "slide-left"
+  | "slide-right"
+  | "slide-in-bottom-left"
+  | "slide-in-top-left"
+  | "slide-in-top-right"
+  | "slide-in-bottom-right";
+
+const getAnimationClasses = (animation: AnimationType) => {
+  const baseClasses =
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
+
+  switch (animation) {
+    case "fade":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`;
+    case "slide-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2`;
+    case "slide-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2`;
+    case "slide-in-bottom-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-bottom-[48%]`;
+    case "slide-in-top-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`;
+    case "slide-in-top-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-right-1/2 data-[state=open]:slide-in-from-top-[48%]`;
+    case "slide-in-bottom-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-right-1/2 data-[state=open]:slide-in-from-bottom-[48%]`;
+    default:
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2`;
+  }
+};
+
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    animation?: AnimationType;
+  }
+>(({ className, animation = "slide-left", ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+        getAnimationClasses(animation),
+        "sm:rounded-lg",
         className
       )}
       {...props}

src/components/ui/button.tsx

@@ -4,16 +4,17 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "~/lib/utils";
 
+// TODO: DO NOT REMOVE, THIS IS A STYLE I THOUGHT WAS PRETTY SLICK
+// module-card px-4 py-2 flex items-center gap-2 text-sm font-medium text-theme-700 dark:text-theme-300 hover:text-theme-800 dark:hover:text-theme-200 transition-all duration-200 hover:shadow-elevation-3
+
 const buttonVariants = cva(
-  "rounded-lg inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "cursor-pointer rounded-lg inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-theme-500 text-black shadow hover:bg-theme-600 dark:bg-theme-400 dark:hover:bg-theme-500",
+          "w-full justify-center module-card px-4 py-2 text-theme-700 dark:text-theme-300 hover:text-theme-800 dark:hover:text-theme-200 transition-all duration-200 hover:shadow-elevation-3",
         destructive:
-          "bg-red-500 text-white shadow-sm hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700",
-        "destructive-outline":
           "border border-red-500 bg-transparent text-red-500 shadow-sm hover:bg-red-50 hover:text-red-600 dark:border-red-400 dark:text-red-400 dark:hover:bg-red-950/50 dark:hover:text-red-300",
         outline:
           "border border-theme-200 bg-background shadow-sm hover:bg-theme-100 hover:text-theme-700 dark:border-theme-800 dark:hover:bg-theme-950 dark:hover:text-theme-300",

src/components/ui/dialog.tsx

@@ -27,16 +27,53 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+type DialogAnimationType =
+  | "fade"
+  | "slide-left"
+  | "slide-right"
+  | "slide-in-bottom-left"
+  | "slide-in-top-left"
+  | "slide-in-top-right"
+  | "slide-in-bottom-right";
+
+const getDialogAnimationClasses = (animation: DialogAnimationType) => {
+  const baseClasses =
+    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
+
+  switch (animation) {
+    case "fade":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95`;
+    case "slide-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2`;
+    case "slide-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=open]:slide-in-from-right-1/2`;
+    case "slide-in-bottom-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-bottom-[48%]`;
+    case "slide-in-top-left":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]`;
+    case "slide-in-top-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-right-1/2 data-[state=open]:slide-in-from-top-[48%]`;
+    case "slide-in-bottom-right":
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-right-1/2 data-[state=closed]:slide-out-to-bottom-[48%] data-[state=open]:slide-in-from-right-1/2 data-[state=open]:slide-in-from-bottom-[48%]`;
+    default:
+      return `${baseClasses} data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=open]:slide-in-from-left-1/2`;
+  }
+};
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    animation?: DialogAnimationType;
+  }
+>(({ className, children, animation = "slide-left", ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200",
+        getDialogAnimationClasses(animation),
+        "sm:rounded-lg",
         className
       )}
       {...props}

src/data-access/modules.ts

@@ -58,3 +58,7 @@ export async function reorderModules(updates: { id: number; order: number }[]) {
     return results;
   });
 }
+
+export async function deleteModule(moduleId: number) {
+  return database.delete(modules).where(eq(modules.id, moduleId));
+}

src/hooks/use-continue-slug.ts

@@ -11,8 +11,12 @@ export function useContinueSlug() {
       const lastWatched = getLastWatchedSegment();
       if (lastWatched) {
         setCourseLink(lastWatched);
-      } else if (firstSegment.data) {
+      } else if (firstSegment.data?.slug) {
         setCourseLink(firstSegment.data.slug);
+      } else {
+        // If no first segment is available, set to empty string
+        // This will be handled by the header component
+        setCourseLink("");
       }
     };