feat: add translations and app logo

Author: lostdesign

icon.png

@@ -39,6 +39,7 @@
     "pinia": "^2.1.7",
     "tippy.js": "^6.3.7",
     "vue": "^3.3.4",
+    "vue-i18n": "^9.10.2",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {

package.json

@@ -11,7 +11,7 @@ edition = "2021"
 tauri-build = { version = "1.5", features = [] }
 
 [dependencies]
-tauri = { version = "1.5", features = [ "fs-all", "shell-open"] }
+tauri = { version = "1.5", features = [ "global-shortcut-all", "fs-all", "shell-open"] }
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 tauri-plugin-persisted-scope = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }

pnpm-lock.yaml

@@ -12,6 +12,9 @@
   "tauri": {
     "allowlist": {
       "all": false,
+      "globalShortcut": {
+        "all": true
+      },
       "shell": {
         "all": false,
         "open": true
@@ -32,7 +35,9 @@
         "resizable": true,
         "title": "linked",
         "width": 450,
-        "height": 850
+        "height": 850,
+        "minWidth": 450,
+        "minHeight": 450
       }
     ],
     "security": {

src-tauri/Cargo.toml

@@ -2,11 +2,27 @@
 import {onMounted} from "vue";
 import {useRouter} from "vue-router";
 import {useCalendarStore} from "@/stores/useCalendarStore.ts";
+import {registerAll} from '@tauri-apps/api/globalShortcut';
+import {getToday, shiftDateByDays} from "@/utils/calendar.ts";
 
-const router = useRouter()
 const store = useCalendarStore()
+const router = useRouter()
+
+const shortcutRouteMap: Record<string, () => string> = {
+  'CommandOrControl+.': () => `/day/${getToday()}`,
+  'CommandOrControl+,': () => '/settings',
+  'CommandOrControl+P': () => `/day/${shiftDateByDays(store.currentDate, -1)}`,
+  'CommandOrControl+N': () => `/day/${shiftDateByDays(store.currentDate, 1)}`,
+  'CommandOrControl+Shift+P': () => `/day/${shiftDateByDays(store.currentDate, -7)}`,
+  'CommandOrControl+Shift+N': () => `/day/${shiftDateByDays(store.currentDate, 7)}`,
+}
 
-onMounted(() => router.push(`/day/${store.currentDate}`))
+onMounted(async () => {
+  await registerAll(Object.keys(shortcutRouteMap), async (shortcut: string) => {
+    await router.push(shortcutRouteMap[shortcut]())
+  });
+  await router.push(`/day/${store.currentDate}`)
+})
 </script>
 
 <template>

src-tauri/icons/128x128.png

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import BackIcon from "@/assets/icons/back.svg";
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <router-link
+      to="/"
+      class="
+            flex
+            items-center
+            align-center
+            mb-3
+            hover:text-bright-pink
+            focus:outline-none
+            focus:ring-2 focus:ring-bright-pink
+            focus:border-bright-pink
+          "
+  >
+    <span class="mr-1"><BackIcon /></span>
+    {{ t('settings.back') }}
+  </router-link>
+</template>

src-tauri/icons/[email protected]

@@ -11,14 +11,13 @@ const currentWeek = computed(() => store.currentWeek)
 const router = useRouter()
 
 function switchDay(date: string) {
-  store.setDate(date)
-  router.push(`/day/${date}`)   
+  router.push({name: 'day', params: {day: date}})
 }
 </script>
 
 <template>
   <div
-    class="
+      class="
       flex
       dark:bg-black
       justify-center
@@ -31,18 +30,18 @@ function switchDay(date: string) {
   >
     <template v-for="date in currentWeek" :key="date.day">
       <div
-        class="flex-col justify-center items-center self-center text-center"
+          class="flex-col justify-center items-center self-center text-center"
       >
         <span
-          class="block mb-1 text-xs text-gray-400 dark:text-gray-600"
-          :class="{
+            class="block mb-1 text-xs text-gray-400 dark:text-gray-600"
+            :class="{
             'text-bright-pink dark:text-red-500': date.isoDate === currentDate
           }"
         >
           {{ date.weekDay }}
         </span>
         <span
-          class="
+            class="
             flex
             justify-center
             items-center
@@ -58,11 +57,11 @@ function switchDay(date: string) {
             cursor-pointer
             ring-bright-pink
           "
-          :class="{
+            :class="{
             'ring-4 text-sm': date.isoDate === currentDate
           }"
-          :key="date.day"
-          @click="switchDay(date.isoDate)"
+            :key="date.day"
+            @click="switchDay(date.isoDate)"
         >
           {{ date.day }}
         </span>

src-tauri/icons/32x32.png

@@ -22,16 +22,14 @@ import {Strike} from "@tiptap/extension-strike";
 import {Document} from "@tiptap/extension-document";
 import {Text} from "@tiptap/extension-text";
 import {History} from "@tiptap/extension-history";
-import Commands from "@/components/slash-commands/commands.ts";
-import suggestion from "@/components/slash-commands/suggestion.ts";
 
 const store = useCalendarStore()
 const editor = ref()
 const content = ref('')
 
 onMounted(async () => {
   editor.value = new Editor({
-    autofocus: true,
+    autofocus: 'end',
     content: await fetchContent(store.currentDate) as string,
     editable: true,
     extensions: [
@@ -51,10 +49,7 @@ onMounted(async () => {
       Strike,
       Link,
       History,
-      /*Commands.configure({
-        suggestion,
-      }),
-      Image,
+      /*Image,
       Placeholder.configure({
         includeChildren: true,
         placeholder: ({ node }) => {

src-tauri/icons/Square107x107Logo.png

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <h3 class="mt-8">{{ t('settings.data.title') }}</h3>
+  <p class="text-sm text-gray-500">{{ t('settings.data.hint')}}</p>
+</template>

src-tauri/icons/Square142x142Logo.png

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import DropdownIcon from '@/assets/icons/dropdown.svg'
+import TickIcon from '@/assets/icons/tick.svg'
+import {SUPPORT_LOCALES} from "@/i18n.ts";
+import {useI18n} from "vue-i18n";
+
+const open = ref(false)
+const {messages, locale} = useI18n();
+
+function handleLanguageChange(desiredLocale: string) {
+  locale.value = desiredLocale;
+  localStorage.setItem('lang', desiredLocale)
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div class="relative">
+    <h3 class="mt-8">{{ $t('settings.languages.title') }}</h3>
+    <p class="text-sm leading-5 text-gray-500">{{ $t('settings.languages.hint') }}</p>
+    <button
+        type="button"
+        class="
+        mt-4
+          relative
+          w-full
+          bg-gray-100
+          dark:bg-gray-800
+          rounded-md
+          pl-3
+          pr-10
+          py-2
+          text-left
+          focus:outline-none
+          focus:ring-2 focus:ring-bright-pink
+          focus:border-bright-pink
+          sm:text-sm
+          cursor-pointer
+        "
+        aria-haspopup="listbox"
+        aria-expanded="true"
+        aria-labelledby="listbox-label"
+        @click="open = !open"
+    >
+      <span class="block truncate">{{ messages[locale].title }}</span>
+      <span
+          class="
+            absolute
+            inset-y-0
+            right-0
+            flex
+            items-center
+            pr-2
+            pointer-events-none
+          "
+      >
+          <DropdownIcon/>
+        </span>
+    </button>
+    <ul
+        class="
+          absolute
+          z-10
+          mt-1
+          w-full
+          bg-gray-100
+          dark:bg-gray-800
+          shadow-lg
+          max-h-60
+          rounded-md
+          py-1
+          text-base
+          ring-1 ring-black ring-opacity-5
+          overflow-auto
+          focus:outline-none
+          sm:text-sm
+        "
+        style="
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+          margin-top: 0.25rem !important;
+        "
+        tabindex="-1"
+        role="listbox"
+        aria-labelledby="listbox-label"
+        aria-activedescendant="listbox-option-3"
+        v-if="open"
+    >
+      <template v-for="availableLocale in SUPPORT_LOCALES">
+        <li
+            class="cursor-pointer select-none relative py-2 pl-8 pr-4 flex space-x-4 group hover:bg-bright-pink rounded-lg"
+            id="listbox-option-0"
+            role="option"
+            @click="handleLanguageChange(availableLocale)"
+        >
+          <span
+              class="
+              group-hover:text-white
+                text-bright-pink
+                items-center
+                pl-1.5
+                w-5
+                h-5
+                -ml-9
+              "
+              v-if="availableLocale == locale"
+          >
+              <TickIcon/>
+            </span>
+          <span class="font-normal block truncate">
+            {{ messages[availableLocale].title  }} <span class="text-xs italic opacity-50">({{availableLocale}})</span>
+          </span>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>

src-tauri/icons/Square150x150Logo.png

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import {useI18n} from "vue-i18n";
+const {t} = useI18n()
+</script>
+
+<template>
+  <h3 class="mt-8">{{ t('settings.search.index.title') }}</h3>
+  <p class="text-sm text-gray-500">{{ t('settings.search.index.hint') }}</p>
+</template>