chore(ui): minor ui tweaks, and logic resolutions

lluciiiia · Sep 8, 2024 · 2f50733 · 2f50733
1 parent dfce032
commit 2f50733
Show file tree

Hide file tree

Showing 13 changed files with 123 additions and 154 deletions.
diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
     "@svgr/webpack": "^8.1.0",
     "@t3-oss/env-nextjs": "^0.11.1",
     "@tabler/icons-react": "^3.14.0",
-    "@tanstack/react-query": "^5.54.1",
+    "@tanstack/react-query": "^5.55.0",
     "@total-typescript/ts-reset": "^0.6.1",
     "@trpc/client": "^11.0.0-rc.403",
     "@trpc/next": "^11.0.0-rc.403",
@@ -93,10 +93,10 @@
     "@types/fluent-ffmpeg": "^2.1.26",
     "@types/he": "^1.2.3",
     "@vercel/otel": "^1.10.0",
-    "ai": "^3.3.27",
+    "ai": "^3.3.28",
     "autoprefixer": "10.4.20",
     "axios": "^1.7.7",
-    "bun": "^1.1.26",
+    "bun": "^1.1.27",
     "class-variance-authority": "^0.7.0",
     "classnames": "^2.5.1",
     "clsx": "^2.1.1",
@@ -109,7 +109,7 @@
     "dotenv": "^16.4.5",
     "ffmpeg-static": "^5.2.0",
     "file-loader": "^6.2.0",
-    "file-type": "^19.4.1",
+    "file-type": "^19.5.0",
     "fluent-ffmpeg": "^2.1.3",
     "formidable": "^3.5.1",
     "framer-motion": "^11.5.4",
@@ -122,22 +122,22 @@
     "image-webpack-loader": "^8.1.0",
     "init": "^0.1.2",
     "livekit-server-sdk": "^2.6.1",
-    "lucide-react": "^0.438.0",
+    "lucide-react": "^0.439.0",
     "marked": "^14.1.1",
     "million": "^3.1.11",
     "natural": "^8.0.1",
     "net": "^1.0.2",
-    "next": "^15.0.0-canary.141",
+    "next": "14.2.8",
     "next-themes": "^0.3.0",
     "null-loader": "^4.0.1",
     "nuqs": "^1.19.1",
     "open-graph-scraper": "^6.8.1",
     "postcss": "8.4.45",
     "postcss-nested": "^6.2.0",
     "process": "^0.11.10",
-    "react": "^19.0.0-rc-4c58fce7-20240904",
-    "react-day-picker": "^9.0.8",
-    "react-dom": "^19.0.0-rc-4c58fce7-20240904",
+    "react": "^18.3.1",
+    "react-day-picker": "^9.0.9",
+    "react-dom": "^18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-google-recaptcha-v3": "^1.10.1",
     "react-hook-form": "^7.53.0",

diff --git a/...(dashboard)/notes/_components/NewNote.tsx → ...oard/_components/cards/NewNoteSection.tsx b/...(dashboard)/notes/_components/NewNote.tsx → ...oard/_components/cards/NewNoteSection.tsx
@@ -15,8 +15,8 @@ import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FaPlus } from 'react-icons/fa';
 import { toast } from 'sonner';
