add ScrollWarning, improve HomeMenu and meta tags

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@yusurko/vigil",
 	"private": true,
-	"version": "0.1.0-dev47",
+	"version": "0.1.0-dev49",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/lib/Feed.svelte

@@ -2,6 +2,7 @@
     import { RiChatOffLine } from "svelte-remixicon";
     import Centered from "./Centered.svelte";
     import FeedPost from "./FeedPost.svelte";
+    import ScrollWarning from "./ScrollWarning.svelte";
 
     let { posts, emptymsg = "No posts, how empty" } = $props();
 </script>
@@ -14,6 +15,10 @@
         <p class="big"><RiChatOffLine /></p>
         {emptymsg}</Centered>
     {/each}
+    {#if posts}
+    <!-- TODO make feeds keep track of a "next page" -->
+    <ScrollWarning next={2} loadNext={() => {}} />
+    {/if}
 </ul>
 
 <style>

src/lib/HomeMenu.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
-  import { RiHome2Line, RiSettings2Line } from 'svelte-remixicon';
+  import { RiHome2Line, RiSettings2Line, RiShieldStarLine, RiUserLine } from 'svelte-remixicon';
     import MenuLink from './MenuLink.svelte';
 
+  let { user = null } = $props();
 </script>
 
 <ul class="column">
   <MenuLink href="/" icon={RiHome2Line} label="Home" />
   <MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
+  {#if user}
+  <MenuLink href="/@{user.username}" icon={RiUserLine} label="My profile" />
+  {/if}
+  {#if user.badges && user.badges.indexOf('administrator') >= 0}
+  <MenuLink href="/admin/" icon={RiShieldStarLine} label="Administration" />
+  {/if}
 </ul>

src/lib/ScrollWarning.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import Centered from "./Centered.svelte";
+    import { randomChoice } from "./globals.svelte";
+
+const choices1 = [
+    'STOP SCROLLING!',
+	'Scrolling is bad for your health',
+	'You scrolled enough for today',
+	'There is grass out there',
+	'Scrolling turns you into an extremist',
+	'Is your time really worth this little?',
+	'You learn nothing from social media'
+];
+
+const choices2 = [
+    'Nevermind',
+	'I understand the risks',
+	'I can\'t touch grass',
+	'Get me some more anyway!',
+	'I can\'t quit right now',
+	'A little more~'
+]
+
+let { next, loadNext } : { next: number, loadNext: () => void } = $props();
+
+let choice1 = $derived(randomChoice(choices1));
+let choice2 = $derived(randomChoice(choices2));
+</script>
+
+<Centered>
+    <p><strong class="error">{ choice1 }</strong></p>
+    <p><small><button class="inline" onclick={() => {loadNext();}}>{ choice2 }</button></small></p>
+</Centered>

src/lib/globals.svelte.ts

@@ -1,4 +1,5 @@
 import type { ServerHealth, UserEntry } from "$lib/backend";
+import { RiListOrdered } from "svelte-remixicon";
 
 
 let health : {
@@ -51,6 +52,12 @@ export async function sleep (ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+export function randomChoice<T>(list: T[]): T {
+    let { length } = list;
+    let i = Math.floor(Math.random() * length);
+    return list[i];
+}
+
 export function getColorThemeCode (): number {
     return health.color_theme;
 }

src/routes/+layout.svelte

@@ -29,7 +29,7 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
 <svelte:head>
   <meta name="og:site_name" content="app_name" />
   {#if data}
-  <meta name="generator" content={`app_name (frontend ${version} + Svelte 5, backend ${bkVersion()})`} />
+  <meta name="generator" content={`Freak (frontend ${version} + Svelte 5, backend ${bkVersion()}); https://nekode.yusur.moe/yusur/freak`} />
   {/if}
   <!-- TODO csrf token? -->
   <!-- icon styles? -->

src/routes/+page.svelte

@@ -27,7 +27,7 @@
   <Feed posts={feed} /> 
 
   {#snippet left()}
-    <HomeMenu />
+    <HomeMenu user={me} />
   {/snippet}
   
   {#snippet right()}