Add Indeterminate state to repositories (#48)

* Add Indeterminate state to repositories

* Always return boolean (isIndeterminate)

Author: kadiryazici

src/components/NotificationItem.vue

@@ -10,6 +10,7 @@ interface Props {
   checked?: boolean
   checkable?: boolean
   checkboxVisible?: boolean
+  indeterminate?: boolean
 }
 
 interface Emits {
@@ -42,10 +43,15 @@ function handleThreadClick(thread: Thread, event: MouseEvent | KeyboardEvent) {
 }
 
 function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEvent) {
-  if (!props.checkable || (event instanceof KeyboardEvent && event.repeat))
+  if ((event instanceof KeyboardEvent && event.repeat))
     return
 
-  if ((event.ctrlKey || event.metaKey) || isInteractedCheckbox(event)) {
+  if (props.checkable && ((event.ctrlKey || event.metaKey) || isInteractedCheckbox(event))) {
+    if (props.indeterminate) {
+      emit('update:checked', true)
+      return
+    }
+
     emit('update:checked', !props.checked)
     return
   }
@@ -74,11 +80,15 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       </span>
 
       <div
-        v-if="checkable"
+        v-if="checkable || indeterminate"
         class="notification-checkbox-wrapper"
       >
         <span
-          :class="{ 'notification-checkbox-checked': checked, 'notification-checkbox-visible': checkboxVisible }"
+          :class="{
+            'notification-checkbox-checked': checked,
+            'notification-checkbox-visible': checkboxVisible,
+            'notification-checkbox-indeterminate': indeterminate,
+          }"
           role="checkbox"
           tabindex="0"
           aria-checked="true"
@@ -254,6 +264,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     flex-shrink: 0;
     padding: 3px;
     display: inline-flex;
+    align-items: center;
     opacity: 0;
 
     &[data-focus-visible-added] {
@@ -264,18 +275,29 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       opacity: 1;
     }
 
-    &-checked {
+    &-checked, &-indeterminate {
       border-color: var(--accent-color);
 
       .notification-checkbox-dot {
         background-color: var(--accent-color);
       }
     }
 
+    &-indeterminate {
+      .notification-checkbox-dot {
+        height: 2px;
+      }
+    }
+
     &-dot {
       width: 100%;
       height: 100%;
       border-radius: 3px;
+
+      &-indeterminate {
+        background-color: var(--accent-color);
+        opacity: 1;
+      }
     }
 
     &-wrapper {

src/pages/HomePage.vue

@@ -19,6 +19,7 @@ import Popover from '../components/Popover.vue'
 import MenuItems, { menuItem } from '../components/MenuItems.vue'
 import { type UseKeyOptions, useKey } from '../composables/useKey'
 import { notificationApiMutex } from '../constants'
+import { everySome } from '../utils/array'
 
 const store = useStore()
 
@@ -99,6 +100,22 @@ function isCheckable(item: MinimalRepository | Thread) {
     .filter(thread => thread.repository.id === item.id)
     .some(thread => thread.unread)
 }
+
+function isIndeterminate(item: MinimalRepository | Thread): boolean {
+  if (isThread(item))
+    return false
+
+  const repoThreads = store.notifications
+    .filter(isThread)
+    .filter(thread => thread.unread && thread.repository.id === item.id)
+
+  const { every, some } = everySome(repoThreads, thread => (
+    store.checkedItems.some(checkedItem => checkedItem.id === thread.id)
+  ))
+
+  return some && !every
+}
+
 onScopeDispose(() => {
   store.checkedItems = []
 })
@@ -338,6 +355,7 @@ whenever(() => store.skeletonVisible, () => {
         :value="item"
         :checked="isChecked(item)"
         :checkable="isCheckable(item)"
+        :indeterminate="isIndeterminate(item)"
         :checkboxVisible="store.checkedItems.length > 0"
         @contextmenu="handleThreadContextmenu"
         @click:notification="handleNotificationClick"

src/utils/array.ts

@@ -0,0 +1,18 @@
+export type EverySomeCallback<T extends any[]> = (el: T[number], index: number, array: T[]) => boolean
+
+export function everySome<T extends any[]>(array: T, callback: EverySomeCallback<T>) {
+  let every = true
+  let some = false
+
+  for (let i = 0; i < array.length; i += 1) {
+    const result = callback(array[i], i, array)
+
+    if (every && !result)
+      every = false
+
+    if (!some && result)
+      some = true
+  }
+
+  return { every, some }
+}