Add contextmenu to notifications & Remove BottomBar (#24)

Author: kadiryazici

package.json

@@ -22,7 +22,7 @@
     "tauri-plugin-autostart-api": "github:tauri-apps/tauri-plugin-autostart",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
     "vue": "^3.3.4",
-    "vue-selectable-items": "^1.0.0",
+    "vue-selectable-items": "^1.0.1",
     "wowerlay": "1.0.0-beta.10"
   },
   "files": [
@@ -32,15 +32,16 @@
   "devDependencies": {
     "@actions/core": "^1.10.0",
     "@actions/github": "^5.1.1",
-    "@antfu/eslint-config": "^0.34.1",
+    "@antfu/eslint-config": "^0.39.5",
     "@iconify-json/octicon": "^1.1.30",
     "@iconify-json/ph": "^1.1.4",
     "@tauri-apps/cli": "^1.2.2",
     "@types/node": "^18.7.10",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/devtools": "^6.5.0",
     "async-mutex": "^0.4.0",
-    "eslint": "^8.32.0",
+    "eslint": "^8.38.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "execa": "^6.1.0",
     "focus-visible": "^5.2.0",
     "hotkeys-js": "^3.10.1",

pnpm-lock.yaml

@@ -9,6 +9,8 @@
 
   --white-faded: rgb(190, 190, 190);
   --white: rgb(255, 255, 255);
+  --gray-bright: rgb(150, 150, 150);
+  --gray: rgb(95, 95, 95);
   --content-bg: rgba(30, 30, 30, .8);
   --page-header-bg: rgba(43, 43, 43, .6);
   --popover-bg: rgba(40, 40, 40, .6);

src/assets/main.scss

@@ -2,10 +2,10 @@
 import { open } from '@tauri-apps/api/shell'
 import { exit } from '@tauri-apps/api/process'
 import { computed } from 'vue'
-import { type ItemRenderList } from 'vue-selectable-items'
 import { Page, REPO_LINK, REPO_RELEASES_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
+import { useKey } from '../composables/useKey'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
@@ -40,7 +40,11 @@ const moreItems = computed(() => [
     meta: { text: 'Exit app', icon: Icons.X },
     onSelect: () => exit(0),
   }),
-] as ItemRenderList)
+])
+
+useKey('r', () => {
+  store.fetchNotifications(true)
+}, { source: () => store.currentPage === Page.Home })
 </script>
 
 <template>
