From f0348581c235a0bd045adad7f86a544e198d8fd1 Mon Sep 17 00:00:00 2001
From: Sean McCollum <anincrediblyshortname@gmail.com>
Date: Mon, 25 May 2026 00:13:12 -0700
Subject: [PATCH] remove circle and make labels with help text have an
 underline

---
 ui/src/app/app.html | 37 +++++++++++++++++--------------------
 ui/src/app/app.sass | 14 +++++---------
 ui/src/app/app.ts   |  3 +--
 3 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/ui/src/app/app.html b/ui/src/app/app.html
index d0ec2db..7081047 100644
--- a/ui/src/app/app.html
+++ b/ui/src/app/app.html
@@ -279,7 +279,7 @@
           </div>
           <div class="col-12 col-md-6 col-lg-3">
             <div class="input-group">
-              <span class="input-group-text">Format <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subtitle output format for captions mode." triggers="click" autoClose="outside" container="body" /></span>
+              <span class="input-group-text help-title" ngbPopover="Subtitle output format for captions mode." triggers="click" autoClose="outside" container="body">Format</span>
               <select class="form-select"
                 name="format"
                 [(ngModel)]="format"
@@ -293,7 +293,7 @@
           </div>
           <div class="col-12 col-md-6 col-lg-3">
             <div class="input-group">
-              <span class="input-group-text">Language <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subtitle language (you can type any language code)." triggers="click" autoClose="outside" container="body" /></span>
+              <span class="input-group-text help-title" ngbPopover="Subtitle language (you can type any language code)." triggers="click" autoClose="outside" container="body">Language</span>
               <input class="form-control"
                 type="text"
                 list="subtitleLanguageOptions"
@@ -311,7 +311,7 @@
           </div>
           <div class="col-12 col-md-6 col-lg-3">
             <div class="input-group">
-              <span class="input-group-text">Subtitle Source <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Choose manual, auto, or fallback preference for captions mode." triggers="click" autoClose="outside" container="body" /></span>
+              <span class="input-group-text help-title" ngbPopover="Choose manual, auto, or fallback preference for captions mode." triggers="click" autoClose="outside" container="body">Subtitle Source</span>
               <select class="form-select"
                 name="subtitleMode"
                 [(ngModel)]="subtitleMode"
@@ -372,7 +372,7 @@
               <div class="row g-3">
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Download Folder <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Type to filter existing folders, or enter a new folder name." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Type to filter existing folders, or enter a new folder name." triggers="click" autoClose="outside" container="body">Download Folder</span>
                     <input type="text"
                       class="form-control"
                       placeholder="Default"
@@ -389,7 +389,7 @@
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Custom Name Prefix <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Add a prefix to downloaded filenames." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Add a prefix to downloaded filenames." triggers="click" autoClose="outside" container="body">Custom Name Prefix</span>
                     <input type="text"
                       class="form-control"
                       placeholder="Default"
@@ -406,13 +406,12 @@
                           name="splitByChapters" [(ngModel)]="splitByChapters" (change)="splitByChaptersChanged()"
                           [disabled]="addInProgress || subscribeInProgress || downloads.loading">
                         <label class="form-check-label" for="checkbox-split-chapters">Split by chapters</label>
