Merge pull request #2793 from homarr-labs/copilot/show-description-on-approval-page

web/src/app/globals.css

@@ -164,12 +164,12 @@
 	--color-color-2: var(--color-2);
 
 	--color-color-1: var(--color-1);
-  @keyframes rainbow {
-  0% {
-    background-position: 0%;
+	@keyframes rainbow {
+		0% {
+			background-position: 0%;
 		}
-  100% {
-    background-position: 200%;
+		100% {
+			background-position: 200%;
 		}
 	}
 }
@@ -380,4 +380,4 @@
 	input.error:focus {
 		@apply ring-2 ring-destructive ring-offset-2 ring-offset-background;
 	}
-}
+}

web/src/components/add-to-search-bar-button.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import { useState } from "react"
 import { Check, Copy, Globe2, Search, Sparkles } from "lucide-react"
-import { RainbowButton } from "@/components/ui/rainbow-button"
+import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { RainbowButton } from "@/components/ui/rainbow-button"
 import { Separator } from "@/components/ui/separator"
 import { cn } from "@/lib/utils"
 
@@ -54,13 +54,7 @@ const instructions: Array<{ browser: string; steps: string[] }> = [
 	},
 ]
 
-export function AddToSearchBarButton({
-	size = "default",
-	className,
-}: {
-	size?: "sm" | "default" | "lg"
-	className?: string
-}) {
+export function AddToSearchBarButton({ size = "default", className }: { size?: "sm" | "default" | "lg"; className?: string }) {
 	const [copied, setCopied] = useState(false)
 
 	const handleCopy = async () => {
@@ -76,14 +70,7 @@ export function AddToSearchBarButton({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<RainbowButton
-					variant="outline"
-					size={size}
-					className={cn(
-						"shadow-sm",
-						className,
-					)}
-				>
+				<RainbowButton variant="outline" size={size} className={cn("shadow-sm", className)}>
 					<Search className="h-4 w-4" />
 					<span className="hidden sm:inline text-foreground group-hover:scale-105 transition-all duration-300">Add to browser search</span>
 					<span className="sm:hidden">Add to search</span>
@@ -105,13 +92,7 @@ export function AddToSearchBarButton({
 					<p className="text-sm font-medium text-muted-foreground">Search URL (schema)</p>
 					<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
 						<Input readOnly value={SEARCH_SCHEMA} className="font-mono text-xs" />
-						<Button
-							variant="secondary"
-							size="sm"
-							className="flex items-center gap-2"
-							type="button"
-							onClick={handleCopy}
-						>
+						<Button variant="secondary" size="sm" className="flex items-center gap-2" type="button" onClick={handleCopy}>
 							{copied ? (
 								<>
 									<Check className="h-4 w-4" /> Copied

web/src/components/icon-search.tsx

@@ -5,9 +5,9 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useTheme } from "next-themes"
 import posthog from "posthog-js"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { AddToSearchBarButton } from "@/components/add-to-search-bar-button"
 import { VirtualizedIconsGrid } from "@/components/icon-grid"
 import { IconSubmissionContent } from "@/components/icon-submission-form"
-import { AddToSearchBarButton } from "@/components/add-to-search-bar-button"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import {

web/src/components/submission-details.tsx

@@ -290,6 +290,16 @@ export function SubmissionDetails({
 								<p className="text-sm text-muted-foreground mt-1">Filename: {submission.name}</p>
 							</div>
 
+							{submission.description?.trim() && (
+								<div>
+									<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
+										<MessageSquare className="w-4 h-4" />
+										Description
+									</h3>
+									<p className="text-sm whitespace-pre-wrap">{submission.description}</p>
+								</div>
+							)}
+
 							<div>
 								<h3 className="text-sm font-semibold text-muted-foreground mb-2 flex items-center gap-2">
 									<FileType className="w-4 h-4" />