fix(ui): adjust gradient, button spacing, feed title persistence, and optimistic read status

internal/service/fetch.go

@@ -49,7 +49,11 @@ func (s *FetchService) FetchFeed(ctx context.Context, feedID uuid.UUID) error {
 	}
 
 	// Update feed metadata
-	feed.Title = parsedFeed.Title
+	// Only update title if it's empty or looks like a URL (initial state)
+	if feed.Title == "" || feed.Title == feed.URL {
+		feed.Title = parsedFeed.Title
+	}
+	
 	feed.Description = parsedFeed.Description
 	feed.SiteURL = parsedFeed.SiteURL
 	feed.ImageURL = parsedFeed.ImageURL

web/src/components/ArticleCard.tsx

@@ -36,8 +36,8 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
 
             {/* Image Placeholder with Gradient Overlay */}
             <div className="aspect-[16/10] overflow-hidden rounded-t-xl rounded-b-none bg-carbon-light relative mb-6">
-                {/* Gradient lowered to 50% height to avoid covering too much image */}
+                {/* Gradient lowered to 30% height and reduced opacity to avoid covering too much image */}
-                <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white via-white/80 to-transparent opacity-100 z-10"></div>
+                <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-white via-white/60 to-transparent opacity-90 z-10"></div>
 
                 {/* Visual placeholder or real image */}
                 <div
@@ -73,7 +73,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                     </p>
                 )}
 
-                <div className="mt-auto flex items-center justify-between pt-4 pb-2 border-t border-white/5">
+                <div className="mt-auto flex items-center justify-between pt-6 pb-4 border-t border-white/5">
                     <div className="flex space-x-2">
                         <button
                             onClick={(e) => {

web/src/pages/DashboardPage.tsx

@@ -40,7 +40,33 @@ export function DashboardPage({ selectedFeedId }: DashboardPageProps) {
     const toggleReadMutation = useMutation({
         mutationFn: ({ id, is_read }: { id: string; is_read: boolean }) =>
             is_read ? articlesApi.markRead(id) : articlesApi.markUnread(id),
-        onSuccess: () => queryClient.invalidateQueries({ queryKey: ['articles'] }),
+        onMutate: async ({ id, is_read }) => {
+            // Cancel outgoing refetches
+            await queryClient.cancelQueries({ queryKey: ['articles'] });
+
+            // Snapshot previous value
+            const previousArticles = queryClient.getQueryData(['articles', selectedFeedId]);
+
+            // Optimistically update
+            queryClient.setQueryData(['articles', selectedFeedId], (old: Article[] | undefined) => {
+                if (!old) return old;
+                return old.map((article) =>
+                    article.id === id ? { ...article, is_read: is_read } : article
+                );
+            });
+
+            return { previousArticles };
+        },
+        onError: (_err, _newTodo, context) => {
+            // Rollback on error
+            if (context?.previousArticles) {
+                queryClient.setQueryData(['articles', selectedFeedId], context.previousArticles);
+            }
+        },
+        onSuccess: () => {
+            // Refetch to be safe (but optimistic update makes it instant)
+            queryClient.invalidateQueries({ queryKey: ['articles'] });
+        },
     });
 
     const toggleFavoriteMutation = useMutation({