From 653cd16eb2d78a051bcd52493f8ae7c76b4c8232 Mon Sep 17 00:00:00 2001
From: Gykes <zeniiigmaa@gmail.com>
Date: Mon, 9 Sep 2024 21:54:15 -0700
Subject: [PATCH] Updating Reload Scrapers formatting (#5235)

Per convo with people on Discord. I have updated the Reload Scrapers UI. It now adds a button if the filter box appears and then the button extends and takes up the whole space if the filter box does not exist.
---------
Co-authored-by: CJ <tedabed@gmail.com>
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
---
 ui/v2.5/src/components/Shared/ScraperMenu.tsx | 38 +++++++++----------
 ui/v2.5/src/components/Shared/styles.scss     | 30 +++++++++++++++
 2 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/ui/v2.5/src/components/Shared/ScraperMenu.tsx b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
index f73103e57..4cc38b6f8 100644
--- a/ui/v2.5/src/components/Shared/ScraperMenu.tsx
+++ b/ui/v2.5/src/components/Shared/ScraperMenu.tsx
@@ -1,14 +1,12 @@
 import React, { useMemo, useState } from "react";
-import { Dropdown } from "react-bootstrap";
-import { FormattedMessage, useIntl } from "react-intl";
+import { Dropdown, Button } from "react-bootstrap";
+import { useIntl } from "react-intl";
 import { Icon } from "./Icon";
 import { stashboxDisplayName } from "src/utils/stashbox";
 import { ScraperSourceInput, StashBox } from "src/core/generated-graphql";
 import { faSyncAlt } from "@fortawesome/free-solid-svg-icons";
 import { ClearableInput } from "./ClearableInput";
 
-const minFilteredScrapers = 5;
-
 export const ScraperMenu: React.FC<{
   toggle: React.ReactNode;
   variant?: string;
@@ -54,22 +52,22 @@ export const ScraperMenu: React.FC<{
       <Dropdown.Toggle variant={variant}>{toggle}</Dropdown.Toggle>
 
       <Dropdown.Menu>
-        <Dropdown.Item onClick={() => onReloadScrapers()}>
-          <span className="fa-icon">
-            <Icon icon={faSyncAlt} />
-          </span>
-          <span>
-            <FormattedMessage id="actions.reload_scrapers" />
-          </span>
-        </Dropdown.Item>
-
-        {(stashBoxes?.length ?? 0) + scrapers.length > minFilteredScrapers && (
-          <ClearableInput
-            placeholder={`${intl.formatMessage({ id: "filter" })}...`}
-            value={filter}
-            setValue={setFilter}
-          />
-        )}
+        <div className="scraper-filter-container">
+          <div className="btn-group">
+            <ClearableInput
+              placeholder={`${intl.formatMessage({ id: "filter" })}...`}
+              value={filter}
+              setValue={setFilter}
+            />
+            <Button
+              onClick={onReloadScrapers}
+              className="reload-button"
+              title={intl.formatMessage({ id: "actions.reload_scrapers" })}
+            >
+              <Icon icon={faSyncAlt} />
+            </Button>
+          </div>
+        </div>
 
         {filteredStashboxes.map((s, index) => (
           <Dropdown.Item
diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
index 41b4f293a..644eff047 100644
--- a/ui/v2.5/src/components/Shared/styles.scss
+++ b/ui/v2.5/src/components/Shared/styles.scss
@@ -642,9 +642,39 @@ button.btn.favorite-button {
 
 .scraper-menu .dropdown-menu {
   min-width: 250px;
+  padding-top: 0;
 
   .dropdown-divider {
     border-top-color: $textfield-bg;
     margin: 0;
   }
+
+  .scraper-filter-container {
+    background-color: $secondary;
+    border-bottom: solid 1px $textfield-bg;
+    padding: 5px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+
+    .btn-group {
+      border: solid 1px $textfield-bg;
+      border-radius: 5px;
+      width: 100%;
+    }
+
+    .clearable-text-field {
+      background-color: $textfield-bg;
+    }
+
+    .clearable-text-field-clear {
+      background-color: unset;
+      border: unset;
+    }
+
+    .reload-button.btn {
+      border-bottom-right-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
+    }
+  }
 }