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>