adds an empty feeds list representation

Author: mrmegatelo

frontend/src/assets/main.css

@@ -98,6 +98,8 @@ a:hover {
     padding: var(--vertical-padding) var(--side-padding);
     position: relative;
     height: 100%;
+    display: flex;
+    flex-direction: column;
 
     & + & {
         border-left: 1px solid var(--color-grey-200);
@@ -299,7 +301,27 @@ a:hover {
 }
 
 .feed-list-loader {
-    margin: calc(var(--grid-step) * 2) calc(var(--grid-step) * 3) calc(var(--grid-step) * 3);;
+    margin: calc(var(--grid-step) * 2) calc(var(--grid-step) * 3) calc(var(--grid-step) * 3);
+}
+
+.feed-list-empty-container {
+    margin: calc(var(--grid-step) * 2) calc(var(--grid-step) * 3) calc(var(--grid-step) * 3);
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+}
+
+.feed-list-empty-icon {
+    width: calc(var(--grid-step) * 6);
+}
+
+.feed-list-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: var(--color-grey-200);
+    gap: calc(var(--grid-step) * 1);
 }
 
 .feed-list {

frontend/src/components/FeedList.vue

@@ -3,6 +3,7 @@ import FeedItem from '@/components/FeedItem.vue'
 import { useFeedStore } from '@/stores/feed.ts'
 import { computed, ref, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
+import IconInboxEmpty from '@/components/icons/IconInboxEmpty.vue'
 
 const { fetchUrl } = defineProps({ fetchUrl: String })
 const nextLink = ref(null)
@@ -59,6 +60,12 @@ watchEffect(async () => {
 
 <template>
   <div class="feed-list-loader" v-if="feedStore.isLoading">Loading...</div>
+  <div v-else-if="feedStore.isEmpty" class="feed-list-empty-container">
+    <div class="feed-list-empty">
+      <IconInboxEmpty class="feed-list-empty-icon" />
+      <p>There is nothing new yet.</p>
+    </div>
+  </div>
   <ul v-else class="feed-list-wrapper">
     <FeedItem
       v-for="(feedItem, idx) in feedStore.items"

frontend/src/components/icons/IconInboxEmpty.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-120H640q-30 38-71.5 59T480-240q-47 0-88.5-21T320-320H200v120Zm280-120q38 0 69-22t43-58h168v-360H200v360h168q12 36 43 58t69 22ZM200-200h560-560Z"/></svg>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/stores/feed.ts

@@ -49,6 +49,7 @@ export const useFeedStore = defineStore('feed', {
 
       return state.filters[category]
     },
+    isEmpty: (state: FeedState) => state.items.length === 0,
   },
   actions: {
     setItems(items: FeedItem[]) {