From a2f542396782477ed723a88d079fa4833d2f2422 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Mon, 27 Apr 2026 22:09:38 +0200
Subject: [PATCH] chore: recommended input & output

---
 src/facets/connect/index.html      | 19 ++++++++++++++++---
 src/facets/connect/index.inline.js | 17 ++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/facets/connect/index.html b/src/facets/connect/index.html
index ea4c8680..cb586a8a 100644
--- a/src/facets/connect/index.html
+++ b/src/facets/connect/index.html
@@ -111,10 +111,23 @@
   }
 
   .connect-item__name {
+    align-items: center;
+    display: flex;
     font-weight: 600;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    gap: var(--space-xs);
+  }
+
+  .connect-item__badge {
+    background: oklch(from var(--text-color) l c h / 0.075);
+    border-radius: 9999px;
+    color: oklch(from var(--text-color) l c h / 0.5);
+    flex-shrink: 0;
+    font-size: 50%;
+    font-weight: 500;
+    letter-spacing: var(--tracking-wide);
+    padding: var(--space-3xs);
+    text-box: trim-both cap alphabetic;
+    text-transform: uppercase;
   }
 
   .connect-item__detail {
diff --git a/src/facets/connect/index.inline.js b/src/facets/connect/index.inline.js
index b428747d..2b30f2c0 100644
--- a/src/facets/connect/index.inline.js
+++ b/src/facets/connect/index.inline.js
@@ -20,6 +20,12 @@ const icons = {
   "facets/connect/webdav/index.html": "hard-drive",
 };
 
+const recommended = new Set([
+  "facets/connect/atproto/index.html",
+  "facets/connect/dropbox/index.html",
+  "facets/connect/local/index.html",
+]);
+
 const facets = facetsData
   .filter(
     (f) =>
@@ -31,7 +37,9 @@ const facets = facetsData
     description: f.desc,
     icon: icons[f.url] ?? "plug",
     href: loaderHref(f.url),
-  }));
+    isRecommended: recommended.has(f.url),
+  }))
+;
 
 const main = document.querySelector("main");
 if (!main) throw new Error("No <main> element");
@@ -59,13 +67,16 @@ litRender(
     </div>
     <div class="connect-index__right">
       <ul class="connect-list">
-        ${facets.map(({ name, description, icon, href }) =>
+        ${facets.map(({ name, description, icon, href, isRecommended }) =>
           html`
             <li>
               <a class="connect-item" href="${href}">
                 <i class="ph-fill ph-${icon} connect-item__icon"></i>
                 <div class="connect-item__info">
-                  <span class="connect-item__name">${name}</span>
+                  <span class="connect-item__name">
+                    ${name}
+                    ${isRecommended ? html`<span class="connect-item__badge">Recommended</span>` : ""}
+                  </span>
                   <span class="connect-item__detail">${description}</span>
                 </div>
               </a>
-- 
2.51.2