refactor: clean some codes

components/sidebar/search-bar.tsx

@@ -41,10 +41,10 @@ export function SearchBar() {
   };
 
   return (
-    <div className="relative flex w-full items-center">
+    <div className="relative flex items-center">
       <Input
         ref={inputRef}
-        className="flex-1 pr-16 font-sans"
+        className="w-full pr-16 font-sans"
         value={text}
         onChange={changeText}
         onKeyDown={searchIfEnter}

components/sidebar/tool-group.tsx

@@ -14,7 +14,6 @@ type Props = IToolGroup & {
   isOpend: boolean;
 };
 
-// FIXME: css outline messed up
 export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
   const pathname = usePathname();
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -25,18 +24,19 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
     <Accordion.AccordionItem value={href}>
       <Accordion.Header asChild>
         <div className="relative flex">
-          <ToolLink
-            className="flex-1"
-            {...{ Icon, href, onClick }}
-            shortTitle={title}
-            highlight={
-              pathname === href
-                ? "both"
-                : !isOpend && pathname.startsWith(`${href}/`)
-                ? "indicatorOnly"
-                : "none"
-            }
-          />
+          <div className="flex-1">
+            <ToolLink
+              {...{ Icon, href, onClick }}
+              shortTitle={title}
+              highlight={
+                pathname === href
+                  ? "both"
+                  : !isOpend && pathname.startsWith(`${href}/`)
+                  ? "indicatorOnly"
+                  : "none"
+              }
+            />
+          </div>
           <Accordion.Trigger
             ref={triggerRef}
             className={cn(
@@ -61,10 +61,9 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
           {Object.values(tools).map(tool => (
             <li className="mt-1" key={tool.href}>
               <ToolLink
-                // -outline-offset-1: ugly hack for Chrome outlines
-                className="pl-8 -outline-offset-1"
                 {...tool}
                 highlight={isOpend && pathname === tool.href ? "both" : "none"}
+                grouped
               />
             </li>
           ))}

components/sidebar/tool-link.tsx

@@ -8,22 +8,24 @@ import { cn } from "@/lib/style";
 import { Indicator } from "@/components/indicator";
 
 type Props = Pick<Tool, "Icon" | "shortTitle"> &
-  Pick<LinkProps<unknown>, "className" | "href" | "onClick"> & {
+  Pick<LinkProps<unknown>, "href" | "onClick"> & {
     highlight: "both" | "indicatorOnly" | "none";
+    grouped?: true;
   };
 
-function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highlight }: Props) {
+// FIXME: css outline messed up
+function RawToolLink({ Icon, shortTitle: title, href, onClick, highlight, grouped }: Props) {
   return (
     <Link
       className={cn(
         "flex h-10 items-center gap-3 rounded",
         highlight === "both" && "bg-accent",
-        "hover:bg-accent",
-        className
+        grouped && "pl-8 -outline-offset-1", // -outline-offset-1: ugly hack for Chrome outlines
+        "hover:bg-accent"
       )}
       {...{ href, onClick }}
     >
-      <span className={cn("invisible flex items-center", highlight !== "none" && "visible")}>
+      <span className={cn("flex items-center", highlight === "none" && "invisible")}>
         <Indicator />
       </span>
       <span className="flex select-none items-center gap-4">