From 1adcb2ab1a2c1e6860186b75685f4e4736a8f788 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Sat, 21 Feb 2026 10:46:55 -0500
Subject: [PATCH] some tweaks to post selector and combobox

---
 .../dashboard/PublicationAnalytics.tsx        | 51 ++++++++-----------
 components/Combobox.tsx                       | 25 ++++++++-
 2 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
index fb2b6cb7..f856fd09 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
@@ -55,15 +55,15 @@ export const PublicationAnalytics = () => {
         <div className="flex justify-between items-center gap-2 pb-2 w-full">
           <div className="flex gap-2 items-center">
             <h3>Traffic</h3>
-            <ArrowRightTiny />
+            <ArrowRightTiny className="text-border" />
             <PostSelector
               selectedPost={selectedPost}
               setSelectedPost={setSelectedPost}
             />
             {selectedReferror && (
               <>
-                <ArrowRightTiny />
-                {selectedReferror.name}
+                <ArrowRightTiny className="text-border" />
+                <div className="text-tertiary"> {selectedReferror.name}</div>
               </>
             )}
           </div>
@@ -112,21 +112,9 @@ const PostSelector = (props: {
   return (
     <Combobox
       trigger={
-        open ? (
-          <Input
-            autoFocus
-            placeholder="search posts…"
-            className="input-with-border py-0! text-primary"
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            onPointerDown={(e) => e.stopPropagation()}
-          />
-        ) : (
-          <button className="text-tertiary">
-            {props.selectedPost ?? "All Posts"}
-          </button>
-        )
+        <button className="text-tertiary">
+          {props.selectedPost ?? "All Posts"}
+        </button>
       }
       results={filteredPostsWithClear || []}
       highlighted={highlighted}
@@ -135,6 +123,9 @@ const PostSelector = (props: {
         props.setSelectedPost(highlighted);
       }}
       sideOffset={2}
+      searchValue={searchValue}
+      setSearchValue={setSearchValue}
+      showSearch
     >
       {filteredPostsWithClear.map((post) => {
         if (post === "All Posts")
@@ -151,21 +142,23 @@ const PostSelector = (props: {
                 All Posts
               </ComboboxResult>
               {filteredPosts && filteredPosts.length !== 0 && (
-                <hr className="mx-1 text-tertiary" />
+                <hr className="mx-1 border-border-light" />
               )}
             </>
           );
         return (
-          <ComboboxResult
-            result={post}
-            onSelect={() => {
-              props.setSelectedPost(post);
-            }}
-            highlighted={highlighted}
-            setHighlighted={setHighlighted}
-          >
-            {post}
-          </ComboboxResult>
+          <>
+            <ComboboxResult
+              result={post}
+              onSelect={() => {
+                props.setSelectedPost(post);
+              }}
+              highlighted={highlighted}
+              setHighlighted={setHighlighted}
+            >
+              {post}
+            </ComboboxResult>
+          </>
         );
       })}
     </Combobox>
diff --git a/components/Combobox.tsx b/components/Combobox.tsx
index 69d9b8d5..7d0a5ba9 100644
--- a/components/Combobox.tsx
+++ b/components/Combobox.tsx
@@ -2,6 +2,7 @@ import { createContext, useContext, useEffect, useRef, useState } from "react";
 import * as Popover from "@radix-ui/react-popover";
 import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { create } from "zustand";
+import { Input } from "./Input";
 
 export const useComboboxState = create(() => ({
   open: false,
@@ -14,6 +15,9 @@ export const Combobox = ({
   onOpenChange,
   highlighted,
   setHighlighted,
+  searchValue,
+  setSearchValue,
+  showSearch,
   trigger,
   triggerClassName,
   sideOffset,
@@ -26,6 +30,9 @@ export const Combobox = ({
   onOpenChange?: (open: boolean) => void;
   highlighted: string | undefined;
   setHighlighted: (h: string | undefined) => void;
+  searchValue?: string;
+  setSearchValue?: (s: string) => void;
+  showSearch?: boolean;
   sideOffset?: number;
 }) => {
   let ref = useRef<HTMLDivElement>(null);
@@ -112,8 +119,24 @@ export const Combobox = ({
             `}
         >
           <NestedCardThemeProvider>
-            <div className="commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page py-1 gap-0.5 border border-border rounded-md shadow-md">
+            <div
+              className={`commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page gap-0.5 border border-border rounded-md shadow-md `}
+            >
+              {showSearch && setSearchValue ? (
+                <Input
+                  autoFocus
+                  placeholder="search…"
+                  className={`px-3 pb-1 pt-1  text-primary focus-within:outline-none! focus:outline-none! focus-visible:outline-none! appearance-none bg-bg-page border-border-light border-b group-data-[side=top]/cmd-menu:border-t group-data-[side=top]/cmd-menu:border-b-0
+                  sticky group-data-[side=top]/cmd-menu:bottom-0 top-0`}
+                  value={searchValue}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                  onClick={(e) => e.stopPropagation()}
+                  onPointerDown={(e) => e.stopPropagation()}
+                />
+              ) : null}
+              <div className="space h-1 w-full bg-transparent" />
               {children}
+              <div className="space h-1 w-full bg-transparent" />
             </div>
           </NestedCardThemeProvider>
         </Popover.Content>
-- 
2.51.2