Update notification list design

Author: kadiryazici

src/assets/main.scss

@@ -9,13 +9,12 @@
 
   --white-faded: rgb(190, 190, 190);
   --white: rgb(255, 255, 255);
-  --content-bg: rgba(35, 35, 35, .8);
-  --sidebar-bg: rgba(66, 66, 66, .5);
+  --content-bg: rgba(30, 30, 30, .8);
+  --sidebar-bg: rgba(50, 50, 50, .75);
   --app-border: rgb(90, 90, 90);
   --item-bg: rgba(80, 80, 80, .3);
   --item-hover-bg: rgba(80, 80, 80, .75);
   --item-border-color: rgb(22, 22, 22, .3);
-  --notification-title-color: rgba(14, 14, 14, .72);
 }
 
 * {

src/components/NotificationList.vue

@@ -2,6 +2,7 @@
 import type { Thread } from '../api/notifications'
 import type { NotificationListData } from '../types'
 import { formatReason, notificationSubjectIcon } from '../utils/notification'
+import Separator from './Separator.vue'
 
 interface Emits {
   (e: 'click:notification', notification: Thread): void
@@ -42,6 +43,9 @@ function handleRepoClick() {
         {{ props.data.repoFullName }}
       </span>
     </button>
+
+    <Separator />
+
     <button
       v-for="item of props.data.items"
       :key="item.id"
@@ -70,12 +74,12 @@ function handleRepoClick() {
 <style lang="scss" scoped>
 .notification {
   + .notification {
-    margin-top: 5px;
+    margin-top: 10px;
   }
 
   &-title {
     @include focus-visible;
-    // background-color: var(--notification-title-color);
+    @include text-outline();
     border-radius: 8px;
     padding: 5px 16px;
     width: 100%;
@@ -86,12 +90,9 @@ function handleRepoClick() {
     border: 1px solid transparent;
     line-height: inherit;
 
-    &:hover {
-      border-color: var(--item-hover-bg);
-    }
-
+    &:hover,
     &:active {
-      background-color: var(--item-border-color);
+      background-color: var(--item-hover-bg);
     }
 
     &-icon {

src/components/NotificationSkeleton.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import Separator from './Separator.vue'
+
 const skeletonProps = [
   {
     class: 'skeleton-header',
@@ -13,7 +15,7 @@ const skeletonProps = [
     class: 'skeleton-item',
   },
   {
-    style: { marginTop: '5px' },
+    style: { 'marginTop': '10px', '--text-width': '50%' },
     class: 'skeleton-header',
   },
   {
@@ -22,15 +24,23 @@ const skeletonProps = [
   {
     class: 'skeleton-item',
   },
-]
+] as const
 </script>
 
 <template>
-  <div
+  <template
     v-for="(props, index) in skeletonProps"
     :key="index"
-    v-bind="props"
-  />
+  >
+    <div v-bind="props">
+      <template v-if="props.class === 'skeleton-header'">
+        <div class="skeleton-header-logo" />
+        <div class="skeleton-header-text" />
+      </template>
+    </div>
+
+    <Separator v-if="props.class === 'skeleton-header'" />
+  </template>
 </template>
 
 <style lang="scss" scoped>
@@ -52,11 +62,32 @@ const skeletonProps = [
   height: 32px;
   width: 100%;
   border-radius: 8px;
-  background-color: rgba(14, 14, 14, .72);
+  padding: 5px 16px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  &-logo {
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    background-color: var(--item-hover-bg);
+    margin-right: 16px;
+  }
+
+  &-text {
+    background-color: var(--item-hover-bg);
+    border-radius: 8px;
+    height: 8px;
+    width: var(--text-width, 60%);
+  }
 }
 
 .skeleton-item {
-  margin-top: 5px;
+  + .skeleton-item {
+    margin-top: 5px
+  };
+
   width: 100%;
   height: 62px;
   border-radius: 8px;

src/main.ts

@@ -27,8 +27,10 @@ app.use(pinia)
 
   AppStorage.set('openAtStartup', await isAutostartEnabled())
 
-  if (token && user)
+  if (token && user) {
     store.setPage(Page.Home)
+    store.fetchNotifications(true)
+  }
 
   app.mount('#app')
 })()

src/pages/HomePage.vue

@@ -20,8 +20,8 @@ import AppButton from '../components/AppButton.vue'
 
 const store = useStore()
 
-if (store.pageFrom === Page.Landing || store.pageFrom == null)
-  store.fetchNotifications(true)
+if (store.currentPageState.fetchOnEnter)
+  store.fetchNotifications()
 
 function handleNotificationClick(notification: Thread) {
   const url = toGithubWebURL({ notification, userId: AppStorage.get('user')!.id })

src/pages/LandingPage.vue

@@ -35,6 +35,7 @@ useTauriEvent<string>('code', async ({ payload }) => {
     AppStorage.set('accessToken', access_token)
     AppStorage.set('user', user)
     store.setPage(Page.Home)
+    store.fetchNotifications(true)
   }
   finally {
     processing.value = false

src/pages/SettingsPage.vue

@@ -15,6 +15,11 @@ import { useKey } from '../composables/useKey'
 
 const store = useStore()
 
+const initialValues = {
+  showOnlyParticipating: AppStorage.get('showOnlyParticipating'),
+  showReadNotifications: AppStorage.get('showReadNotifications'),
+}
+
 const soundsEnabled = AppStorage.asRef('soundsEnabled')
 const openAtStartup = AppStorage.asRef('openAtStartup')
 const showOnlyParticipating = AppStorage.asRef('showOnlyParticipating')
@@ -35,12 +40,15 @@ watchDebounced(openAtStartup, (enabled) => {
 }, { debounce: 350 })
 
 function handleBack() {
-  let page = Page.Home
-
   if (accessToken.value == null)
-    page = Page.Landing
-
-  store.setPage(page)
+    return store.setPage(Page.Landing)
+
+  store.setPage(Page.Home, {
+    fetchOnEnter: (
+      initialValues.showOnlyParticipating !== showOnlyParticipating.value
+      || initialValues.showReadNotifications !== showReadNotifications.value
+    ),
+  })
 }
 
 useKey('esc', handleBack, { prevent: true })

src/stores/store.ts

@@ -1,11 +1,11 @@
 import { invoke } from '@tauri-apps/api/tauri'
 import { defineStore } from 'pinia'
-import { readonly, ref, watch } from 'vue'
+import { readonly, ref, shallowRef, watch } from 'vue'
 import type { Thread } from '../api/notifications'
 import { getNotifications } from '../api/notifications'
 import { InvokeCommand, Page } from '../constants'
 import { AppStorage } from '../storage'
-import type { NotificationListData, Option } from '../types'
+import type { NotificationListData, Option, PageState } from '../types'
 import { notificationListFromThreads } from '../utils/notification'
 
 function hasNewNotification(newThreads: Thread[], previousThreads: Thread[]) {
@@ -67,6 +67,7 @@ export const useStore = defineStore('store', () => {
 
   const currentPage = ref(Page.Landing)
   const pageFrom = ref<Option<Page>>(null)
+  const currentPageState = shallowRef<PageState>({})
 
   function logout() {
     AppStorage.set('accessToken', null)
@@ -75,12 +76,13 @@ export const useStore = defineStore('store', () => {
     currentPage.value = Page.Landing
   }
 
-  function setPage(to: Page) {
+  function setPage(to: Page, state: PageState = {}) {
     if (to === currentPage.value)
       return
 
     pageFrom.value = currentPage.value
     currentPage.value = to
+    currentPageState.value = state
   }
 
   watch(notifications, () => {
@@ -96,6 +98,7 @@ export const useStore = defineStore('store', () => {
     skeletonVisible,
     pageFrom,
     failedLoadingNotifications,
+    currentPageState,
     fetchNotifications,
     logout,
   }

src/types.ts

@@ -28,3 +28,7 @@ export interface AppStorageContext {
   soundsEnabled: boolean
   showReadNotifications: boolean
 }
+
+export interface PageState {
+  fetchOnEnter?: boolean
+}