Add update control and button

Author: kadiryazici

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
     "@vueuse/core": "^9.12.0",
+    "compare-versions": "6.0.0-rc.1",
     "dayjs": "^1.11.7",
     "pinia": "^2.0.29",
     "redaxios": "^0.5.1",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import redaxios from 'redaxios'
 import type { NotificationReason, NotificationSubject } from '../constants'
 import { createBaseGithubApiHeaders } from '../utils/api'
+import type { User } from './user'
 
 export interface Thread {
   id: string
@@ -24,7 +25,7 @@ export interface MinimalRepository {
   node_id: string
   name: string
   full_name: string
-  owner: SimpleUser
+  owner: User
   private: boolean
   html_url: string
   description: string | null
@@ -133,35 +134,6 @@ export interface MinimalRepository {
     }
   } | null
 }
-/**
- * A GitHub user.
- */
-export interface SimpleUser {
-  name?: string | null
-  email?: string | null
-  login: string
-  id: number
-  node_id: string
-  avatar_url: string
-  gravatar_id: string | null
-  url: string
-  html_url: string
-  followers_url: string
-  following_url: string
-  gists_url: string
-  starred_url: string
-  subscriptions_url: string
-  organizations_url: string
-  repos_url: string
-  events_url: string
-  received_events_url: string
-  type: string
-  site_admin: boolean
-  starred_at?: string
-}
-/**
- * Code Of Conduct
- */
 export interface CodeOfConduct {
   key: string
   name: string

src/api/notifications.ts

@@ -0,0 +1,73 @@
+import redaxios from 'redaxios'
+import { REPOSITORY_PATH } from '../constants'
+import type { AppStorageContext, Option } from '../types'
+import { createBaseGithubApiHeaders } from '../utils/api'
+import type { User } from './user'
+
+export interface Release {
+  url: string
+  html_url: string
+  assets_url: string
+  upload_url: string
+  tarball_url: string | null
+  zipball_url: string | null
+  id: number
+  node_id: string
+  tag_name: string
+  target_commitish: string
+  name: Option<string>
+  body?: Option<string>
+  draft: boolean
+  prerelease: boolean
+  created_at: string
+  published_at: Option<string>
+  author: User
+  assets: ReleaseAsset[]
+  body_html?: string
+  body_text?: string
+  mentions_count?: number
+  discussion_url?: string
+  reactions?: ReactionRollup
+}
+
+interface ReleaseAsset {
+  url: string
+  browser_download_url: string
+  id: number
+  node_id: string
+  name: string
+  label: Option<string>
+  state: 'uploaded' | 'open'
+  content_type: string
+  size: number
+  download_count: number
+  created_at: string
+  updated_at: string
+  uploader: Option<User>
+}
+
+export interface ReactionRollup {
+  url: string
+  total_count: number
+  '+1': number
+  '-1': number
+  laugh: number
+  confused: number
+  heart: number
+  hooray: number
+  eyes: number
+  rocket: number
+}
+
+export async function getReleases(accessToken: AppStorageContext['accessToken']): Promise<Release[]> {
+  try {
+    const { data } = await redaxios<Release[]>({
+      url: `https://api.github.com/repos/${REPOSITORY_PATH}/releases`,
+      headers: createBaseGithubApiHeaders(accessToken),
+    })
+    return data
+  }
+  catch (error) {
+    return []
+  }
+}

src/api/releases.ts

@@ -56,10 +56,7 @@ interface PrivateUser {
   business_plus?: boolean
   ldap_dn?: string
 }
-/**
- * Public User
- */
-interface PublicUser {
+export interface PublicUser {
   login: string
   id: number
   node_id: string

src/api/user.ts

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { open } from '@tauri-apps/api/shell'
-import { Page, REPO_LINK } from '../constants'
+import { Page, REPO_LINK, REPO_RELEASES_LINK } from '../constants'
 import { useStore } from '../stores/store'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
@@ -23,6 +23,15 @@ const store = useStore()
       </button>
     </div>
     <div class="lower">
+      <SidebarButton
+        v-if="store.newRelease != null"
+        highlight
+        title="An update is available"
+        @click="open(`${REPO_RELEASES_LINK}/tag/${store.newRelease!.tag_name}`)"
+      >
+        <Icons.Download16 />
+      </SidebarButton>
+
       <SidebarButton
         :disabled="store.currentPage !== Page.Home"
         title="Reload notifications"

src/components/AppSidebar.vue

@@ -24,6 +24,7 @@ import QuestionIcon from 'virtual:icons/octicon/question-24'
 import MailIcon from 'virtual:icons/octicon/mail-24'
 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'
 
 export type IconComponent = typeof Icons[keyof typeof Icons]
 
@@ -52,4 +53,5 @@ export const Icons = {
   Gear16: markRaw(GearIcon16),
   Sync16: markRaw(SyncIcon16),
   ChevronLeft: markRaw(ChevronLeftIcon),
+  Download16: markRaw(DownloadIcon16),
 }

src/components/Icons.ts

@@ -1,16 +1,20 @@
 <script lang="ts" setup>
 interface Props {
   disabled?: boolean
+  highlight?: boolean
 }
 
-withDefaults(defineProps<Props>(), { disabled: false })
+withDefaults(defineProps<Props>(), { disabled: false, highlight: false })
 </script>
 
 <template>
   <button
     class="sidebar-button"
     :disabled="disabled || undefined"
-    :class="{ disabled }"
+    :class="{
+      disabled,
+      'sidebar-button-highlight': highlight,
+    }"
   >
     <slot />
   </button>
@@ -29,6 +33,20 @@ withDefaults(defineProps<Props>(), { disabled: false })
   align-items: center;
   justify-content: center;
   @include focus-visible;
+  position: relative;
+
+  &-highlight {
+    &::before {
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background-color: var(--white);
+      right: 2px;
+      top: 2px;
+      content: '';
+    }
+  }
 
   &.disabled {
     opacity: .3;

src/components/SidebarButton.vue

@@ -1,7 +1,9 @@
 import { Icons } from './components/Icons'
 
+export const REPOSITORY_PATH = 'Gitification-App/gitification'
 export const SERVER_PORT = 23846
-export const REPO_LINK = 'https://github.com/Gitification-App/gitification'
+export const REPO_LINK = `https://github.com/${REPOSITORY_PATH}`
+export const REPO_RELEASES_LINK = `https://github.com/${REPOSITORY_PATH}/releases`
 export const FETCH_INTERVAL_DURATION = 60000
 
 export enum Page {

src/constants.ts

@@ -12,6 +12,8 @@ import { useStore } from './stores/store'
 import { initDevtools } from './utils/initDevtools'
 import { useKey } from './composables/useKey'
 import { Page } from './constants'
+import { getReleases } from './api/releases'
+import { getNewRelease } from './utils/getNewRelease'
 
 (async () => {
   dayjs.extend(relativeTime)
@@ -35,6 +37,11 @@ import { Page } from './constants'
     store.fetchNotifications(true)
   }
 
+  {
+    const releases = await getReleases(AppStorage.get('accessToken'))
+    store.newRelease = getNewRelease(releases)
+  }
+
   app.mount('#app')
 })()