feat(post): show snackbar for all post actions

components/publish/PublishSnackbar.vue

@@ -8,7 +8,7 @@ function show() {
 
   setTimeout(() => {
     hide()
-  }, 10000)
+  }, 5000)
 }
 
 function hide() {
@@ -22,20 +22,28 @@ defineExpose({
 </script>
 
 <template>
-  <div class="snackbar-wrapper">
-    <div
-      :class="{ active: isVisible }"
-      class="snackbar"
-    >
+  <div
+    :class="{ active: isVisible }"
+    class="snackbar-wrapper"
+  >
+    <div class="snackbar">
       Your post was published
     </div>
   </div>
 </template>
 
 <style scoped>
   .snackbar-wrapper {
+    bottom: -100px;
     display: flex;
     justify-content: center;
+    position: sticky;
+    transition: bottom 500ms ease-in-out;
+    width: 100%;
+    z-index: 1000;
+  }
+  .snackbar-wrapper.active {
+    bottom: 50px;
   }
   .snackbar {
     background: var(--c-primary);
@@ -51,7 +59,7 @@ defineExpose({
     text-align: center;
     transition: opacity 800ms ease-in-out;
   }
-  .snackbar.active {
+  .snackbar-wrapper.active .snackbar {
     opacity: 1;
   }
 </style>

components/timeline/TimelineHome.vue

@@ -5,19 +5,22 @@ import { ref } from 'vue'
 const paginator = useMastoClient().v1.timelines.listHome({ limit: 30 })
 const stream = $(useStreaming(client => client.v1.stream.streamUser()))
 const homePaginator = ref(null)
+const publishSnackbar = ref(null)
 
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'home')
 }
 
 function onPublish(status) {
   homePaginator.value.percolateStatus(status)
+  publishSnackbar.value.show()
 }
 </script>
 
 <template>
-  <div>
+  <div relative>
     <PublishWidget draft-key="home" border="b base" feed-name="home" @published="onPublish" />
     <TimelinePaginator ref="homePaginator" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" feed-name="home.feed" />
+    <PublishSnackbar ref="publishSnackbar" />
   </div>
 </template>

pages/compose.vue

@@ -19,6 +19,8 @@ function onPublish() {
 </script>
 
 <template>
-  <PublishWidgetFull @published="onPublish" />
-  <PublishSnackbar ref="publishSnackbar" />
+  <div relative>
+    <PublishWidgetFull @published="onPublish" />
+    <PublishSnackbar ref="publishSnackbar" />
+  </div>
 </template>