From 209cd0e2083a2430c92ef8a0739c6ac4876815e8 Mon Sep 17 00:00:00 2001
From: 0nepeop1e <engshun.lim@gmail.com>
Date: Fri, 14 Jun 2024 13:30:40 +0800
Subject: [PATCH] add top layout

---
 src/App.svelte         | 24 ++++++++++++++++++++----
 src/{ => lib}/chats.ts |  0
 src/lib/url.ts         |  3 +++
 src/main.ts            |  2 +-
 4 files changed, 24 insertions(+), 5 deletions(-)
 rename src/{ => lib}/chats.ts (100%)
 create mode 100644 src/lib/url.ts

diff --git a/src/App.svelte b/src/App.svelte
index 88aac34..ff972b9 100644
--- a/src/App.svelte
+++ b/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>
diff --git a/src/chats.ts b/src/lib/chats.ts
similarity index 100%
rename from src/chats.ts
rename to src/lib/chats.ts
diff --git a/src/lib/url.ts b/src/lib/url.ts
new file mode 100644
index 0000000..1104ba3
--- /dev/null
+++ b/src/lib/url.ts
@@ -0,0 +1,3 @@
+import { readable } from 'svelte/store';
+
+export const url = readable(new URL(window.location.href));
diff --git a/src/main.ts b/src/main.ts
index a658236..d5c58e3 100644
--- a/src/main.ts
+++ b/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;