Add toast for error messages, fix #16

src/lib/assets/error-warning-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z" fill="#000"></path></svg>

src/lib/errorToast.ts

@@ -0,0 +1,8 @@
+import errorIcon from '$lib/assets/error-warning-fill.svg';
+import { toast } from '@zerodevx/svelte-toast';
+
+export function errorToast(message: string): number {
+  return toast.push(`<img src="${errorIcon}" />${message}`, {
+    classes: ['error']
+  });
+}

src/routes/+layout.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
   import FooterComponent from '$lib/components/FooterComponent.svelte'
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+
+  const options = {
+    pausable: true,
+    classes: ['toast']
+  };
 </script>
 <slot />
+<SvelteToast {options} />
 <div class="footer">
   <FooterComponent />
 </div>
@@ -12,4 +19,18 @@
     bottom: 0px;
     display: inline-block;
   }
+  :global(.toast.error) {
+    --toastColor: var(--color-button-text);
+    --toastBackground: var(--color-red-dark);
+    --toastBarBackground: var(--color-red-lighter);
+  }
+  :global(._toastMsg > img) {
+    position: relative;
+    height: 1.5em;
+  }
+  :global(._toastMsg) {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
 </style>

src/routes/+page.svelte

@@ -7,6 +7,7 @@ import PostComponent from '$lib/components/PostComponent.svelte';
 import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 import { fly, type FlyParams } from 'svelte/transition';
 import { cubicInOut } from 'svelte/easing';
+import { errorToast } from '$lib/errorToast'
 
 
 export let data: PageData;
@@ -21,7 +22,7 @@ interface EdgeFlyParams extends FlyParams {
   created_at: string
 }
 
-const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL) * 10;
+const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
 let interval: NodeJS.Timer | null = null;
 let moreOlderPostsAvailable = true;
 let loadingOlderPosts = false;
@@ -85,9 +86,8 @@ function refresh() {
       data.posts = filterDuplicates(resp.concat(data.posts));
     }
   })
-  .catch(e => {
-    // TODO: Show error in UI
-    console.error('Error loading newest posts', e);
+  .catch((e: Error) => {
+    errorToast('Error loading newest posts: ' + e.message);
   });
 }
 
@@ -118,8 +118,9 @@ function loadOlderPosts() {
   loadingOlderPosts = true;
   const filter: FetchOptions = { count: 20 };
   if (data.posts.length > 0) {
-    filter.before = data.posts[data.posts.length - 1].created_at;
-    oldestBeforeLastFetch = new Date(filter.before).getTime();
+    const before = data.posts[data.posts.length - 1].created_at;
+    filter.before = before;
+    oldestBeforeLastFetch = new Date(before).getTime();
   }
 
 
@@ -137,8 +138,7 @@ function loadOlderPosts() {
   })
   .catch(e => {
     loadingOlderPosts = false;
-    // TODO: Show error in UI
-    console.error('Error loading older posts', e);
+    errorToast('Error loading older posts: ' + e.message);
   });
 
 }