Skip to content

Commit 6865247

Browse files
jamesmontemagnojamesmontemagno
authored
Merge pull request #17 from jamesmontemagno:copilot/implement-default-sort-relevance
Add omni-search for package registries with grouped results and registry filters
2 parents d044be4 + 4763027 commit 6865247

5 files changed

Lines changed: 1114 additions & 32 deletions

File tree

‎src/components/PackageSearchDropdown.module.css‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
/* Package Search Dropdown Styles */
2+
3+
.searchDropdown {
4+
position: absolute;
5+
top: 100%;
6+
left: 0;
7+
right: 0;
8+
z-index: 1000;
9+
margin-top: 0.5rem;
10+
max-height: 600px;
11+
overflow-y: auto;
12+
background: var(--bg-white);
13+
border: 1px solid var(--border-color);
14+
border-radius: var(--radius-md);
15+
box-shadow: var(--shadow-lg);
16+
animation: slideDown 0.2s ease-out;
17+
}
18+
19+
@keyframes slideDown {
20+
from {
21+
opacity: 0;
22+
transform: translateY(-10px);
23+
}
24+
to {
25+
opacity: 1;
26+
transform: translateY(0);
27+
}
28+
}
29+
30+
.searchResults {
31+
padding: 0;
32+
}
33+
34+
/* Loading State */
35+
.searchLoading {
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
gap: 0.75rem;
40+
padding: 2rem;
41+
color: var(--text-light);
42+
font-size: 0.95rem;
43+
}
44+
45+
.spinner {
46+
width: 20px;
47+
height: 20px;
48+
border: 3px solid var(--border-light);
49+
border-top-color: var(--primary-color);
50+
border-radius: 50%;
51+
animation: spin 0.8s linear infinite;
52+
}
53+
54+
@keyframes spin {
55+
to {
56+
transform: rotate(360deg);
57+
}
58+
}
59+
60+
/* Error State */
61+
.searchError {
62+
padding: 1.5rem;
63+
color: #ef4444;
64+
text-align: center;
65+
font-size: 0.9rem;
66+
}
67+
68+
/* Empty State */
69+
.searchEmpty {
70+
padding: 2rem;
71+
text-align: center;
72+
color: var(--text-light);
73+
}
74+
75+
.searchEmptyIcon {
76+
font-size: 2.5rem;
77+
margin-bottom: 0.5rem;
78+
opacity: 0.5;
79+
}
80+
81+
.searchEmpty > div:nth-child(2) {
82+
font-size: 1rem;
83+
margin-bottom: 0.5rem;
84+
}
85+
86+
.searchHint {
87+
font-size: 0.85rem;
88+
color: var(--text-lighter);
89+
}
90+
91+
/* Grouped Results */
92+
.groupedResults {
93+
display: flex;
94+
flex-direction: column;
95+
}
96+
97+
.registryGroup {
98+
border-bottom: 1px solid var(--border-light);
99+
}
100+
101+
.registryGroup:last-child {
102+
border-bottom: none;
103+
}
104+
105+
.registryHeader {
106+
display: flex;
107+
align-items: center;
108+
justify-content: space-between;
109+
padding: 0.75rem 1rem;
110+
background: var(--bg-light);
111+
border-bottom: 1px solid var(--border-light);
112+
position: sticky;
113+
top: 0;
114+
z-index: 10;
115+
}
116+
117+
.registryName {
118+
font-weight: 600;
119+
font-size: 0.9rem;
120+
color: var(--text-color);
121+
letter-spacing: 0.02em;
122+
}
123+
124+
.registryCount {
125+
font-size: 0.8rem;
126+
color: var(--text-lighter);
127+
font-weight: 500;
128+
}
129+
130+
/* Package List */
131+
.packageList {
132+
list-style: none;
133+
margin: 0;
134+
padding: 0;
135+
}
136+
137+
.packageItem {
138+
padding: 1rem;
139+
cursor: pointer;
140+
border-bottom: 1px solid var(--border-light);
141+
transition: background-color 0.15s ease;
142+
}
143+
144+
.packageItem:last-child {
145+
border-bottom: none;
146+
}
147+
148+
.packageItem:hover {
149+
background: var(--bg-light);
150+
}
151+
152+
.packageItem:active {
153+
background: var(--border-light);
154+
}
155+
156+
.packageHeader {
157+
display: flex;
158+
align-items: center;
159+
justify-content: space-between;
160+
gap: 1rem;
161+
margin-bottom: 0.5rem;
162+
}
163+
164+
.packageInfo {
165+
display: flex;
166+
align-items: baseline;
167+
gap: 0.5rem;
168+
flex: 1;
169+
min-width: 0;
170+
}
171+
172+
.packageName {
173+
font-weight: 600;
174+
font-size: 0.95rem;
175+
color: var(--text-color);
176+
overflow: hidden;
177+
text-overflow: ellipsis;
178+
white-space: nowrap;
179+
}
180+
181+
.packageVersion {
182+
font-size: 0.8rem;
183+
color: var(--text-lighter);
184+
font-family: ui-monospace, monospace;
185+
flex-shrink: 0;
186+
}
187+
188+
.packageStats {
189+
display: flex;
190+
align-items: center;
191+
gap: 0.35rem;
192+
font-size: 0.85rem;
193+
color: var(--text-light);
194+
flex-shrink: 0;
195+
}
196+
197+
.packageDescription {
198+
margin: 0;
199+
font-size: 0.875rem;
200+
color: var(--text-light);
201+
line-height: 1.4;
202+
overflow: hidden;
203+
display: -webkit-box;
204+
-webkit-line-clamp: 2;
205+
-webkit-box-orient: vertical;
206+
}
207+
208+
/* Responsive Design */
209+
@media (max-width: 768px) {
210+
.searchDropdown {
211+
max-height: 400px;
212+
}
213+
214+
.packageItem {
215+
padding: 0.875rem;
216+
}
217+
218+
.packageHeader {
219+
flex-direction: column;
220+
align-items: flex-start;
221+
gap: 0.5rem;
222+
}
223+
224+
.packageStats {
225+
align-self: flex-start;
226+
}
227+
}
228+
229+
/* Scrollbar Styling */
230+
.searchDropdown::-webkit-scrollbar {
231+
width: 8px;
232+
}
233+
234+
.searchDropdown::-webkit-scrollbar-track {
235+
background: var(--bg-light);
236+
}
237+
238+
.searchDropdown::-webkit-scrollbar-thumb {
239+
background: var(--border-color);
240+
border-radius: 4px;
241+
}
242+
243+
.searchDropdown::-webkit-scrollbar-thumb:hover {
244+
background: var(--text-lighter);
245+
}

0 commit comments

Comments
 (0)