@@ -103,7 +107,7 @@ const moreItems = computed(() => [
           <Tooltip
             :target="el"
             position="right"
-            text="Reload notifications"
+            text="Reload notifications (R)"
           />
         </template>
       </SlotRef>

src/components/AppSidebar.vue

@@ -28,6 +28,11 @@ import SignOutIcon16 from 'virtual:icons/octicon/sign-out-16'
 import ChevronLeftIcon from 'virtual:icons/octicon/chevron-left'
 import DownloadIcon16 from 'virtual:icons/octicon/download-16'
 import BellSlashIcon from 'virtual:icons/octicon/bell-slash-24'
+import BellSlashIcon16 from 'virtual:icons/octicon/bell-slash-16'
+import MailIcon16 from 'virtual:icons/octicon/mail-16'
+import LinkExternalIcon16 from 'virtual:icons/octicon/link-external-16'
+import SquareIcon16 from 'virtual:icons/octicon/square-16'
+import CircleIcon16 from 'virtual:icons/octicon/Circle-16'
 
 import CommandIcon from 'virtual:icons/ph/command'
 
@@ -53,6 +58,7 @@ export const Icons = {
   Alert: markRaw(AlertIcon),
   Question: markRaw(QuestionIcon),
   Mail: markRaw(MailIcon),
+  Mail16: markRaw(MailIcon16),
   SignOut16: markRaw(SignOutIcon16),
   Bell16: markRaw(BellIcon16),
   Gear16: markRaw(GearIcon16),
@@ -61,6 +67,10 @@ export const Icons = {
   Download16: markRaw(DownloadIcon16),
   Command: markRaw(CommandIcon),
   BellSlash: markRaw(BellSlashIcon),
+  BellSlash16: markRaw(BellSlashIcon16),
   Info16: markRaw(InfoIcon16),
   Check16: markRaw(CheckIcon16),
+  LinkExternal16: markRaw(LinkExternalIcon16),
+  Square16: markRaw(SquareIcon16),
+  Circle16: markRaw(CircleIcon16),
 }

src/components/Icons.ts

@@ -1,7 +1,6 @@
 <script lang="ts">
 import {
   type Context,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   type Item,
   type ItemRenderList, SelectableItems, createItemDefaults, item,
 } from 'vue-selectable-items'
@@ -12,6 +11,7 @@ import { usePopoverContext } from './Popover.vue'
 export interface ItemMeta {
   text: string
   icon: typeof Icons[keyof typeof Icons]
+  key?: string
 }
 
 export const menuItem = item<ItemMeta>
@@ -35,7 +35,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const setupHandle = (ctx: Context) => {
+function setupHandle(ctx: Context) {
   useKey('up,shift+tab', () => ctx.focusPrevious(), { input: true, repeat: true, prevent: true })
   useKey('down,tab', () => ctx.focusNext(), { input: true, repeat: true, prevent: true })
 
@@ -71,6 +71,12 @@ const setupHandle = (ctx: Context) => {
       <div class="item-text">
         {{ meta!.text }}
       </div>
+      <span
+        v-if="meta?.key"
+        class="item-key"
+      >
+        {{ meta.key }}
+      </span>
     </template>
   </SelectableItems>
 </template>
@@ -99,16 +105,33 @@ const setupHandle = (ctx: Context) => {
       color: var(--white);
     }
 
+    &-disabled {
+      color: var(--gray);
+    }
+
     .item-text {
       font-size: 13px;
       vertical-align: middle;
       color: currentColor;
+      width: 100%;
     }
 
     .item-icon {
+      flex-shrink: 0;
       margin-right: 10px;
       font-size: 14px;
       color: currentColor;
+
+      :deep(.icon) {
+        max-width: 17px;
+        max-height: 17px;
+      }
+    }
+
+    .item-key {
+      color: var(--gray-bright);
+      font-size: 10px;
+      margin-left: 10px;
     }
   }
 }

src/components/MenuItems.vue

@@ -5,16 +5,18 @@ import type { NotificationList } from '../types'
 import { formatReason, isRepository, isThread, notificationSubjectIcon } from '../utils/notification'
 import Separator from './Separator.vue'
 
-interface Emits {
-  (e: 'click:notification', notification: Thread): void
-  (e: 'click:repo', repoFullName: string): void
-  (e: 'update:checked', value: boolean): void
-}
-
 interface Props {
   value: NotificationList[number]
   checked?: boolean
   checkable?: boolean
+  checkboxVisible?: boolean
+}
+
+interface Emits {
+  (e: 'click:notification', notification: Thread): void
+  (e: 'click:repo', repoFullName: string): void
+  (e: 'update:checked', value: boolean): void
+  (e: 'contextmenu', value: Thread, event: MouseEvent): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +64,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       @click="(event) => isRepository(value) && handleRepoClick(value, event)"
     >
       <img
+        draggable="false"
         class="notification-title-icon"
         :src="value.owner.avatar_url"
         alt="repo logo"
@@ -75,7 +78,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
         class="notification-checkbox-wrapper"
       >
         <span
-          :class="{ 'notification-checkbox-checked': checked }"
+          :class="{ 'notification-checkbox-checked': checked, 'notification-checkbox-visible': checkboxVisible }"
           role="checkbox"
           tabindex="0"
           aria-checked="true"
@@ -94,6 +97,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     v-else
     class="notification-item"
     :class="{ 'notification-item-read': !value.unread }"
+    @contextmenu="(event) => emit('contextmenu', value as Thread, event)"
     @click="(event) => isThread(value) && handleThreadClick(value, event)"
   >
     <Component
@@ -118,7 +122,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       class="notification-checkbox-wrapper"
     >
       <span
-        :class="{ 'notification-checkbox-checked': checked }"
+        :class="{ 'notification-checkbox-checked': checked, 'notification-checkbox-visible': checkboxVisible }"
         role="checkbox"
         tabindex="0"
         aria-checked="true"
@@ -150,6 +154,10 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     border: 1px solid transparent;
     line-height: inherit;
 
+    &:hover .notification-checkbox {
+      opacity: 1;
+    }
+
     &:hover,
     &:active {
       background-color: var(--item-hover-bg);
@@ -167,7 +175,7 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       font-weight: bold;
       font-size: 14px;
       display: inline-block;
-      color: white;
+      color: var(--white);
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -192,6 +200,10 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     @include focus-visible;
     margin-top: 5px;
 
+    &:hover .notification-checkbox {
+      opacity: 1;
+    }
+
     &-read {
       color: var(--white-faded) !important;
     }
@@ -235,24 +247,31 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     @include focus-visible;
     width: 16px;
     height: 16px;
-    border-radius: 50%;
-    border: 1px solid rgb(101, 101, 101);
+    border-radius: 6px;
+    border: 1px solid var(--white-faded);
     flex-shrink: 0;
     padding: 3px;
     display: inline-flex;
+    opacity: 0;
+    transition-duration: .2s;
+    transition-property: opacity;
+
+    &-visible {
+      opacity: 1;
+    }
 
     &-checked {
-      border-color: var(--white);
+      border-color: var(--accent-color);
 
       .notification-checkbox-dot {
-        background-color: var(--white);
+        background-color: var(--accent-color);
       }
     }
 
     &-dot {
       width: 100%;
       height: 100%;
-      border-radius: 50%;
+      border-radius: 3px;
     }
 
     &-wrapper {

src/components/NotificationItem.vue

@@ -77,12 +77,12 @@ const handleTransition: WowerlayTransitionFn = (type, element, done) => {
 
 const popoverVisibleHooks = new Set<(el: ReferenceElement) => void>()
 
-const runPopoverVisibleHooks = (el: ReferenceElement) => {
+function runPopoverVisibleHooks(el: ReferenceElement) {
   for (const cb of popoverVisibleHooks)
     cb(el)
 }
 
-export const onPopoverVisible = (cb: (el: ReferenceElement) => void) => {
+export function onPopoverVisible(cb: (el: ReferenceElement) => void) {
   popoverVisibleHooks.add(cb)
   const cleanup = () => popoverVisibleHooks.delete(cb)
   onScopeDispose(cleanup)
@@ -92,6 +92,11 @@ export const onPopoverVisible = (cb: (el: ReferenceElement) => void) => {
 </script>
 
 <script lang="ts" setup>
+interface Props {
+  wowerlayOptions?: Partial<Omit<InstanceType<typeof Wowerlay>['$props'], 'visible' | 'target'>>
+  target?: InstanceType<typeof Wowerlay>['$props']['target']
+}
+
 const props = withDefaults(defineProps<Props>(), {
   wowerlayOptions: () => ({}),
 })
@@ -100,11 +105,6 @@ defineSlots<{
   default: (props: SlotProps) => any
 }>()
 
-interface Props {
-  wowerlayOptions?: Partial<Omit<InstanceType<typeof Wowerlay>['$props'], 'visible' | 'target'>>
-  target?: InstanceType<typeof Wowerlay>['$props']['target']
-}
-
 const visible = ref(false)
 
 defineExpose({

src/components/Popover.vue

@@ -15,7 +15,7 @@ export enum Navigation {
   Previous,
 }
 
-const getFocusedItemIndex = (elements: HTMLElement[], query: string) => {
+function getFocusedItemIndex(elements: HTMLElement[], query: string) {
   const activeElement = document.activeElement!.closest(query)
 
   return elements

src/composables/useElementNavigation.ts

@@ -16,11 +16,12 @@ export type UseKeyCallback = (event: KeyboardEvent, hotkeysEvent: HotkeysEvent)
 
 const getLast = <T>(arr: T[]) => arr[arr.length - 1]
 
-const isInputing = () =>
-  document.activeElement instanceof HTMLTextAreaElement
+function isInputing() {
+  return document.activeElement instanceof HTMLTextAreaElement
   || document.activeElement?.hasAttribute('contenteditable')
   || document.activeElement instanceof HTMLInputElement
   || document.activeElement instanceof HTMLSelectElement
+}
 
 hotkeys.filter = () => true