stuff

src/components/games/GameItem.tsx

@@ -9,13 +9,15 @@ interface GameItemProps {
   onAction: (gameId: string, action: ActionType) => Promise<void>
   onEdit?: (gameId: string) => void
   onSmokeAPISettings?: (gameId: string) => void
+  onRate?: (gameId: string) => void
+  reportingEnabled?: boolean // When false/undefined, rate button is not rendered at all.
 }
 
 /**
  * Individual game card component
  * Displays game information and action buttons
  */
-const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps) => {
+const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings, onRate, reportingEnabled }: GameItemProps) => {
   const [imageUrl, setImageUrl] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
@@ -93,6 +95,13 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
     }
   }
 
+  // Rating handler
+  const handleRate = () => {
+    if (onRate && (game.cream_installed || game.smoke_installed)) {
+      onRate(game.id)
+    }
+  }
+
   // Determine background image
   const backgroundImage =
     !isLoading && imageUrl
@@ -179,6 +188,20 @@ const GameItem = ({ game, onAction, onEdit, onSmokeAPISettings }: GameItemProps)
             </div>
           )}
 
+          {/* Rate button */}
+          {(game.cream_installed || game.smoke_installed) && onRate && reportingEnabled && (
+            <Button
+              variant="primary"
+              size="small"
+              onClick={handleRate}
+              disabled={!!game.installing}
+              title="Rate compatibility"
+              className="edit-button rate-button"
+              leftIcon={<Icon name="Star" variant="solid" size="md" />}
+              iconOnly
+            />
+          )}
+
           {/* Edit button - only enabled if CreamLinux is installed */}
           {game.cream_installed && (
             <Button