-import { getConciseNote, getGrammarNote } from '../../../_api-handlers/notes';
-import type { Note } from '../../dashboard/_components/interfaces';
+import { getConciseNote, getGrammarNote } from '../../../../_api-handlers/notes';
+import type { Note } from '../../../dashboard/_components/interfaces';
 
 export const NewNoteSection: React.FC<{
   handleCreate: () => Promise<void>;
@@ -150,7 +150,7 @@ export const NewNoteSection: React.FC<{
               {isDeleting === note.id ? (
                 <Skeleton className="h-5 w-5 rounded-full" />
               ) : (
-                <Trash2 className="h-5 w-5" />
+                <Trash2 className="h-5 w-5 text-white" />
               )}
             </Button>
           </div>
@@ -278,4 +278,4 @@ export const NewNoteSection: React.FC<{
       </Dialog>
     </div>
   );
-};
+};
diff --git a/src/app/(dashboard)/dashboard/_components/cards/VideoCard.tsx b/src/app/(dashboard)/dashboard/_components/cards/VideoCard.tsx
@@ -72,16 +72,16 @@ const VideoCard: React.FC<VideoCardProps> = memo(({ videos }) => {
                     {he.decode(video.snippet.description)}
                   </p>
                   <div className="flex flex-wrap gap-2 mb-4">
-                    <Badge variant="secondary" className={`text-xs text-navy`}>
-                      <Eye className="w-3 h-3 mr-1" />
+                    <Badge variant="secondary" className={`text-xs text-navy dark:text-white`}>
+                      <Eye className="w-3 h-3 mr-1 dark:text-white" />
                       {viewedVideos[video.id.videoId] ? 'Not viewed' : 'Viewed'}
                     </Badge>
                     <Badge
                       variant="secondary"
-                      className={`text-xs cursor-pointer text-navy `}
+                      className={`text-xs cursor-pointer text-navy dark:text-white`}
                       onClick={() => handleLike(video.id.videoId)}
                     >
-                      <ThumbsUp className="w-3 h-3 mr-1" />
+                      <ThumbsUp className="w-3 h-3 mr-1 dark:text-white" />
                       {likedVideos[video.id.videoId] ? 'Liked' : 'Not liked'}
                     </Badge>
                   </div>

diff --git a/src/app/(dashboard)/dashboard/_components/cards/index.ts b/src/app/(dashboard)/dashboard/_components/cards/index.ts
@@ -0,0 +1,7 @@
+export * from './ActionCard'
+export * from './FurtherInfo'
+export * from './NewNoteSection'
+export * from './QnaCards'
+export * from './QuestionAndAnswer'
+export * from './SummaryCard'
+export * from './VideoCard'
diff --git a/src/app/(dashboard)/dashboard/_components/dashboard.tsx b/src/app/(dashboard)/dashboard/_components/dashboard.tsx
@@ -22,7 +22,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
 import { PiNoteBlankFill } from 'react-icons/pi';
 import { toast } from 'sonner';
-import { NewNoteSection } from '../../notes/_components';
+import { NewNoteSection } from './cards/NewNoteSection';
 import ActionCard from './cards/ActionCard';
 import FurtherInfoCard from './cards/FurtherInfo';
 import QuestionAndAnswer from './cards/QuestionAndAnswer';
@@ -97,6 +97,7 @@ export const Dashboard = () => {
           setFetchTimeout(newTimeout as NodeJS.Timeout);
         } else {
           toast.error('Failed to fetch data after multiple attempts. Please try again later.');
+          window.open('/my-learning', '_self');
         }
       } finally {
         setIsLoading(false);

diff --git a/src/app/(dashboard)/dashboard/_components/discussion-with-ai.tsx b/src/app/(dashboard)/dashboard/_components/discussion-with-ai.tsx
@@ -47,10 +47,9 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
     if (!learningid) {
       console.error('Missing Learning ID');
       toast.error('Learning ID is missing. Please select a learning resource.');
+      return;
     }
-  }, []);
 
-  useEffect(() => {
     const fetchDiscussData = async () => {
       setIsLoadingQuestions(true);
       try {
@@ -68,9 +67,8 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
         setIsLoadingQuestions(false);
       }
     };
-    if (learningid) {
-      fetchDiscussData();
-    }
+
+    fetchDiscussData();
   }, [learningid]);
 
   useEffect(() => {
@@ -95,7 +93,7 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
       });
       setChatSession(session);
     }
