Improved chat screen + added send message bottom fixed layer

src/routes/_components/status/Status.html

@@ -43,9 +43,7 @@
   {/if}
 </article>
 {#if enableShortcuts}
-  <Shortcut scope={shortcutScope} key="o" on:pressed="open()" />
   <Shortcut scope={shortcutScope} key="p" on:pressed="openAuthorProfile()" />
-  <Shortcut scope={shortcutScope} key="m" on:pressed="mentionAuthor()" />
 {/if}
 
 <style>

src/routes/_components/status/StatusContent.html

@@ -7,7 +7,6 @@
     grid-area: content;
     word-wrap: break-word;
     overflow: hidden;
-    white-space: pre-wrap;
     font-size: 0.9em;
     display: none;
   }

src/routes/_layout.html

@@ -1,5 +1,23 @@
 <Nav {page} />
 
+<div id="chat-compose-global" style="visibility: collapse">
+  <div class="compose">
+    <textarea type="text" placeholder="Send your message"></textarea>
+    <button class="primary compose-box-button" aria-label="Send!">
+      <svg xlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
+        <path d="M0 0h24v24H0z" fill="none"/><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
+      </svg>
+    </button>
+  </div>
+</div>
+<!--<script type="text/javascript">
+window.onload = function(e) {
+  if (window.location.pathname.startsWith('/statuses/')) {
+    document.getElementById('chat-compose-global').style = '';
+  }
+}
+</script>-->
+
 <div class="main-content">
   <main class="{infiniteScrollPage ? 'infinite-scroll-page' : ''}">
     <svelte:component this={child.component} {...child.props} />
@@ -27,6 +45,7 @@
       if (process.browser && process.env.NODE_ENV !== 'production') {
         window.layoutObject = this
       }
+      console.log('aaa');
 
       this.observe('page', page => {
         console.log('currentPage', page)

src/scss/themes/ozark.scss

@@ -43,13 +43,51 @@ $deemphasized-text-color: #939393;
     --deemphasized-text-color: #{$deemphasized-text-color};
 }
 
-div.timeline > div.virtual-list {
-  article.status-article > div.status-content {
-    position: relative;
-    top: 1em;
+div.timeline {
+  padding-bottom: 10em;
+}
+
+div#chat-compose-global {
+  z-index: 10;
+  position: fixed;
+  padding: 1em;
+  bottom: 0;
+  text-align: center;
+  width: 100vw !important;
+
+  div.compose {
+    background: #ececec;
+    box-shadow: 0px -3px 10px #0000003b;
+    max-width: 60em;
+    margin: auto;
+
+    button {
+      padding: .5em 1em;
+
+      svg {
+        fill: #fff;
+      }
+    }
+
+    textarea {
+      background: #fff;
+      border: 10px solid #f2f2f2;
+      max-width: 30em;
+      min-width: 15em;
+      max-height: 6em;
+      min-height: 4.5em;
+      padding: 1em;
+    }
+
+    textarea:focus {
+      outline: none !important;
+    }
   }
 }
 
+div.timeline > div.virtual-list {
+}
+
 div.timeline > div.the-list {
   div.list-item {
     article.status-article {
@@ -59,8 +97,7 @@ div.timeline > div.the-list {
       float: right;
       border: 1px solid #c6c5c5;
       box-shadow: 6px 6px 6px #dbd7d7;
-    }
-    article.status-article {
+
       a.status-sidebar {
         visibility: collapse;
         width: 0;
@@ -69,6 +106,7 @@ div.timeline > div.the-list {
       span.status-author-handle {
         visibility: collapse;
       }
+
     }
   }
 }
@@ -79,5 +117,10 @@ div.timeline article {
     width: 0;
     height: 0;
   }
+  div.status-content span.h-card a.u-url.mention,
+  div.status-mentions {
+    visibility: collapse;
+    display: none;
+  }
 }