monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix: refine search modal styling and list component

Browse Source
This commit is contained in:
David Hill
2026-01-17 00:28:44 +00:00
parent dfa2a9f225
commit d23c21023a
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/app/src/components/dialog-select-file.tsx
View File

@@ -134,14 +134,14 @@ export function DialogSelectFile() {
}) })
return ( return (
<Dialog title="Search"> <Dialog class="pt-3 pb-0">
<List <List
search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "px-3" }} search={{ placeholder: "Search files and commands", autofocus: true, hideIcon: true, class: "pl-3 pr-2 !mb-0" }}
emptyMessage="No results found" emptyMessage="No results found"
items={items} items={items}
key={(item) => item.id} key={(item) => item.id}
filterKeys={["title", "description", "category"]} filterKeys={["title", "description", "category"]}
groupBy={(item) => (grouped() ? item.category : "")} groupBy={(item) => item.category}
onMove={handleMove} onMove={handleMove}
onSelect={handleSelect} onSelect={handleSelect}
> >

11
packages/ui/src/components/list.css
View File

@@ -56,11 +56,14 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: transparent; background-color: transparent;
opacity: 0.5;
transition: opacity 0.15s ease;
&:hover:not(:disabled), &:hover:not(:disabled),
&:focus:not(:disabled), &:focus:not(:disabled),
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: transparent; background-color: transparent;
opacity: 0.7;
} }
&:hover:not(:disabled) [data-slot="icon-svg"] { &:hover:not(:disabled) [data-slot="icon-svg"] {
@@ -125,10 +128,14 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&:last-child {
padding-bottom: 12px;
}
[data-slot="list-header"] { [data-slot="list-header"] {
display: flex; display: flex;
z-index: 10; z-index: 10;
padding: 0 12px 8px 8px; padding: 8px 12px 8px 12px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
align-self: stretch; align-self: stretch;
@@ -136,7 +143,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
color: var(--text-base); color: var(--text-weak);
/* text-14-medium */ /* text-14-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);