search lol

public/s/css/f0ck.css

@@ -476,6 +476,11 @@ html, body {
   font-size: 14px;
   height: 100%;
 }
+@supports (-moz-appearance:none) {
+  html, body {
+    height: auto !important;
+  }
+}
 
 .noscript-badge {
   display: block;
@@ -571,6 +576,7 @@ div#posts > a:hover::after {
 }
 
 .navbar {
+  position: -webkit-sticky;
   position: sticky;
   top: 0;
   padding: 0;
@@ -1533,7 +1539,6 @@ table.table {
   min-width: max-content;
 }
 table.table thead tr {
-  text-align: left;
   font-weight: bolder;
   border-bottom: 1px solid var(--accent);
 }
@@ -1542,6 +1547,7 @@ table.table tr {
 }
 table.table th, table.table td {
   padding: 7px 15px;
+  text-align: center;
 }
 table.table tbody tr:nth-of-type(odd) {
   background-color: var(--badge-tag);

src/inc/routes/search.mjs

@@ -2,33 +2,81 @@ import db from "../sql.mjs";
 import lib from "../lib.mjs";
 import search from "../routeinc/search.mjs";
 
+const _eps = 20;
+
 export default (router, tpl) => {
   router.get(/^\/search(\/)?$/, lib.auth, async (req, res) => {
     let ret;
-    let tag = req.url.qs?.tag;
-    if(Object.keys(req.url.qs).length > 0) {
-      let rows;
+    let tag = req.url.qs.tag ?? [];
+    let page = req.url.qs.page ?? 1;
+    let total = 0;
+    let pagination, link;
+
+    if(tag.length > 1) {
+      if(tag.startsWith('src:')) {
+        total = (await db`
+          select count(*) as total
+          from "items"
+          where src ilike ${'%' + tag.substring(4) + '%'}
+          group by "items".id, "tags".tag
+        `).length;
+      }
+      else {
+        total = (await db`
+          select count(*) as total
+          from "tags"
+          left join "tags_assign" on "tags_assign".tag_id = "tags".id
+          left join "items" on "items".id = "tags_assign".item_id
+          where "tags".tag ilike ${'%' + tag + '%'}
+          group by "items".id, "tags".tag
+        `).length;
+      }
+
+      const pages = +Math.ceil(total / _eps);
+      const act_page = Math.min(pages, page || 1);
+      const offset = Math.max(0, (act_page - 1) * _eps);
 
       if(tag.startsWith('src:')) {
-        tag = tag.substring(4);
         ret = await db`
           select *
           from "items"
-          where src ilike ${'%' + tag + '%'}
-          limit 500
+          where src ilike ${'%' + tag.substring(4) + '%'}
+          group by "items".id, "tags".tag
+          offset ${offset}
+          limit ${_eps}
         `;
       }
       else {
-        rows = await db`
+        const rows = await db`
           select "items".id, "items".username, "items".mime, "tags".tag
           from "tags"
           left join "tags_assign" on "tags_assign".tag_id = "tags".id
           left join "items" on "items".id = "tags_assign".item_id
           where "tags".tag ilike ${'%' + tag + '%'}
-          limit 500
+          group by "items".id, "tags".tag
+          offset ${offset}
+          limit ${_eps}
         `;
         ret = search(rows, tag);
       }
+
+      const cheat = [];
+      for(let i = Math.max(1, act_page - 3); i <= Math.min(act_page + 3, pages); i++)
+        cheat.push(i);
+
+      pagination = {
+        start: 1,
+        end: pages,
+        prev: (act_page > 1) ? act_page - 1 : null,
+        next: (act_page < pages) ? act_page + 1 : null,
+        page: act_page,
+        cheat: cheat,
+        uff: false
+      };
+      link = {
+        main: `/search/?tag=${tag}`,
+        path: '&page='
+      };
     }
 
     res.reply({
@@ -36,7 +84,10 @@ export default (router, tpl) => {
         result: ret,
         totals: await lib.countf0cks(),
         searchstring: tag,
-        tmp: null
+        count: total,
+        tmp: null,
+        pagination,
+        link
       }, req)
     });
   });

views/search.html

@@ -5,8 +5,9 @@
 </form>
 <div class="results">
   @if(result)
-  <h1>{{ result.length }} f0cks given:</h1>
-  <table style="width: 100%;" class="table">
+  <h1>{{ count }} f0cks given (page {{ pagination.page }} of {{ pagination.end }}):</h1>
+  <table style="width: 100%" class="table">
+    <thead>
       <tr>
         <th>Thumbnail</th>
         <th>ID</th>
@@ -15,16 +16,19 @@
         <th>Username</th>
         <th>Score</th>
       </tr>
+    </thead>
+    <tbody>
   @each(result as line)
       <tr>
         <td style="width: 128px;"><a href="/tag/{!! line.tag !!}/{{ line.id }}" target="_blank"><img src="/t/{{ line.id }}.webp" /></a></td>
-      <td style="text-align: center;"><a href="/tag/{!! line.tag !!}/{{ line.id }}" target="_blank">{{ line.id }}</a></td>
-      <td style="text-align: center;"><a href="/tag/{!! line.tag !!}">{!! line.tag !!}</a></td>
-      <td style="text-align: center;">{{ line.mime }}</td>
-      <td style="text-align: center;"><a href="/user/{!! line.username !!}/f0cks/{{ line.id }}">{!! line.username !!}</a></td>
-      <td style="text-align: center;">{{ line.score.toFixed(2) }}</td>
+        <td><a href="/tag/{!! line.tag !!}/{{ line.id }}" target="_blank">{{ line.id }}</a></td>
+        <td><a href="/tag/{!! line.tag !!}">{!! line.tag !!}</a></td>
+        <td>{{ line.mime }}</td>
+        <td><a href="/user/{!! line.username !!}/f0cks/{{ line.id }}">{!! line.username !!}</a></td>
+        <td>{{ line.score.toFixed(2) }}</td>
       </tr>
   @endeach
+    </tbody>
   </table>
   @endif
 </div>