refactor the slug layout page by creating a ton of smaller components

Author: webdevcody

src/routes/learn/$slug/-components/admin-controls.tsx

@@ -0,0 +1,16 @@
+import { type Segment } from "~/db/schema";
+import { EditVideoButton } from "./edit-video-button";
+import { DeleteVideoButton } from "./delete-video-button";
+
+interface AdminControlsProps {
+  currentSegment: Segment;
+}
+
+export function AdminControls({ currentSegment }: AdminControlsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <EditVideoButton currentSegment={currentSegment} />
+      <DeleteVideoButton currentSegmentId={currentSegment.id} />
+    </div>
+  );
+}

src/routes/learn/$slug/-components/comments-panel.tsx

@@ -0,0 +1,103 @@
+import { MessageSquare } from "lucide-react";
+import { Suspense, useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getCommentsQuery } from "~/lib/queries/comments";
+import { CommentForm } from "./comment-form";
+import { CommentList } from "./comment-list";
+
+interface CommentsPanelProps {
+  currentSegmentId: number;
+  isLoggedIn: boolean;
+  activeTab: "content" | "comments";
+}
+
+export function CommentsPanel({
+  currentSegmentId,
+  isLoggedIn,
+  activeTab,
+}: CommentsPanelProps) {
+  // Check if there are existing comments to determine initial form visibility
+  const { data: existingComments } = useQuery(
+    getCommentsQuery(currentSegmentId)
+  );
+  const [showCommentForm, setShowCommentForm] = useState(
+    () => (existingComments && existingComments.length > 0) || false
+  );
+
+  // Update form visibility when comments data changes
+  useEffect(() => {
+    if (existingComments && existingComments.length > 0) {
+      setShowCommentForm(true);
+    }
+  }, [existingComments]);
+
+  const onStartDiscussion = () => setShowCommentForm(true);
+
+  return (
+    <div className="animate-fade-in space-y-8">
+      {/* Comment Form Section */}
+      {showCommentForm && (
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-foreground flex items-center gap-2">
+              <MessageSquare className="h-5 w-5 text-theme-600 dark:text-theme-400" />
+              Join the Discussion
+            </h3>
+            {isLoggedIn && (
+              <div className="text-sm text-muted-foreground">
+                Share your thoughts
+              </div>
+            )}
+          </div>
+          <CommentForm
+            autoFocus={showCommentForm && activeTab === "comments"}
+          />
+        </div>
+      )}
+
+      {/* Comments List Section */}
+      <div className={showCommentForm ? "border-t border-border/60 pt-6" : ""}>
+        <Suspense
+          fallback={
+            <div className="space-y-4">
+              {/* Loading header */}
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="h-5 w-5 rounded bg-muted animate-pulse"></div>
+                  <div className="h-5 w-24 rounded bg-muted animate-pulse"></div>
+                </div>
+                <div className="h-4 w-20 rounded bg-muted animate-pulse"></div>
+              </div>
+
+              {/* Loading comments */}
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="module-card animate-pulse">
+                  <div className="p-4">
+                    <div className="flex gap-3">
+                      <div className="h-10 w-10 rounded-full bg-muted"></div>
+                      <div className="flex-1 space-y-2">
+                        <div className="flex items-center gap-2">
+                          <div className="h-4 w-24 rounded bg-muted"></div>
+                          <div className="h-3 w-16 rounded bg-muted"></div>
+                        </div>
+                        <div className="space-y-1">
+                          <div className="h-4 w-full rounded bg-muted"></div>
+                          <div className="h-4 w-3/4 rounded bg-muted"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          }
+        >
+          <CommentList
+            showCommentForm={showCommentForm}
+            onStartDiscussion={onStartDiscussion}
+          />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

src/routes/learn/$slug/-components/content-panel.tsx

@@ -0,0 +1,24 @@
+import { FileText } from "lucide-react";
+import { type Segment } from "~/db/schema";
+import { MarkdownContent } from "~/routes/learn/-components/markdown-content";
+
+interface ContentPanelProps {
+  currentSegment: Segment;
+}
+
+export function ContentPanel({ currentSegment }: ContentPanelProps) {
+  if (currentSegment.content) {
+    return (
+      <div className="animate-fade-in">
+        <MarkdownContent content={currentSegment.content} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="text-center py-8 text-muted-foreground">
+      <FileText className="h-12 w-12 mx-auto mb-4 opacity-50" />
+      <p>No lesson content available for this segment.</p>
+    </div>
+  );
+}

src/routes/learn/$slug/-components/delete-video-button.tsx

@@ -0,0 +1,93 @@
+import { Button } from "~/components/ui/button";
+import { Trash2 } from "lucide-react";
+import { createServerFn } from "@tanstack/react-start";
+import { z } from "zod";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/ui/alert-dialog";
+import { adminMiddleware } from "~/lib/auth";
+import { deleteSegmentUseCase } from "~/use-cases/segments";
+import { useToast } from "~/hooks/use-toast";
+
+// TODO: there is a bug when trying to delet a segment
+export const deleteSegmentFn = createServerFn()
+  .middleware([adminMiddleware])
+  .validator(z.object({ segmentId: z.coerce.number() }))
+  .handler(async ({ data }) => {
+    await deleteSegmentUseCase(data.segmentId);
+  });
+
+interface DeleteVideoButtonProps {
+  currentSegmentId: number;
+}
+
+export function DeleteVideoButton({
+  currentSegmentId,
+}: DeleteVideoButtonProps) {
+  const { toast } = useToast();
+
+  const handleDeleteSegment = async () => {
+    try {
+      await deleteSegmentFn({ data: { segmentId: currentSegmentId } });
+      toast({
+        title: "Content deleted successfully!",
+        description: "You will be redirected to the content list.",
+      });
+    } catch (error) {
+      toast({
+        title: "Failed to delete content",
+        description: "Please try again.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button
+          variant="outline"
+          className="btn-red-border-gradient px-4 py-2 flex items-center gap-2 text-sm font-medium rounded-md !bg-transparent !border-red-500"
+        >
+          <Trash2 className="h-4 w-4" />
+          Delete
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent className="bg-background border border-border shadow-elevation-3 rounded-xl max-w-md mx-auto">
+        <AlertDialogHeader className="space-y-4 p-6">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-gradient-to-br from-red-100 to-red-200 dark:from-red-900 dark:to-red-800">
+              <Trash2 className="h-5 w-5 text-red-600 dark:text-red-400" />
+            </div>
+            <AlertDialogTitle className="text-xl font-semibold text-foreground leading-tight">
+              Are you absolutely sure?
+            </AlertDialogTitle>
+          </div>
+          <AlertDialogDescription className="text-muted-foreground text-sm leading-relaxed">
+            This action cannot be undone. This will permanently delete this
+            content and all its associated files and attachments.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter className="flex gap-3 p-6 pt-0">
+          <AlertDialogCancel className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-all duration-200 border border-border rounded-md hover:bg-muted">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleDeleteSegment}
+            className="btn-gradient-red px-4 py-2 text-sm font-medium rounded-md"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/routes/learn/$slug/-components/edit-video-button.tsx

@@ -0,0 +1,19 @@
+import { Link } from "@tanstack/react-router";
+import { Button } from "~/components/ui/button";
+import { Edit } from "lucide-react";
+import { type Segment } from "~/db/schema";
+
+interface EditVideoButtonProps {
+  currentSegment: Segment;
+}
+
+export function EditVideoButton({ currentSegment }: EditVideoButtonProps) {
+  return (
+    <Link to="/learn/$slug/edit" params={{ slug: currentSegment.slug }}>
+      <Button className="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">
+        <Edit className="h-4 w-4" />
+        Edit
+      </Button>
+    </Link>
+  );
+}

src/routes/learn/$slug/-components/feedback-button.tsx

@@ -0,0 +1,17 @@
+import { Link } from "@tanstack/react-router";
+import { MessageSquare } from "lucide-react";
+import { Button } from "~/components/ui/button";
+
+export function FloatingFeedbackButton() {
+  return (
+    <Link to="/create-testimonial" className="fixed bottom-6 right-6 z-50">
+      <Button
+        size="lg"
+        className="mt-4 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"
+      >
+        <MessageSquare className="w-5 h-5 mr-2" />
+        Leave a Testimonial
+      </Button>
+    </Link>
+  );
+}

src/routes/learn/$slug/-components/upgrade-placeholder.tsx

@@ -0,0 +1,112 @@
+import { Link } from "@tanstack/react-router";
+import { Badge } from "~/components/ui/badge";
+import { ArrowRight, CheckCircle, Lock, BookOpen } from "lucide-react";
+import { type Segment } from "~/db/schema";
+
+interface UpgradePlaceholderProps {
+  currentSegment: Segment;
+}
+
+export function UpgradePlaceholder({
+  currentSegment,
+}: UpgradePlaceholderProps) {
+  return (
+    <div className="max-w-5xl mx-auto space-y-6">
+      {/* Premium Content Header */}
+      <div className="module-card p-8 text-center">
+        <div className="relative">
+          {/* Background decoration */}
+          <div className="absolute inset-0 bg-gradient-to-br from-amber-50/50 to-orange-50/50 dark:from-amber-950/20 dark:to-orange-950/20 rounded-xl"></div>
+
+          {/* Content */}
+          <div className="py-8 relative space-y-6">
+            {/* Premium badge and lock icon */}
+            <div className="flex items-center justify-center space-x-4">
+              <div className="p-4 rounded-full bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-900 dark:to-orange-900 shadow-elevation-2">
+                <Lock className="h-8 w-8 text-amber-600 dark:text-amber-400" />
+              </div>
+              <Badge
+                variant="outline"
+                className="bg-amber-50 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800 px-4 py-2 text-sm font-semibold"
+              >
+                PREMIUM CONTENT
+              </Badge>
+            </div>
+
+            {/* Title */}
+            <div className="space-y-2">
+              <h1 className="text-3xl font-bold text-foreground leading-tight">
+                {currentSegment.title}
+              </h1>
+              <p className="text-lg text-muted-foreground">
+                This lesson is part of our premium curriculum
+              </p>
+            </div>
+
+            {/* Description */}
+            <div className="max-w-lg mx-auto space-y-4">
+              <p className="text-muted-foreground leading-relaxed">
+                Unlock access to this exclusive content and enhance your
+                learning journey. Premium members get access to advanced topics,
+                downloadable resources, and priority support.
+              </p>
+
+              {/* Benefits list */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CheckCircle className="h-4 w-4 text-theme-500" />
+                  <span>Advanced content</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CheckCircle className="h-4 w-4 text-theme-500" />
+                  <span>Downloadable resources</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CheckCircle className="h-4 w-4 text-theme-500" />
+                  <span>Priority support</span>
+                </div>
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <CheckCircle className="h-4 w-4 text-theme-500" />
+                  <span>All future updates</span>
+                </div>
+              </div>
+            </div>
+
+            {/* CTA Button */}
+            <div className="space-y-3">
+              <Link
+                to="/purchase"
+                className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-theme-500 to-theme-600 hover:from-theme-600 hover:to-theme-700 text-white font-semibold rounded-lg shadow-elevation-2 hover:shadow-elevation-3 transition-all duration-300 text-lg"
+              >
+                Upgrade to Premium
+                <ArrowRight className="h-5 w-5" />
+              </Link>
+              <p className="text-xs text-muted-foreground">
+                30-day money-back guarantee
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Additional info card */}
+      <div className="module-card p-6">
+        <div className="flex items-start gap-4">
+          <div className="p-2 rounded-lg bg-gradient-to-br from-theme-100 to-theme-200 dark:from-theme-900 dark:to-theme-800">
+            <BookOpen className="h-5 w-5 text-theme-600 dark:text-theme-400" />
+          </div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-foreground mb-2">
+              What you'll learn
+            </h3>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              This premium lesson covers advanced concepts that will take your
+              skills to the next level. Join thousands of developers who have
+              upgraded their knowledge with our comprehensive curriculum.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}