add slot above results full width for plugins

Author: riofriz

src/client/modules/renderer/render-slots.ts

@@ -1,6 +1,7 @@
 import { SlotPanelPosition, type SlotPanel } from "../../types";
 
 const SLOT_IDS = [
+  "slot-full-width-above-results",
   "slot-above-results",
   "slot-below-results",
   "slot-above-sidebar",
@@ -20,6 +21,9 @@ function _renderSlotPanelsInto(panels: SlotPanel[], clearFirst: boolean): void {
   if (!panels || !Array.isArray(panels) || panels.length === 0) return;
   if (clearFirst) clearSlotPanels();
   const byPosition: Record<SlotPanelPosition, HTMLElement | null> = {
+    [SlotPanelPosition.FullWidthAboveResults]: document.getElementById(
+      "slot-full-width-above-results",
+    ),
     [SlotPanelPosition.AboveResults]:
       document.getElementById("slot-above-results"),
     [SlotPanelPosition.BelowResults]:
@@ -36,10 +40,17 @@ function _renderSlotPanelsInto(panels: SlotPanel[], clearFirst: boolean): void {
     if (!container) continue;
     if (panel.position === SlotPanelPosition.AtAGlance) {
       container.innerHTML = panel.html;
+    } else if (panel.position === SlotPanelPosition.FullWidthAboveResults) {
+      const block = document.createElement("div");
+      block.className = "results-slot-panel-full-width";
+      if (panel.id) block.dataset.slot = panel.id;
+      block.innerHTML = panel.html;
+      container.appendChild(block);
     } else {
       const block = document.createElement("div");
       block.className =
         "results-slot-panel degoog-panel degoog-panel--slot degoog-panel--stack-item";
+      if (panel.id) block.dataset.slot = panel.id;
       const grid = panel.gridSize ?? 4;
       block.dataset.grid = String(grid);
       if (panel.title) {

src/public/themes/degoog-theme/search.html

@@ -3,6 +3,10 @@
     <div id="results-header"></div>
     <div id="results-tabs"></div>
     <div id="results-meta"></div>
+    <div
+      id="slot-full-width-above-results"
+      data-position="full-width-above-results"
+    ></div>
     <div id="results-layout">
       <div id="results-main">
         <div id="at-a-glance"></div>

src/shared/search-types.ts

@@ -32,6 +32,7 @@ export interface EngineTiming {
 export enum SlotPanelPosition {
   AboveResults = "above-results",
   BelowResults = "below-results",
+  FullWidthAboveResults = "full-width-above-results",
   AboveSidebar = "above-sidebar",
   BelowSidebar = "below-sidebar",
   KnowledgePanel = "knowledge-panel",

src/styles/components/overrides/_results.scss

@@ -420,6 +420,27 @@
   margin: $space-5 0;
 }
 
+#slot-full-width-above-results {
+  &:empty { display: none; }
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 83.25rem;
+  margin: 0 0 $space-5;
+  padding: 0 clamp(1rem, 1rem + max(0px, (100vw - 48rem) * 0.31), 9.375rem);
+
+  .results-slot-panel-full-width {
+    width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    #results-page.centered-mode & {
+      max-width: $results-centered-max;
+      margin-inline: auto;
+      padding-inline: $space-5;
+    }
+  }
+}
+
 #slot-above-sidebar,
 #slot-below-sidebar {
   &:empty { display: none; }