src/ts/pages/explore.ts · gabriel/musehub

const SVG_COMMIT = `<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><line x1="3" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="21" y2="12"/></svg>`;

54

55

// ── Entry point ───────────────────────────────────────────────────────────────

56

57

export function initExplore(): void {

58

setupBrowseMode();

59

setupSemanticSearch();

wireNavbarSearch();

}

// ── Wire navbar search → hero search on explore page ─────────────────────────

64

65

function wireNavbarSearch(): void {

66

const navForm = document.querySelector<HTMLFormElement>('.navbar-search-form');

67

const navInput = document.querySelector<HTMLInputElement>('.navbar-search-input');

68

const heroInput = document.getElementById('ex-search-input') as HTMLInputElement | null;

69

if (!navForm || !navInput || !heroInput) return;

70

71

// Prevent the navbar form from navigating away

72

navForm.addEventListener('submit', (e) => {

73

e.preventDefault();

74

const q = navInput.value.trim();

75

if (q) heroInput.value = q;

76

heroInput.focus();

77

heroInput.dispatchEvent(new Event('input', { bubbles: true }));

navInput.value = '';

});

navInput.addEventListener('focus', () => {

heroInput.focus();

navInput.blur();

});

}

// ── Browse mode (existing HTMX chip/filter behaviour) ────────────────────────

88

89

function setupBrowseMode(): void {

90

const filterForm = document.getElementById('filter-form') as HTMLFormElement | null;

91

filterForm?.addEventListener('submit', function () {

92

Array.from(this.elements).forEach((el) => {

93

const input = el as HTMLInputElement | HTMLSelectElement;

94

if ((input.tagName === 'SELECT' || input.tagName === 'INPUT') && input.value === '') {

95

input.disabled = true;

}

});

});

document.querySelectorAll<HTMLElement>('[data-autosubmit]').forEach((el) => {

101

el.addEventListener('change', () => (el.closest('form') as HTMLFormElement)?.requestSubmit());

102

});

103

104

document.querySelectorAll<HTMLAnchorElement>('[data-filter][data-value]').forEach((chip) => {

105

chip.addEventListener('click', (evt) => {

106

evt.preventDefault();

107

const filterName = chip.dataset.filter ?? '';

108

const value = chip.dataset.value ?? '';

109

const params = new URLSearchParams(window.location.search);

110

const current = params.getAll(filterName);

111

112

if (current.includes(value)) {

113

params.delete(filterName);

114

current.filter((v) => v !== value).forEach((v) => params.append(filterName, v));

115

chip.classList.remove('active');

116

} else {

117

params.append(filterName, value);

118

chip.classList.add('active');

119

}

120

121

const url = '/explore?' + params.toString();

122

history.pushState({}, '', url);

123

124

const htmx = (window as unknown as Record<string, unknown>).htmx as

125

| { ajax: (m: string, u: string, o: Record<string, unknown>) => void }

126

| undefined;

127

htmx?.ajax('GET', url, { target: '#repo-grid', swap: 'innerHTML' });

});

});

document.querySelectorAll<HTMLElement>('[data-action="toggle-sidebar"]').forEach((btn) => {

132

btn.addEventListener('click', () => {

133

document.querySelector('.explore-sidebar')?.classList.toggle('open');

});

});

}

// ── Semantic search mode ──────────────────────────────────────────────────────

139

140

