robandClaude Opus 4.5
14448408af
- Add /api/v1/tags endpoint for listing available tags - Enhance search API with tag filtering (AND logic), multi-category filtering (OR logic), owner filter, download range, and date range - Add faceted response support (category/tag/owner counts) - Update registry client with new search parameters and get_tags method - Add CLI search options: -t/--tag, -o/--owner, --min-downloads, --popular, --new, --since, --before, --json, --show-facets - Add new 'registry tags' CLI subcommand - Add web UI filter sidebar with checkboxes, dropdowns, and active filter chips with URL-based state management - Display clickable tags on tool cards Co-Authored-By: Claude Opus 4.5 <[email protected]>
380 lines
20 KiB
HTML
380 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
{% from "components/tool_card.html" import tool_card %}
|
|
|
|
{% block title %}Search: {{ query }} - CmdForge Registry{% endblock %}
|
|
|
|
{% block meta_description %}Search results for "{{ query }}" in the CmdForge Registry.{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="bg-gray-50 min-h-screen">
|
|
<!-- Search Header -->
|
|
<div class="bg-white border-b border-gray-200">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<form action="{{ url_for('web.search') }}" method="GET" class="max-w-2xl mx-auto">
|
|
<div class="relative">
|
|
<input type="text"
|
|
name="q"
|
|
value="{{ query or '' }}"
|
|
placeholder="Search for tools..."
|
|
aria-label="Search for tools"
|
|
autofocus
|
|
class="w-full pl-12 pr-4 py-4 text-lg border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
|
|
<svg class="absolute left-4 top-4.5 w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<button type="submit"
|
|
class="absolute right-2 top-2 px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
|
Search
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
{% if query %}
|
|
<div class="lg:grid lg:grid-cols-4 lg:gap-8">
|
|
<!-- Filter Sidebar -->
|
|
<aside class="hidden lg:block">
|
|
<div class="sticky top-4 space-y-6">
|
|
<!-- Active Filters -->
|
|
{% if active_categories or active_tags or active_owner %}
|
|
<div class="bg-white rounded-lg border border-gray-200 p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h3 class="text-sm font-semibold text-gray-900">Active Filters</h3>
|
|
<a href="{{ url_for('web.search', q=query) }}" class="text-xs text-indigo-600 hover:underline">Clear all</a>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for cat in active_categories %}
|
|
<span class="inline-flex items-center px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">
|
|
{{ cat }}
|
|
<button onclick="removeFilter('categories', '{{ cat }}')" class="ml-1 hover:text-indigo-900">×</button>
|
|
</span>
|
|
{% endfor %}
|
|
{% for tag in active_tags %}
|
|
<span class="inline-flex items-center px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
|
|
{{ tag }}
|
|
<button onclick="removeFilter('tags', '{{ tag }}')" class="ml-1 hover:text-green-900">×</button>
|
|
</span>
|
|
{% endfor %}
|
|
{% if active_owner %}
|
|
<span class="inline-flex items-center px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
|
|
by: {{ active_owner }}
|
|
<button onclick="removeFilter('owner', '')" class="ml-1 hover:text-purple-900">×</button>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Category Facets -->
|
|
{% if facets.categories %}
|
|
<div class="bg-white rounded-lg border border-gray-200 p-4">
|
|
<h3 class="text-sm font-semibold text-gray-900 mb-3">Categories</h3>
|
|
<div class="space-y-2">
|
|
{% for cat in facets.categories[:10] %}
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
onchange="toggleFilter('categories', '{{ cat.name }}', this.checked)"
|
|
{% if cat.name in active_categories %}checked{% endif %}
|
|
class="h-4 w-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500">
|
|
<span class="ml-2 text-sm text-gray-600">{{ cat.name }}</span>
|
|
<span class="ml-auto text-xs text-gray-400">({{ cat.count }})</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Tag Facets -->
|
|
{% if facets.tags %}
|
|
<div class="bg-white rounded-lg border border-gray-200 p-4">
|
|
<h3 class="text-sm font-semibold text-gray-900 mb-3">Tags</h3>
|
|
<div class="space-y-2">
|
|
{% for tag in facets.tags[:10] %}
|
|
<label class="flex items-center">
|
|
<input type="checkbox"
|
|
onchange="toggleFilter('tags', '{{ tag.name }}', this.checked)"
|
|
{% if tag.name in active_tags %}checked{% endif %}
|
|
class="h-4 w-4 text-green-600 border-gray-300 rounded focus:ring-green-500">
|
|
<span class="ml-2 text-sm text-gray-600">{{ tag.name }}</span>
|
|
<span class="ml-auto text-xs text-gray-400">({{ tag.count }})</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Owner Facets -->
|
|
{% if facets.owners %}
|
|
<div class="bg-white rounded-lg border border-gray-200 p-4">
|
|
<h3 class="text-sm font-semibold text-gray-900 mb-3">Publisher</h3>
|
|
<select onchange="setFilter('owner', this.value)" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All publishers</option>
|
|
{% for owner in facets.owners[:15] %}
|
|
<option value="{{ owner.name }}" {% if owner.name == active_owner %}selected{% endif %}>
|
|
{{ owner.name }} ({{ owner.count }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Sort -->
|
|
<div class="bg-white rounded-lg border border-gray-200 p-4">
|
|
<h3 class="text-sm font-semibold text-gray-900 mb-3">Sort By</h3>
|
|
<select onchange="setFilter('sort', this.value)" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="relevance" {% if active_sort == 'relevance' %}selected{% endif %}>Relevance</option>
|
|
<option value="downloads" {% if active_sort == 'downloads' %}selected{% endif %}>Downloads</option>
|
|
<option value="published_at" {% if active_sort == 'published_at' %}selected{% endif %}>Recently Published</option>
|
|
<option value="name" {% if active_sort == 'name' %}selected{% endif %}>Name</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Filters Button -->
|
|
<div class="lg:hidden mb-4">
|
|
<button onclick="toggleMobileFilters()" class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
|
|
</svg>
|
|
Filters
|
|
{% if active_categories or active_tags or active_owner %}
|
|
<span class="ml-2 px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 rounded-full">
|
|
{{ (active_categories|length) + (active_tags|length) + (1 if active_owner else 0) }}
|
|
</span>
|
|
{% endif %}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile Filters Panel (hidden by default) -->
|
|
<div id="mobile-filters" class="hidden lg:hidden mb-6 bg-white rounded-lg border border-gray-200 p-4">
|
|
<!-- Active filter chips -->
|
|
{% if active_categories or active_tags or active_owner %}
|
|
<div class="flex flex-wrap gap-2 mb-4 pb-4 border-b border-gray-200">
|
|
{% for cat in active_categories %}
|
|
<span class="inline-flex items-center px-2 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-full">
|
|
{{ cat }}
|
|
<button onclick="removeFilter('categories', '{{ cat }}')" class="ml-1">×</button>
|
|
</span>
|
|
{% endfor %}
|
|
{% for tag in active_tags %}
|
|
<span class="inline-flex items-center px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">
|
|
{{ tag }}
|
|
<button onclick="removeFilter('tags', '{{ tag }}')" class="ml-1">×</button>
|
|
</span>
|
|
{% endfor %}
|
|
<a href="{{ url_for('web.search', q=query) }}" class="text-xs text-indigo-600 hover:underline self-center ml-2">Clear all</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Sort -->
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 mb-1">Sort</label>
|
|
<select onchange="setFilter('sort', this.value)" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="relevance" {% if active_sort == 'relevance' %}selected{% endif %}>Relevance</option>
|
|
<option value="downloads" {% if active_sort == 'downloads' %}selected{% endif %}>Downloads</option>
|
|
<option value="published_at" {% if active_sort == 'published_at' %}selected{% endif %}>Recent</option>
|
|
</select>
|
|
</div>
|
|
<!-- Publisher -->
|
|
{% if facets.owners %}
|
|
<div>
|
|
<label class="block text-xs font-medium text-gray-700 mb-1">Publisher</label>
|
|
<select onchange="setFilter('owner', this.value)" class="w-full text-sm border-gray-300 rounded-md">
|
|
<option value="">All</option>
|
|
{% for owner in facets.owners[:10] %}
|
|
<option value="{{ owner.name }}" {% if owner.name == active_owner %}selected{% endif %}>{{ owner.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Category chips -->
|
|
{% if facets.categories %}
|
|
<div class="mt-4">
|
|
<label class="block text-xs font-medium text-gray-700 mb-2">Categories</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for cat in facets.categories[:8] %}
|
|
<button onclick="toggleFilter('categories', '{{ cat.name }}', {{ 'false' if cat.name in active_categories else 'true' }})"
|
|
class="px-2 py-1 text-xs rounded-full border {{ 'bg-indigo-100 border-indigo-300 text-indigo-700' if cat.name in active_categories else 'bg-white border-gray-300 text-gray-600 hover:border-indigo-300' }}">
|
|
{{ cat.name }} ({{ cat.count }})
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div class="lg:col-span-3">
|
|
<!-- Results Header -->
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-900">
|
|
{{ pagination.total if pagination else results|length }} results for "{{ query }}"
|
|
</h1>
|
|
</div>
|
|
|
|
{% if results %}
|
|
<!-- Search Results -->
|
|
<div class="space-y-4">
|
|
{% for tool in results %}
|
|
{{ tool_card(
|
|
owner=tool.owner,
|
|
name=tool.name,
|
|
description=tool.description,
|
|
category=tool.category,
|
|
downloads=tool.downloads,
|
|
version=tool.version,
|
|
tags=tool.tags
|
|
) }}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if pagination and pagination.pages > 1 %}
|
|
<nav class="mt-12 flex items-center justify-center" aria-label="Pagination">
|
|
<div class="flex items-center gap-2">
|
|
{% if pagination.has_prev %}
|
|
<a href="{{ url_for('web.search', q=query, page=pagination.prev_num, categories=active_categories|join(',') if active_categories else none, tags=active_tags|join(',') if active_tags else none, owner=active_owner, sort=active_sort) }}"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
|
|
Previous
|
|
</a>
|
|
{% endif %}
|
|
|
|
<span class="px-4 py-2 text-sm text-gray-700">
|
|
Page {{ pagination.page }} of {{ pagination.pages }}
|
|
</span>
|
|
|
|
{% if pagination.has_next %}
|
|
<a href="{{ url_for('web.search', q=query, page=pagination.next_num, categories=active_categories|join(',') if active_categories else none, tags=active_tags|join(',') if active_tags else none, owner=active_owner, sort=active_sort) }}"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
|
|
Next
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
<!-- No Results -->
|
|
<div class="text-center py-16 bg-white rounded-lg border border-gray-200">
|
|
<svg class="mx-auto w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<h2 class="mt-4 text-lg font-medium text-gray-900">No results found</h2>
|
|
<p class="mt-2 text-gray-600">
|
|
We couldn't find any tools matching "{{ query }}"{% if active_categories or active_tags %} with the current filters{% endif %}.
|
|
</p>
|
|
|
|
{% if active_categories or active_tags or active_owner %}
|
|
<div class="mt-6">
|
|
<a href="{{ url_for('web.search', q=query) }}"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 border border-indigo-600 rounded-md hover:bg-indigo-50">
|
|
Clear Filters
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mt-8">
|
|
<h3 class="text-sm font-medium text-gray-700 mb-4">Suggestions:</h3>
|
|
<ul class="text-sm text-gray-600 space-y-2">
|
|
<li>Check your spelling</li>
|
|
<li>Try more general keywords</li>
|
|
<li>Remove some filters</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- Initial Search State -->
|
|
<div class="text-center py-16">
|
|
<svg class="mx-auto w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
|
</svg>
|
|
<h2 class="mt-4 text-lg font-medium text-gray-900">Search the Registry</h2>
|
|
<p class="mt-2 text-gray-600">
|
|
Find tools by name, description, category, or tags.
|
|
</p>
|
|
|
|
<!-- Popular Categories -->
|
|
<div class="mt-8">
|
|
<h3 class="text-sm font-medium text-gray-700 mb-4">Popular Categories:</h3>
|
|
<div class="flex flex-wrap justify-center gap-2">
|
|
{% for cat in popular_categories %}
|
|
<a href="{{ url_for('web.category', name=cat.name) }}"
|
|
class="px-3 py-1.5 text-sm text-gray-600 bg-white border border-gray-200 rounded-full hover:border-indigo-500 hover:text-indigo-600 transition-colors">
|
|
{{ cat.display_name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function toggleFilter(filterType, value, checked) {
|
|
const url = new URL(window.location.href);
|
|
const params = url.searchParams;
|
|
|
|
// Get current values
|
|
let values = (params.get(filterType) || '').split(',').filter(Boolean);
|
|
|
|
if (checked) {
|
|
if (!values.includes(value)) {
|
|
values.push(value);
|
|
}
|
|
} else {
|
|
values = values.filter(v => v !== value);
|
|
}
|
|
|
|
// Update or remove param
|
|
if (values.length > 0) {
|
|
params.set(filterType, values.join(','));
|
|
} else {
|
|
params.delete(filterType);
|
|
}
|
|
|
|
// Reset to page 1 when filters change
|
|
params.delete('page');
|
|
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function setFilter(filterType, value) {
|
|
const url = new URL(window.location.href);
|
|
const params = url.searchParams;
|
|
|
|
if (value) {
|
|
params.set(filterType, value);
|
|
} else {
|
|
params.delete(filterType);
|
|
}
|
|
|
|
params.delete('page');
|
|
window.location.href = url.toString();
|
|
}
|
|
|
|
function removeFilter(filterType, value) {
|
|
if (filterType === 'owner') {
|
|
setFilter('owner', '');
|
|
} else {
|
|
toggleFilter(filterType, value, false);
|
|
}
|
|
}
|
|
|
|
function toggleMobileFilters() {
|
|
const panel = document.getElementById('mobile-filters');
|
|
panel.classList.toggle('hidden');
|
|
}
|
|
</script>
|
|
{% endblock %}
|