-  }, [transcript]);
+  }, [transcript]); // Only re-run when transcript changes
 
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -161,16 +159,22 @@ const DiscussionWithAI: React.FC<DiscussionWithAIProps> = ({ learningid }) => {
                 <div
                   className={`p-2 rounded-lg max-w-[80%] text-sm ${
                     response.sender === 'user'
-                      ? 'bg-primary dark:text-navy text-white'
-                      : 'bg-secondary text-secondary-foreground'
+                      ? 'bg-primary text-white'
+                      : 'bg-secondary dark:text-white text-navy'
                   } relative group`}
                 >
                   {response.sender === 'user' ? (
-                    <User className="inline-block mr-2 h-4 w-4" />
+                    <User className="inline-block mr-2 h-4 w-4 dark:text-navy" />
                   ) : (
                     <Bot className="inline-block mr-2 h-4 w-4" />
                   )}
-                  <ReactMarkdown className="inline" remarkPlugins={[remarkGfm]}>
+                  <ReactMarkdown
+                    className={`inline ${response.sender === 'user'
+                      ? '[&>p]:dark:text-navy [&>p]:text-white'
+                      : '[&>p]:dark:text-white [&>p]:text-navy'
+                      }`}
+                    remarkPlugins={[remarkGfm]}
+                  >
                     {response.text}
                   </ReactMarkdown>
                   {response.sender === 'ai' && (

diff --git a/src/app/(dashboard)/notes/_components/index.ts b/src/app/(dashboard)/notes/_components/index.ts
diff --git a/src/app/(dashboard)/notes/page.tsx b/src/app/(dashboard)/notes/page.tsx
diff --git a/src/app/(dashboard)/users/page.tsx b/src/app/(dashboard)/users/page.tsx
diff --git a/src/app/(main)/support/page.tsx b/src/app/(main)/support/page.tsx
@@ -8,7 +8,6 @@ import { Button } from "@/components/ui/button"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -18,6 +17,7 @@ import { Input } from "@/components/ui/input"
 import { Textarea } from "@/components/ui/textarea"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { MapPin, Phone, Mail, Clock } from 'lucide-react'
+import SpeechToText from '@/components/client/SpeechToText'
 
 const formSchema = z.object({
   name: z.string().min(2, {
@@ -35,6 +35,7 @@ const formSchema = z.object({
 })
 
 export default function ContactPage() {
+  const [speechContent, setSpeechContent] = React.useState('');
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -112,7 +113,20 @@ export default function ContactPage() {
                       <FormItem>
                         <FormLabel>Message</FormLabel>
                         <FormControl>
-                          <Textarea placeholder="Your message" {...field} />
+                          <div className="flex flex-col space-y-2">
+                            <Textarea 
+                              placeholder="Your message" 
+                              {...field} 
+                              value={field.value || speechContent}
+                              onChange={(e) => {
+                                field.onChange(e);
+                                setSpeechContent(e.target.value);
+                              }}
+                            />
+                            <div className="flex justify-end">
+                              <SpeechToText setContent={setSpeechContent} />
+                            </div>
+                          </div>
                         </FormControl>
                         <FormMessage />
                       </FormItem>

diff --git a/src/app/manifest.ts b/src/app/manifest.ts
@@ -710,7 +710,7 @@ export default function manifest(): ExtendedManifest {
       {
         name: 'Terms of Service',
         short_name: 'Terms',
-        url: '/terms',
+        url: '/legal/terms',
         description:
           "The fine print of our digital handshake. Understand SparkMind's Terms of Service.",
         icons: [
@@ -725,7 +725,7 @@ export default function manifest(): ExtendedManifest {
       {
         name: 'Privacy Policy',
         short_name: 'Privacy',
-        url: '/privacy',
+        url: '/legal/privacy',
         description:
           'Your privacy matters to us. Learn how SparkMind protects your personal information.',
         icons: [
@@ -739,8 +739,8 @@ export default function manifest(): ExtendedManifest {
       },
       {
         name: 'Cookie Policy',
-        short_name: 'Cookie',
-        url: '/cookie',
+        short_name: 'Cookies',
+        url: '/legal/cookies',
         description:
           'Understand how we use cookies and similar technologies to enhance your experience.',
         icons: [