-                        <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Split video into separate files by chapters." triggers="click" autoClose="outside" container="body" />
                       </div>
                     </div>
                     @if (splitByChapters) {
                     <div class="col">
                       <div class="input-group">
-                        <span class="input-group-text">Template <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Output template for chapter files." triggers="click" autoClose="outside" container="body" /></span>
+                        <span class="input-group-text help-title" ngbPopover="Output template for chapter files." triggers="click" autoClose="outside" container="body">Template</span>
                         <input type="text" class="form-control" name="chapterTemplate" [(ngModel)]="chapterTemplate"
                           (change)="chapterTemplateChanged()" [disabled]="addInProgress || subscribeInProgress || downloads.loading">
                       </div>
@@ -423,7 +422,7 @@
                 @if (downloadType === 'video' || downloadType === 'audio') {
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Clip start <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional start time (seconds, M:SS, or H:MM:SS). Blank = from start or YouTube &t= in URL." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Optional start time (seconds, M:SS, or H:MM:SS). Blank = from start or YouTube &t= in URL." triggers="click" autoClose="outside" container="body">Clip start</span>
                     <input type="text"
                       class="form-control"
                       name="clipStart"
@@ -435,7 +434,7 @@
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Clip end <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional end time. Blank = until end of media." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Optional end time. Blank = until end of media." triggers="click" autoClose="outside" container="body">Clip end</span>
                     <input type="text"
                       class="form-control"
                       name="clipEnd"
@@ -456,13 +455,12 @@
                     <input class="form-check-input" type="checkbox" role="switch" id="checkbox-auto-start"
                       name="autoStart" [(ngModel)]="autoStart" (change)="autoStartChanged()"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading">
-                    <label class="form-check-label" for="checkbox-auto-start">Auto Start</label>
-                    <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Automatically start downloads when added." triggers="click" autoClose="outside" container="body" />
+                    <label class="form-check-label help-title" for="checkbox-auto-start" ngbPopover="Automatically start downloads when added." triggers="click" autoClose="outside" container="body" (click)="$event.preventDefault()">Auto Start</label>
                   </div>
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Items Limit <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Maximum number of items to download from a playlist or channel (0 = no limit)." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Maximum number of items to download from a playlist or channel (0 = no limit)." triggers="click" autoClose="outside" container="body">Items Limit</span>
                     <input type="number"
                       min="0"
                       class="form-control"
@@ -475,7 +473,7 @@
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Subscription Check (min) <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="How often to poll subscriptions for new videos." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="How often to poll subscriptions for new videos." triggers="click" autoClose="outside" container="body">Subscription Check (min)</span>
                     <input type="number"
                       min="1"
                       class="form-control"
@@ -488,7 +486,7 @@
                 </div>
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Subscription Title Filter <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="In subscriptions, only titles matching this Python-style regex are queued. Empty = all. Case-sensitive; use (?i) in the pattern for case-insensitive." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="In subscriptions, only titles matching this Python-style regex are queued. Empty = all. Case-sensitive; use (?i) in the pattern for case-insensitive." triggers="click" autoClose="outside" container="body">Subscription Title Filter</span>
                     <input type="text"
                       class="form-control"
                       name="titleRegex"
@@ -502,8 +500,7 @@
                     <input class="form-check-input" type="checkbox" role="switch" id="checkbox-skip-subscriber-only"
                       name="skipSubscriberOnly" [(ngModel)]="skipSubscriberOnly"
                       [disabled]="addInProgress || subscribeInProgress || downloads.loading" />
-                    <label class="form-check-label" for="checkbox-skip-subscriber-only">Skip members-only subscription videos</label>
-                    <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="When enabled, subscription checks skip videos marked members-only by yt-dlp (channel Join). Ignored for one-off downloads." triggers="click" autoClose="outside" container="body" />
+                    <label class="form-check-label help-title" for="checkbox-skip-subscriber-only" ngbPopover="When enabled, subscription checks skip videos marked members-only by yt-dlp (channel Join). Ignored for one-off downloads." triggers="click" autoClose="outside" container="body" (click)="$event.preventDefault()">Skip members-only subscription videos</label>
                   </div>
                 </div>
               </div>
@@ -513,7 +510,7 @@
               <div class="row g-3">
                 <div class="col-12" [class.col-md-6]="allowYtdlOptionsOverrides()">
                   <div class="input-group">
-                    <span class="input-group-text">Option Presets <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Choose one or more yt-dlp option presets configured on the server (applied in order)." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Choose one or more yt-dlp option presets configured on the server (applied in order)." triggers="click" autoClose="outside" container="body">Option Presets</span>
                     <ng-select
                       class="flex-grow-1"
                       name="ytdlOptionsPresets"
@@ -529,7 +526,7 @@
                 @if (allowYtdlOptionsOverrides()) {
                 <div class="col-md-6">
                   <div class="input-group">
-                    <span class="input-group-text">Custom yt-dlp Options <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Optional per-download yt-dlp overrides as a JSON object." triggers="click" autoClose="outside" container="body" /></span>
+                    <span class="input-group-text help-title" ngbPopover="Optional per-download yt-dlp overrides as a JSON object." triggers="click" autoClose="outside" container="body">Custom yt-dlp Options</span>
                     <input type="text"
                       class="form-control"
                       placeholder='e.g. {"writesubtitles": true}'
@@ -546,7 +543,7 @@
               <div class="settings-section-label">Tools</div>
               <div class="row g-3">
                 <div class="col-md-4">
-                  <div class="action-group-label">Cookies <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Upload a cookies.txt file from your browser to authenticate restricted or private downloads." triggers="click" autoClose="outside" container="body" /></div>
+                  <div class="action-group-label help-title" ngbPopover="Upload a cookies.txt file from your browser to authenticate restricted or private downloads." triggers="click" autoClose="outside" container="body">Cookies</div>
                   <input type="file" id="cookie-upload" class="d-none" accept=".txt"
                     (change)="onCookieFileSelect($event)"
                     [disabled]="cookieUploadInProgress || addInProgress">
@@ -915,7 +912,7 @@
           </th>
           <th scope="col">Name</th>
           <th scope="col">URL</th>
-          <th scope="col" class="text-nowrap">Sub. title filter <fa-icon [icon]="faCircleQuestion" class="help-icon" role="button" tabindex="0" ngbPopover="Subscriptions only — which new video titles to queue when this feed is checked. Does not affect manual downloads." triggers="click" autoClose="outside" container="body" /></th>
+          <th scope="col" class="text-nowrap"><span class="help-title" ngbPopover="Subscriptions only — which new video titles to queue when this feed is checked. Does not affect manual downloads." triggers="click" autoClose="outside" container="body">Sub. title filter</span></th>
           <th scope="col" class="text-nowrap">Interval (min)</th>
           <th scope="col" class="text-nowrap">Last checked</th>
           <th scope="col">Status</th>
diff --git a/ui/src/app/app.sass b/ui/src/app/app.sass
index 7f4240f..c84d122 100644
--- a/ui/src/app/app.sass
+++ b/ui/src/app/app.sass
@@ -201,16 +201,12 @@ main
   color: var(--bs-secondary-color)
   margin-bottom: 0.4rem
 
-.help-icon
-  cursor: pointer
-  opacity: 0.55
-  padding: 0.25rem
-  margin-left: 0.25rem
-  font-size: 0.85em
-  line-height: 1
+.help-title
+  text-decoration: underline dotted
+  text-underline-offset: 0.2em
+  cursor: help
 
-  &:hover, &:focus
-    opacity: 1
+  &:focus
     outline: none
 
 .cookie-status
diff --git a/ui/src/app/app.ts b/ui/src/app/app.ts
index 06c881a..d145db7 100644
--- a/ui/src/app/app.ts
+++ b/ui/src/app/app.ts
@@ -7,7 +7,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { NgbModule, NgbTypeahead } from '@ng-bootstrap/ng-bootstrap';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faCircleQuestion, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
+import { faTrashAlt, faCheckCircle, faTimesCircle, faRedoAlt, faSun, faMoon, faCheck, faCircleHalfStroke, faDownload, faExternalLinkAlt, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt, faSortAmountDown, faSortAmountUp, faChevronRight, faChevronDown, faUpload, faPause, faPlay } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { AddDownloadPayload, DownloadsService } from './services/downloads.service';
@@ -172,7 +172,6 @@ export class App implements AfterViewInit, OnInit, OnDestroy {
   faMoon = faMoon;
   faCheck = faCheck;
   faCircleHalfStroke = faCircleHalfStroke;
-  faCircleQuestion = faCircleQuestion;
   faDownload = faDownload;
   faExternalLinkAlt = faExternalLinkAlt;
   faFileImport = faFileImport;