fix broken badge

src/App.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-    import { chats } from './chats';
+    import { chats } from './lib/chats';
     import { type TransitionConfig } from 'svelte/transition';
     import { quadOut as easing } from 'svelte/easing';
     import CommentRenderer from './components/CommentRenderer.svelte';
+    import { url } from './lib/url';
 
     const child = new WeakMap<Node, number>();
     let container: HTMLDivElement;
     let queued = false;
 
+    $: top = $url.searchParams.get('layout') === 'top';
+
     function queue() {
         if (queued) return;
         function fn() {
@@ -17,7 +20,7 @@
             container.childNodes.forEach((node) => {
                 n += child.get(node) ?? 0;
             });
-            container.scrollTo({ top: -n });
+            container.scrollTo({ top: top ? n : -n });
         }
         requestAnimationFrame(fn);
     }
@@ -38,7 +41,9 @@
 </script>
 
 <div
-    class="main flex flex-col-reverse h-screen w-screen overflow-hidden px-3 py-2"
+    class="flex h-screen w-screen overflow-hidden px-3 py-2"
+    class:bottom={!top}
+    class:top
     bind:this={container}
 >
     {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
@@ -49,7 +54,8 @@
 </div>
 
 <style lang="postcss">
-    .main {
+    .bottom {
+        @apply flex-col-reverse;
         mask-image: linear-gradient(
             180deg,
             rgba(0, 0, 0, 0) 0%,
@@ -58,4 +64,14 @@
             rgba(0, 0, 0, 1) 100%
         );
     }
+    .top {
+        @apply flex-col;
+        mask-image: linear-gradient(
+            0deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0.25) 15%,
+            rgba(0, 0, 0, 1) 30%,
+            rgba(0, 0, 0, 1) 100%
+        );
+    }
 </style>

src/components/BaseComment.svelte

@@ -21,7 +21,9 @@
         <div class="text-xs font-bold gap-0.5 items-center {authorColor(comment)}">
             {author}
             {#each comment.data.badges as badge}
+                {#if badge.url}
                     <img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
+                {/if}
             {/each}
         </div>
         <div class="comment-container">

src/lib/url.ts

@@ -0,0 +1,3 @@
+import { readable } from 'svelte/store';
+
+export const url = readable(new URL(window.location.href));

src/main.ts

@@ -1,7 +1,7 @@
 import './app.pcss';
 import App from './App.svelte';
 import type { Comment } from '@onecomme.com/onesdk/types/Comment';
-import { chats } from './chats';
+import { chats } from './lib/chats';
 
 if (import.meta.env.DEV) {
     globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;