Fix/study timer completion feedback

src/components/PeerCard.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import {
   Star,
@@ -23,6 +24,7 @@ const PeerCard = ({
   onConnect,
   index = 0,
 }: PeerCardProps) => {
+  const navigate = useNavigate();
   return (
     <motion.div
       initial={{ opacity: 0, y: 30 }}
@@ -178,6 +180,7 @@ const PeerCard = ({
         <Button
           size="sm"
           variant="outline"
+          onClick={() => navigate(`/profile/${peer.id}`)}
           className="flex-1 rounded-xl border-white/10 bg-white/5 hover:bg-white/10"
         >
           View Profile

src/components/studyroom/LiveCodeRunner.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
-import { Play, Code, Share, Loader2 } from "lucide-react";
+import { Play, Code, Share, Loader2, Clipboard, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { env } from "@/env";
 
@@ -80,7 +80,18 @@ export function LiveCodeRunner({ onShare }: LiveCodeRunnerProps) {
     onShare(code, language.id, output);
     setIsOpen(false);
   };
-
+  const handleCopyOutput = () => {
+    if (!output) { toast.error("No output to copy"); return; }
+    navigator.clipboard.writeText(output).then(
+      () => toast.success("Output copied!"),
+      () => toast.error("Failed to copy output")
+    );
+  };
+
+  const handleClearCode = () => {
+    setCode("");
+    setOutput("");
+  };
   return (
     <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogTrigger asChild>
@@ -113,6 +124,14 @@ export function LiveCodeRunner({ onShare }: LiveCodeRunnerProps) {
             </select>
 
             <div className="flex gap-2">
+            <button
+    type="button"
+    onClick={handleClearCode}
+    disabled={isRunning}
+   className="flex items-center gap-2 bg-gray-700 text-white px-4 py-2 rounded-lg font-medium hover:bg-gray-600 transition disabled:opacity-50"
+  >
+     <Trash2 size={16} /> Clear
+   </button>
               <button
                 onClick={runCode}
                 disabled={isRunning}
@@ -142,7 +161,18 @@ export function LiveCodeRunner({ onShare }: LiveCodeRunnerProps) {
               />
             </div>
             <div className="flex flex-col gap-2 h-full">
-              <label className="text-sm font-medium text-gray-400">Output</label>
+            <div className="flex items-center justify-between">
++   <label className="text-sm font-medium text-gray-400">Output</label>
+   {output && (
+     <button
+       onClick={handleCopyOutput}
+       disabled={isRunning}
+       className="flex items-center gap-1 text-xs text-gray-400 hover:text-gray-200 disabled:opacity-50"
+     >
+       <Clipboard size={13} /> Copy
+     </button>
+  )}
+ </div>
               <div className="w-full h-full bg-black text-green-400 font-mono text-sm p-4 rounded-xl border border-gray-800 overflow-y-auto whitespace-pre-wrap">
                 {output || "Output will appear here..."}
               </div>

src/components/studyroom/StudyTimer.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect } from "react";
+ import { toast } from "sonner";
 
 export default function StudyTimer() {
   const [seconds, setSeconds] = useState(1500);
   const [isRunning, setIsRunning] = useState(false);
+  const [hasCompleted, setHasCompleted] = useState(false);
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
@@ -11,47 +13,59 @@ export default function StudyTimer() {
       timer = setInterval(() => {
         setSeconds((prev) => prev - 1);
       }, 1000);
+    } else if (isRunning && seconds === 0) {
+      setIsRunning(false);
+      setHasCompleted(true);
+      toast.success("⏰ Study session complete! Great work.", { duration: 5000 });
     }
 
     return () => clearInterval(timer);
   }, [isRunning, seconds]);
-
   const minutes = Math.floor(seconds / 60);
   const remainingSeconds = seconds % 60;
+  const TOTAL = 1500;
+const progress = ((TOTAL - seconds) / TOTAL) * 100;
+const isWarning = seconds <= 60 && seconds > 0;
+
+
 
   const handleReset = () => {
     setSeconds(1500);
     setIsRunning(false);
+    setHasCompleted(false);
+  };
+  const handleToggle = () => {
+    if (seconds === 0) return;
+    setIsRunning((prev) => !prev);
   };
 
   return (
-    <div className="bg-slate-900 border border-slate-700 rounded-xl p-4">
-      <h2 className="font-semibold mb-3">
-          ⏳ Collaborative Study Timer
-      </h2>
-
-      <p className="text-3xl font-bold text-center mb-4">
-        {minutes}:
-        {remainingSeconds
-          .toString()
-          .padStart(2, "0")}
+    <div className={`bg-slate-900 border rounded-xl p-4 transition-colors ${isWarning ? "border-red-500" : "border-slate-700"}`}>
+      <h2 className="font-semibold mb-3">⏳ Collaborative Study Timer</h2>
+
+      {/* Progress bar */}
+      <div className="w-full bg-slate-700 rounded-full h-2 mb-3">
+        <div
+          className={`h-2 rounded-full transition-all ${hasCompleted ? "bg-green-500" : isWarning ? "bg-red-500" : "bg-blue-500"}`}
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+
+      <p className={`text-3xl font-bold text-center mb-4 ${isWarning ? "text-red-400" : ""}`}>
+        {minutes}:{remainingSeconds.toString().padStart(2, "0")}
       </p>
-
+  
       <div className="flex gap-2">
         <button
-          onClick={() => setIsRunning(true)}
-          className="flex-1 bg-green-600 hover:bg-green-700 px-3 py-2 rounded-lg text-sm font-medium"
-        >
-          Start
-        </button>
-
-        <button
-          onClick={() => setIsRunning(false)}
-          className="flex-1 bg-yellow-600 hover:bg-yellow-700 px-3 py-2 rounded-lg text-sm font-medium"
+          onClick={handleToggle}
+          disabled={seconds === 0}
+          className={`flex-1 px-3 py-2 rounded-lg text-sm font-medium disabled:opacity-50 ${
+            isRunning ? "bg-yellow-600 hover:bg-yellow-700" : "bg-green-600 hover:bg-green-700"
+          }`}
         >
-          Pause
+          {isRunning ? "Pause" : "Start"}
         </button>
-
+  
         <button
           onClick={handleReset}
           className="flex-1 bg-red-600 hover:bg-red-700 px-3 py-2 rounded-lg text-sm font-medium"
@@ -60,5 +74,4 @@ export default function StudyTimer() {
         </button>
       </div>
     </div>
-  );
-}
+  );

src/pages/AnonymousDoubts.tsx

@@ -3,7 +3,7 @@ import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/contexts/useAuth";
 import { toast } from "sonner";
 import { Loader2 } from "lucide-react";
-
+const MAX_CHARS = 500;
 type Doubt = {
   id: string;
   content: string;
@@ -45,6 +45,7 @@ export default function AnonymousDoubts() {
     const trimmedText = text.trim();
     const trimmedSubject = subject.trim();
     if (!trimmedText || !trimmedSubject) return;
+   if (text.length > MAX_CHARS) { toast.error(`Doubt exceeds ${MAX_CHARS} character limit.`); return; }
     if (!user) { toast.error("Please log in to post a doubt."); return; }
 
     setSubmitting(true);
@@ -67,25 +68,41 @@ export default function AnonymousDoubts() {
     setSubmitting(false);
   };
 
-  const upvote = (id: string) => {
-    setDoubts(
-      doubts.map((d) => (d.id === id ? { ...d, upvotes: d.upvotes + 1 } : d))
-    );
-  };
-
+  const upvote = async (id: string) => {
+      if (!user) { toast.error("Please log in to upvote."); return; }
+
+       // Optimistic UI update
+       setDoubts((prev) => prev.map((d) => (d.id === id ? { ...d, upvotes: d.upvotes + 1 } : d)));
+
+       const { error } = await (supabase as any)
+         .from("doubts")
+         .update({ upvotes: doubts.find((d) => d.id === id)!.upvotes + 1 })
+         .eq("id", id);
+
+       if (error) {
+         // Rollback on failure
+         setDoubts((prev) => prev.map((d) => (d.id === id ? { ...d, upvotes: d.upvotes - 1 } : d)));
+         toast.error("Failed to register upvote.");
+       }
+    };
   return (
     <div className="p-6 max-w-3xl mx-auto">
       <h1 className="text-3xl font-bold mb-6">Anonymous Doubt Posting</h1>
 
       {/* Post a Doubt */}
       <div className="border rounded-xl p-4 mb-8 space-y-3">
-        <textarea
-          className="border p-2 w-full rounded resize-none"
-          placeholder="Ask your doubt..."
-          rows={3}
-          value={text}
-          onChange={(e) => setText(e.target.value)}
-        />
+
+
+<div className="relative">
+
+   <span className={`absolute bottom-2 right-2 text-xs select-none ${
+     text.length > MAX_CHARS ? "text-red-500 font-semibold"
+    : text.length >= MAX_CHARS * 0.9 ? "text-amber-500"
+    : "text-slate-400"}`}
+  >
+     {text.length}/{MAX_CHARS}
+   </span>
+ </div>
         <input
           className="border p-2 w-full rounded"
           placeholder="Subject Tag (e.g. React, DSA)"
@@ -102,7 +119,7 @@ export default function AnonymousDoubts() {
         </label>
         <button
           onClick={addDoubt}
-          disabled={submitting || !text.trim() || !subject.trim()}
+          disabled={submitting || !text.trim() || !subject.trim() || text.length > MAX_CHARS}
           className="bg-blue-500 text-white px-4 py-2 rounded disabled:opacity-50"
         >
           {submitting ? "Posting..." : "Post Doubt"}