src/scss/components/_search.scss · gabriel/musehub

_search.scss

251 lines 7.1 KB

sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ breaking 1 day ago

1	// ─────────────────────────────────────────────────────────────────────────────
2	// Component: Search
3	// File: src/scss/components/_search.scss
4	//
5	// Parts: .search-box .search-field .search-input .search-icon
6	// .search-clear .search-spinner
7	// .search-type-bar .search-type-label .search-type-pill
8	// .search-results .search-results__* .search-commit-*
9	// Tokens: --bg-overlay, --border-default, --border-glow, --color-accent
10	// ─────────────────────────────────────────────────────────────────────────────
11
12	// ── Search box container ──────────────────────────────────────────────────────
13	.search-box {
14	width: 100%;
15	display: flex;
16	flex-direction: column;
17	gap: var(--space-3);
18	}
19
20	// ── Search field — wraps icon + input + clear + spinner ───────────────────────
21	.search-field {
22	display: flex;
23	align-items: center;
24	gap: 8px;
25	background: transparent;
26	border: 1px solid rgba(255, 255, 255, 0.1);
27	border-radius: 6px;
28	padding: 0 14px;
29	height: 40px;
30	transition: border-color var(--transition-fast);
31
32	&:focus-within,
33	&--active { border-color: var(--border-glow); }
34	}
35
36	.search-icon { color: var(--text-muted); flex-shrink: 0; width: 15px; height: 15px; }
37
38	.search-input {
39	flex: 1;
40	background: transparent;
41	border: none;
42	outline: none;
43	box-shadow: none;
44	padding: 0;
45	width: auto;
46	font-size: var(--text-base);
47	color: var(--text-primary);
48	min-width: 0;
49
50	&::placeholder { color: var(--text-muted); }
51	}
52
53	.search-clear {
54	display: flex;
55	align-items: center;
56	justify-content: center;
57	background: none;
58	border: none;
59	cursor: pointer;
60	color: var(--text-muted);
61	padding: var(--space-1);
62	border-radius: var(--radius-sm);
63	transition: color var(--transition-fast), background var(--transition-fast);
64	flex-shrink: 0;
65
66	&:hover { color: var(--text-primary); background: var(--bg-overlay); }
67	}
68
69	.search-spinner {
70	display: flex;
71	align-items: center;
72	flex-shrink: 0;
73	margin-left: var(--space-2);
74	color: var(--color-accent);
75
76	.spin-icon { animation: spin 0.8s linear infinite; }
77	}
78
79	// ── Search type bar ───────────────────────────────────────────────────────────
80	.search-type-bar {
81	display: flex;
82	align-items: center;
83	gap: var(--space-2);
84	justify-content: center;
85	}
86
87	.search-type-label { font-size: var(--text-xs); color: var(--text-muted); }
88
89	.search-type-pill {
90	display: inline-flex;
91	align-items: center;
92	gap: 5px;
93	padding: 4px 14px;
94	border-radius: var(--radius-full);
95	border: 1px solid var(--border-default);
96	font-size: 12px;
97	font-weight: var(--weight-medium);
98	color: var(--text-muted);
99	cursor: pointer;
100	background: transparent;
101	transition: all var(--transition-fast);
102
103	&:hover { border-color: var(--color-accent); color: var(--color-accent); }
104
105	&--active {
106	background: var(--color-accent);
107	border-color: var(--color-accent);
108	color: var(--bg-base);
109	font-weight: var(--weight-bold);
110	}
111	}
112
113	// ── Search results container ──────────────────────────────────────────────────
114	.search-results {
115	margin-bottom: var(--space-8);
116	padding: 0 var(--space-4);
117	max-width: 1240px;
118	margin-left: auto;
119	margin-right: auto;
120	}
121
122	.search-results__header {
123	display: flex;
124	align-items: center;
125	gap: var(--space-3);
126	flex-wrap: wrap;
127	margin-bottom: var(--space-4);
128	padding-bottom: var(--space-3);
129	border-bottom: 1px solid var(--border-subtle);
130	}
131
132	.search-results__count {
133	font-size: var(--text-sm);
134	color: var(--text-secondary);
135	font-weight: var(--weight-medium);
136	}
137
138	.search-results__query {
139	font-size: var(--text-sm);
140	color: var(--text-muted);
141	font-style: italic;
142	margin-left: auto;
143	}
144
145	.search-results__method {
146	display: inline-flex;
147	align-items: center;
148	gap: 4px;
149	padding: 2px 10px;
150	border-radius: var(--radius-full);
151	font-size: var(--text-xs);
152	font-family: var(--font-mono);
153	font-weight: var(--weight-semibold);
154
155	&--semantic {
156	background: color-mix(in srgb, var(--color-success) 12%, transparent);
157	color: var(--color-success);
158	border: 1px solid color-mix(in srgb, var(--color-success) 25%, transparent);
159	}
160
161	&--text {
162	background: color-mix(in srgb, var(--color-accent) 12%, transparent);
163	color: var(--color-accent);
164	border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
165	}
166	}
167
168	// ── Empty search state ────────────────────────────────────────────────────────
169	.search-results__empty {
170	padding: var(--space-12) var(--space-6);
171	text-align: center;
172	}
173
174	.search-results__empty-icon {
175	font-size: 2.5rem;
176	color: var(--text-muted);
177	margin-bottom: var(--space-4);
178	}
179
180	.search-results__empty-title {
181	font-size: var(--text-base);
182	font-weight: var(--weight-semibold);
183	color: var(--text-primary);
184	margin-bottom: var(--space-2);
185
186	em { font-style: italic; }
187	}
188
189	.search-results__empty-sub {
190	font-size: var(--text-sm);
191	color: var(--text-muted);
192
193	a { color: var(--color-accent); }
194	}
195
196	// ── Commit search results ─────────────────────────────────────────────────────
197	.search-commit-list { display: flex; flex-direction: column; gap: var(--space-3); }
198
199	.search-commit-group {
200	background: var(--bg-surface);
201	border: 1px solid var(--border-default);
202	border-radius: var(--radius-md);
203	overflow: hidden;
204	}
205
206	.search-commit-group__repo {
207	display: block;
208	padding: var(--space-2) var(--space-4);
209	font-family: var(--font-mono);
210	font-size: var(--text-sm);
211	font-weight: var(--weight-semibold);
212	color: var(--color-accent);
213	text-decoration: none;
214	border-bottom: 1px solid var(--border-subtle);
215	background: var(--bg-overlay);
216
217	&:hover { text-decoration: underline; }
218	}
219
220	.search-commit-group__rows { padding: var(--space-2) 0; }
221
222	.search-commit-row {
223	display: grid;
224	grid-template-columns: 84px 1fr auto;
225	align-items: center;
226	gap: var(--space-3);
227	padding: var(--space-2) var(--space-4);
228	text-decoration: none;
229
230	&:hover { background: var(--bg-overlay); }
231	}
232
233	.search-commit-sha {
234	font-family: var(--font-mono);
235	font-size: 12px;
236	color: var(--color-accent-link);
237	}
238
239	.search-commit-msg {
240	font-size: var(--text-sm);
241	color: var(--text-primary);
242	overflow: hidden;
243	text-overflow: ellipsis;
244	white-space: nowrap;
245	}
246
247	.search-commit-author {
248	font-size: var(--text-xs);
249	color: var(--text-muted);
250	white-space: nowrap;
251	}

File History 1 commit

sha256:3ff9c9863a9891bdcde71b4a43228f66d0493e38b7cc1d09fe9eb7de774046b2 feat: add repair-commit wire endpoint (API parity with repa… Opus 4.8 minor ⚠ 1 day ago