Merge pull request #60 from Gitification-App/main

Release v1.3.0

Author: kadiryazici

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.3.0
+  - Updated Wowerlay to 1.1.0 to fix some bugs.
+  - Added select language option to settings page (en and tr for now).
+
 ### 1.2.0
   - Added right click menu to repository titles.
   - Refactored ugly spaghetti code to a maintainable good looking code.

README.md

@@ -2,6 +2,13 @@
   <img width="256px" height="256px" src="src-tauri/icons/128x128%402x.png" />
 </div>
 
+<div align="center">
+  
+  [Download page](https://gitification.app/)
+
+</div>
+
+
 # Gitification (Beta)
 An app to view your notifications easily on your menubar.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitification",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "run-p vite:dev devtools",
@@ -24,7 +24,7 @@
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
     "vue": "^3.3.4",
     "vue-selectable-items": "^1.0.1",
-    "wowerlay": "1.0.2"
+    "wowerlay": "1.1.0"
   },
   "files": [
     "README.md",

pnpm-lock.yaml

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Gitification",
-    "version": "1.2.0"
+    "version": "1.3.0"
   },
   "tauri": {
     "systemTray": {

src-tauri/tauri.conf.json

@@ -7,6 +7,7 @@ import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
 import { useKey } from '../composables/useKey'
 import { Page, useRoute } from '../stores/route'
+import { useI18n } from '../composables/useI18n'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
@@ -17,6 +18,7 @@ import PopoverContentInstallUpdate from './PopoverContentInstallUpdate.vue'
 
 const store = useStore()
 const route = useRoute()
+const { t } = useI18n()
 
 function openCurrentReleaseChangelog() {
   open(`${REPO_LINK}/blob/main/CHANGELOG.md#${__APP_VERSION__.replace(/\./g, '')}`)
@@ -25,22 +27,22 @@ function openCurrentReleaseChangelog() {
 const moreItems = computed(() => [
   menuItem({
     key: 'changelog',
-    meta: { text: 'Changelog', icon: Icons.Info16 },
+    meta: { text: t.changelog, icon: Icons.Info16 },
     onSelect: openCurrentReleaseChangelog,
   }),
   menuItem({
     key: 'settings',
-    meta: { text: 'Settings', icon: Icons.Gear16 },
+    meta: { text: t.settings, icon: Icons.Gear16 },
     onSelect: () => route.go(Page.Settings),
   }),
   AppStorage.get('user') != null && menuItem({
     key: 'logout',
-    meta: { text: 'Log out', icon: Icons.SignOut16 },
+    meta: { text: t.logOut, icon: Icons.SignOut16 },
     onSelect: store.logout,
   }),
   menuItem({
     key: 'exit',
-    meta: { text: 'Exit app', icon: Icons.X },
+    meta: { text: t.exitApp, icon: Icons.X },
     onSelect: () => exit(0),
   }),
 ])
@@ -70,7 +72,7 @@ useKey('r', () => {
           <Tooltip
             :target="el"
             position="right"
-            text="Navigate to repository"
+            :text="t.navigateToRepository"
           />
         </template>
       </SlotRef>
@@ -88,7 +90,7 @@ useKey('r', () => {
           <Tooltip
             :target="el"
             position="right"
-            text="A new version is available"
+            :text="t.aNewVersionIsAvailable"
           />
 
           <Popover
@@ -118,7 +120,7 @@ useKey('r', () => {
           <Tooltip
             :target="el"
             position="right"
-            text="Reload notifications (R)"
+            :text="t.reloadNotifications('R')"
           />
         </template>
       </SlotRef>
@@ -134,7 +136,7 @@ useKey('r', () => {
           <Tooltip
             position="right"
             :target="el"
-            text="More"
+            :text="t.more"
           />
 
           <Popover

src/components/AppSidebar.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import dayjs from 'dayjs'
 import type { MinimalRepository, Thread } from '../api/notifications'
 import type { NotificationList } from '../types'
-import { formatReason, isRepository, isThread, notificationSubjectIcon } from '../utils/notification'
+import { isRepository, isThread, notificationSubjectIcon } from '../utils/notification'
+import { useI18n } from '../composables/useI18n'
+import { fromNow } from '../utils/date'
 import Separator from './Separator.vue'
 
 interface Props {
@@ -25,6 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
   checkable: false,
 })
 const emit = defineEmits<Emits>()
+const { t } = useI18n()
 
 function isInteractedCheckbox(e: MouseEvent | KeyboardEvent) {
   return e.target instanceof HTMLElement && e.target.closest('.notification-checkbox') != null
@@ -121,9 +123,9 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
       </div>
 
       <div class="notification-item-content-subtitle">
-        {{ formatReason(value.reason) }}
+        {{ t.reason[value.reason] }}
         -
-        {{ dayjs(value.updated_at).fromNow() }}
+        {{ fromNow(value.updated_at) }}
       </div>
     </div>
 

src/components/NotificationItem.vue

@@ -34,8 +34,8 @@ const transformOriginMap: Record<AlignedPlacement | Side, string> = {
   'top': 'center bottom',
 }
 
-const handleTransition: WowerlayTransitionFn = (type, element, done) => {
-  const placement = element.getAttribute('data-popover-placement') as AlignedPlacement | Side
+const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
+  const placement = popover.getAttribute('data-popover-placement') as AlignedPlacement | Side
   const side = placement.split('-')[0] as Side
 
   const vertical = side === 'top' || side === 'bottom'
@@ -51,25 +51,25 @@ const handleTransition: WowerlayTransitionFn = (type, element, done) => {
     opacity: 1,
   }
 
-  const oldTransformOrigin = element.style.transformOrigin
-  element.style.transformOrigin = transformOriginMap[placement]
+  const oldTransformOrigin = popover.style.transformOrigin
+  popover.style.transformOrigin = transformOriginMap[placement]
 
   if (type === 'leave') {
-    const background = element.parentElement
+    const background = popover.parentElement
     if (background) {
       background.style.setProperty('pointer-events', 'none')
-      element.style.setProperty('pointer-events', 'auto')
+      popover.style.setProperty('pointer-events', 'auto')
     }
   }
 
-  const animation = element.animate(type === 'enter' ? [from, to] : [to, from], {
+  const animation = popover.animate(type === 'enter' ? [from, to] : [to, from], {
     duration: 200,
     easing: 'ease',
   })
 
   animation.onfinish = () => {
     if (type === 'enter')
-      element.style.transformOrigin = oldTransformOrigin
+      popover.style.transformOrigin = oldTransformOrigin
 
     done()
   }
@@ -192,7 +192,7 @@ useEventListener(
   flex-direction: column;
   padding: 4px;
 
-  > * + * {
+  >*+* {
     margin-top: 2px;
   }
 }

src/components/Popover.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { UpdateManifest } from '@tauri-apps/api/updater'
+import { useI18n } from '../composables/useI18n'
 import AppButton from './AppButton.vue'
 import EmptyState from './EmptyState.vue'
 
@@ -9,15 +10,15 @@ interface Props {
 }
 
 defineProps<Props>()
-
 defineEmits<{ (e: 'install'): void }>()
 
+const { t } = useI18n()
 const appVersion = __APP_VERSION__
 </script>
 
 <template>
   <div class="install-update">
-    <EmptyState :description="`Gitification ${manifest.version} is available!`">
+    <EmptyState :description="t.gitificationVersionIsAvailable(manifest.version)">
       <template #icon>
         <img
           style="border-radius: 50%;"
@@ -30,14 +31,14 @@ const appVersion = __APP_VERSION__
 
       <template #footer>
         <p class="pharagraph">
-          Current version is <b>{{ appVersion }}</b>
+          <component :is="t.currentVersionIs(appVersion)" />
         </p>
 
         <AppButton
           :loading="loading"
           @click="$emit('install')"
         >
-          Install
+          {{ t.install }}
         </AppButton>
       </template>
     </EmptyState>

src/components/PopoverContentInstallUpdate.vue

@@ -11,8 +11,8 @@ interface Props {
   target?: HTMLElement | null
 }
 
-const handleTransition: WowerlayTransitionFn = (type, element, done) => {
-  const placement = element.getAttribute('data-popover-placement')!.split('-')[0]
+const handleTransition: WowerlayTransitionFn = (type, { popover }, done) => {
+  const placement = popover.getAttribute('data-popover-placement')!.split('-')[0]
 
   const vertical = placement === 'top' || placement === 'bottom'
   const transformFunction = vertical ? 'translateY' : 'translateX'
@@ -27,7 +27,7 @@ const handleTransition: WowerlayTransitionFn = (type, element, done) => {
     opacity: 1,
   }
 
-  const animation = element.animate(type === 'enter' ? [from, to] : [to, from], {
+  const animation = popover.animate(type === 'enter' ? [from, to] : [to, from], {
     duration: 200,
     easing: 'ease',
   })