templates/index.html

{% extends "base.html" %}

{% block content %}
<div>
    <!-- Powered by -->
    <div class="text-xs text-gray-400 mb-4">
        Vector search powered by <a href="https://lancedb.github.io/lance/" class="underline hover:text-gray-600">Lance</a>
        &middot; Updated weekly via <a href="https://huggingface.co/docs/hub/en/spaces-run-with-hf-jobs" class="underline hover:text-gray-600">HF Jobs</a>
        &middot; <a href="https://huggingface.co/datasets/librarian-bots/arxiv-cs-papers-lance" class="underline hover:text-gray-600">Dataset</a>
    </div>

    <!-- Stats - minimal -->
    <div class="flex items-baseline gap-2 mb-6">
        <span class="text-3xl font-semibold text-gray-900">{{ "{:,}".format(new_dataset_count) }}</span>
        <span class="text-gray-500">papers with new datasets</span>
        <span class="text-gray-400 text-sm ml-auto">from {{ "{:,}".format(total_papers) }} total</span>
    </div>

    <!-- Filters - sticky on scroll -->
    <div class="sticky top-0 z-10 bg-white flex flex-wrap items-center gap-4 py-4 border-b border-gray-200 mb-6">
        <!-- Search -->
        <input type="search"
               name="search"
               id="search-input"
               placeholder="Search..."
               value="{{ search }}"
               class="flex-1 min-w-48 px-3 py-2 border-b border-gray-300 bg-transparent focus:border-gray-900 focus:outline-none"
               hx-get="/papers"
               hx-trigger="input changed delay:500ms, keyup[key=='Enter'], histogramChange"
               hx-target="#paper-list"
               hx-include="#filter-form, #category-select, #confidence-filter, #since-filter, #sort-select, #search-type-toggle"
               hx-indicator="#loading-indicator"
               hx-push-url="true">

        <!-- Search mode toggle -->
        <div id="search-type-toggle" class="flex items-center gap-2 text-xs text-gray-500">
            <label class="flex items-center gap-1 cursor-pointer">
                <input type="radio" name="search_type" value="keyword" {% if search_type == 'keyword' %}checked{% endif %}
                       class="h-3 w-3"
                       hx-get="/papers"
                       hx-trigger="change"
                       hx-target="#paper-list"
                       hx-include="#filter-form, #search-input, #category-select, #confidence-filter, #since-filter, #sort-select"
                       hx-indicator="#loading-indicator"
                       hx-push-url="true">
                <span>Keyword</span>
            </label>
            <label class="flex items-center gap-1 cursor-pointer">
                <input type="radio" name="search_type" value="semantic" {% if search_type == 'semantic' %}checked{% endif %}
                       class="h-3 w-3"
                       hx-get="/papers"
                       hx-trigger="change"
                       hx-target="#paper-list"
                       hx-include="#filter-form, #search-input, #category-select, #confidence-filter, #since-filter, #sort-select"
                       hx-indicator="#loading-indicator"
                       hx-push-url="true">
                <span>Semantic</span>
            </label>
        </div>

        <!-- Category filter -->
        <select name="category"
                id="category-select"
                class="px-3 py-2 border-b border-gray-300 bg-transparent focus:border-gray-900 focus:outline-none text-gray-700"
                hx-get="/papers"
                hx-trigger="change"
                hx-target="#paper-list"
                hx-include="#filter-form, #search-input, #confidence-filter, #since-filter, #sort-select, #search-type-toggle"
                hx-indicator="#loading-indicator"
                hx-push-url="true">
            <option value="">All categories</option>
            {% for cat in categories %}
            <option value="{{ cat }}" {% if category == cat %}selected{% endif %}>{{ cat }}</option>
            {% endfor %}
        </select>

        <!-- Confidence filter dropdown -->
        <select name="min_confidence"
                id="confidence-filter"
                class="px-2 py-1 text-xs border-b border-gray-300 bg-transparent focus:border-gray-900 focus:outline-none text-gray-500 ml-auto"
                hx-get="/papers"
                hx-trigger="change"
                hx-target="#paper-list"
                hx-include="#filter-form, #search-input, #category-select, #since-filter, #sort-select, #search-type-toggle"
                hx-indicator="#loading-indicator"
                hx-push-url="true">
            {% for opt in confidence_options %}
            <option value="{{ opt.value }}" {% if min_confidence == opt.value %}selected{% endif %}>
                {{ opt.label }}
            </option>
            {% endfor %}
        </select>

        <!-- Since filter dropdown -->
        <select name="since"
                id="since-filter"
                class="px-2 py-1 text-xs border-b border-gray-300 bg-transparent focus:border-gray-900 focus:outline-none text-gray-500"
                hx-get="/papers"
                hx-trigger="change"
                hx-target="#paper-list"
                hx-include="#filter-form, #search-input, #category-select, #confidence-filter, #sort-select, #search-type-toggle"
                hx-indicator="#loading-indicator"
                hx-push-url="true">
            <option value="" {% if not since %}selected{% endif %}>All time</option>
            <option value="1m" {% if since == '1m' %}selected{% endif %}>Past month</option>
            <option value="6m" {% if since == '6m' %}selected{% endif %}>Past 6 months</option>
            <option value="1y" {% if since == '1y' %}selected{% endif %}>Past year</option>
        </select>

        <!-- Sort dropdown -->
        <select name="sort"
                id="sort-select"
                class="px-2 py-1 text-xs border-b border-gray-300 bg-transparent focus:border-gray-900 focus:outline-none text-gray-500"
                hx-get="/papers"
                hx-trigger="change"
                hx-target="#paper-list"
                hx-include="#filter-form, #search-input, #category-select, #confidence-filter, #since-filter, #search-type-toggle"
                hx-indicator="#loading-indicator"
                hx-push-url="true">
            <option value="date" {% if sort == 'date' %}selected{% endif %}>Newest first</option>
            <option value="relevance" {% if sort == 'relevance' %}selected{% endif %}>Relevance</option>
        </select>

        <!-- Loading indicator - subtle -->
        <span id="loading-indicator" class="htmx-indicator text-sm text-gray-400">Loading...</span>

        <!-- Hidden form for hx-include -->
        <form id="filter-form" class="hidden"></form>
    </div>

    <!-- Paper list -->
    <div id="paper-list"
         hx-get="/papers?{% if search %}search={{ search|urlencode }}&{% endif %}search_type={{ search_type }}&{% if category %}category={{ category|urlencode }}&{% endif %}min_confidence={{ min_confidence }}&{% if since %}since={{ since }}&{% endif %}sort={{ sort }}"
         hx-trigger="load"
         hx-indicator="#loading-indicator">
        <div class="py-8 text-gray-400 text-sm">Loading papers...</div>
    </div>
</div>
{% endblock %}