web/src/views/browse.php

<?php
/**
 * Browse / Document Listing
 *
 * Variables:
 *   $collection     - Collection slug (source_section)
 *   $collectionName - Human-readable collection name
 *   $documents      - Array of documents with: id, file_path, pages, file_size, processed_at
 *   $total          - Total document count
 *   $page           - Current page number
 *   $perPage        - Results per page
 *   $sort           - Current sort field (name, pages, size)
 */

$page = $page ?? 1;
$perPage = $perPage ?? 25;
$sort = $sort ?? 'name';
$totalPages = ($perPage > 0) ? (int)ceil(($total ?? 0) / $perPage) : 1;

/**
 * Format bytes to human-readable size
 */
function formatSizeBrowse(int $bytes): string {
    if ($bytes >= 1073741824) {
        return number_format($bytes / 1073741824, 1) . ' GB';
    } elseif ($bytes >= 1048576) {
        return number_format($bytes / 1048576, 1) . ' MB';
    } elseif ($bytes >= 1024) {
        return number_format($bytes / 1024, 1) . ' KB';
    }
    return $bytes . ' B';
}

/**
 * Extract filename from full path
 */
function extractFilename(string $path): string {
    return basename($path);
}

/**
 * Build sort URL preserving current parameters
 */
function sortUrl(string $collection, string $field, string $currentSort): string {
    $dir = 'asc';
    if ($field === $currentSort) {
        $dir = 'desc';
    }
    return '/browse/' . urlencode($collection) . '?sort=' . urlencode($field) . '&dir=' . $dir;
}

/**
 * Sort indicator arrow
 */
function sortIndicator(string $field, string $currentSort): string {
    if ($field === $currentSort) {
        return '<svg class="inline h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>';
    }
    return '<svg class="inline h-4 w-4 ml-1 opacity-0 group-hover:opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /></svg>';
}

$title = htmlspecialchars($collectionName ?? 'Browse') . ' - Research Document Archive';
$content = '';
ob_start();
?>

<!-- Header -->
<div class="mb-5">
    <!-- Breadcrumb -->
    <nav class="flex items-center text-xs text-gray-500 mb-3" aria-label="Breadcrumb">
        <a href="/" class="hover:text-gray-700 transition-colors">Home</a>
        <svg class="h-3 w-3 mx-1.5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
        </svg>
        <span class="text-gray-900 font-medium"><?= htmlspecialchars($collectionName ?? '') ?></span>
    </nav>

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-gray-900"><?= htmlspecialchars($collectionName ?? 'Documents') ?></h1>
            <p class="mt-0.5 text-sm text-gray-600">
                <?= number_format($total ?? 0) ?> document<?= ($total ?? 0) !== 1 ? 's' : '' ?> in this collection
            </p>
        </div>

        <!-- Sort Controls -->
        <div class="flex items-center space-x-2">
            <span class="text-sm text-gray-500">Sort by:</span>
            <div class="inline-flex rounded-lg border border-gray-200 bg-white shadow-sm">
                <a href="<?= sortUrl($collection, 'name', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium rounded-l-lg transition-colors
                          <?= $sort === 'name' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Name<?= sortIndicator('name', $sort) ?>
                </a>
                <a href="<?= sortUrl($collection, 'pages', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium border-l border-gray-200 transition-colors
                          <?= $sort === 'pages' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Pages<?= sortIndicator('pages', $sort) ?>
                </a>
                <a href="<?= sortUrl($collection, 'size', $sort) ?>"
                   class="group px-3 py-2 text-sm font-medium border-l border-gray-200 rounded-r-lg transition-colors
                          <?= $sort === 'size' ? 'bg-blue-50 text-blue-700' : 'text-gray-600 hover:bg-gray-50' ?>">
                    Size<?= sortIndicator('size', $sort) ?>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Document Table -->
<?php if (!empty($documents)): ?>

    <!-- Desktop Table -->
    <div class="hidden md:block bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-4 py-2.5 text-left text-[11px] font-semibold text-gray-500 uppercase tracking-wider">
                        Document Name
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-20">
                        Pages
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-24">
                        Size
                    </th>
                    <th scope="col" class="px-4 py-2.5 text-center text-[11px] font-semibold text-gray-500 uppercase tracking-wider w-28">
                        Processed
                    </th>
                    <th scope="col" class="relative px-4 py-2.5 w-16">
                        <span class="sr-only">View</span>
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php foreach ($documents as $doc): ?>
                    <?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-2.5">
                            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>" class="group flex items-center">
                                <svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                                </svg>
                                <span class="text-xs font-medium text-gray-900 group-hover:text-blue-600 transition-colors truncate max-w-md">
                                    <?= htmlspecialchars($filename) ?>
                                </span>
                            </a>
                            <?php if (!empty($doc['topics'])): ?>
                                <div class="mt-1 flex flex-wrap gap-1">
                                    <?php foreach ($doc['topics'] as $topic => $score):
                                        if ($score < 0.3) continue;
                                    ?>
                                        <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-indigo-50 text-indigo-700">
                                            <?= htmlspecialchars($topic) ?>
                                        </span>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-600">
                            <?= number_format($doc['total_pages'] ?? 0) ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-600">
                            <?= formatSizeBrowse($doc['file_size'] ?? 0) ?>
                        </td>
                        <td class="px-4 py-2.5 text-center text-xs text-gray-500">
                            <?php if (!empty($doc['processed_at'])): ?>
                                <?= date('M j, Y', strtotime($doc['processed_at'])) ?>
                            <?php else: ?>
                                <span class="text-gray-400">&mdash;</span>
                            <?php endif; ?>
                        </td>
                        <td class="px-4 py-2.5 text-right">
                            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
                               class="text-blue-600 hover:text-blue-800 text-xs font-medium transition-colors">
                                View
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <!-- Mobile Card List -->
    <div class="md:hidden space-y-3">
        <?php foreach ($documents as $doc): ?>
            <?php $filename = extractFilename($doc['file_path'] ?? ''); ?>
            <a href="/document/<?= (int)($doc['id'] ?? 0) ?>"
               class="block bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
                <div class="flex items-start space-x-3">
                    <svg class="flex-shrink-0 h-5 w-5 text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                    </svg>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-medium text-gray-900 truncate"><?= htmlspecialchars($filename) ?></p>
                        <div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
                            <span><?= number_format($doc['total_pages'] ?? 0) ?> pages</span>
                            <span><?= formatSizeBrowse($doc['file_size'] ?? 0) ?></span>
                            <?php if (!empty($doc['processed_at'])): ?>
                                <span><?= date('M j, Y', strtotime($doc['processed_at'])) ?></span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <svg class="flex-shrink-0 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                    </svg>
                </div>
            </a>
        <?php endforeach; ?>
    </div>

    <!-- Pagination -->
    <?php
    $currentPage = $page;
    $baseUrl = '/browse/' . urlencode($collection) . '?sort=' . urlencode($sort);
    include __DIR__ . '/partials/pagination.php';
    ?>

<?php else: ?>
    <div class="text-center py-10 bg-white rounded-lg border border-gray-200">
        <svg class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12H9.75m0 0l3-3m-3 3l3 3m2.25-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
        </svg>
        <h3 class="mt-3 text-sm font-medium text-gray-900">No documents found</h3>
        <p class="mt-1 text-xs text-gray-500">This collection does not contain any documents yet.</p>
        <a href="/" class="mt-4 inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors">
            Back to Home
        </a>
    </div>
<?php endif; ?>

<?php
$content = ob_get_clean();
include __DIR__ . '/layout.php';
?>