From e06a5eab1b4c8e7003357c18c32773564582f8ee Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 27 Oct 2024 09:13:29 +0000
Subject: fix: Some visual fixes to the AI summary

---
 .../dashboard/bookmarks/SummarizeBookmarkArea.tsx  | 92 ++++++++++------------
 1 file changed, 42 insertions(+), 50 deletions(-)

diff --git a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
index c1f3a18a..44f7bcf4 100644
--- a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
+++ b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
@@ -4,13 +4,7 @@ import { Button } from "@/components/ui/button";
 import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
 import { cn } from "@/lib/utils";
-import {
-  ChevronDown,
-  ChevronUp,
-  Loader2,
-  RefreshCw,
-  Trash2,
-} from "lucide-react";
+import { ChevronUp, RefreshCw, Sparkles, Trash2 } from "lucide-react";
 
 import {
   useSummarizeBookmark,
@@ -51,55 +45,50 @@ function AISummary({
         className={`
           relative overflow-hidden rounded-lg p-4
           transition-all duration-300 ease-in-out
-          ${isExpanded ? "h-auto" : "h-[4.5em] cursor-pointer"}
+          ${isExpanded ? "h-auto" : "cursor-pointer"}
           bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 p-[2px]
         `}
         onClick={() => !isExpanded && setIsExpanded(true)}
       >
-        <div className="h-full rounded-lg bg-background p-3">
+        <div className="h-full rounded-lg bg-accent p-2">
           <p
             className={`text-sm text-gray-700 dark:text-gray-300 ${!isExpanded && "line-clamp-3"}`}
           >
             {summary}
           </p>
-          {!isExpanded && (
-            <div className="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-white to-transparent dark:from-gray-800" />
+          {isExpanded && (
+            <span className="flex justify-end gap-2 pt-2">
+              <ActionButton
+                variant="none"
+                size="none"
+                spinner={<LoadingSpinner className="size-4" />}
+                className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                aria-label={isExpanded ? "Collapse" : "Expand"}
+                loading={isResummarizing}
+                onClick={() => resummarize({ bookmarkId })}
+              >
+                <RefreshCw size={16} />
+              </ActionButton>
+              <ActionButton
+                size="none"
+                variant="none"
+                spinner={<LoadingSpinner className="size-4" />}
+                className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                aria-label={isExpanded ? "Collapse" : "Expand"}
+                loading={isUpdatingBookmark}
+                onClick={() => updateBookmark({ bookmarkId, summary: null })}
+              >
+                <Trash2 size={16} />
+              </ActionButton>
+              <button
+                className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                aria-label="Collapse"
+                onClick={() => setIsExpanded(false)}
+              >
+                <ChevronUp size={16} />
+              </button>
+            </span>
           )}
-          <span className="absolute bottom-2 right-2 flex gap-2">
-            {isExpanded && (
-              <>
-                <ActionButton
-                  variant="none"
-                  size="none"
-                  spinner={<LoadingSpinner className="size-4" />}
-                  className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
-                  aria-label={isExpanded ? "Collapse" : "Expand"}
-                  loading={isResummarizing}
-                  onClick={() => resummarize({ bookmarkId })}
-                >
-                  <RefreshCw size={16} />
-                </ActionButton>
-                <ActionButton
-                  size="none"
-                  variant="none"
-                  spinner={<LoadingSpinner className="size-4" />}
-                  className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
-                  aria-label={isExpanded ? "Collapse" : "Expand"}
-                  loading={isUpdatingBookmark}
-                  onClick={() => updateBookmark({ bookmarkId, summary: null })}
-                >
-                  <Trash2 size={16} />
-                </ActionButton>
-              </>
-            )}
-            <button
-              className="rounded-full bg-gray-200 p-1 text-gray-600 dark:bg-gray-700 dark:text-gray-400"
-              aria-label={isExpanded ? "Collapse" : "Expand"}
-              onClick={() => setIsExpanded(!isExpanded)}
-            >
-              {isExpanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-            </button>
-          </span>
         </div>
       </div>
     </div>
@@ -133,17 +122,20 @@ export default function SummarizeBookmarkArea({
           onClick={() => mutate({ bookmarkId: bookmark.id })}
           className={cn(
             `relative w-full overflow-hidden bg-opacity-30 bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500 transition-all duration-300`,
-            isPending ? "text-transparent" : "text-gray-300",
+            isPending ? "text-transparent" : "text-gray-50",
           )}
           disabled={isPending}
         >
           {isPending && (
             <div className="absolute inset-0 flex items-center justify-center">
-              <div className="animate-gradient-x background-animate h-full w-full bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500"></div>
-              <Loader2 className="absolute h-5 w-5 animate-spin text-white" />
+              <div className="h-full w-full bg-gradient-to-r from-blue-400 via-purple-500 to-pink-500"></div>
+              <LoadingSpinner className="absolute h-5 w-5 text-white" />
             </div>
           )}
-          <span className="relative z-10">Summarize with AI</span>
+          <span className="relative z-10 flex items-center gap-1.5">
+            Summarize with AI
+            <Sparkles className="size-4" />
+          </span>
         </Button>
       </div>
     );
-- 
cgit v1.2.3-70-g09d2