From 2a9878438191dd9b8adca58132f261ba3ef97078 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Thu, 12 Feb 2026 20:14:49 +0100
Subject: [PATCH] fix: use upstream @indiekit/frontend form classes

Add .input, .select, .textarea, .label, .hint classes to all form
elements. Use input-button-group for discover URL. Replace custom
filter-select with upstream .select class. Remove duplicate CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/styles.css              | 56 +---------------------------------
 package.json                   |  2 +-
 views/blogroll-blog-edit.njk   | 44 +++++++++++++-------------
 views/blogroll-blogs.njk       |  4 +--
 views/blogroll-source-edit.njk | 38 +++++++++++------------
 5 files changed, 45 insertions(+), 99 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index de8562d..7cd4e31 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -130,16 +130,6 @@
   gap: var(--space-s);
 }
 
-.blogroll-filter-select {
-  appearance: none;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-s);
-  font-size: var(--step--1);
-  min-inline-size: 150px;
-  padding: var(--space-2xs) var(--space-s);
-}
-
 /* Form fields */
 .blogroll-form {
   max-inline-size: 600px;
@@ -152,39 +142,10 @@
   margin-block-end: var(--space-m);
 }
 
-.blogroll-field label {
-  font-weight: var(--font-weight-semibold);
-}
-
-.blogroll-field-hint {
-  color: var(--color-text-secondary);
-  font-size: var(--step--1);
-}
-
-.blogroll-field input,
-.blogroll-field select,
-.blogroll-field textarea {
-  appearance: none;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-s);
-  font-size: var(--step--1);
-  padding: var(--space-2xs) var(--space-s);
-  width: 100%;
-}
-
-.blogroll-field textarea {
+.blogroll-field .textarea {
   min-block-size: 100px;
 }
 
-.blogroll-field input:focus,
-.blogroll-field select:focus,
-.blogroll-field textarea:focus {
-  border-color: var(--color-accent);
-  outline: 2px solid var(--color-accent);
-  outline-offset: 1px;
-}
-
 .blogroll-field--inline {
   align-items: center;
   flex-direction: row;
@@ -256,21 +217,6 @@
   margin-block-end: var(--space-s);
 }
 
-.blogroll-discover__input {
-  display: flex;
-  gap: var(--space-s);
-}
-
-.blogroll-discover__input input {
-  appearance: none;
-  background-color: var(--color-background);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-s);
-  flex: 1;
-  font-size: var(--step--1);
-  padding: var(--space-2xs) var(--space-s);
-}
-
 .blogroll-discover__result {
   background: var(--color-background);
   border-radius: var(--radius-s);
diff --git a/package.json b/package.json
index ad8fa9d..de3b18b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-blogroll",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Blogroll endpoint for Indiekit. Aggregates blog feeds from OPML, JSON feeds, or manual entry.",
   "keywords": [
     "indiekit",
diff --git a/views/blogroll-blog-edit.njk b/views/blogroll-blog-edit.njk
index 0979e47..c200576 100644
--- a/views/blogroll-blog-edit.njk
+++ b/views/blogroll-blog-edit.njk
@@ -5,12 +5,12 @@
     {% if isNew %}
     <div class="blogroll-discover">
       <div class="blogroll-field">
-        <label for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
-        <div class="blogroll-discover__input">
-          <input type="url" id="discoverUrl" placeholder="https://tantek.com">
+        <label class="label" for="discoverUrl">{{ __("blogroll.blogs.form.discoverUrl") }}</label>
+        <div class="input-button-group">
+          <input class="input" type="url" id="discoverUrl" placeholder="https://tantek.com">
           {{ button({ type: "button", text: __("blogroll.blogs.form.discover"), classes: "button--secondary", attributes: { id: "discoverBtn" } }) }}
         </div>
-        <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
+        <span class="hint">{{ __("blogroll.blogs.form.discoverHint") }}</span>
       </div>
       <div id="discoverResult" class="blogroll-discover__result" style="display: none;"></div>
     </div>
@@ -18,39 +18,39 @@
     {% endif %}
 
     <div class="blogroll-field">
-      <label for="feedUrl">{{ __("blogroll.blogs.form.feedUrl") }}</label>
-      <input type="url" id="feedUrl" name="feedUrl" value="{{ blog.feedUrl if blog else '' }}" required placeholder="https://example.com/feed.xml">
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.feedUrlHint") }}</span>
+      <label class="label" for="feedUrl">{{ __("blogroll.blogs.form.feedUrl") }}</label>
+      <input class="input" type="url" id="feedUrl" name="feedUrl" value="{{ blog.feedUrl if blog else '' }}" required placeholder="https://example.com/feed.xml">
+      <span class="hint">{{ __("blogroll.blogs.form.feedUrlHint") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="title">{{ __("blogroll.blogs.form.title") }}</label>
-      <input type="text" id="title" name="title" value="{{ blog.title if blog else '' }}" placeholder="{{ __('blogroll.blogs.form.titlePlaceholder') }}">
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.titleHint") }}</span>
+      <label class="label" for="title">{{ __("blogroll.blogs.form.title") }}</label>
+      <input class="input" type="text" id="title" name="title" value="{{ blog.title if blog else '' }}" placeholder="{{ __('blogroll.blogs.form.titlePlaceholder') }}">
+      <span class="hint">{{ __("blogroll.blogs.form.titleHint") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="siteUrl">{{ __("blogroll.blogs.form.siteUrl") }}</label>
-      <input type="url" id="siteUrl" name="siteUrl" value="{{ blog.siteUrl if blog else '' }}" placeholder="https://example.com">
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.siteUrlHint") }}</span>
+      <label class="label" for="siteUrl">{{ __("blogroll.blogs.form.siteUrl") }}</label>
+      <input class="input" type="url" id="siteUrl" name="siteUrl" value="{{ blog.siteUrl if blog else '' }}" placeholder="https://example.com">
+      <span class="hint">{{ __("blogroll.blogs.form.siteUrlHint") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="category">{{ __("blogroll.blogs.form.category") }}</label>
-      <input type="text" id="category" name="category" value="{{ blog.category if blog else '' }}" placeholder="Technology">
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.categoryHint") }}</span>
+      <label class="label" for="category">{{ __("blogroll.blogs.form.category") }}</label>
+      <input class="input" type="text" id="category" name="category" value="{{ blog.category if blog else '' }}" placeholder="Technology">
+      <span class="hint">{{ __("blogroll.blogs.form.categoryHint") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
-      <input type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
+      <label class="label" for="tags">{{ __("blogroll.blogs.form.tags") }}</label>
+      <input class="input" type="text" id="tags" name="tags" value="{{ blog.tags | join(', ') if blog and blog.tags else '' }}" placeholder="indie, personal, tech">
+      <span class="hint">{{ __("blogroll.blogs.form.tagsHint") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
-      <textarea id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
-      <span class="blogroll-field-hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
+      <label class="label" for="notes">{{ __("blogroll.blogs.form.notes") }}</label>
+      <textarea class="textarea" id="notes" name="notes" placeholder="{{ __('blogroll.blogs.form.notesPlaceholder') }}">{{ blog.notes if blog else '' }}</textarea>
+      <span class="hint">{{ __("blogroll.blogs.form.notesHint") }}</span>
     </div>
 
     <div class="blogroll-field blogroll-field--inline">
diff --git a/views/blogroll-blogs.njk b/views/blogroll-blogs.njk
index 512dd05..bd7150a 100644
--- a/views/blogroll-blogs.njk
+++ b/views/blogroll-blogs.njk
@@ -3,13 +3,13 @@
 {% block blogroll %}
   <div class="blogroll-filters">
     <form method="get" action="{{ baseUrl }}/blogs" style="display: flex; gap: var(--space-s); flex-wrap: wrap; align-items: center;">
-      <select name="category" class="blogroll-filter-select" onchange="this.form.submit()">
+      <select name="category" class="select" onchange="this.form.submit()">
         <option value="">{{ __("blogroll.blogs.allCategories") }}</option>
         {% for cat in categories %}
         <option value="{{ cat }}" {% if filterCategory == cat %}selected{% endif %}>{{ cat }}</option>
         {% endfor %}
       </select>
-      <select name="status" class="blogroll-filter-select" onchange="this.form.submit()">
+      <select name="status" class="select" onchange="this.form.submit()">
         <option value="">{{ __("blogroll.blogs.allStatuses") }}</option>
         <option value="active" {% if filterStatus == 'active' %}selected{% endif %}>{{ __("blogroll.blogs.statusActive") }}</option>
         <option value="error" {% if filterStatus == 'error' %}selected{% endif %}>{{ __("blogroll.blogs.statusError") }}</option>
diff --git a/views/blogroll-source-edit.njk b/views/blogroll-source-edit.njk
index a54526a..5fcdeb2 100644
--- a/views/blogroll-source-edit.njk
+++ b/views/blogroll-source-edit.njk
@@ -3,54 +3,54 @@
 {% block blogroll %}
   <form method="post" action="{% if isNew %}{{ baseUrl }}/sources{% else %}{{ baseUrl }}/sources/{{ source._id }}{% endif %}" class="blogroll-form">
     <div class="blogroll-field">
-      <label for="name">{{ __("blogroll.sources.form.name") }}</label>
-      <input type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
+      <label class="label" for="name">{{ __("blogroll.sources.form.name") }}</label>
+      <input class="input" type="text" id="name" name="name" value="{{ source.name if source else '' }}" required>
     </div>
 
     <div class="blogroll-field">
-      <label for="type">{{ __("blogroll.sources.form.type") }}</label>
-      <select id="type" name="type" required onchange="toggleTypeFields()">
+      <label class="label" for="type">{{ __("blogroll.sources.form.type") }}</label>
+      <select class="select" id="type" name="type" required onchange="toggleTypeFields()">
         <option value="opml_url" {% if source.type == 'opml_url' %}selected{% endif %}>OPML URL (auto-sync)</option>
         <option value="opml_file" {% if source.type == 'opml_file' %}selected{% endif %}>OPML File (one-time import)</option>
         {% if microsubAvailable %}
         <option value="microsub" {% if source.type == 'microsub' %}selected{% endif %}>Microsub Subscriptions</option>
         {% endif %}
       </select>
-      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.typeHint") }}</span>
+      <span class="hint">{{ __("blogroll.sources.form.typeHint") }}</span>
     </div>
 
     <div class="blogroll-field" id="urlField">
-      <label for="url">{{ __("blogroll.sources.form.url") }}</label>
-      <input type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
-      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.urlHint") }}</span>
+      <label class="label" for="url">{{ __("blogroll.sources.form.url") }}</label>
+      <input class="input" type="url" id="url" name="url" value="{{ source.url if source else '' }}" placeholder="https://...">
+      <span class="hint">{{ __("blogroll.sources.form.urlHint") }}</span>
     </div>
 
     <div class="blogroll-field" id="opmlContentField" style="display: none;">
-      <label for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
-      <textarea id="opmlContent" name="opmlContent" placeholder="<?xml version=&quot;1.0&quot;?>...">{{ source.opmlContent if source else '' }}</textarea>
-      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
+      <label class="label" for="opmlContent">{{ __("blogroll.sources.form.opmlContent") }}</label>
+      <textarea class="textarea" id="opmlContent" name="opmlContent" placeholder="<?xml version=&quot;1.0&quot;?>...">{{ source.opmlContent if source else '' }}</textarea>
+      <span class="hint">{{ __("blogroll.sources.form.opmlContentHint") }}</span>
     </div>
 
     <div class="blogroll-field" id="microsubChannelField" style="display: none;">
-      <label for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
-      <select id="channelFilter" name="channelFilter">
+      <label class="label" for="channelFilter">{{ __("blogroll.sources.form.microsubChannel") | default("Microsub Channel") }}</label>
+      <select class="select" id="channelFilter" name="channelFilter">
         <option value="">All channels</option>
         {% for channel in microsubChannels %}
         <option value="{{ channel.uid }}" {% if source.channelFilter == channel.uid %}selected{% endif %}>{{ channel.name }}</option>
         {% endfor %}
       </select>
-      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
+      <span class="hint">{{ __("blogroll.sources.form.microsubChannelHint") | default("Sync feeds from a specific channel, or all channels") }}</span>
     </div>
 
     <div class="blogroll-field" id="categoryPrefixField" style="display: none;">
-      <label for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
-      <input type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
-      <span class="blogroll-field-hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
+      <label class="label" for="categoryPrefix">{{ __("blogroll.sources.form.categoryPrefix") | default("Category Prefix") }}</label>
+      <input class="input" type="text" id="categoryPrefix" name="categoryPrefix" value="{{ source.categoryPrefix if source else '' }}" placeholder="e.g., Microsub: ">
+      <span class="hint">{{ __("blogroll.sources.form.categoryPrefixHint") | default("Optional prefix for blog categories (e.g., 'Following: ')") }}</span>
     </div>
 
     <div class="blogroll-field">
-      <label for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
-      <select id="syncInterval" name="syncInterval">
+      <label class="label" for="syncInterval">{{ __("blogroll.sources.form.syncInterval") }}</label>
+      <select class="select" id="syncInterval" name="syncInterval">
         <option value="30" {% if source.syncInterval == 30 %}selected{% endif %}>30 minutes</option>
         <option value="60" {% if not source or source.syncInterval == 60 %}selected{% endif %}>1 hour</option>
         <option value="180" {% if source.syncInterval == 180 %}selected{% endif %}>3 hours</option>