Add slow categories to navbar

core/router.ts

@@ -20,7 +20,7 @@ export interface Routes {
   refresh: {}
   settings: {}
   signin: {}
-  slowAll: {}
+  slow: { feed?: string; post?: string }
   start: {}
   subscriptions: {}
   welcome: {}
@@ -86,12 +86,12 @@ onEnvironment(({ baseRouter }) => {
       } else if (user) {
         if (GUEST.has(page.route) || page.route === 'home') {
           if (withFeeds) {
-            return redirect('slowAll')
+            return redirect({ params: {}, route: 'slow' })
           } else {
             return redirect('welcome')
           }
         } else if (page.route === 'welcome' && withFeeds) {
-          return redirect('slowAll')
+          return redirect({ params: {}, route: 'slow' })
         } else if (page.route === 'settings') {
           return redirect('interface')
         } else if (page.route === 'feeds') {
@@ -148,7 +148,7 @@ export function isFastRoute(route: Route): boolean {
 }
 
 export function isSlowRoute(route: Route): boolean {
-  return route.route === 'slowAll'
+  return route.route === 'slow'
 }
 
 export function isGuestRoute(route: Route): boolean {

core/test/router.test.ts

@@ -44,7 +44,7 @@ test('transforms routers for guest', () => {
     route: 'start'
   })
 
-  setBaseRoute({ params: {}, route: 'slowAll' })
+  setBaseRoute({ params: {}, route: 'slow' })
   deepStrictEqual(router.get(), {
     params: {},
     route: 'start'
@@ -106,14 +106,14 @@ test('transforms routers for users with feeds', async () => {
   deepStrictEqual(router.get(), {
     params: {},
     redirect: true,
-    route: 'slowAll'
+    route: 'slow'
   })
 
   setBaseRoute({ params: {}, route: 'welcome' })
   deepStrictEqual(router.get(), {
     params: {},
     redirect: true,
-    route: 'slowAll'
+    route: 'slow'
   })
 
   setBaseRoute({ params: {}, route: 'home' })
@@ -168,7 +168,7 @@ test('has routes groups', () => {
   equal(isSettingsRoute(router.get()), false)
   equal(isOrganizeRoute(router.get()), false)
 
-  setBaseRoute({ params: {}, route: 'slowAll' })
+  setBaseRoute({ params: {}, route: 'slow' })
   equal(isFastRoute(router.get()), false)
   equal(isSlowRoute(router.get()), true)
   equal(isGuestRoute(router.get()), false)

web/.size-limit.json

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

web/stores/router.ts

@@ -20,7 +20,7 @@ export const urlRouter = createRouter({
   refresh: '/refresh',
   settings: '/settings',
   signin: '/signin',
-  slowAll: '/slow',
+  slow: '/slow/:feed?/:post?',
   start: '/start',
   subscriptions: '/subscriptions',
   welcome: '/welcome'

web/stories/scene.svelte

@@ -38,7 +38,7 @@
   export let refreshing: false | Partial<RefreshStatistics> = false
   export let route: Route = {
     params: {},
-    route: 'slowAll'
+    route: 'slow'
   }
   export let fast = false
   export let networkType = DEFAULT_NETWORK
@@ -94,7 +94,7 @@
     return () => {
       // @ts-expect-error
       isRefreshing.set(false)
-      baseRouter.set({ params: {}, route: 'slowAll' })
+      baseRouter.set({ params: {}, route: 'slow' })
       setNetworkType(DEFAULT_NETWORK)
       cleanLogux()
     }

web/stories/ui/button.stories.svelte

@@ -132,16 +132,11 @@
       <Button href="#" secondary>Link</Button>
       <Button
         hiddenLabel="Labelless"
-        href={getURL('slowAll')}
+        href={getURL('slow')}
         icon={mdiPlusCircleOutline}
         secondary
       />
-      <Button
-        hotkey="l"
-        href={getURL('slowAll')}
-        icon={mdiPlusCircleOutline}
-        wide
-      >
+      <Button hotkey="l" href={getURL('slow')} icon={mdiPlusCircleOutline} wide>
         Link
       </Button>
     </CardActions>

web/stories/ui/navbar.stories.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <Story name="Slow" parameters={{ layout: 'fullscreen' }}>
-  <Scene route={{ params: {}, route: 'slowAll' }}>
+  <Scene route={{ params: {}, route: 'slow' }}>
     <Navbar />
   </Scene>
 </Story>
@@ -53,7 +53,7 @@
   name="Dark Slow"
   parameters={{ layout: 'fullscreen', themes: { themeOverride: 'dark' } }}
 >
-  <Scene route={{ params: {}, route: 'slowAll' }}>
+  <Scene route={{ params: {}, route: 'slow' }}>
     <Navbar />
   </Scene>
 </Story>

web/ui/navbar/fast.svelte

@@ -22,7 +22,7 @@
 </script>
 
 {#if $fastCategories.isLoading}
-  <Loader />
+  <Loader zoneId="navbar_submenu" />
 {:else if $fastCategories.categories.length > 0}
   {#each $fastCategories.categories as category (category.id)}
     <NavbarItem

web/ui/navbar/index.svelte

@@ -6,6 +6,7 @@
     isOrganizeRoute,
     isRefreshing,
     isSettingsRoute,
+    isSlowRoute,
     refreshPosts,
     refreshProgress,
     router,
@@ -19,6 +20,7 @@
   import NavbarFeeds from './feeds.svelte'
   import NavbarItem from './item.svelte'
   import NavbarSettings from './settings.svelte'
+  import NavbarSlow from './slow.svelte'
   import NavbarSubmenu from './submenu.svelte'
   import NavbarSwitcher from './switcher.svelte'
 
@@ -34,9 +36,11 @@
 
 <nav class="navbar">
   <NavbarSwitcher {submenu} />
-  <div class="navbar_submenu">
+  <div id="navbar_submenu" class="navbar_submenu">
     <NavbarSubmenu bind:this={submenu}>
-      {#if isFastRoute($router)}
+      {#if isSlowRoute($router)}
+        <NavbarSlow />
+      {:else if isFastRoute($router)}
         <NavbarFast />
       {:else if isSettingsRoute($router)}
         <NavbarSettings />

web/ui/navbar/slow.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {
+    type CategoryValue,
+    type Route,
+    router,
+    slowCategories,
+    commonMessages as t
+  } from '@slowreader/core'
+
+  import { getURL } from '../../stores/router.js'
+  import Loader from '../loader.svelte'
+  import NavbarItem from './item.svelte'
+
+  function categoryName(category: CategoryValue): string {
+    if (category.id === 'general') {
+      return $t.generalCategory
+    } else if (category.id === 'broken') {
+      return $t.brokenCategory
+    } else {
+      return category.title
+    }
+  }
+
+  function isCurrentFeed(page: Route, feedId: string): boolean {
+    return page.route === 'slow' && page.params.feed === feedId
+  }
+</script>
+
+{#if $slowCategories.isLoading}
+  <Loader zoneId="navbar_submenu" />
+{:else}
+  {#each $slowCategories.tree as [category, feeds] (category.id)}
+    <div class="navbar-slow_category">{categoryName(category)}</div>
+    {#each feeds as [feed, unread] (feed.id)}
+      <NavbarItem
+        name={`${feed.title} (${unread})`}
+        current={isCurrentFeed($router, feed.id)}
+        href={getURL('slow', { feed: feed.id })}
+        secondary
+      />
+    {/each}
+  {/each}
+{/if}
+
+<style>
+  .navbar-slow_category {
+    padding: 0 var(--padding-l);
+  }
+</style>

web/ui/navbar/switcher.svelte

@@ -38,8 +38,8 @@
   <a
     bind:this={slow}
     class="navbar-switcher_link"
-    aria-current={$router.route === 'slowAll' ? 'page' : null}
-    href={getURL('slowAll')}
+    aria-current={$router.route === 'slow' ? 'page' : null}
+    href={getURL('slow')}
   >
     <div class="navbar-switcher_overflow">
       <div class="navbar-switcher_button">