Make tabs into island

core/static/css/gia-theme.css

@@ -105,8 +105,15 @@ body .has-text-grey-light {
   color: var(--gia-text);
 }
 
-.tabs.is-boxed a {
+.tabs.is-boxed a,
-  border-radius: 0;
+.tabs.is-boxed li a,
+.tabs.is-boxed li:first-child a,
+.tabs.is-boxed li:last-child a {
+  border-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
 }
 
 .modal-card-head,
@@ -313,7 +320,7 @@ body.gia-has-workspace > .section.gia-workspace-page {
   box-sizing: border-box;
   min-height: 0;
   overflow: hidden;
-  padding: 1rem;
+  padding: 0.85rem 1rem 0.7rem;
 }
 
 .gia-workspace-shell {
@@ -321,14 +328,14 @@ body.gia-has-workspace > .section.gia-workspace-page {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.55rem;
 }
 
 .gia-workspace-main {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
-  gap: 1rem;
+  gap: 0.75rem;
   align-items: stretch;
 }
 
@@ -342,10 +349,10 @@ body.gia-has-workspace > .section.gia-workspace-page {
   height: 100%;
   min-height: 0;
   overflow: hidden;
-  border-radius: 1rem;
+  border: 0;
-  border: 1px solid var(--gia-border);
+  border-radius: 0;
-  background: var(--gia-surface-1);
+  background: transparent;
-  box-shadow: var(--gia-shadow);
+  box-shadow: none;
 }
 
 .gia-snap-assistant {
@@ -393,26 +400,47 @@ body.gia-has-workspace > .section.gia-workspace-page {
 .gia-taskbar {
   flex: 0 0 auto;
   margin: 0;
-  border: 1px solid var(--gia-border);
+  border: 0;
-  border-radius: 1rem;
+  border-radius: 0;
-  background: var(--gia-surface-1);
+  background: transparent;
-  box-shadow: var(--gia-shadow);
+  box-shadow: none;
   overflow-x: auto;
   overflow-y: hidden;
+  padding: 0 0.35rem;
 }
 
-.gia-taskbar ul {
+.gia-workspace-tabs {
+  margin: 0;
+}
+
+.gia-workspace-tabs ul {
   flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  justify-content: flex-start;
 }
 
-.gia-taskbar li {
+.gia-workspace-tabs li {
   flex: 0 0 auto;
 }
 
-.gia-taskbar a {
+.gia-workspace-tabs a {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
+  border-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+}
+
+.gia-workspace-launcher {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  height: 100%;
 }
 
 .gia-taskbar li.is-active a {
@@ -443,9 +471,13 @@ html.gia-has-workspace-root {
 .gia-widget-panel {
   height: 100%;
   margin-bottom: 0;
-  border-radius: 1rem;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.9rem;
   border: 1px solid var(--gia-border);
   background: var(--gia-surface-2);
+  box-shadow: var(--gia-shadow);
+  overflow: hidden;
 }
 
 .gia-widget-heading {
@@ -456,6 +488,8 @@ html.gia-has-workspace-root {
   flex-wrap: wrap;
   padding: 0.5rem 0.75rem;
   line-height: 1.2;
+  border-bottom: 1px solid var(--gia-border);
+  background: var(--gia-surface-3);
 }
 
 .gia-widget-heading-main {
@@ -493,8 +527,8 @@ html.gia-has-workspace-root {
   min-height: 0;
   overflow: hidden;
   padding: 0.75rem;
-  display: flex !important;
+  display: flex;
-  align-items: stretch !important;
+  align-items: stretch;
 }
 
 .gia-widget-control {

core/templates/base.html

@@ -43,7 +43,7 @@
     <link rel="preload" href="{% static 'vendor/fontawesome/webfonts/fa-regular-400.woff2' %}" as="font" type="font/woff2" integrity="sha512-qioT43fXB5q4Bbpn8sPQE9OIZLjKD0c0lVmpm6KmT8k34LM6gkRcOOMi1BOl2lohFG/7p9tzKfTP5G563BQq1g==" crossorigin="anonymous">
     <link rel="stylesheet" href="{% static 'css/bulma.min.css' %}" integrity="sha512-yh2RE0wZCVZeysGiqTwDTO/dKelCbS9bP2L94UvOFtl/FKXcNAje3Y2oBg/ZMZ3LS1sicYk4dYVGtDex75fvvA==" crossorigin="anonymous">
     <link rel="stylesheet" href="{% static 'vendor/fontawesome/css/all.css' %}" integrity="sha512-UKBBxJ5N3/MYiSsYTlEsARsp4vELKVRIklED4Mb6wpuVFOgy5Blt+sXUdz1TDReqWsm64xxBA2QoBJRCxI0x5Q==" crossorigin="anonymous">
-    <link rel="stylesheet" href="{% static 'css/gia-theme.css' %}" integrity="sha512-ySzeXoQreOo29Fv+kBiggvr2yLJEj4LO+Srcdw6rAENl1cAl6fzjVITZld1grkwMb+Hxe1jczo623coGQr0jsw==" crossorigin="anonymous">
+    <link rel="stylesheet" href="{% static 'css/gia-theme.css' %}" integrity="sha512-17wNDv0gA1saxAIzoySMcOef4/8dKEo2eZcWGhVHUjKolxhbfYVia9i/wExDqEw8MhfP4Kk8BrMajcOHngqJJg==" crossorigin="anonymous">
     {% block extra_head_assets %}{% endblock %}
     <script src="{% static 'js/htmx.min.js' %}" integrity="sha512-CGXFnDNv5q48ciFeIyWFcfZhqYW0sSBiPO+HZDO3XLM+p8xjhezz5CCxtkXVDKfCbvF+iUhel7xoeSp19o7x7g==" crossorigin="anonymous"></script>
     <script defer src="{% static 'js/remove-me.js' %}" integrity="sha512-uhE4kDw2+tXdJPDKSttOEYhVnwYq310+d5DMQnTjafJ58QLlYPyx0RTCNbjcrTiGfCjAhaQob4AumEUa2m3TaQ==" crossorigin="anonymous"></script>

core/templates/index.html

@@ -44,7 +44,7 @@
       </div>
       <nav
         id="gia-taskbar"
-        class="tabs is-boxed is-small gia-taskbar is-hidden"
+        class="tabs is-boxed is-small gia-workspace-tabs gia-taskbar is-hidden"
         aria-label="Open windows">
         <ul id="gia-taskbar-items">
         </ul>

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

@@ -1,70 +1,22 @@
-<div class="osint-workspace-tabs">
+<div class="gia-workspace-launcher">
-  <p class="is-size-7 has-text-weight-semibold" style="margin-bottom: 0.35rem;">
+  <p class="is-size-7 has-text-weight-semibold mb-2">
     OSINT Workspace
   </p>
-  <p class="is-size-7 has-text-grey" style="margin-bottom: 0.5rem;">
+  <nav class="tabs is-boxed is-small gia-workspace-tabs" aria-label="OSINT setup tabs">
-    One-line setup capsule. Each tab opens a fresh setup widget.
+    <ul>
-  </p>
-
-  <div class="osint-capsule-row" role="tablist" aria-label="OSINT setup tabs">
       {% for tab in tabs %}
-      <button
+        <li>
-        type="button"
+          <a
-        class="button osint-capsule-tab"
+            href="{{ tab.widget_url }}"
             hx-get="{{ tab.widget_url }}"
             hx-target="#widgets-here"
             hx-swap="beforeend"
             title="Open {{ tab.label }} setup widget">
             <span class="icon is-small"><i class="{{ tab.icon }}"></i></span>
             <span>{{ tab.label }}</span>
-      </button>
+          </a>
+        </li>
       {% endfor %}
+    </ul>
+  </nav>
 </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>

vendor/django-crud-mixins/mixins/templates/mixins/wm/widget.html

@@ -5,8 +5,8 @@
   {% if widget_script_srcs %}data-gia-script-srcs="{{ widget_script_srcs|join:'|' }}"{% endif %}>
   <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="20" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
     <div class="grid-stack-item-content">
-      <nav class="panel gia-widget-panel">
+      <section class="gia-widget-panel">
-        <p class="panel-heading gia-widget-heading">
+        <header class="gia-widget-heading">
           <span class="gia-widget-heading-main">
             <span class="icon is-small gia-widget-heading-icon">
               <i class="{{ widget_icon|default:'fa-solid fa-window-maximize' }}"></i>
@@ -54,15 +54,15 @@
               {% include 'mixins/partials/close-widget.html' %}
             {% endblock %}
           </span>
-        </p>
+        </header>
-        <article class="panel-block is-active gia-widget-body">
+        <div class="gia-widget-body">
           <div class="control gia-widget-control{% if widget_control_class %} {{ widget_control_class }}{% endif %}">
             {% block panel_content %}
               {% include window_content %}
             {% endblock %}
           </div>
-        </article>
+        </div>
-      </nav>
+      </section>
     </div>
   </div>
 </div>