function setupSemanticSearch(): void {

141

const searchInput = document.getElementById('ex-search-input') as HTMLInputElement | null;

142

const searchClear = document.getElementById('ex-search-clear') as HTMLButtonElement | null;

143

const searchSpinner = document.getElementById('ex-search-spinner') as HTMLElement | null;

144

const searchField = document.getElementById('ex-search-field') as HTMLElement | null;

145

const semanticResults = document.getElementById('ex-semantic-results') as HTMLElement | null;

146

const browseLayout = document.getElementById('ex-browse-layout') as HTMLElement | null;

147

const typeBar = document.getElementById('ex-type-bar') as HTMLElement | null;

148

const semanticDot = document.getElementById('ex-semantic-indicator') as HTMLElement | null;

149

150

if (!searchInput || !semanticResults) return;

151

152

let debounceTimer: ReturnType<typeof setTimeout> | null = null;

153

let currentQuery = '';

154

let currentType = 'repos';

155

let pendingAbort: AbortController | null = null;

156

157

// ── Example query chips ──────────────────────────────────────────────────

158

document.querySelectorAll<HTMLButtonElement>('[data-query]').forEach((chip) => {

159

chip.addEventListener('click', () => {

160

searchInput.value = chip.dataset.query ?? '';

161

searchInput.dispatchEvent(new Event('input'));

searchInput.focus();

});

});

// ── Search type toggle ───────────────────────────────────────────────────

167

document.querySelectorAll<HTMLButtonElement>('[data-search-type]').forEach((pill) => {

168

pill.addEventListener('click', () => {

169

document.querySelectorAll('[data-search-type]').forEach((p) =>

170

p.classList.remove('ex-type-pill--active'),

171

);

172

pill.classList.add('ex-type-pill--active');

173

currentType = pill.dataset.searchType ?? 'repos';

174

if (currentQuery.length >= 2) scheduleSearch(currentQuery);

});

});

// ── Clear button ─────────────────────────────────────────────────────────

179

searchClear?.addEventListener('click', () => {

180

searchInput.value = '';

clearSearch();

});

// ── Input → debounce ─────────────────────────────────────────────────────

185

searchInput.addEventListener('input', () => {

186

currentQuery = searchInput.value.trim();

187

if (debounceTimer) clearTimeout(debounceTimer);

188

189

if (!currentQuery) { clearSearch(); return; }

190

if (searchClear) searchClear.style.display = 'flex';

191

if (typeBar) typeBar.style.display = 'flex';

192

scheduleSearch(currentQuery);

193

});

194

195

// ── Keyboard shortcuts ────────────────────────────────────────────────────

196

searchInput.addEventListener('keydown', (e) => {

197

if (e.key === 'Escape') { searchInput.value = ''; clearSearch(); }

198

});

199

200

function scheduleSearch(q: string): void {

201

debounceTimer = setTimeout(() => performSearch(q, currentType), 300);

202

}

203

204

function clearSearch(): void {

205

if (pendingAbort) { pendingAbort.abort(); pendingAbort = null; }

206

currentQuery = '';

207

if (searchClear) searchClear.style.display = 'none';

208

if (typeBar) typeBar.style.display = 'none';

209

if (semanticDot) semanticDot.style.display = 'none';

210

if (semanticResults) semanticResults.style.display = 'none';

211

if (browseLayout) browseLayout.style.display = '';

212

if (searchField) searchField.classList.remove('ex-search-field--active');

213

}

214

215

// ── Main search fetch ─────────────────────────────────────────────────────

216

async function performSearch(q: string, type: string): Promise<void> {

217

if (pendingAbort) pendingAbort.abort();

218

pendingAbort = new AbortController();

219

220

setLoading(true);

221

if (searchField) searchField.classList.add('ex-search-field--active');

try {

let data: unknown;

if (type === 'repos') {

226

data = await window.apiFetch(

227

`/search/repos?q=${encodeURIComponent(q)}&limit=20`,

228

);

229

} else {

230

// Commits: use global search endpoint (keyword mode)

231

data = await window.apiFetch(

232

`/search?q=${encodeURIComponent(q)}&mode=keyword&limit=10`,

233

);

234

}

235

renderResults(data, q, type);

236

} catch (err) {

237

if ((err as Error).name === 'AbortError') return;

238

renderError(err as Error);

} finally {

setLoading(false);

pendingAbort = null;

}

}

function setLoading(on: boolean): void {

246

if (searchSpinner) searchSpinner.style.display = on ? 'flex' : 'none';

247

if (browseLayout && on) browseLayout.style.opacity = '0.3';

248

if (browseLayout && !on) browseLayout.style.opacity = '';

249

}

250

251

// ── Result rendering ──────────────────────────────────────────────────────

252

function renderResults(data: unknown, q: string, type: string): void {

253

if (!semanticResults) return;

254

255

if (browseLayout) { browseLayout.style.display = 'none'; browseLayout.style.opacity = ''; }

256

semanticResults.style.display = 'block';

257

258

const html = type === 'repos'

259

? renderRepoResults(data as SearchReposResponse, q)

260

: renderCommitResults(data as CommitSearchResponse, q);

261

262

semanticResults.innerHTML = html;

263

}

264

265

function renderRepoResults(data: SearchReposResponse, q: string): string {

266

const repos = data.repos ?? [];

267

const isSem = Boolean(data.semantic);

268

269

if (semanticDot) semanticDot.style.display = isSem ? 'flex' : 'none';

270

271

const methodBadge = isSem

272

? `<span class="ex-sr-method ex-sr-method--semantic">vector search · ℝ¹⁵³⁶</span>`

273

: `<span class="ex-sr-method ex-sr-method--text">text search</span>`;

274

275

if (!repos.length) {

276

return `<div class="ex-sr-empty">

277

278

<p class="ex-sr-empty-title">No repos found for <em>"${window.escHtml(q)}"</em></p>

279

<p class="ex-sr-empty-sub">Try different terms — or <a href="/explore">browse all repositories</a></p>

</div>`;

}

const header = `<div class="ex-sr-header">

284

<span class="ex-sr-count">${repos.length} result${repos.length !== 1 ? 's' : ''}</span>

285

${methodBadge}

286

<span class="ex-sr-query">"${window.escHtml(q)}"</span>

287

</div>`;

288

289

const cards = repos.map((repo, idx) => {

290

const href = `/${window.escHtml(repo.owner)}/${window.escHtml(repo.slug)}`;

291

const name = repo.name || repo.slug;

292

const desc = repo.description || '';

293

const tags = repo.tags ?? [];

294

// Visual rank: first result gets full bar, last ~25%

295

const total = Math.max(repos.length - 1, 1);

296

const rankPct = isSem ? Math.round(100 - (idx / total) * 75) : 0;

297

298

const tagHtml = tags.slice(0, 4)

299

.map((t) => `<span class="tag-pill">${window.escHtml(String(t))}</span>`)

.join('');

const musePips = [

repo.key_signature ? `<span class="ex-sr-pip ex-sr-pip--key">♩ ${window.escHtml(repo.key_signature)}</span>` : '',

304

repo.tempo_bpm ? `<span class="ex-sr-pip ex-sr-pip--tempo">♩ ${repo.tempo_bpm} bpm</span>` : '',

305

].filter(Boolean).join('');

306

307

return `<a href="${href}" class="repo-card">

308

309

<span class="repo-card-name">${window.escHtml(repo.owner)}<span class="repo-card-sep">/</span>${window.escHtml(repo.slug)}</span>

310

${isSem ? `<span class="ex-sr-score">${rankPct}%</span>` : ''}

311

</div>

312

${desc ? `<p class="repo-card-desc">${window.escHtml(desc.length > 120 ? desc.slice(0, 117) + '…' : desc)}</p>` : ''}

313

${tagHtml ? `<div class="repo-card-pills">${tagHtml}</div>` : ''}

314

315

<span class="repo-card-stat">${SVG_COMMIT} ${repo.commit_count} commits</span>

316

${isSem ? `<span class="ex-sr-method ex-sr-method--semantic" style="margin-left:auto">vector</span>` : ''}

</div>

</a>`;

}).join('');

return header + `<div class="ex-sr-list">${cards}</div>`;

322

}

323

324

function renderCommitResults(data: CommitSearchResponse, q: string): string {

325

if (semanticDot) semanticDot.style.display = 'none';

326

327

const groups = data.groups ?? [];

328

if (!groups.length) {

329

return `<div class="ex-sr-empty">

330

331

<p class="ex-sr-empty-title">No commits found for <em>"${window.escHtml(q)}"</em></p>

332

<p class="ex-sr-empty-sub">Try different terms or switch to <strong>Repos</strong> search above</p>

</div>`;

}

const totalMatches = groups.reduce((s, g) => s + g.matches.length, 0);

337

const header = `<div class="ex-sr-header">

338

<span class="ex-sr-count">${totalMatches} commit match${totalMatches !== 1 ? 'es' : ''} across ${groups.length} repo${groups.length !== 1 ? 's' : ''}</span>

339

<span class="ex-sr-method ex-sr-method--text">keyword search</span>

340

<span class="ex-sr-query">"${window.escHtml(q)}"</span>

341

</div>`;

342

343

const items = groups.map((group) => {

344

const repoHref = `/${window.escHtml(group.owner)}/${window.escHtml(group.repo_name)}`;

345