Improve and condense related controls

core/templates/partials/osint-workspace-tabs-widget.html

@@ -0,0 +1,71 @@
+<div class="osint-workspace-tabs">
+  <p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.35rem;">
+    OSINT Workspace
+  </p>
+  <p class="is-size-7 has-text-grey" style="margin-bottom: 0.5rem;">
+    One-line setup capsule. Each tab opens a fresh setup widget.
+  </p>
+
+  <div class="osint-capsule-row" role="tablist" aria-label="OSINT setup tabs">
+    {% for tab in tabs %}
+      <button
+        type="button"
+        class="button osint-capsule-tab"
+        hx-get="{{ tab.widget_url }}"
+        hx-target="#widgets-here"
+        hx-swap="afterend"
+        onclick="document.getElementById('widgets-here').style.display='block';"
+        title="Open {{ tab.label }} setup widget">
+        <span class="icon is-small"><i class="{{ tab.icon }}"></i></span>
+        <span>{{ tab.label }}</span>
+      </button>
+    {% endfor %}
+  </div>
+</div>
+
+<style>
+  .osint-capsule-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0.35rem;
+    width: 100%;
+    overflow-x: auto;
+    padding: 0.3rem;
+    border-radius: 999px;
+    border: 1px solid rgba(0, 0, 0, 0.16);
+    background: linear-gradient(180deg, rgba(248, 250, 254, 0.95), rgba(255, 255, 255, 0.96));
+  }
+
+  .osint-capsule-tab {
+    border-radius: 999px;
+    border: 1px solid rgba(0, 0, 0, 0.14);
+    background: #fff;
+    box-shadow: none;
+    white-space: nowrap;
+    min-height: 2rem;
+    padding-left: 0.7rem;
+    padding-right: 0.7rem;
+    font-weight: 600;
+  }
+
+  .osint-capsule-tab:hover,
+  .osint-capsule-tab:focus-visible {
+    border-color: rgba(50, 115, 220, 0.5);
+    color: #2f67b2;
+  }
+
+  @media (max-width: 768px) {
+    .osint-capsule-row {
+      gap: 0.28rem;
+      padding: 0.25rem;
+    }
+
+    .osint-capsule-tab {
+      min-height: 1.82rem;
+      padding-left: 0.55rem;
+      padding-right: 0.55rem;
+      font-size: 0.76rem;
+    }
+  }
+</style>