From 09c8b0de38e815500f2382e34cf1dc5bfa3add92 Mon Sep 17 00:00:00 2001
From: Tyler Woods <tyler.woods66@gmail.com>
Date: Fri, 7 Jun 2024 19:40:24 -0500
Subject: [PATCH 1/4] alternative style

---
 components/Script.tsx        |  5 ++++-
 components/ScriptBrowser.tsx | 22 ++++++++++++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/Script.tsx b/components/Script.tsx
index 2503d52..1dc86cf 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -5,7 +5,7 @@ import { Suspense, useEffect, useState, useMemo } from "react";
 import { extractDate } from "@/lib/time";
 import { Button } from "./ui/button";
 import { toast } from "sonner";
-import { Clipboard, Info, X, Code, Globe, BookOpenText, ExternalLink } from "lucide-react";
+import { Clipboard, Info, X, Code, Globe, BookOpenText, ExternalLink, Copy } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import Link from "next/link";
 import { Category, Script } from "@/lib/types";
@@ -419,6 +419,7 @@ function ScriptItem({
                                 {!isMobile && item.alpineScript
                                   ? item.alpineScript
                                   : "Copy install command"}
+                                  <Copy></Copy>
                               </Button>
                             </>
                           )}
@@ -454,6 +455,8 @@ function ScriptItem({
                           {!isMobile && installCommand
                             ? installCommand
                             : "Copy install command"}
+                            <span className="p-2"></span>
+                            <Copy className="w-4"></Copy>
                         </Button>
                       </>
                     )}
diff --git a/components/ScriptBrowser.tsx b/components/ScriptBrowser.tsx
index 5f03629..7bc6f1e 100644
--- a/components/ScriptBrowser.tsx
+++ b/components/ScriptBrowser.tsx
@@ -192,19 +192,28 @@ const ScriptBrowser = ({
           </p>
         )}
       </div>
