Move back button to settings

Author: kadiryazici

src/assets/img/icon.png

@@ -1,13 +1,17 @@
 <script lang="ts" setup>
 interface Props {
   loading?: boolean
+  paddingless?: boolean
+  square?: boolean
 }
 interface Emits {
   (name: 'click', event: MouseEvent): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
   loading: false,
+  paddingless: false,
+  square: false,
 })
 const emit = defineEmits<Emits>()
 
@@ -23,7 +27,11 @@ function handleClick(e: MouseEvent) {
   <button
     :disabled="loading || undefined"
     class="button"
-    :class="{ 'button-loading': loading }"
+    :class="{
+      'button-loading': loading,
+      'button-paddingless': paddingless,
+      'button-square': square,
+    }"
     @click="handleClick"
   >
     <div
@@ -53,6 +61,19 @@ function handleClick(e: MouseEvent) {
   color: var(--white);
   border-radius: 8px;
   @include text-outline();
+  vertical-align: middle;
+
+  &-paddingless, &-square {
+    padding: 0px;
+  }
+
+  &-square {
+    display: inline-flex;
+    height: 35px;
+    width: 35px;
+    align-items: center;
+    justify-content: center;
+  }
 
   &-loading {
     .button-content {

src/components/AppButton.vue

@@ -1,37 +1,26 @@
 <script lang="ts" setup>
-import { exit } from '@tauri-apps/api/process'
+import { open } from '@tauri-apps/api/shell'
 import { useKey } from '../composables/useKey'
-import { Page } from '../constants'
+import { Page, REPO_LINK } from '../constants'
 import { AppStorage } from '../storage'
 import { useStore } from '../stores/store'
 import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 
 const store = useStore()
-
-const accessToken = AppStorage.asComputed('accessToken')
-
-function handleBack() {
-  let page = Page.Home
-
-  if (accessToken.value == null)
-    page = Page.Landing
-
-  store.setPage(page)
-}
-
-useKey('esc', handleBack, { source: () => store.currentPage === Page.Settings })
 </script>
 
 <template>
   <nav class="nav">
     <div class="upper">
       <SidebarButton
-        title="Back to home page"
-        :disabled="store.currentPage !== Page.Settings"
-        @click="handleBack"
+        title="Go to Gitification repository"
+        @click="open(REPO_LINK)"
       >
-        <Icons.ChevronLeft />
+        <img
+          style="width: 100%"
+          src="/src/assets/img/icon.png"
+        >
       </SidebarButton>
     </div>
     <div class="lower">
@@ -70,6 +59,7 @@ useKey('esc', handleBack, { source: () => store.currentPage === Page.Settings })
   flex-wrap: nowrap;
   padding: 10px;
   background-color: var(--sidebar-bg);
+  width: 57px;
 
   .sync-icon-spin {
     animation: 1s spin linear infinite;

src/components/AppSidebar.vue

@@ -1,5 +1,18 @@
+<script lang="ts" setup>
+interface Props {
+  inline?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  inline: false,
+})
+</script>
+
 <template>
-  <header class="header">
+  <header
+    class="header"
+    :class="{ 'header-inline': inline }"
+  >
     <slot />
   </header>
 </template>
@@ -8,5 +21,9 @@
 .header {
   font-size: 16px;
   color: var(--white);
+
+  &-inline {
+    display: inline-block;
+  }
 }
 </style>

src/components/PageHeader.vue

@@ -1,5 +1,6 @@
+import { tryOnScopeDispose } from '@vueuse/core'
 import hotkeys, { type HotkeysEvent } from 'hotkeys-js'
-import { type Ref, onMounted, onUnmounted, unref, watch } from 'vue'
+import { type Ref, isRef, unref, watch } from 'vue'
 
 type MaybeRef<T> = T | Ref<T>
 
@@ -97,7 +98,7 @@ export function useKey(
     }
   }
 
-  if (source) {
+  if (isRef(source) || typeof source === 'function') {
     watch(
       source,
       (newSourceValue) => {
@@ -109,8 +110,10 @@ export function useKey(
     )
   }
   else {
-    onMounted(init)
+    init()
   }
 
-  onUnmounted(destroy)
+  tryOnScopeDispose(destroy)
+
+  return destroy
 }

src/composables/useKey.ts

@@ -1,15 +1,17 @@
 <script lang="ts" setup>
 import { watch } from 'vue'
 import { exit } from '@tauri-apps/api/process'
-import { open } from '@tauri-apps/api/shell'
 import { invoke } from '@tauri-apps/api/tauri'
+import { disable as disableAutostart, enable as enableAutostart } from 'tauri-plugin-autostart-api'
+import { watchDebounced } from '@vueuse/core'
 import AppButton from '../components/AppButton.vue'
 import PageHeader from '../components/PageHeader.vue'
 import SettingsItem from '../components/SettingsItem.vue'
 import { useStore } from '../stores/store'
 import { AppStorage } from '../storage'
+import { InvokeCommand, Page } from '../constants'
 import { Icons } from '../components/Icons'
-import { REPO_LINK } from '../constants'
+import { useKey } from '../composables/useKey'
 
 const store = useStore()
 
@@ -22,15 +24,44 @@ const accessToken = AppStorage.asComputed('accessToken')
 
 watch(soundsEnabled, (enabled) => {
   if (enabled)
-    invoke('play_notification_sound')
+    invoke(InvokeCommand.PlayNotificationSound)
 })
+
+watchDebounced(openAtStartup, (enabled) => {
+  if (enabled)
+    enableAutostart()
+  else
+    disableAutostart()
+}, { debounce: 350 })
+
+function handleBack() {
+  let page = Page.Home
+
+  if (accessToken.value == null)
+    page = Page.Landing
+
+  store.setPage(page)
+}
+
+useKey('esc', handleBack, { prevent: true })
 </script>
 
 <template>
   <div class="settings">
-    <PageHeader class="settings-header">
-      Settings
-    </PageHeader>
+    <div class="settings-header">
+      <AppButton
+        class="settings-header-back-button"
+        square
+        title="Go back"
+        @click="handleBack"
+      >
+        <Icons.ChevronLeft />
+      </AppButton>
+
+      <PageHeader inline>
+        Settings
+      </PageHeader>
+    </div>
 
     <div class="settings-grid">
       <SettingsItem
@@ -52,14 +83,6 @@ watch(soundsEnabled, (enabled) => {
     </div>
 
     <div class="settings-footer">
-      <AppButton
-        title="Open Gitification repository"
-        class="github-button"
-        @click="open(REPO_LINK)"
-      >
-        <Icons.Github />
-      </AppButton>
-
       <AppButton
         v-if="accessToken"
         @click="store.logout"
@@ -89,6 +112,10 @@ watch(soundsEnabled, (enabled) => {
 
     &-header {
       margin-bottom: 25px;
+
+      &-back-button {
+        margin-right: 10px;
+      }
     }
 
     &-grid {
@@ -110,8 +137,4 @@ watch(soundsEnabled, (enabled) => {
       }
     }
   }
-
-  .github-button {
-    margin-right: auto;
-  }
 </style>