Add "mark as read on open" setting (#50)

Author: kadiryazici

src/assets/main.scss

@@ -4,7 +4,7 @@ $colors: (
     text-faded: rgb(190, 190, 190) rgb(190, 190, 190),
     text: rgb(255, 255, 255) rgb(255, 255, 255),
     gray-bright: rgb(150, 150, 150) rgb(150, 150, 150),
-    switch-dot: rgb(200, 200, 200) rgb(200, 200, 200),
+    switch-dot: rgb(255, 255, 255) rgb(255, 255, 255),
     gray: rgb(95, 95, 95) rgb(95, 95, 95),
     switch-bg: var(--gray) var(--gray),
     content-bg: rgba(30, 30, 30, 8) rgb(30, 30, 30),
@@ -25,7 +25,7 @@ $colors: (
     gray-bright: rgb(105, 105, 105) rgb(115, 115, 115),
     gray: rgb(160, 160, 160) rgb(160, 160, 160),
     switch-bg: rgb(145, 145, 145) rgb(168, 168, 168),
-    switch-dot: rgb(160, 160, 160) rgb(255, 255, 255),
+    switch-dot: rgb(255, 255, 255) rgb(255, 255, 255),
     content-bg: rgba(220, 220, 220, .75) rgb(220, 220, 220),
     page-header-bg: rgba(212, 212, 212, .6) rgb(212, 212, 212),
     popover-bg: rgba(210, 210, 210, .8) rgb(240, 240, 240),

src/components/SettingItem.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
+import { Icons } from './Icons'
+import SlotRef from './SlotRef.vue'
+import Tooltip from './Tooltip.vue'
+
 interface Props {
   title: string
+  description?: string
 }
 
 defineProps<Props>()
@@ -10,6 +15,23 @@ defineProps<Props>()
   <div class="setting-item">
     <div class="setting-item-title">
       {{ title }}
+
+      <SlotRef v-if="typeof description === 'string' && description.trim().length > 0">
+        <template #default>
+          <div class="setting-item-title-description">
+            <Icons.Question />
+          </div>
+        </template>
+
+        <template #ref="{ el }">
+          <Tooltip
+            style="width: 275px; text-align: left"
+            :text="description"
+            :target="el"
+            position="top"
+          />
+        </template>
+      </SlotRef>
     </div>
     <div class="setting-item-right">
       <slot />
@@ -37,6 +59,15 @@ defineProps<Props>()
       color: var(--text);
       font-size: 14px;
       padding-left: 15px;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+
+      &-description {
+        display: inline-flex;
+        margin-left: 5px;
+        color: var(--accent-color);
+      }
     }
 
     &-right {

src/components/Switch.vue

@@ -46,7 +46,6 @@ function handleClick() {
     background-color: var(--accent-color);
 
     .switch-dot {
-      background-color: #fff;
       transform: translateX(11px);
     }
   }

src/pages/HomePage.vue

@@ -26,11 +26,28 @@ const store = useStore()
 if (store.currentPageState.fetchOnEnter)
   store.fetchNotifications(true)
 
-function handleNotificationClick(notification: Thread) {
-  const url = toGithubWebURL({ notification, userId: AppStorage.get('user')!.id })
+function handleOpenNotification(thread: Thread) {
+  const url = toGithubWebURL({ notification: thread, userId: AppStorage.get('user')!.id })
   open(url)
 }
 
+function handleClickNotification(thread: Thread) {
+  handleOpenNotification(thread)
+
+  if (AppStorage.get('markAsReadOnOpen')) {
+    const snapshot = store.notifications.slice(0)
+
+    try {
+      notificationApiMutex.runExclusive(() => markNotificationAsRead(thread.id, AppStorage.get('accessToken')!))
+      store.removeNotificationById(thread.id)
+    }
+    catch (error) {
+      console.log(error)
+      store.notifications = snapshot
+    }
+  }
+}
+
 function handleRepoClick(repoFullName: string) {
   open(`https://github.com/${repoFullName}`)
 }
@@ -158,29 +175,23 @@ async function handleSelectMarkAsRead(triggeredByKeyboard = false) {
   }
 }
 
-function handleSelectOpen(triggeredByKeyboard = false) {
-  if (triggeredByKeyboard) {
-    if (store.checkedItems.length > 0) {
-      store.checkedItems.forEach(handleNotificationClick)
-      store.checkedItems = []
-      return
-    }
+async function handleSelectOpen(triggeredByKeyboard = false) {
+  if (
+    (triggeredByKeyboard && store.checkedItems.length > 0)
+    || (contextMenuThread.value && isChecked(contextMenuThread.value))) {
+    store.checkedItems.forEach(handleOpenNotification)
 
-    if (contextMenuThread.value) {
-      handleNotificationClick(contextMenuThread.value)
-      return
-    }
+    if (AppStorage.get('markAsReadOnOpen'))
+      store.markCheckedNotificationsAsRead(AppStorage.get('accessToken')!)
+
+    store.checkedItems = []
+    return
   }
 
   if (!contextMenuThread.value)
     return
 
-  if (isChecked(contextMenuThread.value))
-    store.checkedItems.forEach(handleNotificationClick)
-  else
-    handleNotificationClick(contextMenuThread.value)
-
-  store.checkedItems = []
+  handleClickNotification(contextMenuThread.value)
 }
 
 async function handleSelectUnsubscribe(triggeredByKeyboard = false) {
@@ -358,7 +369,7 @@ whenever(() => store.skeletonVisible, () => {
         :indeterminate="isIndeterminate(item)"
         :checkboxVisible="store.checkedItems.length > 0"
         @contextmenu="handleThreadContextmenu"
-        @click:notification="handleNotificationClick"
+        @click:notification="handleClickNotification"
         @click:repo="handleRepoClick"
         @update:checked="(value) => handleUpdateChecked(item, value)"
       />

src/pages/SettingsPage.vue

@@ -33,6 +33,7 @@ const soundsEnabled = AppStorage.asRef('soundsEnabled')
 const openAtStartup = AppStorage.asRef('openAtStartup')
 const showOnlyParticipating = AppStorage.asRef('showOnlyParticipating')
 const showReadNotifications = AppStorage.asRef('showReadNotifications')
+const markAsReadOnOpen = AppStorage.asRef('markAsReadOnOpen')
 
 const accessToken = AppStorage.asComputed('accessToken')
 
@@ -211,19 +212,13 @@ function handleScroll(e: Event) {
       </PageHeader>
 
       <SettingItem title="Sounds">
-        <Switch
-          :modelValue="soundsEnabled"
-          @update:modelValue="soundsEnabled = $event"
-        />
+        <Switch v-model="soundsEnabled" />
       </SettingItem>
 
       <Separator style="margin: 2px auto" />
 
       <SettingItem title="Open at startup">
-        <Switch
-          :modelValue="openAtStartup"
-          @update:modelValue="openAtStartup = $event"
-        />
+        <Switch v-model="openAtStartup" />
       </SettingItem>
 
       <Separator style="margin: 2px auto" />
@@ -243,19 +238,22 @@ function handleScroll(e: Event) {
       </PageHeader>
 
       <SettingItem title="Show only participating">
-        <Switch
-          :modelValue="showOnlyParticipating"
-          @update:modelValue="showOnlyParticipating = $event"
-        />
+        <Switch v-model="showOnlyParticipating" />
       </SettingItem>
 
       <Separator style="margin: 2px auto" />
 
       <SettingItem title="Show read notifications">
-        <Switch
-          :modelValue="showReadNotifications"
-          @update:modelValue="showReadNotifications = $event"
-        />
+        <Switch v-model="showReadNotifications" />
+      </SettingItem>
+
+      <Separator style="margin: 2px auto" />
+
+      <SettingItem
+        title="Mark as read on open"
+        description="When you open some notifications, Github marks them as read automatically, but for some it doesn't."
+      >
+        <Switch v-model="markAsReadOnOpen" />
       </SettingItem>
     </div>
   </div>

src/storage.ts

@@ -14,6 +14,7 @@ const storage = shallowReactive<AppStorageContext>({
   soundsEnabled: true,
   showReadNotifications: false,
   showSystemNotifications: false,
+  markAsReadOnOpen: false,
   colorPreference: ColorPreference.System,
 })
 

src/types.ts

@@ -16,6 +16,7 @@ export interface AppStorageContext {
   soundsEnabled: boolean
   showReadNotifications: boolean
   showSystemNotifications: boolean
+  markAsReadOnOpen: boolean
   colorPreference: ColorPreference
 }