Upload web/src/views/browse.php with huggingface_hub

web/src/views/browse.php

@@ -0,0 +1,236 @@
+<?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';
+?>