improve guild selection, add Wip

package.json

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

src/app.d.ts

@@ -14,7 +14,7 @@ declare global {
 			site: ServerHealth | null,
 			me: UserEntry | null,
 			results?: object[],
-			query?: string
+			query?: string,
 		}
 		// interface PageState {}
 		// interface Platform {}

src/lib/CommentCount.svelte

@@ -0,0 +1,24 @@
+
+<script lang="ts">
+    import { RiChat3Line } from "svelte-remixicon";
+
+
+let { count } = $props();
+</script>
+
+<div class="comment-count">
+    <RiChat3Line />
+    <strong>{count??'-'}</strong>
+</div>
+
+<style>
+    .comment-count { 
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .comment-count :global(svg) {
+        color: var(--border);
+    }
+</style>

src/lib/CommentSection.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import type { CommentEntry } from "./backend";
+    import Centered from "./Centered.svelte";
+
+
+let comments: null | CommentEntry = $state(null);
+
+let { post } = $props();
+
+</script>
+
+{#if comments === null}
+<Centered>
+    <button class="inline">Show comments</button>
+</Centered>
+{/if}

src/lib/EditPost.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+    import PrivacySelect from "./PrivacySelect.svelte";
+
+let { content = $bindable(""), privacy = $bindable(0) } = $props();
+
+let contentLength = $derived(content.length);
+</script>
+
+
+<label>
+    <input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
+</label>
+
+<label>
+    <textarea bind:value={content}></textarea>
+    <output><small class="faint">{contentLength} chars</small></output>
+</label>
+
+<PrivacySelect bind:value={privacy} />
+
+<style>
+    textarea {
+    width: 100%;
+    background-color: inherit;
+    color: var(--text-primary);
+    min-height: 10em;
+    margin-top: 4px;
+}
+
+input[name="title"] {
+    width: 100%;
+    margin: 6px 0;
+    font-size: 1.25em;
+}
+</style>

src/lib/FeedPost.svelte

@@ -1,25 +1,68 @@
 <script lang="ts">
-    import { DateTime } from "luxon";
-    import { RiHashtag, RiHistoryLine, RiUserLine } from "svelte-remixicon";
     import type { PostEntry } from "./backend";
     import PostMeta from "./PostMeta.svelte";
     import { SvelteShowdown } from "svelte-showdown";
+    import VoteButton from "./VoteButton.svelte";
+    import CommentCount from "./CommentCount.svelte";
 
 let { post }: { post: PostEntry } = $props();
-let { id, title, created_at, content } = post;
+let { id, title, content = "", votes, my_vote, comment_count } = post;
+
 </script>
 
-<card class="post-frame">
+<article class="card">
-  <h3 class="post-title">
+  <div class="post-frame">
-    <a href="/={id}">{title}</a>
+    <h3 class="post-title">
-  </h3>
+      <a href="/={id}">{title}</a>
-  <PostMeta {post} />
+    </h3>
-  <!-- TODO pist content -->
+    <PostMeta {post} />
-  <div class="post-content shorten">
+    <div class="post-content shorten">
-    <SvelteShowdown content={ content || "" } />
+      <SvelteShowdown { content } />
+    </div>
+    <aside class="message-stats">
+      <VoteButton score={votes} vote={my_vote} {id} />
+      <CommentCount count={comment_count} />
+    </aside>
   </div>
-</card>
+</article>
 
 <style>
-  
+  .post-frame {
+    padding-inline-start: 2em;
+    position: relative;
+  }
+  .message-stats {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    width: 2em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .post-title {
+    line-height: 1.2;
+  }
+
+  .shorten {
+    max-height: 18em;
+    overflow-y: hidden;
+    position: relative;
+   }
+
+  .shorten::after {
+    content: '';
+    position: absolute;
+    z-index: 10;
+    top: 16em;
+    left: 0;
+    width: 100%;
+    height: 2em;
+    display: block;
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--background) 100%);
+  }
+        
+
 </style>

src/lib/FullPost.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { DateTime } from "luxon";
+   import { RiEditLine, RiFlagLine } from "svelte-remixicon";
-
-    import { RiEditLine, RiFlagLine, RiHistoryLine, RiHome2Line, RiUserLine } from "svelte-remixicon";
     import type { PostEntry } from "./backend";
     import SLayout from "./SLayout.svelte";
     import GuildAbout from "./GuildAbout.svelte";
@@ -12,13 +10,15 @@
     import { SvelteShowdown } from "svelte-showdown";
     import VoteButton from "./VoteButton.svelte";
     import { getMe } from "./globals.svelte";
+    import CommentCount from "./CommentCount.svelte";
+    import CommentSection from "./CommentSection.svelte";
 
 
 
 let { post }: { post: PostEntry }  = $props();
 
 let me = getMe();
-let { title, created_at, id, content = '', to } = post;
+let { title, id, content = '', to, votes, my_vote, comment_count } = post;
 </script>
 
 <SLayout title={to.display_name + (to.type === 'guild' ? ` (+${to.name})` : to.type === 'user' ? ` (@${to.username})` : '')}>
@@ -34,21 +34,24 @@ let { title, created_at, id, content = '', to } = post;
             <!-- content, formatted as markdown -->
           </div>
         </div><!-- .post-body -->
-        <div class="message-stats">
+        <aside class="message-stats">
           <!-- upvotes / downvotes -->
-          <VoteButton />
+          <VoteButton score={votes} vote={my_vote} {id} />
-        </div>
+          <CommentCount count={comment_count} />
+        </aside>
         <ul class="message-options row">
           {#if me && me.id !== post.author?.id}
           <li><a href="/report/post/{id}"><RiFlagLine/> Report</a></li>
           {/if}
           {#if me && me.id === post.author?.id }
-          <li><a href="/edit/post/{id}"><RiEditLine/> Edit</a></li>
+          <li><a href="/edit/={id}"><RiEditLine/> Edit</a></li>
           {/if}
         </ul>
       </div>
     </article>
 
+    <CommentSection {post} />
+
     {#snippet left()}
       {#if to.type === 'guild'}
         <GuildMenu guild={to} />
@@ -74,13 +77,13 @@ let { title, created_at, id, content = '', to } = post;
     overflow-x: auto;
   }
   .post-body {
-    margin-inline-start: 3em;
+    margin-inline-start: 2em;
   }
   .message-stats {
     position: absolute;
     inset-inline-start: 0;
     top: 0;
-    width: 3em;
+    width: 2em;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;

src/lib/GuildAbout.svelte

@@ -9,7 +9,6 @@ let { guild }: { guild: GuildEntry } = $props();
 </script>
 
 
-
 {#if guild}
 <AsideCard title={'About ' + (guild.display_name? `${guild.display_name} (+${guild.name})`: `+${guild.name}`)}>
     <ul>
@@ -21,4 +20,4 @@ let { guild }: { guild: GuildEntry } = $props();
         {/if}
     </ul>
 </AsideCard>
-{/if}
+{/if}

src/lib/GuildSelect.svelte

@@ -2,7 +2,7 @@
     import { backend, type GuildEntry } from "./backend";
 
 
-let value = $state("");
+let { value = $bindable("") } = $props();
 
 let suggestions: Promise<GuildEntry[]> = $derived(getSuggestions(value));
 

src/lib/MetaNav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 
-    import { RiLoginBoxLine, RiLogoutBoxLine, RiSearch2Line, RiSearchLine, RiSettings3Line } from "svelte-remixicon";
+    import { RiAddLine, RiLoginBoxLine, RiLogoutBoxLine, RiSearch2Line, RiSearchLine, RiSettings3Line, RiShieldStarLine, RiUserLine } from "svelte-remixicon";
     import { activePostCount } from "./globals.svelte";
     import type { UserEntry } from "./backend";
 
@@ -35,7 +35,23 @@ let enable_search = $derived(user !== null);
             <span><a href="/@{user.username}">@{user.username}</a></span>
             <span>{user.karma || 0} karma</span>
         </div>
+        <a class="mobileonly" href="/@{user.username}">
+            <RiUserLine />
+        </a>
     </li>
+    <li class="nomobile">
+        <a href="/create">
+            <button>Create post</button>
+        </a>
+    </li>
+    {#if user.badges && user.badges.indexOf("administrator") >= 0} 
+    <li>
+        <a href="/admin/">
+            <RiShieldStarLine />
+        </a>
+    </li>
+    {/if} 
+    
     <li><a href="/logout" aria-label="Log out" title="Log out"><RiLogoutBoxLine /></a></li>
     {:else}
     <li><a href="/login" aria-label="Log in" title="Log in"><RiLoginBoxLine /></a></li>
@@ -98,7 +114,9 @@ let enable_search = $derived(user !== null);
             overflow: hidden;
         } 
            
-
+    button {
+        font-size: 1rem;
+    }
         
 
             

src/lib/MobileFooter.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">
     import { browser } from "$app/environment";
-    import { RiAddCircleLine, RiChat2Line, RiCompassDiscoverLine, RiHome2Line, RiHomeLine, RiNotificationLine } from "svelte-remixicon";
+    import { RiAddCircleLine, RiChat2Line, RiCompassDiscoverLine, RiHome2Line, RiHomeLine, RiNotificationLine, RiUserLine } from "svelte-remixicon";
+    import { getMe } from "./globals.svelte";
 
 function rickroll (){
     if (browser) {
         window.open( "https://youtu.be/dQw4w9WgXcQ" );
     }
 }
+
+let me = $derived(getMe());
 </script>
 
+{#if me}
 <footer class="mobileonly">
   <ul class="row">
     <li><a href="/" title="Homepage"><RiHome2Line size="2em" /></a></li>
     <li><a href="/" title="Discover"><RiCompassDiscoverLine size="2em" /></a></li>
-    <li><a href="/new" title="Create"><RiAddCircleLine size="2em" /></a></li>
+    <li><a href="/create" title="Create"><RiAddCircleLine size="2em" /></a></li>
-    <li><a href="/user/yusur" title="Messages"><RiChat2Line size="2em" /></a></li>
+    <li><a href="/@{me.username}" title="Profile"><RiUserLine size="2em" /></a></li>
     <li><a href="?" onclick={rickroll} title="Notifications"><RiNotificationLine size="2em" /></a></li>
   </ul>
 </footer>
+{/if}
 
 <style>
 

src/lib/VoteButton.svelte

@@ -1,31 +1,46 @@
 <script lang="ts">
     import { RiHeartFill, RiHeartLine, RiThumbDownFill, RiThumbDownLine } from "svelte-remixicon";
+    import { backend } from "./backend";
 
 
-let vote = $state(0);
+let { score = $bindable(null), vote = $bindable(0), id } : { score?: number | null, vote?: 0 | 1 | -1, id: string } = $props();
-let { score } : { score?: number | null } = $props();
 
+async function castVote(v: 0 | 1 | -1) {
+  let readyBackend = await backend.withEvent(null).oath();
+  let result = await readyBackend.submitJson(`post/${id}/upvote`, {
+    vote: v
+  });
+  if (score === null) { return; } 
+  if (result.status >= 400) {
+    // TODO toast error?
+    console.error("error:", (await result.json()));
+    return;
+  }
+  let {votes} = await result.json();
+  vote = v;
+  score = votes;
+}
 </script>
 
 <div class="upvote-button">
   {#if vote > 0}
-  <button class="inline">
+  <button class="inline up" onclick={() => { castVote(0).then(() => {}); }}>
     <RiHeartFill />
   </button>
   {:else}
-  <button class="inline">
+  <button class="inline" onclick={() => { castVote(1).then(() => {}); }}>
     <RiHeartLine />
   </button>
   {/if}
 
   <strong>{score ?? '-'}</strong>
 
-  {#if vote > 0}
+  {#if vote < 0}
-  <button class="inline">
+  <button class="inline down" onclick={() => { castVote(0).then(() => {}); }}>
     <RiThumbDownFill />
   </button>
   {:else}
-  <button class="inline">
+  <button class="inline" onclick={() => { castVote(-1).then(() => {}); }}>
     <RiThumbDownLine />
   </button>
   {/if}
@@ -37,5 +52,18 @@ let { score } : { score?: number | null } = $props();
     flex-direction: column;
     align-items: center;
   }
+
+  button.inline {
+    color: var(--border);
+  }
+  button.inline.up {
+    color: var(--accent);
+  }
+  button.inline.down {
+    color: var(--c11-accent);
+  }
+  :global(.color-theme-11) button.inline.down, :global(.color-theme-9) button.inline.down {
+    color: var(--c14-accent);
+  }
 </style>
 

src/lib/Wip.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { RiBarricadeLine } from "svelte-remixicon";
+import Centered from "./Centered.svelte";
+
+</script>
+<Centered>
+    <faint><RiBarricadeLine /></faint>
+</Centered>

src/lib/backend.ts

@@ -29,8 +29,21 @@ export type PostEntry = {
     title: string,
     created_at: string,
     author?: UserEntry | null,
-    content?: string | null,
+    content?: string,
-    to: UserEntry | GuildEntry 
+    to: UserEntry | GuildEntry ,
+    privacy?: number,
+    votes?: number | null,
+    my_vote?: 1 | -1 | 0,
+    comment_count?: number | null
+};
+
+export type CommentEntry = {
+    id: string,
+    parent?: {id: string},
+    locked?: boolean,
+    removed?: number | true,
+    content?: string,
+    created_at: string
 };
 
 export type ServerHealth = {

src/lib/globals.svelte.ts

@@ -22,8 +22,6 @@ export function setHealth ({ name, version, post_count, user_count, color_theme
     health.color_theme = color_theme;
 }
 
-
-
 export function setMe (me: UserEntry | null) {
     health.me = me;
 }

src/routes/+layout.svelte

@@ -36,7 +36,7 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
   <!-- end SEO tags -->
 </svelte:head>
 
-<global-wrapper class={colorThemeCls}>
+<div class="{colorThemeCls} contents">
   <header>
     <h1>
       <a href="/">{appName()}</a>
@@ -54,7 +54,7 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
   </main>
 
   <MobileFooter />
-</global-wrapper>
+</div>
 
 
 <style>
@@ -88,8 +88,13 @@ let colorThemeCls = $derived(`color-scheme-${colorScheme} color-theme-${colorThe
 
   @media screen and (max-width: 799px) {
     main {
-      height: 100vh;
+      min-height: 100vh;
+      width: 100vw;
     }
   }
+
+  .contents {
+    position: relative;
+  }
 </style>
 

src/routes/create/+page.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
     import Centered from "$lib/Centered.svelte";
+    import EditPost from "$lib/EditPost.svelte";
     import { getMe } from "$lib/globals.svelte";
     import GuildSelect from "$lib/GuildSelect.svelte";
-    import PrivacySelect from "$lib/PrivacySelect.svelte";
     import SLayout from "$lib/SLayout.svelte";
+    import Wip from "$lib/Wip.svelte";
     import { RiErrorWarningLine } from "svelte-remixicon";
 
     let me = getMe();
 
     let content = $state("");
     let privacy = $state(0);
+    let guildName = $state("");
 
-    let contentLength = $derived(content.length);
+    let enablePost = $derived(!!content && !!guildName && false);
-
 </script>
 
 
@@ -22,34 +23,26 @@
     <p>Posting as <strong>@{me.username}</strong></p>
 
     <label>
-      Post to: <!-- TODO autocomplete! -->
+      Post to:
-      <GuildSelect />
+      <GuildSelect bind:value={guildName} />
     </label>
 
-    <label>
+    <EditPost bind:content bind:privacy />
-      <input type="text" name="title" maxlength=256 placeholder="An interesting title"/>
-    </label>
-    
-    <label>
-      <textarea bind:value={content}></textarea>
-      <output><small class="faint">{contentLength} chars</small></output>
-    </label>
 
-    <PrivacySelect bind:value={privacy} />
     {#if privacy === 0}
       <span class="warning"><RiErrorWarningLine /> Your post will be PUBLIC!</span>
     {/if}
 
-    <button class="card primary" disabled>Create</button>
+    <button class="card primary" disabled={!enablePost}>Create</button>
     
   </form>
 
   {#snippet left()}
-      ...
+      <Wip />
   {/snippet}
   
   {#snippet right()}
-      ...
+      <Wip />
   {/snippet}
 </SLayout>
 {:else}
@@ -60,22 +53,10 @@
 
 <style>
 
-textarea {
-    width: 100%;
-    background-color: inherit;
-    color: var(--text-primary);
-    min-height: 10em;
-    margin-top: 4px;
-}
-
 form {
     display: flex;
     flex-direction: column;
 }
 
-input[name="title"] {
+
-    width: 100%;
-    margin: 6px 0;
-    font-size: 1.25em;
-}
 </style>

src/routes/edit/[x+3d][id]/+page.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import type { PostEntry } from "$lib/backend";
+    import Centered from "$lib/Centered.svelte";
+    import EditPost from "$lib/EditPost.svelte";
+    import { getMe } from "$lib/globals.svelte";
+    import GuildSelect from "$lib/GuildSelect.svelte";
+    import SLayout from "$lib/SLayout.svelte";
+    import Wip from "$lib/Wip.svelte";
+    import { RiErrorWarningLine } from "svelte-remixicon";
+
+    let me = getMe();
+
+    let { data }: { data: PostEntry } = $props();
+    let post = $state(data) ;
+
+    let { content = "", privacy } = $derived(post);
+
+</script>
+
+
+{#if me?.id === post.author?.id}
+<SLayout title="New post">
+  <form method="POST" class="card">
+    <p>Posting as <strong>@{me?.username}</strong></p>
+
+    <label>
+      Post to:
+      <GuildSelect />
+    </label>
+
+    <EditPost bind:content bind:privacy />
+
+    {#if privacy === 0}
+      <span class="warning"><RiErrorWarningLine /> Your post will be PUBLIC!</span>
+    {/if}
+
+    <button class="card primary" disabled>Create</button>
+    
+  </form>
+
+  {#snippet left()}
+      <Wip />
+  {/snippet}
+  
+  {#snippet right()}
+      <Wip />
+  {/snippet}
+</SLayout>
+{:else if me}
+  You can't edit posts that are not your own.
+{:else}
+<Centered>
+  You must be <a href="login">logged in</a> in order to edit your own posts.
+</Centered>
+{/if}
+
+<style>
+
+form {
+    display: flex;
+    flex-direction: column;
+}
+
+
+</style>

src/routes/edit/[x+3d][id]/+page.ts

@@ -0,0 +1,51 @@
+import { backend, type GuildEntry } from '$lib/backend.js';
+import { getMe } from '$lib/globals.svelte';
+import { error, isHttpError, redirect } from '@sveltejs/kit';
+
+export async function load(event) {
+
+    const { params } = event;
+    const { id } = params;
+
+    const resp = await backend.withEvent(event).fetch('post/' + encodeURIComponent(id));
+      
+    if(resp.status === 404) { 
+        error(404);
+    }
+
+    let post;
+    
+    try{
+      const respJ = await resp.json();
+
+        let { posts } = respJ;
+        post = posts[id];
+
+        let me = getMe();
+
+        if (!me) {
+            redirect(303, "/login?next=" + encodeURIComponent(event.url.pathname));
+        }
+        if (  post.author.id !== me?.id) {
+            error(403);
+        }
+
+        if (post?.to && post.to.type === 'guild') {
+          const guild: GuildEntry = post.to;
+          const guildResp = await backend.withEvent(event).fetch('guild/' + encodeURIComponent(guild.id));
+          const guildJson = await guildResp.json();
+          const guildInfo = guildJson?.guilds?.[guild.id];
+          guildInfo.type = 'guild';
+          post.to = guildInfo || guild;
+          console.log(post.to);
+        }
+      
+    } catch (e) {
+        if (isHttpError(e)) throw e;
+
+        console.error(e);
+        error(502);
+    }
+
+    return post;
+}

src/routes/login/+page.server.ts

@@ -5,7 +5,6 @@ import { redirect } from 'sveltekit-flash-message/server';
 
 export const actions = {
     default: async (event) => {
-        // TODO login
 
         const { request } = event;
 

src/routes/register/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { enhance } from "$app/forms";
     import Centered from "$lib/Centered.svelte";
+    import Wip from "$lib/Wip.svelte";
     import { RiInformationLine, RiUserLine } from "svelte-remixicon";
 
     let username = $state("");
@@ -25,7 +26,7 @@ let disabled = $derived(username.length < 2 || username.length > 30 ||
         <small class="faint">Must be a working e-mail address <abbr title="Will be used for password recovery and important communications"><RiInformationLine /></abbr></small>
         <input type="text" name="username" bind:value={email} />
     </label>
-    ...
+    <Wip />
 
     <button class="primary" disabled={disabled}>Sign up</button>
     </form>

src/routes/search/+page.server.ts

@@ -32,14 +32,12 @@ export const actions = {
         event.locals.results = results;
         event.locals.query = query;
         console.log(event.locals);
-        return
     }
 } satisfies Actions;
 
-export async function load (event) {
+export function load (event) {
-    const { results, query } = event.locals;
+  const { results, query } = event.locals;
-    
+
-    console.log({ results, query });
+  return { results, query };
-    return { results, query };
 }
 

src/routes/search/+page.svelte

@@ -6,6 +6,7 @@
     import type { PageProps } from "./$types";
 
     let { data }: PageProps = $props();
+    console.log(data);
     let { query, results } = $derived(data);
 </script>