server: use index-based paging (#123)

23 files changed, 163 insertions, 135 deletions

diff --git a/client/html/comments_page.tpl b/client/html/comments_page.tpl
index b117bf9..27d7011 100644
--- a/client/html/comments_page.tpl
+++ b/client/html/comments_page.tpl
@@ -1,6 +1,6 @@
 <div class='global-comment-list'>
     <ul><!--
-        --><% for (let post of ctx.results) { %><!--
+        --><% for (let post of ctx.response.results) { %><!--
             --><li><!--
                 --><div class='post-thumbnail'><!--
                     --><% if (ctx.canViewPosts) { %><!--
diff --git a/client/html/manual_pager_nav.tpl b/client/html/manual_pager_nav.tpl
index d47df14..23703e9 100644
--- a/client/html/manual_pager_nav.tpl
+++ b/client/html/manual_pager_nav.tpl
@@ -1,8 +1,8 @@
 <nav class='buttons'>
     <ul>
         <li>
-            <% if (ctx.prevLinkActive) { %>
-                <a class='prev' href='<%- ctx.prevLink %>'>
+            <% if (ctx.prevPage !== ctx.currentPage) { %>
+                <a class='prev' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.prevPage).offset, ctx.pages.get(ctx.prevPage).limit) %>'>
             <% } else { %>
                 <a class='prev disabled'>
             <% } %>
@@ -11,7 +11,7 @@
             </a>
         </li>
 
-        <% for (let page of ctx.pages) { %>
+        <% for (let page of ctx.pages.values()) { %>
             <% if (page.ellipsis) { %>
                 <li>&hellip;</li>
             <% } else { %>
@@ -20,14 +20,14 @@
                 <% } else { %>
                     <li>
                 <% } %>
-                    <a href='<%- page.link %>'><%- page.number %></a>
+                    <a href='<%- ctx.getClientUrlForPage(page.offset, page.limit) %>'><%- page.number %></a>
                 </li>
             <% } %>
         <% } %>
 
         <li>
-            <% if (ctx.nextLinkActive) { %>
-                <a class='next' href='<%- ctx.nextLink %>'>
+            <% if (ctx.nextPage !== ctx.currentPage) { %>
+                <a class='next' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.nextPage).offset, ctx.pages.get(ctx.nextPage).limit) %>'>
             <% } else { %>
                 <a class='next disabled'>
             <% } %>
diff --git a/client/html/posts_page.tpl b/client/html/posts_page.tpl
index 9c9f7ef..79f31d9 100644
--- a/client/html/posts_page.tpl
+++ b/client/html/posts_page.tpl
@@ -1,7 +1,7 @@
 <div class='post-list'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <ul>
-            <% for (let post of ctx.results) { %>
+            <% for (let post of ctx.response.results) { %>
                 <li>
                     <a class='thumbnail-wrapper <%= post.tags.length > 0 ? "tags" : "no-tags" %>'
                             title='@<%- post.id %> (<%- post.type %>)&#10;&#10;Tags: <%- post.tags.map(tag => '#' + tag).join(' ') || 'none' %>'
diff --git a/client/html/snapshots_page.tpl b/client/html/snapshots_page.tpl
index c84e19f..6650d65 100644
--- a/client/html/snapshots_page.tpl
+++ b/client/html/snapshots_page.tpl
@@ -1,7 +1,7 @@
 <div class='snapshot-list'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <ul>
-            <% for (let item of ctx.results) { %>
+            <% for (let item of ctx.response.results) { %>
                 <li>
                     <div class='header operation-<%= item.operation %>'>
                         <span class='time'>
diff --git a/client/html/tags_page.tpl b/client/html/tags_page.tpl
index f27f49e..788d0e3 100644
--- a/client/html/tags_page.tpl
+++ b/client/html/tags_page.tpl
@@ -1,5 +1,5 @@
 <div class='tag-list'>
-    <% if (ctx.results.length) { %>
+    <% if (ctx.response.results.length) { %>
         <table>
             <thead>
                 <th class='names'>
@@ -39,7 +39,7 @@
                 </th>
             </thead>
             <tbody>
-                <% for (let tag of ctx.results) { %>
+                <% for (let tag of ctx.response.results) { %>
                     <tr>
                         <td class='names'>
                             <ul>
diff --git a/client/html/users_page.tpl b/client/html/users_page.tpl
index 6cb04d3..f09c207 100644
--- a/client/html/users_page.tpl
+++ b/client/html/users_page.tpl
@@ -1,6 +1,6 @@
 <div class='user-list'>
     <ul><!--
-        --><% for (let user of ctx.results) { %><!--
+        --><% for (let user of ctx.response.results) { %><!--
             --><li>
                 <div class='wrapper'>
                     <% if (ctx.canViewUsers) { %>
diff --git a/client/js/controllers/comments_controller.js b/client/js/controllers/comments_controller.js
index ce88632..2de638c 100644
--- a/client/js/controllers/comments_controller.js
+++ b/client/js/controllers/comments_controller.js
@@ -25,14 +25,16 @@ class CommentsController {
         this._pageController = new PageController();
         this._pageController.run({
             parameters: ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 10,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, ctx.parameters, {page: page});
+                    {}, ctx.parameters, {offset: offset, limit: limit});
                 return uri.formatClientLink('comments', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return PostList.search(
-                    'sort:comment-date comment-count-min:1', page, 10, fields);
+                    'sort:comment-date comment-count-min:1',
+                    offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
diff --git a/client/js/controllers/page_controller.js b/client/js/controllers/page_controller.js
index 6f86e0c..ae55804 100644
--- a/client/js/controllers/page_controller.js
+++ b/client/js/controllers/page_controller.js
@@ -18,12 +18,6 @@ class PageController {
     }
 
     run(ctx) {
-        const extendedContext = {
-            getClientUrlForPage: ctx.getClientUrlForPage,
-            parameters: ctx.parameters,
-        };
-
-        ctx.pageContext = Object.assign({}, extendedContext);
         this._view.run(ctx);
     }
 
diff --git a/client/js/controllers/post_list_controller.js b/client/js/controllers/post_list_controller.js
index 1e6dd7c..bd570e9 100644
--- a/client/js/controllers/post_list_controller.js
+++ b/client/js/controllers/post_list_controller.js
@@ -88,14 +88,17 @@ class PostListController {
     _syncPageController() {
         this._pageController.run({
             parameters: this._ctx.parameters,
-            getClientUrlForPage: page => {
-                return uri.formatClientLink('posts',
-                    Object.assign({}, this._ctx.parameters, {page: page}));
+            defaultLimit: parseInt(settings.get().postsPerPage),
+            getClientUrlForPage: (offset, limit) => {
+                const parameters = Object.assign(
+                    {}, this._ctx.parameters, {offset: offset, limit: limit});
+                return uri.formatClientLink('posts', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return PostList.search(
-                    this._decorateSearchQuery(this._ctx.parameters.query),
-                    page, settings.get().postsPerPage, fields);
+                    this._decorateSearchQuery(
+                        this._ctx.parameters.query || ''),
+                    offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
diff --git a/client/js/controllers/post_main_controller.js b/client/js/controllers/post_main_controller.js
index ba5f688..c672a0f 100644
--- a/client/js/controllers/post_main_controller.js
+++ b/client/js/controllers/post_main_controller.js
@@ -21,7 +21,7 @@ class PostMainController extends BasePostController {
                 Post.get(ctx.parameters.id),
                 PostList.getAround(
                     ctx.parameters.id, this._decorateSearchQuery(
-                        parameters ? parameters.query : '')),
+                        parameters ? parameters.query || '' : '')),
         ]).then(responses => {
             const [post, aroundResponse] = responses;
 
diff --git a/client/js/controllers/snapshots_controller.js b/client/js/controllers/snapshots_controller.js
index 034bf49..e64b9db 100644
--- a/client/js/controllers/snapshots_controller.js
+++ b/client/js/controllers/snapshots_controller.js
@@ -22,13 +22,14 @@ class SnapshotsController {
         this._pageController = new PageController();
         this._pageController.run({
             parameters: ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 25,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, ctx.parameters, {page: page});
+                    {}, ctx.parameters, {offset: offset, limit: limit});
                 return uri.formatClientLink('history', parameters);
             },
-            requestPage: page => {
-                return SnapshotList.search('', page, 25);
+            requestPage: (offset, limit) => {
+                return SnapshotList.search('', offset, limit);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
diff --git a/client/js/controllers/tag_list_controller.js b/client/js/controllers/tag_list_controller.js
index 2b485d2..2598143 100644
--- a/client/js/controllers/tag_list_controller.js
+++ b/client/js/controllers/tag_list_controller.js
@@ -57,14 +57,15 @@ class TagListController {
     _syncPageController() {
         this._pageController.run({
             parameters: this._ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 50,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, this._ctx.parameters, {page: page});
+                    {}, this._ctx.parameters, {offset: offset, limit: limit});
                 return uri.formatClientLink('tags', parameters);
             },
-            requestPage: page => {
+            requestPage: (offset, limit) => {
                 return TagList.search(
-                    this._ctx.parameters.query, page, 50, fields);
+                    this._ctx.parameters.query, offset, limit, fields);
             },
             pageRenderer: pageCtx => {
                 return new TagsPageView(pageCtx);
diff --git a/client/js/controllers/user_list_controller.js b/client/js/controllers/user_list_controller.js
index 13aec00..5cf4b2b 100644
--- a/client/js/controllers/user_list_controller.js
+++ b/client/js/controllers/user_list_controller.js
@@ -49,13 +49,15 @@ class UserListController {
     _syncPageController() {
         this._pageController.run({
             parameters: this._ctx.parameters,
-            getClientUrlForPage: page => {
+            defaultLimit: 30,
+            getClientUrlForPage: (offset, limit) => {
                 const parameters = Object.assign(
-                    {}, this._ctx.parameters, {page: page});
+                    {}, this._ctx.parameters, {offset, offset, limit: limit});
                 return uri.formatClientLink('users', parameters);
             },
-            requestPage: page => {
-                return UserList.search(this._ctx.parameters.query, page);
+            requestPage: (offset, limit) => {
+                return UserList.search(
+                    this._ctx.parameters.query || '', offset, limit);
             },
             pageRenderer: pageCtx => {
                 Object.assign(pageCtx, {
diff --git a/client/js/models/post_list.js b/client/js/models/post_list.js
index 2af40f5..244e781 100644
--- a/client/js/models/post_list.js
+++ b/client/js/models/post_list.js
@@ -12,13 +12,13 @@ class PostList extends AbstractList {
                 'post', id, 'around', {query: searchQuery, fields: 'id'}));
     }
 
-    static search(text, page, pageSize, fields) {
+    static search(text, offset, limit, fields) {
         return api.get(
                 uri.formatApiLink(
                     'posts', {
                         query: text,
-                        page: page,
-                        pageSize: pageSize,
+                        offset: offset,
+                        limit: limit,
                         fields: fields.join(','),
                     }))
             .then(response => {
diff --git a/client/js/models/snapshot_list.js b/client/js/models/snapshot_list.js
index a23850a..3263a6a 100644
--- a/client/js/models/snapshot_list.js
+++ b/client/js/models/snapshot_list.js
@@ -6,9 +6,9 @@ const AbstractList = require('./abstract_list.js');
 const Snapshot = require('./snapshot.js');
 
 class SnapshotList extends AbstractList {
-    static search(text, page, pageSize) {
+    static search(text, offset, limit) {
         return api.get(uri.formatApiLink(
-                'snapshots', {query: text, page: page, pageSize: pageSize}))
+                'snapshots', {query: text, offset: offset, limit: limit}))
             .then(response => {
                 return Promise.resolve(Object.assign(
                     {},
diff --git a/client/js/models/tag_list.js b/client/js/models/tag_list.js
index d480745..282d4ef 100644
--- a/client/js/models/tag_list.js
+++ b/client/js/models/tag_list.js
@@ -6,13 +6,13 @@ const AbstractList = require('./abstract_list.js');
 const Tag = require('./tag.js');
 
 class TagList extends AbstractList {
-    static search(text, page, pageSize, fields) {
+    static search(text, offset, limit, fields) {
         return api.get(
                 uri.formatApiLink(
                     'tags', {
                         query: text,
-                        page: page,
-                        pageSize: pageSize,
+                        offset: offset,
+                        limit: limit,
                         fields: fields.join(','),
                     }))
             .then(response => {
diff --git a/client/js/models/user_list.js b/client/js/models/user_list.js
index ff3e27c..c48fc88 100644
--- a/client/js/models/user_list.js
+++ b/client/js/models/user_list.js
@@ -6,10 +6,10 @@ const AbstractList = require('./abstract_list.js');
 const User = require('./user.js');
 
 class UserList extends AbstractList {
-    static search(text, page) {
+    static search(text, offset, limit) {
         return api.get(
                 uri.formatApiLink(
-                    'users', {query: text, page: page, pageSize: 30}))
+                    'users', {query: text, offset: offset, limit: limit}))
             .then(response => {
                 return Promise.resolve(Object.assign(
                     {},
diff --git a/client/js/router.js b/client/js/router.js
index 9bff064..64f467e 100644
--- a/client/js/router.js
+++ b/client/js/router.js
@@ -112,10 +112,6 @@ class Route {
             return false;
         }
 
-        // XXX: it is very unfitting place for this
-        parameters.query = parameters.query || '';
-        parameters.page = parseInt(parameters.page || '1');
-
         return true;
     }
 };
diff --git a/client/js/views/comments_page_view.js b/client/js/views/comments_page_view.js
index 2722bd6..d5bb294 100644
--- a/client/js/views/comments_page_view.js
+++ b/client/js/views/comments_page_view.js
@@ -13,7 +13,7 @@ class CommentsPageView extends events.EventTarget {
 
         const sourceNode = template(ctx);
 
-        for (let post of ctx.results) {
+        for (let post of ctx.response.results) {
             const commentListControl = new CommentListControl(
                 sourceNode.querySelector(
                     `.comments-container[data-for="${post.id}"]`),
diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js
index c70d417..20f3b97 100644
--- a/client/js/views/endless_page_view.js
+++ b/client/js/views/endless_page_view.js
@@ -21,16 +21,19 @@ class EndlessPageView {
         views.emptyContent(this._pagesHolderNode);
 
         this.threshold = window.innerHeight / 3;
-        this.minPageShown = null;
-        this.maxPageShown = null;
-        this.totalPages = null;
-        this.currentPage = null;
+        this.minOffsetShown = null;
+        this.maxOffsetShown = null;
+        this.totalRecords = null;
+        this.currentOffset = 0;
 
-        this._loadPage(ctx, ctx.parameters.page, true).then(pageNode => {
-            if (ctx.parameters.page !== 1) {
-                pageNode.scrollIntoView();
-            }
-        });
+        const offset = parseInt(ctx.parameters.offset || 0);
+        const limit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
+        this._loadPage(ctx, offset, limit, true)
+            .then(pageNode => {
+                if (offset !== 0) {
+                    pageNode.scrollIntoView();
+                }
+            });
         this._probePageLoad(ctx);
 
         views.monitorNodeRemoval(this._pagesHolderNode, () => this._destroy());
@@ -75,42 +78,45 @@ class EndlessPageView {
         if (!topPageNode) {
             return;
         }
-        let topPageNumber = parseInt(topPageNode.getAttribute('data-page'));
-        if (topPageNumber !== this.currentPage) {
+        let topOffset = parseInt(topPageNode.getAttribute('data-offset'));
+        let topLimit = parseInt(topPageNode.getAttribute('data-limit'));
+        if (topOffset !== this.currentOffset) {
             router.replace(
-                ctx.getClientUrlForPage(topPageNumber),
+                ctx.getClientUrlForPage(
+                    topOffset,
+                    topLimit === ctx.defaultLimit ? null : topLimit),
                 ctx.state,
                 false);
-            this.currentPage = topPageNumber;
+            this.currentOffset = topOffset;
         }
 
-        if (this.totalPages === null) {
+        if (this.totalRecords === null) {
             return;
         }
         let scrollHeight =
             document.documentElement.scrollHeight -
             document.documentElement.clientHeight;
 
-        if (this.minPageShown > 1 && window.scrollY < this.threshold) {
-            this._loadPage(ctx, this.minPageShown - 1, false);
-        } else if (this.maxPageShown < this.totalPages &&
+        if (this.minOffsetShown > 0 && window.scrollY < this.threshold) {
+            this._loadPage(
+                ctx, this.minOffsetShown - topLimit, topLimit, false);
+        } else if (this.maxOffsetShown < this.totalRecords &&
                 window.scrollY + this.threshold > scrollHeight) {
-            this._loadPage(ctx, this.maxPageShown + 1, true);
+            this._loadPage(
+                ctx, this.maxOffsetShown, topLimit, true);
         }
     }
 
-    _loadPage(ctx, pageNumber, append) {
+    _loadPage(ctx, offset, limit, append) {
         this._working++;
         return new Promise((resolve, reject) => {
-            ctx.requestPage(pageNumber).then(response => {
+            ctx.requestPage(offset, limit).then(response => {
                 if (!this._active) {
                     this._working--;
                     return Promise.reject();
                 }
-                this.totalPages = Math.ceil(response.total / response.pageSize);
                 window.requestAnimationFrame(() => {
-                    let pageNode = this._renderPage(
-                        ctx, pageNumber, append, response);
+                    let pageNode = this._renderPage(ctx, append, response);
                     this._working--;
                     resolve(pageNode);
                 });
@@ -122,33 +128,40 @@ class EndlessPageView {
         });
     }
 
-    _renderPage(ctx, pageNumber, append, response) {
+    _renderPage(ctx, append, response) {
         let pageNode = null;
 
         if (response.total) {
             pageNode = pageTemplate({
-                page: pageNumber,
-                totalPages: this.totalPages,
+                totalPages: Math.ceil(response.total / response.limit),
+                page: Math.ceil(
+                    (response.offset + response.limit) / response.limit),
+            });
+            pageNode.setAttribute('data-offset', response.offset);
+            pageNode.setAttribute('data-limit', response.limit);
+
+            ctx.pageRenderer({
+                parameters: ctx.parameters,
+                response: response,
+                hostNode: pageNode.querySelector('.page-content-holder'),
             });
-            pageNode.setAttribute('data-page', pageNumber);
 
-            Object.assign(ctx.pageContext, response);
-            ctx.pageContext.hostNode = pageNode.querySelector(
-                '.page-content-holder');
-            ctx.pageRenderer(ctx.pageContext);
+            this.totalRecords = response.total;
 
-            if (pageNumber < this.minPageShown ||
-                    this.minPageShown === null) {
-                this.minPageShown = pageNumber;
+            if (response.offset < this.minOffsetShown ||
+                    this.minOffsetShown === null) {
+                this.minOffsetShown = response.offset;
             }
-            if (pageNumber > this.maxPageShown ||
-                    this.maxPageShown === null) {
-                this.maxPageShown = pageNumber;
+            if (response.offset + response.results.length
+                    > this.maxOffsetShown ||
+                    this.maxOffsetShown === null) {
+                this.maxOffsetShown =
+                    response.offset + response.results.length;
             }
 
             if (append) {
                 this._pagesHolderNode.appendChild(pageNode);
-                if (!this._init && pageNumber !== 1) {
+                if (!this._init && response.offset > 0) {
                     window.scroll(0, pageNode.getBoundingClientRect().top);
                 }
             } else {
@@ -158,7 +171,7 @@ class EndlessPageView {
                     window.scrollX,
                     window.scrollY + pageNode.offsetHeight);
             }
-        } else if (response.total <= (pageNumber - 1) * response.pageSize) {
+        } else if (!response.results.length) {
             this.showInfo('No data to show');
         }
 
diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js
index e3767c0..93efdc4 100644
--- a/client/js/views/manual_page_view.js
+++ b/client/js/views/manual_page_view.js
@@ -35,19 +35,20 @@ function _getVisiblePageNumbers(currentPage, totalPages) {
     return pagesVisible;
 }
 
-function _getPages(currentPage, pageNumbers, ctx) {
-    const pages = [];
-    let lastPage = 0;
+function _getPages(currentPage, pageNumbers, ctx, limit) {
+    const pages = new Map();
+    let prevPage = 0;
     for (let page of pageNumbers) {
-        if (page !== lastPage + 1) {
-            pages.push({ellipsis: true});
+        if (page !== prevPage + 1) {
+            pages.set(page - 1, {ellipsis: true});
         }
-        pages.push({
+        pages.set(page, {
             number: page,
-            link: ctx.getClientUrlForPage(page),
+            offset: (page - 1) * limit,
+            limit: limit === ctx.defaultLimit ? null : limit,
             active: currentPage === page,
         });
-        lastPage = page;
+        prevPage = page;
     }
     return pages;
 }
@@ -59,43 +60,30 @@ class ManualPageView {
     }
 
     run(ctx) {
-        const currentPage = ctx.parameters.page;
+        const offset = parseInt(ctx.parameters.offset || 0);
+        const limit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
         this.clearMessages();
         views.emptyContent(this._pageNavNode);
 
-        ctx.requestPage(currentPage).then(response => {
-            Object.assign(ctx.pageContext, response);
-            ctx.pageContext.hostNode = this._pageContentHolderNode;
-            ctx.pageRenderer(ctx.pageContext);
-
-            const totalPages = Math.ceil(response.total / response.pageSize);
-            const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
-            const pages = _getPages(currentPage, pageNumbers, ctx);
+        ctx.requestPage(offset, limit).then(response => {
+            ctx.pageRenderer({
+                parameters: ctx.parameters,
+                response: response,
+                hostNode: this._pageContentHolderNode,
+            });
 
             keyboard.bind(['a', 'left'], () => {
-                if (currentPage > 1) {
-                    router.show(ctx.getClientUrlForPage(currentPage - 1));
-                }
+                this._navigateToPrevNextPage('prev');
             });
             keyboard.bind(['d', 'right'], () => {
-                if (currentPage < totalPages) {
-                    router.show(ctx.getClientUrlForPage(currentPage + 1));
-                }
+                this._navigateToPrevNextPage('next');
             });
 
             if (response.total) {
-                views.replaceContent(
-                    this._pageNavNode,
-                    navTemplate({
-                        prevLink: ctx.getClientUrlForPage(currentPage - 1),
-                        nextLink: ctx.getClientUrlForPage(currentPage + 1),
-                        prevLinkActive: currentPage > 1,
-                        nextLinkActive: currentPage < totalPages,
-                        pages: pages,
-                    }));
+                this._refreshNav(response, ctx);
             }
 
-            if (response.total <= (currentPage - 1) * response.pageSize) {
+            if (!response.results.length) {
                 this.showInfo('No data to show');
             }
 
@@ -132,6 +120,33 @@ class ManualPageView {
     showInfo(message) {
         views.showInfo(this._hostNode, message);
     }
+
+    _navigateToPrevNextPage(className) {
+        const linkNode = this._hostNode.querySelector('a.' + className);
+        if (linkNode.classList.contains('disabled')) {
+            return;
+        }
+        router.show(linkNode.getAttribute('href'));
+    }
+
+    _refreshNav(response, ctx) {
+        const currentPage = Math.ceil(
+            (response.offset + response.limit) / response.limit);
+        const totalPages = Math.ceil(response.total / response.limit);
+        const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
+        const pages = _getPages(currentPage, pageNumbers, ctx, response.limit);
+
+        views.replaceContent(
+            this._pageNavNode,
+            navTemplate({
+                getClientUrlForPage: ctx.getClientUrlForPage,
+                prevPage: Math.min(totalPages, Math.max(1, currentPage - 1)),
+                nextPage: Math.min(totalPages, Math.max(1, currentPage + 1)),
+                currentPage: currentPage,
+                totalPages: totalPages,
+                pages: pages,
+            }));
+    }
 }
 
 module.exports = ManualPageView;
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js
index 04764c1..54b8cf0 100644
--- a/client/js/views/posts_header_view.js
+++ b/client/js/views/posts_header_view.js
@@ -89,7 +89,8 @@ class PostsHeaderView extends events.EventTarget {
         this._toggleMassTagVisibility(false);
         this.dispatchEvent(new CustomEvent('navigate', {detail: {parameters: {
             query: this._ctx.parameters.query,
-            page: this._ctx.parameters.page,
+            offset: this._ctx.parameters.offset,
+            limit: this._ctx.parameters.limit,
             tag: null,
         }}}));
     }
@@ -107,7 +108,7 @@ class PostsHeaderView extends events.EventTarget {
                 'navigate', {
                     detail: {
                         parameters: Object.assign(
-                            {}, this._ctx.parameters, {tag: null, page: 1}),
+                            {}, this._ctx.parameters, {tag: null, offset: 0}),
                     },
                 }));
     }
@@ -119,8 +120,8 @@ class PostsHeaderView extends events.EventTarget {
             this._masstagAutoCompleteControl.hide();
         }
         let parameters = {query: this._queryInputNode.value};
-        parameters.page = parameters.query === this._ctx.parameters.query ?
-            this._ctx.parameters.page : 1;
+        parameters.offset = parameters.query === this._ctx.parameters.query ?
+            this._ctx.parameters.offset : 0;
         if (this._massTagInputNode) {
             parameters.tag = this._massTagInputNode.value;
             this._massTagInputNode.blur();
diff --git a/client/js/views/posts_page_view.js b/client/js/views/posts_page_view.js
index 686adcf..3c53c84 100644
--- a/client/js/views/posts_page_view.js
+++ b/client/js/views/posts_page_view.js
@@ -13,7 +13,7 @@ class PostsPageView extends events.EventTarget {
         views.replaceContent(this._hostNode, template(ctx));
 
         this._postIdToPost = {};
-        for (let post of ctx.results) {
+        for (let post of ctx.response.results) {
             this._postIdToPost[post.id] = post;
             post.addEventListener('change', e => this._evtPostChange(e));
         }