Allow to open fast post

core/fast.ts

@@ -1,3 +1,4 @@
+import type { SyncMapValue } from '@logux/client'
 import { atom, onMount } from 'nanostores'
 
 import {
@@ -10,7 +11,7 @@ import { client } from './client.js'
 import { onEnvironment } from './environment.js'
 import { type FeedValue, loadFeed, loadFeeds, MISSED_FEED } from './feed.js'
 import { loadFilters } from './filter.js'
-import { deletePost, loadPosts } from './post.js'
+import { deletePost, getPost, loadPosts } from './post.js'
 import type { PostValue } from './post.js'
 import { type Route, router } from './router.js'
 import { listenMany, readonlyExport } from './utils/stores.js'
@@ -199,9 +200,18 @@ export function clearFast(): void {
   $posts.set([])
   $nextSince.set(undefined)
   $reading.set(0)
+  postUnbind?.()
+  $post.set(undefined)
+  postUnbind = undefined
   POSTS_PER_PAGE = 50
 }
 
+let postUnbind: (() => void) | undefined
+
+let $post = atom<SyncMapValue<PostValue> | undefined>(undefined)
+
+export const openedFastPost = readonlyExport($post)
+
 function notSynced(page: Route): page is Route<'fast'> {
   return (
     page.route === 'fast' &&
@@ -227,6 +237,18 @@ onEnvironment(({ openRoute }) => {
         loadFastPost(page.params.category, page.params.since)
       }
       if (page.route === 'fast') {
+        if (page.params.post) {
+          if ($post.get()?.id !== page.params.post) {
+            let store = getPost(page.params.post)
+            postUnbind = store.subscribe(value => {
+              $post.set(value)
+            })
+          }
+        } else {
+          postUnbind?.()
+          postUnbind = undefined
+          $post.set(undefined)
+        }
         inFast = true
       } else if (inFast) {
         inFast = false

core/messages/common/en.ts

@@ -5,5 +5,6 @@ export const commonMessages = i18n('common', {
   empty: 'The value is required',
   generalCategory: 'General',
   loading: 'Loading',
-  noUrl: 'Doesn’t look like web page address'
+  noUrl: 'Doesn’t look like web page address',
+  openPost: 'Open post'
 })

core/router.ts

@@ -11,7 +11,7 @@ export interface Routes {
   add: { url?: string }
   categories: { feed?: string }
   download: {}
-  fast: { category?: string; since?: number }
+  fast: { category?: string; post?: string; since?: number }
   feeds: {}
   home: {}
   interface: {}
@@ -112,12 +112,15 @@ onEnvironment(({ baseRouter }) => {
             }
           }
           if (page.params.since) {
-            let since = page.params.since
-            if (isNumber(since)) {
+            if (isNumber(page.params.since)) {
+              let since =
+                typeof page.params.since === 'number'
+                  ? page.params.since
+                  : parseInt(page.params.since)
               return open({
                 params: {
-                  category: page.params.category,
-                  since: typeof since === 'number' ? since : parseInt(since)
+                  ...page.params,
+                  since
                 },
                 route: 'fast'
               })

core/test/fast.test.ts

@@ -19,6 +19,8 @@ import {
   loadPosts,
   markReadAndLoadNextFastPosts,
   nextFastSince,
+  openedFastPost,
+  type PostValue,
   router,
   setFastPostsPerPage,
   testFeed,
@@ -39,7 +41,8 @@ afterEach(async () => {
     nextFastSince,
     fastCategories,
     fastCategory,
-    fastSince
+    fastSince,
+    openedFastPost
   )
   await setTimeout(10)
   await cleanClientTest()
@@ -426,3 +429,55 @@ test('syncs fast category and since with URL', async () => {
   equal(fastSince.get(), undefined)
   deepStrictEqual(fastPosts.get(), [])
 })
+
+test('tracks current post', async () => {
+  openedFastPost.listen(() => {})
+  equal(openedFastPost.get(), undefined)
+
+  let feedId = await addFeed(testFeed({ categoryId: 'general' }))
+  let post1 = await addPost(testPost({ feedId, reading: 'fast', title: '1' }))
+  let post2 = await addPost(testPost({ feedId, reading: 'fast', title: '2' }))
+  let post3 = await addPost(testPost({ feedId, reading: 'slow', title: '3' }))
+
+  setBaseRoute({
+    params: { category: 'general' },
+    route: 'fast'
+  })
+  await setTimeout(10)
+  equal(openedFastPost.get(), undefined)
+
+  setBaseRoute({
+    params: { category: 'general', post: post1, since: 0 },
+    route: 'fast'
+  })
+  equal(openedFastPost.get()?.id, post1)
+  equal(openedFastPost.get()?.isLoading, false)
+  equal((openedFastPost.get() as PostValue).title, '1')
+
+  setBaseRoute({
+    params: { category: 'general', since: 0 },
+    route: 'fast'
+  })
+  equal(openedFastPost.get(), undefined)
+
+  setBaseRoute({
+    params: { category: 'general', post: post2, since: 0 },
+    route: 'fast'
+  })
+  equal((openedFastPost.get() as PostValue).title, '2')
+  setBaseRoute({
+    params: { category: 'general', post: post1, since: 0 },
+    route: 'fast'
+  })
+  equal((openedFastPost.get() as PostValue).title, '1')
+
+  setBaseRoute({
+    params: { category: 'general', post: post3, since: 0 },
+    route: 'fast'
+  })
+  equal(openedFastPost.get()?.id, post3)
+  equal(openedFastPost.get()?.isLoading, true)
+  await setTimeout(10)
+  equal(openedFastPost.get()?.isLoading, false)
+  equal((openedFastPost.get() as PostValue).title, '3')
+})

core/test/router.test.ts

@@ -5,6 +5,7 @@ import { setTimeout } from 'node:timers/promises'
 import {
   addCategory,
   addFeed,
+  addPost,
   deleteFeed,
   isFastRoute,
   isGuestRoute,
@@ -14,6 +15,7 @@ import {
   removeFeedFromRoute,
   router,
   testFeed,
+  testPost,
   userId
 } from '../index.js'
 import { cleanClientTest, enableClientTest, setBaseRoute } from './utils.js'
@@ -198,15 +200,32 @@ test('has routes groups', () => {
 test('converts since to number', async () => {
   userId.set('10')
   let idA = await addCategory({ title: 'A' })
-  await addFeed(testFeed({ categoryId: idA, reading: 'fast' }))
+  let feed = await addFeed(testFeed({ categoryId: idA, reading: 'fast' }))
+  let post = await addPost(testPost({ feedId: feed }))
   await setTimeout(10)
 
+  setBaseRoute({ params: { category: idA, since: 1000 }, route: 'fast' })
+  deepStrictEqual(router.get(), {
+    params: { category: idA, since: 1000 },
+    route: 'fast'
+  })
+
   setBaseRoute({ params: { category: idA, since: '1000' }, route: 'fast' })
   deepStrictEqual(router.get(), {
     params: { category: idA, since: 1000 },
     route: 'fast'
   })
 
+  setBaseRoute({
+    params: { category: idA, post, since: '1000' },
+    route: 'fast'
+  })
+  deepStrictEqual(router.get(), {
+    params: { category: idA, post, since: 1000 },
+    route: 'fast'
+  })
+  await setTimeout(10)
+
   setBaseRoute({ params: { category: idA, since: '1000k' }, route: 'fast' })
   deepStrictEqual(router.get(), {
     params: {},

web/.size-limit.json

@@ -8,6 +8,6 @@
     "name": "All scripts to execute",
     "path": "dist/assets/*.js",
     "brotli": false,
-    "limit": "190 KB"
+    "limit": "195 KB"
   }
 ]

web/pages/fast.svelte

@@ -5,6 +5,7 @@
     fastPosts,
     markReadAndLoadNextFastPosts,
     nextFastSince,
+    openedFastPost,
     fastMessages as t
   } from '@slowreader/core'
 
@@ -13,42 +14,61 @@
   import Loader from '../ui/loader.svelte'
   import Page from '../ui/page.svelte'
   import PostCard from '../ui/post-card.svelte'
+
+  let since = Date.now()
+  $: since = ($fastPosts[0]?.post.publishedAt ?? Date.now()) + 1
 </script>
 
 <Page title={$t.pageTitle} type="list">
-  {#if $fastCategory === undefined || $fastLoading === 'init'}
+  {#if $fastCategory === undefined || $fastLoading === 'init' || ($openedFastPost && $openedFastPost.isLoading)}
     <Loader />
-  {:else if $fastPosts.length === 0}
-    {$t.noPosts}
   {:else}
-    <ul role="list">
-      {#each $fastPosts as entry (entry.post.id)}
-        <li class="fast_post">
-          <PostCard author={entry.feed} post={entry.post} />
-        </li>
-      {/each}
-    </ul>
-    {#if $fastLoading === 'next'}
-      <Loader />
+    <div>
+      {#if $openedFastPost}
+        <PostCard post={$openedFastPost} />
+        <hr />
+      {/if}
+    </div>
+    {#if $fastPosts.length === 0}
+      {$t.noPosts}
     {:else}
-      <Button
-        wide
-        on:click={() => {
-          markReadAndLoadNextFastPosts()
-        }}
-      >
-        {$t.readNext}
-      </Button>
-      {#if $nextFastSince}
+      <ul role="list">
+        {#each $fastPosts as entry (entry.post.id)}
+          <li class="fast_post">
+            <PostCard
+              author={entry.feed}
+              open={getURL('fast', {
+                category: $fastCategory,
+                post: entry.post.id,
+                since
+              })}
+              post={entry.post}
+            />
+          </li>
+        {/each}
+      </ul>
+      {#if $fastLoading === 'next'}
+        <Loader />
+      {:else}
         <Button
-          href={getURL('fast', {
-            category: $fastCategory,
-            since: $nextFastSince
-          })}
-          secondary
+          wide
+          on:click={() => {
+            markReadAndLoadNextFastPosts()
+          }}
         >
-          {$t.showNext}
+          {$t.readNext}
         </Button>
+        {#if $nextFastSince}
+          <Button
+            href={getURL('fast', {
+              category: $fastCategory,
+              since: $nextFastSince
+            })}
+            secondary
+          >
+            {$t.showNext}
+          </Button>
+        {/if}
       {/if}
     {/if}
   {/if}

web/stores/router.ts

@@ -11,7 +11,7 @@ export const urlRouter = createRouter({
   add: '/feeds/add/:url?',
   categories: '/feeds/categories/:feed?',
   download: '/settings/download',
-  fast: '/fast/:category?/:since?',
+  fast: '/fast/:category?/:since?/:post?',
   feeds: '/feeds',
   home: '/',
   interface: '/settings/ui',

web/ui/post-card.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-  import type { FeedValue, FilterAction, OriginPost } from '@slowreader/core'
+  import {
+    type FeedValue,
+    type FilterAction,
+    type OriginPost,
+    commonMessages as t
+  } from '@slowreader/core'
 
+  import Button from './button.svelte'
   import Card from './card.svelte'
   import FormattedText from './formatted-text.svelte'
 
   export let post: OriginPost
   export let author: FeedValue | undefined = undefined
   export let action: FilterAction | undefined = undefined
+  export let open: string | undefined = undefined
 </script>
 
 <Card>
@@ -28,6 +35,9 @@
       </h1>
     {/if}
     <FormattedText html={post.intro ?? post.full ?? ''} />
+    {#if open}
+      <Button href={open} secondary>{$t.openPost}</Button>
+    {/if}
   </div>
 </Card>