6 files changed, 44 insertions, 93 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 81324fd..cbfef54 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -41,7 +41,7 @@
         let hasUnreads = lastMessageAt > ch.lastReadAt;
         enrichedChannels.push({
           ...ch,
-          hasUnreads,
+          hasUnreads
         });
       }
     }
@@ -104,8 +104,20 @@
       gesture.destroy();
     }
   });
+
+  function beforeUnload(evt) {
+    evt.preventDefault();
+    if (events !== null) {
+      events.close();
+    }
+    // For some compat reasons?
+    evt.returnValue = '';
+    return '';
+  }
 </script>
 
+<svelte:window on:beforeunload={beforeUnload} />
+
 <svelte:head>
   <!-- TODO: unread count? -->
   <title>pilcrow</title>
@@ -114,65 +126,15 @@
 {#if loading}
   <h2>Loading&hellip;</h2>
 {:else}
-  <div id="interface" class="p-2">
+  <div id="interface">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
-      <div class="channel-list">
-        <ChannelList active={channel} channels={enrichedChannels} />
-      </div>
+      <ChannelList active={channel} channels={enrichedChannels} />
       <div class="create-channel">
         <CreateChannelForm />
       </div>
     </nav>
-    <main class="pl-4">
+    <main>
       {@render children?.()}
     </main>
   </div>
 {/if}
-
-<style>
-  /* Just some global CSS variables, don't mind them.
-   */
-  :root {
-    --app-bar-height: 48px;
-    --input-row-height: 2rem;
-    --interface-padding: 16px;
-  }
-
-  #interface {
-    margin: unset;
-    display: grid;
-    grid-template:
-      'side main' 1fr
-      / auto 1fr;
-    height: calc(100vh - var(--app-bar-height));
-
-    @media (width > 640px) {
-      --overlay: static;
-      --translate: 0;
-    }
-  }
-  nav {
-    grid-area: side;
-    background-color: rgb(var(--color-surface-800));
-    inset: auto auto 0 0;
-    padding: 0.25rem;
-    position: var(--overlay, absolute);
-    transition: translate 300ms ease-out;
-    width: 21rem;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-    z-index: 10;
-  }
-  main {
-    grid-area: main;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
-  }
-  .channel-list {
-    height: calc(
-      100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
-    );
-    overflow: auto;
-  }
-  nav[data-expanded='false'] {
-    translate: var(--translate, -100% 0);
-  }
-</style>
diff --git a/ui/routes/(app)/+page.svelte b/ui/routes/(app)/+page.svelte
index e69de29..007c5c6 100644
--- a/ui/routes/(app)/+page.svelte
+++ b/ui/routes/(app)/+page.svelte
@@ -0,0 +1,3 @@
+<div class="no-active-channel">
+  <span class="vertical-aligner"> Please select or create a channel. </span>
+</div>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 7d5b8cf..dbdb507 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -18,15 +18,17 @@
     const elementTop = elRect.top;
     const elementBottom = elRect.bottom;
 
-    return ((parentTop < elementTop) && (parentBottom > elementBottom));
+    return parentTop < elementTop && parentBottom > elementBottom;
   }
 
   function getLastVisibleMessage() {
     const parentElement = activeChannel;
     const childElements = parentElement.getElementsByClassName('message');
-    const lastInView = Array.from(childElements).reverse().find((el) => {
-      return inView(parentElement, el);
-    });
+    const lastInView = Array.from(childElements)
+      .reverse()
+      .find((el) => {
+        return inView(parentElement, el);
+      });
     return lastInView;
   }
 
@@ -50,14 +52,14 @@
   });
 
   function handleKeydown(event) {
-		if (event.key === 'Escape') {
+    if (event.key === 'Escape') {
       setLastRead(); // TODO: pass in "last message DT"?
     }
   }
 
   let lastReadCallback = null;
   function handleScroll() {
-    clearTimeout(lastReadCallback);  // Fine if lastReadCallback is null still.
+    clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
     lastReadCallback = setTimeout(setLastRead, 2 * 1000);
   }
 </script>
@@ -67,15 +69,6 @@
 <div class="active-channel" on:scroll={handleScroll} bind:this={activeChannel}>
   <ActiveChannel {messageRuns} />
 </div>
-<div class="create-message max-h-full">
+<div class="create-message">
   <MessageInput {channel} />
 </div>
-
-<style>
-  .active-channel {
-    height: calc(
-      100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
-    );
-    overflow: auto;
-  }
-</style>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index aded292..14a9db8 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -4,14 +4,8 @@
   import ChangePassword from '$lib/components/ChangePassword.svelte';
 </script>
 
-<div class="mb-4">
-  <ChangePassword />
-</div>
-
-<div class="mb-4">
-  <Invites />
-</div>
-
-<div>
-  <LogOut />
-</div>
+<ChangePassword />
+<hr />
+<Invites />
+<hr />
+<LogOut />
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 4433bd6..132cbc1 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -25,11 +25,11 @@
 </script>
 
 {#await data.invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Loading invitation…</p>
   </div>
 {:then invite}
-  <div class="card m-4 p-4">
+  <div class="invite-text">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
   <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 26033e0..750f1f8 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -4,7 +4,6 @@
   import '../app.css';
   import logo from '$lib/assets/logo.png';
 
-  import { AppBar } from '@skeletonlabs/skeleton';
   import { currentUser } from '$lib/store';
 
   let pageContext = $state({
@@ -24,20 +23,20 @@
   let { children } = $props();
 </script>
 
-<AppBar padding="px-4 pt-0 pb-4">
-  <svelte:fragment slot="lead">
-    <button onclick={toggleMenu} class="cursor-pointer">
-      <img class="w-8 h-8" alt="logo" src={logo} />
+<div class="app-bar">
+  <div class="lead">
+    <button onclick={toggleMenu}>
+      <img alt="logo" src={logo} />
     </button>
-  </svelte:fragment>
+  </div>
   <a href="/">pilcrow</a>
-  <svelte:fragment slot="trail">
+  <div class="trail">
     {#if $currentUser}
-      <div class="rounded-full bg-secondary-400 px-3 py-1">
+      <div>
         <a href="/me">@{$currentUser.username}</a>
       </div>
     {/if}
-  </svelte:fragment>
-</AppBar>
+  </div>
+</div>
 
 {@render children?.()}