File size: 12,444 Bytes
ffc3d8c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<?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';
?>