From 0f468621259570bdc532b392da6968224ce58bff Mon Sep 17 00:00:00 2001
From: poduck <poduck@gmail.com>
Date: Fri, 28 Nov 2025 22:01:05 -0500
Subject: [PATCH] fix: Change Install to View button and fix author display in
 marketplace
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes:
1. Changed "Install" button to "View" button with Eye icon
   - Removed separate "Details" button
   - Single "View" button now opens the details modal
2. Fixed author mapping to use author_name from API
3. Fixed rating field to use rating_average from API
4. Set isVerified based on visibility === 'PLATFORM'

The modal now correctly displays:
- Plugin name with verified badge for platform plugins
- Author name (e.g., "Smooth Schedule")
- Version number
- Full description with formatting
- Category, ratings, and install count

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/pages/PluginMarketplace.tsx | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/PluginMarketplace.tsx b/frontend/src/pages/PluginMarketplace.tsx
index af39b2d..db752cc 100644
--- a/frontend/src/pages/PluginMarketplace.tsx
+++ b/frontend/src/pages/PluginMarketplace.tsx
@@ -16,7 +16,8 @@ import {
   Calendar,
   Link as LinkIcon,
   Bot,
-  Package
+  Package,
+  Eye
 } from 'lucide-react';
 import api from '../api/client';
 import { PluginTemplate, PluginCategory } from '../types';
@@ -62,11 +63,11 @@ const PluginMarketplace: React.FC = () => {
         description: p.description,
         category: p.category,
         version: p.version,
-        author: p.author,
-        rating: parseFloat(p.rating || 0),
+        author: p.author_name,
+        rating: parseFloat(p.rating_average || 0),
         ratingCount: parseInt(p.rating_count || 0),
         installCount: parseInt(p.install_count || 0),
-        isVerified: p.is_verified || false,
+        isVerified: p.visibility === 'PLATFORM',
         isFeatured: p.is_featured || false,
         createdAt: p.created_at,
         updatedAt: p.updated_at,
@@ -289,22 +290,16 @@ const PluginMarketplace: React.FC = () => {
               </div>
 
               {/* Plugin Card Actions */}
-              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700 flex gap-3">
-                <button
-                  onClick={() => handleInstall(plugin)}
-                  className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium text-sm"
-                >
-                  <Download className="h-4 w-4" />
-                  {t('plugins.install', 'Install')}
-                </button>
+              <div className="px-6 py-4 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-100 dark:border-gray-700">
                 <button
                   onClick={() => {
                     setSelectedPlugin(plugin);
                     setShowDetailsModal(true);
                   }}
-                  className="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-medium text-sm"
+                  className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors font-medium text-sm"
                 >
-                  {t('plugins.details', 'Details')}
+                  <Eye className="h-4 w-4" />
+                  {t('plugins.view', 'View')}
                 </button>
               </div>
             </div>