+      <div className="rounded-lg">
       <Accordion {...accordionProps}>
         {filteredLinks.map((category) => (
           <AccordionItem
             key={category.collectionId}
             value={category.catagoryName}
-            className="sm:text-md flex flex-col"
+            className={clsx(
+              'sm:text-md flex flex-col border-none px-2',
+              { 'bg-accent/30 rounded-lg': expandedItems.includes(category.catagoryName) && expandedItems.length <= 1 }
+            )}
           >
-            <AccordionTrigger className="hover:underline">
+            <AccordionTrigger
+              className={clsx(
+                'transition ease-in-out hover:-translate-y-1 hover:scale-105 hover:bg-accent duration-250 rounded-lg',
+                { '': expandedItems.includes(category.catagoryName) }
+              )}
+            >
               <div className="mr-2 flex w-full items-center justify-between">
-                <span className="hover:underline">
+                <span className="ml-2">
                   {category.catagoryName}{" "}
                 </span>
-                <span className=" rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
+                <span className="rounded-full bg-gray-200 px-2 py-1 text-xs text-muted-foreground hover:no-underline dark:bg-blue-800/20">
                   {category.expand.items.length}
                 </span>
               </div>{" "}
@@ -228,9 +237,9 @@ const ScriptBrowser = ({
                         pathname: "/scripts",
                         query: { id: script.title },
                       }}
-                      className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-blue-300/20 hover:bg-neutral-50 hover:dark:bg-blue-900/20 ${
+                      className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${
                         selectedScript === script.title
-                          ? "rounded-lg bg-blue-300/20 font-semibold dark:bg-blue-900/20 dark:text-white"
+                          ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
                           : ""
                       }`}
                       onClick={() => handleSelected(script.title)}
@@ -279,6 +288,7 @@ const ScriptBrowser = ({
         ))}
       </Accordion>
     </div>
+    </div>
   );
 };
 

From e261d3af3649206edc1a4b910203b22302d7c8e1 Mon Sep 17 00:00:00 2001
From: Tyler Woods <tyler.woods66@gmail.com>
Date: Fri, 7 Jun 2024 20:03:42 -0500
Subject: [PATCH 2/4] update container heading placement

---
 components/Script.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/Script.tsx b/components/Script.tsx
index 1dc86cf..fbc730c 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -343,10 +343,12 @@ function ScriptItem({
                     )}
                   </div>
 
-                  <div className="mt-4 rounded-lg border bg-accent/50 p-4">
-                    <h2 className="text-lg font-semibold">
+                  <div className="mt-4 rounded-lg border bg-accent/50">
+                    <h2 className="py-2 px-4 text-lg font-semibold">
                       How to {item.item_type ? "install" : "use"}
                     </h2>
+                    <Separator className="w-full"></Separator>
+                    <div className="p-4">
                     {item.hasAlpineScript ? (
                       <Tabs
                         defaultValue="default"
@@ -460,6 +462,7 @@ function ScriptItem({
                         </Button>
                       </>
                     )}
+                    </div>
                   </div>
                 </div>
               </div>

From 1087286dd743d7c822aa59fef83ae30c64ceefd2 Mon Sep 17 00:00:00 2001
From: Tyler Woods <tyler.woods66@gmail.com>
Date: Fri, 7 Jun 2024 20:08:29 -0500
Subject: [PATCH 3/4] padding

---
 components/Script.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/Script.tsx b/components/Script.tsx
index fbc730c..ae9f46c 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -315,12 +315,14 @@ function ScriptItem({
                 <Separator className="mt-4" />
                 <div>
                   <div className="mt-4">
-                    <h2 className="max-w-prose text-lg font-semibold">
+                    <div className="p-2">
+                    <h2 className="max-w-prose text-lg font-semibold mb-2">
                       Description
                     </h2>
                     <p className="text-sm">
                       {descriptionCodeBlock(item.description)}
                     </p>
+                    </div>
                     {item.alert1 && (
                       <div className="mt-4 flex flex-col gap-2">
                         <p className="inline-flex items-center gap-2 rounded-lg border border-red-500/25 bg-destructive/25 p-2 pl-4 text-sm">

From 59963e676f71033f0f36ace11b2061b03391c6d1 Mon Sep 17 00:00:00 2001
From: Tyler Woods <tyler.woods66@gmail.com>
Date: Fri, 7 Jun 2024 20:34:21 -0500
Subject: [PATCH 4/4] tidy up the search display

---
 components/ScriptBrowser.tsx | 63 +++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/components/ScriptBrowser.tsx b/components/ScriptBrowser.tsx
index 7bc6f1e..7818ee2 100644
--- a/components/ScriptBrowser.tsx
+++ b/components/ScriptBrowser.tsx
@@ -12,6 +12,7 @@ import { X, EyeOff, Eye, Star } from "lucide-react";
 import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
 import { Category } from "@/lib/types";
 import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
 import clsx from "clsx";
 
 const ScriptBrowser = ({
@@ -151,7 +152,7 @@ const ScriptBrowser = ({
           <Input
             className="flex-grow bg-accent/30"
             type="text"
-            placeholder="Type '/' to search"
+            placeholder="Search..."
             onChange={(e) => handleSearch(e.target.value)}
             ref={inputRef}
             value={searchTerm}
@@ -168,28 +169,25 @@ const ScriptBrowser = ({
           )}
         </div>
         {searchTerm ? (
-          <p className="mb-2 ml-2 text-xs text-muted-foreground">
-            Press &apos;Esc&apos; to clear the search
-          </p>
+          <div className="mb-2 ml-2 text-xs text-muted-foreground">
+            <p className="text-sm">
+              Press
+              <kbd className="m-1 inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium">
+                <span className="text-xs">esc</span>
+              </kbd>
+              to clear the search
+            </p>
+          </div>
         ) : (
-          <p className="mb-2 ml-2 text-xs text-muted-foreground">
-            <a
-              className="cursor-pointer"
-              onClick={() => setShowLogos(!showLogos)}
-            >
-              {showLogos ? (
-                <>
-                  <EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
-                  Hide Logos
-                </>
-              ) : (
-                <>
-                  <Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
-                  Show Logos
-                </>
-              )}
-            </a>
-          </p>
+          <div className="mb-2 ml-2 text-xs text-muted-foreground">
+            <p className="text-sm">
+              Press
+              <kbd className="m-1 inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium">
+                <span className="text-xs">/</span>
+              </kbd>
+              to search
+            </p>
+          </div>
         )}
       </div>
       <div className="rounded-lg">
@@ -288,7 +286,26 @@ const ScriptBrowser = ({
         ))}
       </Accordion>
     </div>
-    </div>
+    <p className="mt-6 ml-4 text-xs text-muted-foreground flex justify-center">
+      <Button
+      variant="outline"
+        className="cursor-pointer"
+        onClick={() => setShowLogos(!showLogos)}
+      >
+        {showLogos ? (
+          <>
+            <EyeOff className="mr-1 inline-block h-4 w-4 align-text-bottom" />
+            Hide Logos
+          </>
+        ) : (
+          <>
+            <Eye className="mr-1 inline-block h-4 w-4 align-text-bottom" />
+            Show Logos
+          </>
+        )}
+      </Button>
+      </p>
+  </div>
   );
 };