Upgrade: New Home Screen for Khoj (#860)

* V1 of the new automations page
Implemented:
- Shareable
- Editable
- Suggested Cards
- Create new cards
- added side panel new conversation button
- Implement mobile-friendly view for homepage
- Fix issue of new conversations being created when selected agent is changed
- Improve center of the homepage experience
- Fix showing agent during first chat experience
- dark mode gradient updates

---------

Co-authored-by: sabaimran <narmiabas@gmail.com>

src/interface/web/app/components/suggestions/suggestionCard.tsx

@@ -1,32 +1,53 @@
 'use client'
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "@/components/ui/card"
 
 import styles from "./suggestions.module.css";
 
+import { getIconFromIconName } from "@/app/common/iconUtils";
+
+
+function convertSuggestionColorToIconClass(color: string) {
+    if (color.includes('blue')) return getIconFromIconName('Robot', 'blue', 'w-8', 'h-8');
+    if (color.includes('yellow')) return getIconFromIconName('Globe', 'yellow', 'w-8', 'h-8');
+    if (color.includes('green')) return getIconFromIconName('Palette', 'green', 'w-8', 'h-8');
+    else return getIconFromIconName('Lightbulb', 'orange', 'w-8', 'h-8');
+}
+
+
 interface SuggestionCardProps {
-	title: string;
-	body: string;
-	link: string;
-	styleClass: string;
+    title: string;
+    body: string;
+    link: string;
+    image: string;
+    color: string;
 }
 
 export default function SuggestionCard(data: SuggestionCardProps) {
+    const cardClassName = `${styles.card} ${data.color} md:w-full md:h-fit sm:w-full sm:h-fit lg:w-[200px] lg:h-[200px]`;
+    const titleClassName = `${styles.title} pt-2 dark:text-white dark:font-bold`;
+    const descriptionClassName = `${styles.text} dark:text-white`;
 
-	return (
-		<div className={styles[data.styleClass] + " " + styles.card}>
-			<div className={styles.title}>
-				{data.title}
-			</div>
-			<div className={styles.body}>
-				{data.body}
-			</div>
-			<div>
-				<a
-					href={data.link}
-					target="_blank"
-					rel="noopener noreferrer"
-				>click me
-				</a>
-			</div>
-		</div>
-	);
+    const cardContent = (
+        <Card className={cardClassName}>
+            <CardHeader className="m-0 p-2 pb-1 relative">
+                {convertSuggestionColorToIconClass(data.image)}
+                <CardTitle className={titleClassName}>{data.title}</CardTitle>
+            </CardHeader>
+            <CardContent className="m-0 p-2 pr-4 pt-1">
+                <CardDescription className={descriptionClassName}>{data.body}</CardDescription>
+            </CardContent>
+        </Card>
+    );
+
+    return data.link ? (
+        <a href={data.link} className="no-underline">
+            {cardContent}
+        </a>
+    ) : cardContent;
 }

src/interface/web/app/components/suggestions/suggestions.module.css

@@ -1,40 +1,18 @@
-div.pink {
-    background-color: #f8d1f8;
-    color: #000000;
-}
 
-div.blue {
-    background-color: #d1f8f8;
-    color: #000000;
-}
-
-div.green {
-    background-color: #d1f8d1;
-    color: #000000;
-}
-
-div.purple {
-    background-color: #f8d1f8;
-    color: #000000;
-}
-
-div.yellow {
-    background-color: #f8f8d1;
-    color: #000000;
-}
-
-div.card {
-    padding: 1rem;
-    margin: 1rem;
-    border: 1px solid #000000;
+.card {
+    padding: 0.5rem;
+    margin: 0.05rem;
     border-radius: 0.5rem;
 }
 
-div.title {
-    font-size: 1.5rem;
-    font-weight: bold;
+.title {
+    font-size: 1.0rem;
 }
 
-div.body {
-    font-size: 1rem;
+.text {
+    padding-top: 0.2rem;
+    font-size: 0.9rem;
+    white-space: wrap;
+    padding-right: 4px;
+    color: black;
 }