Use native polling

.github/workflows/release.yml

@@ -29,7 +29,7 @@ jobs:
         if: matrix.platform == 'ubuntu-24.04'
         run: |
           sudo apt-get update
-          sudo apt-get install -y libasound2-dev libudev-dev pkg-config libwebkit2gtk-4.0-dev build-essential libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -y libasound2-dev libudev-dev pkg-config libwebkit2gtk-4.1-dev build-essential libssl-dev libgtk-3-dev libayatana-appindicator3-dev librsvg2-dev patchelf
       - name: install pnpm
         run: npm install -g pnpm
       - name: install frontend dependencies

CHANGELOG.md

@@ -1,3 +1,8 @@
+### 2.2.0
+  - Smaller sidebar design
+  - New Settings Page design
+  - Fixed Gitification not polling notifications by using Rust based timer instead of JavaScript timer.
+
 ### 2.1.1
   - Fixed tray icon template on mac.
   - 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gitification",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "files": [
     "README.md",
     "package.json"

src-tauri/Cargo.toml

@@ -16,6 +16,7 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = [ "derive" ] }
+tokio = { version = "1", features = ["time"] }
 tauri = { version = "2", features = ["macos-private-api", "tray-icon", "image-png", "image-ico"] }
 rodio = "0.20.1"
 tauri-plugin-store = ">=2.1.0, <3"

src-tauri/src/main.rs

@@ -8,6 +8,7 @@ mod commands;
 use commands::{
     go_to_notification_settings, play_notification_sound, set_icon_template,
 };
