1 files changed, 16 insertions, 54 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>