Refactor code structure for improved readability and maintainability

src/App.css

@@ -90,6 +90,10 @@
 .hero h1 {
     font-size: clamp(2.4rem, 4vw, 3.4rem);
     margin: 0 0 8px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
 }
 
 .subtitle {
@@ -180,6 +184,10 @@
 .card h2 {
     margin: 0;
     font-size: 1.3rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
 }
 
 .card p {
@@ -241,6 +249,11 @@
     color: #166534;
 }
 
+.state.warning {
+    background: #fef9c3;
+    color: #92400e;
+}
+
 .state.inline {
     margin-top: 16px;
     padding: 16px;
@@ -621,3 +634,25 @@
         color: #94a3b8;
     }
 }
+.privacy-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}

src/pages/Home.jsx

@@ -49,6 +49,7 @@ export default function Home() {
                 {plugins.map((plugin) => {
                     const displayName = plugin.label || plugin.manifest?.plugin_name || plugin.name;
                     const description = plugin.manifest?.description || plugin.description;
+                    const isPrivate = Boolean(plugin.isPrivate);
                     const searchParams = new URLSearchParams();
                     if (plugin.provider) {
                         searchParams.set("provider", plugin.provider);
@@ -65,7 +66,15 @@ export default function Home() {
                     return (
                         <article className="card" key={plugin.fullName}>
                             <div className="card-header">
-                                <h2>{displayName}</h2>
+                                <h2>
+                                    {displayName}
+                                    {isPrivate && (
+                                        <span className="privacy-indicator" title="Privé plugin">
+                                            <span aria-hidden="true">🔒</span>
+                                            <span className="sr-only">Privé plugin</span>
+                                        </span>
+                                    )}
+                                </h2>
                                 <span className="pill">{plugin.fullName}</span>
                             </div>
                             <p>{description}</p>

src/pages/PluginDetail.jsx

@@ -49,7 +49,8 @@ export default function PluginDetail() {
     const author = manifest?.author || "-";
     const version = manifest?.version || "-";
     const repositoryLabel = data?.provider === "gitea" ? "Gitea" : "GitHub";
-    const latestDownload = data?.download;
+    const isPrivate = Boolean(data?.isPrivate);
+    const latestDownload = isPrivate ? null : data?.download;
 
     const releases = useMemo(() => data?.releases || [], [data]);
     const commits = useMemo(() => data?.commits || [], [data]);
@@ -59,7 +60,15 @@ export default function PluginDetail() {
             <header className="detail-hero">
                 <div>
                     <p className="eyebrow">Plugin details</p>
-                    <h1>{displayName}</h1>
+                    <h1>
+                        {displayName}
+                        {isPrivate && (
+                            <span className="privacy-indicator" title="Privé plugin">
+                                <span aria-hidden="true">🔒</span>
+                                <span className="sr-only">Privé plugin</span>
+                            </span>
+                        )}
+                    </h1>
                     <p className="subtitle">{description}</p>
                 </div>
                 <div className="detail-actions">
@@ -77,6 +86,12 @@ export default function PluginDetail() {
                 </div>
             </header>
 
+            {isPrivate && (
+                <div className="state warning">
+                    <strong>Privé plugin.</strong> Downloads via deze repo zijn niet beschikbaar.
+                </div>
+            )}
+
             {loading && <div className="state">Bezig met laden…</div>}
             {error && <div className="state error">{error}</div>}