From f0aed6c3e2e8da3d3d2ba2c1f89a5da687f22beb Mon Sep 17 00:00:00 2001
From: pan <93918332+Panniku@users.noreply.github.com>
Date: Wed, 17 Jul 2024 21:57:14 +0530
Subject: [PATCH] update(serverSearch) patches -> ServerList API (#11)

* feat(ServerListIndicator) add ids for css

* feat: consistency

* feat(SpotifyControls): dummy color control

* fix: resolve merge

* Revert "feat(SpotifyControls): dummy color control"

This reverts commit 3a38e026790914dda3dfcafbec2111339ed8bc96.

* fix(ServerListIndicators): tooltip changes on mode

* fix(SpotifyControls): copy paste from source to sync

* fix: edit DiscordColorways to ServerListRenderPosition.Above

* Update index.tsx

* update(serverSearch): patches -> ServerList api

---------

Co-authored-by: thororen <78185467+thororen1234@users.noreply.github.com>
---
 src/equicordplugins/serverSearch/index.tsx  | 58 ++++++++++-----------
 src/equicordplugins/serverSearch/styles.css | 33 ++++++++++++
 2 files changed, 62 insertions(+), 29 deletions(-)
 create mode 100644 src/equicordplugins/serverSearch/styles.css

diff --git a/src/equicordplugins/serverSearch/index.tsx b/src/equicordplugins/serverSearch/index.tsx
index 849d255c..9f1f1df9 100644
--- a/src/equicordplugins/serverSearch/index.tsx
+++ b/src/equicordplugins/serverSearch/index.tsx
@@ -4,14 +4,19 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import "./styles.css";
+
+import { addServerListElement, removeServerListElement, ServerListRenderPosition } from "@api/ServerList";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { EquicordDevs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { findByCodeLazy } from "@webpack";
+import { Tooltip } from "webpack/common/components";
 
 const openPopout = findByCodeLazy(".QUICKSWITCHER_OPENED,{");
 function SearchIcon() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" id="vc-searchbutton-icon">
             <path
                 fill="currentColor"
                 fill-rule="evenodd"
@@ -25,35 +30,30 @@ export default definePlugin({
     name: "ServerSearch",
     authors: [EquicordDevs.camila314],
     description: "Navigate your servers better with a quick search button",
-    patches: [
-        {
-            find: ".guildSeparator",
-            replacement: {
-                match: /return(\(0,.+?}\)}\))/,
-                replace: "return $self.insertSearch(() => $1)"
-            }
-        },
-        {
-            find: "__invalid_circleButtonMask",
-            replacement: {
-                match: /let (\i)=(\i)\.forwardRef/,
-                replace: "let $1 = $self.BigComponent = $2.forwardRef"
-            }
-        },
-    ],
 
-    insertSearch(Elem) {
-        return (<>
-            <this.BigComponent
-                id="search-btn"
-                showPill={true}
-                tooltip="Search"
-                icon={() => <SearchIcon />}
-                onClick={() => openPopout("DM_SEARCH")}
-                search={true}
-            />
+    renderButton() {
+        return <ErrorBoundary noop>
+            <div id="vc-searchbutton-container">
+                <Tooltip text="Search" position="right">
+                    {({ onMouseEnter, onMouseLeave }) => (
+                        <div
+                            id="vc-searchbutton"
+                            onMouseEnter={onMouseEnter}
+                            onMouseLeave={onMouseLeave}
+                            onClick={() => openPopout("DM_SEARCH")}>
+                            <SearchIcon />
+                        </div>
+                    )}
+                </Tooltip>
+            </div>
+        </ErrorBoundary>;
+    },
 
-            <Elem />
-        </>);
+    start() {
+        addServerListElement(ServerListRenderPosition.Above, this.renderButton);
+    },
+
+    stop() {
+        removeServerListElement(ServerListRenderPosition.Above, this.renderButton);
     }
 });
diff --git a/src/equicordplugins/serverSearch/styles.css b/src/equicordplugins/serverSearch/styles.css
new file mode 100644
index 00000000..196d9535
--- /dev/null
+++ b/src/equicordplugins/serverSearch/styles.css
@@ -0,0 +1,33 @@
+#vc-searchbutton-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 8px;
+}
+
+#vc-searchbutton {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-secondary);
+    height: 48px;
+    width: 48px;
+    border-radius: 100%;
+    transition: border-radius 0.15s ease-out, background-color 0.15s ease-out;
+}
+
+#vc-searchbutton-icon {
+    color: var(--text-normal);
+}
+
+#vc-searchbutton:hover {
+    border-radius: 34%;
+    background-color: var(--green-360);
+    cursor: pointer;
+}
+
+#vc-searchbutton:hover #vc-searchbutton-icon {
+    color: var(--white-500);
+}