+use std::time::Duration;
 use tauri::{
     tray::{MouseButton, MouseButtonState, TrayIconEvent},
     App, Emitter, Manager, PhysicalPosition, WindowEvent,
@@ -18,6 +19,17 @@ fn handle_setup(app: &mut App) -> Result<(), Box<dyn std::error::Error>> {
     let window = app.get_webview_window("main").expect("window not found");
     window.set_always_on_top(true)?;
 
+    let app_handle = app.handle().clone();
+    tauri::async_runtime::spawn(async move {
+        let mut interval = tokio::time::interval(Duration::from_secs(10));
+        interval.tick().await;
+
+        loop {
+            interval.tick().await;
+            let _ = app_handle.emit("poll_tick", ());
+        }
+    });
+
     #[cfg(target_os = "macos")]
     {
         use tauri::ActivationPolicy;

src-tauri/tauri.conf.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/refs/heads/dev/crates/tauri-schema-generator/schemas/config.schema.json",
   "build": {
     "beforeDevCommand": "pnpm dev",
     "beforeBuildCommand": "pnpm build",
@@ -48,7 +49,7 @@
     "createUpdaterArtifacts": true
   },
   "productName": "Gitification",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "identifier": "app.gitification",
   "plugins": {
     "deep-link": {
@@ -80,7 +81,7 @@
     "trayIcon": {
       "iconPath": "icons/tray/icon.png",
       "iconAsTemplate": true,
-      "menuOnLeftClick": false
+      "showMenuOnLeftClick": false
     }
   }
 }

src/App.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { whenever } from '@vueuse/core'
-import { computed, onScopeDispose, watch, watchEffect } from 'vue'
+import { computed, watch } from 'vue'
 import { useOauthListener } from './composables/useOauthListener'
+import { usePollTick } from './composables/usePollTick'
 import * as Gitification from './gitification/index'
 import * as UI from './ui'
 import * as Views from './views'
@@ -25,11 +26,13 @@ const Route = computed(() => {
   }
 })
 
-watchEffect(() => {
-  Gitification.actions.setMenubarIcon(
-    !Gitification.state.threads.some((t) => t.unread),
-  )
-})
+watch(
+  () => Gitification.state.threads.some((t) => t.unread),
+  (hasUnread) => {
+    Gitification.actions.setMenubarIcon(!hasUnread)
+  },
+  { immediate: true },
+)
 
 watch(() => Gitification.state.theme, (theme) => {
   if (theme === 'light') {
@@ -40,19 +43,13 @@ watch(() => Gitification.state.theme, (theme) => {
   }
 }, { immediate: true })
 
-const timer = setInterval(() => {
-  Gitification.actions
-    .fetchThreads()
-}, 60_000)
-
-onScopeDispose(() => {
-  clearInterval(timer)
-})
+usePollTick(() => Gitification.actions.fetchThreads())
 
-whenever(() => Gitification.state.currentUser, () => {
-  Gitification.actions
-    .fetchThreads()
-}, { immediate: true })
+whenever(
+  () => Gitification.state.currentUser,
+  () => void Gitification.actions.fetchThreads(),
+  { immediate: true },
+)
 </script>
 
 <template>

src/composables/usePollTick.ts

@@ -0,0 +1,24 @@
+import * as Gitification from '../gitification'
+import { useTauriEvent } from './useTauriEvent'
+
+export function usePollTick(
+  callback: () => void | Promise<void>,
+) {
+  let polling = false
+
+  return useTauriEvent('poll_tick', () => {
+    const interval = Gitification.state.settings.pollInterval * 1000
+
+    if (polling || Date.now() - Gitification.actions.getLastFetchThreadsAt() < interval) {
+      return
+    }
+
+    polling = true
+
+    void Promise.resolve(callback())
+      .catch(() => {})
+      .finally(() => {
+        polling = false
+      })
+  })
+}

src/gitification/actions/index.ts

@@ -7,12 +7,19 @@ import * as AutoStart from '@tauri-apps/plugin-autostart'
 import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/plugin-notification'
 import { exit, relaunch } from '@tauri-apps/plugin-process'
 import { open } from '@tauri-apps/plugin-shell'
+import { InvokeCommand } from '../../constants'
 import * as Gitification from '../index'
 
+let lastFetchThreadsAt = 0
+
 export function requestNotificationPermission() {
   return requestPermission()
 }
 
+export function getLastFetchThreadsAt() {
+  return lastFetchThreadsAt
+}
+
 export function openURL(url: string) {
   open(url)
 }
@@ -126,7 +133,7 @@ export function quitApp() {
 
 export function playNotificationSound() {
   if (Gitification.state.settings.soundsEnabled) {
-    invoke('play_notification_sound')
+    invoke(InvokeCommand.PlayNotificationSound)
   }
 }
 
@@ -151,6 +158,8 @@ export async function fetchThreads(withLoader = false) {
     return
   }
 
+  lastFetchThreadsAt = Date.now()
+
   if (withLoader) {
     clearThreadSelection()
   }
@@ -190,7 +199,7 @@ export async function fetchThreads(withLoader = false) {
 }
 
 export async function setMenubarIcon(isTemplate: boolean) {
-  await invoke('set_icon_template', { isTemplate })
+  await invoke(InvokeCommand.SetIconTemplate, { isTemplate })
 }
 
 let installing = false

src/gitification/auth/index.ts

@@ -1,4 +1,4 @@
-import { getCurrent, onOpenUrl } from '@tauri-apps/plugin-deep-link'
+import { onOpenUrl } from '@tauri-apps/plugin-deep-link'
 import * as Gitification from '../index'
 
 const REDIRECT_URI = 'gitification://oauth/callback'
@@ -81,16 +81,6 @@ async function handleUrl(rawUrl: string) {
   }
 }
 
-async function handleUrls(urls: string[] | null) {
-  if (urls == null) {
-    return
-  }
-
-  for (const url of urls) {
-    await handleUrl(url)
-  }
-}
-
 export function getRedirectUri() {
   return REDIRECT_URI
 }
@@ -103,10 +93,16 @@ export function openAuthorization() {
 
 export async function initialize() {
   const unlisten = await onOpenUrl((urls) => {
-    void handleUrls(urls)
+    void (async () => {
+      if (urls == null) {
+        return
+      }
+
+      for (const url of urls) {
+        await handleUrl(url)
+      }
+    })()
   })
 
-  await handleUrls(await getCurrent())
-
   return unlisten
 }

src/gitification/storage/index.ts

@@ -13,6 +13,7 @@ export function createStorage() {
     settings: {
       onlyParticipating: false,
       openAtStartup: false,
+      pollInterval: 60,
       soundsEnabled: false,
       showReadNotifications: false,
       showSystemNotifications: true,
@@ -74,7 +75,16 @@ export function createStorage() {
         void storePromise.then((store) => store.clear())
       }
       else {
-        ctx = Object.fromEntries(values) as unknown as StorageTypes.AppStorageContextV2
+        const persistedContext = Object.fromEntries(values) as Partial<StorageTypes.AppStorageContextV2>
+
+        ctx = {
+          ...storage.value,
+          ...persistedContext,
+          settings: {
+            ...storage.value.settings,
+            ...persistedContext.settings,
+          },
+        }
       }
 
       Object.assign(storage.value, ctx)
@@ -92,6 +102,7 @@ export function createStorage() {
       storage.value.settings = {
         onlyParticipating: false,
         openAtStartup: false,
+        pollInterval: 60,
         soundsEnabled: false,
         showReadNotifications: false,
         showSystemNotifications: true,

src/gitification/storage/types.ts

@@ -27,6 +27,7 @@ export type ColorPreference = 'light' | 'dark' | 'system'
 export type StorageSettings = {
   onlyParticipating: boolean
   openAtStartup: boolean
+  pollInterval: 30 | 60 | 90 | 120
   soundsEnabled: boolean
   showReadNotifications: boolean
   showSystemNotifications: boolean

src/lib.css

@@ -14,7 +14,8 @@
   --color-txt-3: rgb(180, 180, 180);
 
   --color-primary: rgb(100, 149, 237);
-  --font-sans: 'Inter', sans-serif;
+  --font-sans: 'Geist', sans-serif;
+  --font-mono: 'Geist Mono', monospace;
 }
 
 .light {
@@ -60,11 +61,19 @@ body,
 }
 
 @font-face {
-  font-family: 'Inter';
+  font-family: 'Geist';
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url("/Inter.ttf") format("truetype");
+  src: url("/Geist-wght.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("/GeistMono-wght.ttf") format("truetype");
 }
 
 .prose {
@@ -77,7 +86,7 @@ body,
   h1,h2,h3,h4,h5,h6 {
     @apply text-txt-1 font-bold;
   }
-  
+
 
   h1 {
     @apply text-xl
@@ -90,12 +99,12 @@ body,
   h3,h4,h5 {
     @apply text-base
   }
-  
+
   ul, ol {
     @apply list-disc list-inside pl-4 space-y-1;
   }
 
   li li {
     @apply mt-1;
   }
-}
+}

src/ui/Button/Button.constants.ts

@@ -7,25 +7,30 @@ export const ButtonVariantStyles = {
     shadow,
   },
   secondary: {
-    bg: 'light:bg-gray-900 light:hover:bg-gray-800 bg-white hover:bg-gray-300',
+    bg: 'light:bg-gray-900 light:hover:bg-gray-800 bg-gray-300 hover:bg-gray-200',
     fg: 'light:text-gray-50 text-gray-950',
     shadow,
   },
+  tertiary: {
+    bg: 'light:bg-surface-3 light:hover:bg-surface-4 bg-surface-4 hover:bg-surface-5',
+    fg: 'text-txt-2 hover:text-txt-1',
+    shadow: '',
+  },
   ghost: {
     bg: 'hover:bg-surface-3 focus-visible:bg-surface-3',
     fg: 'text-txt-1 hover:text-txt-2',
     shadow: '',
   },
   danger: {
-    bg: 'bg-red-700 hover:bg-red-500',
+    bg: 'bg-[#ed1c46] hover:bg-red-500',
     fg: 'text-white',
     shadow,
   },
 }
 
 export const PaddingVariantStyles = {
   none: '',
-  sm: 'py-[4px] px-[6px] text-xs',
-  md: 'py-[6px] px-[8px] text-sm',
-  icon: 'p-[8px] text-[16px] aspect-square',
+  sm: 'py-[4px] px-[6px] text-[10px]',
+  md: 'py-[6px] px-[8px] text-[12px]',
+  icon: 'p-[6px] text-[15px] aspect-square',
 }