Palette Updates

Author: AttAditya

src/components/window/Palette/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import type { Suggestion } from "@defs/UI";
 
@@ -16,6 +16,11 @@ export function Palette({
   const [query, setQuery] = useState<string>("");
   const [suggestions, setSuggestions] = useState<Suggestion[]>([]);
 
+  const handleBlur = useCallback(() => {
+    setActive(false);
+    setQuery("");
+  }, []);
+
   useEffect(() => {
     setSuggestions(generateSuggestions(query) || []);
   }, [generateSuggestions, query]);
@@ -24,7 +29,7 @@ export function Palette({
     <div
       className="app-navigator"
       onFocus={() => setActive(true)}
-      onBlur={() => setActive(false)}
+      onBlur={handleBlur}
     >
       <Input
         value={query}

src/components/window/Palette/style.css

@@ -2,6 +2,8 @@
   flex: 1;
   position: relative;
   pointer-events: all;
+  display: flex;
+  justify-content: center;
 }
 
 .app-navigator input {
@@ -14,24 +16,39 @@
   font-size: 0.75rem;
   outline: none !important;
   box-shadow: none;
+  opacity: 0.5;
+  transition:
+    padding 0.3s ease-in-out,
+    opacity 0.3s ease-in-out,
+    font-size 0.3s ease-in-out;
+}
+
+.app-navigator input:hover {
+  opacity: 1;
+}
+
+.app-navigator input:focus {
+  font-size: 1rem;
+  padding: 0.5rem 0.75rem;
+  opacity: 1;
 }
 
 .suggestions {
   position: absolute;
   top: calc(100% + 0.5rem);
-  left: 0;
+  left: 50%;
   width: 100%;
   max-width: 50rem;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   pointer-events: none;
-  transform: translateY(-50%) scaleY(0);
+  transform: translate(-50%, -50%) scaleY(0);
 }
 
 .suggestions.active {
   pointer-events: all;
-  transform: translateY(0) scaleY(1);
+  transform: translate(-50%, 0) scaleY(1);
 }
 
 .suggestion {

src/styles/index.css

@@ -17,6 +17,7 @@
     filter 0.3s ease-in-out,
     scale 0.3s ease-in-out,
     background-color 0.3s ease-in-out,
+    font-size 0.3s ease-in-out,
     color 0.3s ease-in-out,
     opacity 0.3s ease-in-out,
     transform 0.3s ease-in-out,