├── .eslintrc
├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── locales
    ├── en.yml
    └── fr.yml
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
├── public
    ├── potato.png
    ├── pwa-192x192.png
    ├── pwa-512x512.png
    └── robots.txt
├── src
    ├── App.vue
    ├── assets
    │   ├── potatoCry.png
    │   ├── potatoDetect.png
    │   ├── potatoHappy.png
    │   ├── potatoLost.png
    │   ├── potatoLurk.png
    │   ├── potatoNap.png
    │   ├── potatoNote.png
    │   ├── potatoNotif.png
    │   ├── potatoParty.png
    │   └── potatoShy.png
    ├── auto-imports.d.ts
    ├── components.d.ts
    ├── components
    │   ├── InfoPanel.vue
    │   ├── LanguageSelector.vue
    │   ├── NotificationsWarning.vue
    │   ├── OptionControls.vue
    │   ├── PotatoProgress.vue
    │   ├── PotatoSettings.vue
    │   ├── PotatoTimer.vue
    │   ├── ResetButton.vue
    │   ├── TaskList.vue
    │   └── ThemeSelector.vue
    ├── composables
    │   ├── useNotifier.ts
    │   ├── usePotato.ts
    │   ├── usePotatoStorage.ts
    │   └── useTasks.ts
    ├── layouts
    │   └── default.vue
    ├── logic
    │   ├── dark.ts
    │   └── index.ts
    ├── main.ts
    ├── pages
    │   └── index.vue
    └── shims.d.ts
├── tsconfig.json
└── vite.config.ts


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu"
3 | }
4 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | ko_fi: prazdevs
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .nyc_output
 3 | .vite-ssg-dist
 4 | .vite-ssg-temp
 5 | *.local
 6 | codecov.exe
 7 | coverage
 8 | cypress/screenshots
 9 | cypress/videos
10 | dist
11 | dist-ssr
12 | node_modules
13 | # intellij stuff
14 | .idea/
15 | .vscode


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Sacha Bouillez
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img alt="" src="https://i.imgur.com/Snzjj1Z.png">
 3 | </p>
 4 | 
 5 | <p align="center">
 6 |   <i>Artwork by <a href="https://twitter.com/RFrauhn">Robynn Frauhn</a> and <a href="https://twitter.com/hels_draws">Hels</a></i>
 7 | </p>
 8 | 
 9 | <h1 align="center">Potato Timer</h1>
10 | 
11 | <p align="center">A pomodoro timer, but with potatoes. Because potatoes are cool.</p>
12 | 
13 | <p align="center">
14 |   <a>
15 |     <img src="https://img.shields.io/github/package-json/dependency-version/prazdevs/potato-timer/vue?color=41B883&logo=vue.js">
16 |   </a>
17 |   <a href="https://github.com/prazdevs/potato-timer/blob/main/LICENSE">
18 |     <img src="https://img.shields.io/github/license/prazdevs/potato-timer?style=flat" />
19 |   </a>
20 | </p>
21 | 
22 | <p align="center">Automagically hosted on Netlify.</p>
23 | 
24 | <p align="center">
25 |   <a href="https://app.netlify.com/sites/potatotimer/deploys">
26 |     <img src="https://api.netlify.com/api/v1/badges/922e5be0-a3aa-4f1b-8266-0b8d92d4b62f/deploy-status">
27 |   </a>
28 | </p>
29 | 
30 | ## ✨ Features
31 | 
32 | - Persistent timers through sessions/tabs.
33 | - Persistent task list.
34 | - Configurable timers.
35 | - Desktop notifications.
36 | - PWA support.
37 | 
38 | ## 🚀 Usage
39 | 
40 | Available at [this url](https://potatotimer.app). Tutorial available in the app.
41 | 
42 | ## ❓ What is this thing?
43 | 
44 | This app is a sandbox I made to use Vue3 and Vite, alongside interesting packages such as VueUse. It features lots of different stuff such as:
45 | - Vue 3 w/ `script setup` syntax.
46 | - Vite with plugins (`layouts`, `pages`, `components`, `i18n`...
47 | - Fully typed with TypeScript.
48 | - Full PWA support.
49 | - Cypress tests with Gherkin syntax (using Cucumber.js).
50 | - Accessibility features such as focus traps and focus management.
51 | 
52 | ## 🤝 Contributing
53 | 
54 | Any contribution to the project is welome.  
55 | Run into a problem? Open an [issue](https://github.com/prazdevs/potato-timer/issues/new/choose).  
56 | Want to add some feature? PRs are welcome!
57 | 
58 | 
59 | ## 👤 About the author
60 | 
61 | Feel free to contact me:
62 | 
63 | - <a href="https://twitter.com/prazdevs"><img src="https://img.shields.io/twitter/follow/prazdevs?style=social" /></a>
64 | - <img src="https://img.shields.io/badge/Discord-PraZ%234184-darkgrey?labelColor=7289DA&logo=discord&logoColor=white&style=flat" />
65 |   
66 |   ## 📝 Licence
67 | 
68 | Copyright © 2021 [Sacha Bouillez](https://github.com/prazdevs).<br />
69 | This project is under [MIT](https://github.com/prazdevs/potato-timer/blob/main/LICENCE) license.<br />
70 | _The potato images used belong to [Robynn Frauhn](https://twitter.com/RFrauhn) and [Hels](https://twitter.com/hels_draws)._
71 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <link rel="icon" href="/potato.png" type="image/png">
 7 |   <link rel="apple-touch-icon" href="/pwa-192x192.png">
 8 |   <meta name="msapplication-TileColor" content="#00aba9">
 9 |   <meta name="theme-color" content="#ffffff">
10 | </head>
11 | <body>
12 |   <div id="app"></div>
13 |   <script type="module" src="/src/main.ts"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/locales/en.yml:
--------------------------------------------------------------------------------
 1 | common:
 2 |   close: Close the modal
 3 |   incompatibility: Incompatibility
 4 |   pause: Pause
 5 |   reset: Reset
 6 |   resume: Resume
 7 |   warning: Warning
 8 | footer:
 9 |   credits: Potato credits to {robynn} and {hels}
10 |   hels: HelS
11 |   made: Made with ❤️ by {praz}
12 |   praz: PraZ
13 |   robynn: Robynn Frauhn
14 | info:
15 |   developer:
16 |     contact: contact me
17 |     content: >-
18 |       This app is my gift to a lovely and wholesome community that helped me a
19 |       lot. It is also a sandbox that allowed me to experiment with technologies
20 |       I like. I tried to make it as accessible as possible. However there might
21 |       be bugs, and if you find any, you can {contact}. If you are a developer,
22 |       you can also {contribute}. Finally, if you want to contribute in another
23 |       way, you can always {kofi}.
24 |     contribute: contribute
25 |     kofi: offer me a coffee
26 |     title: A word from the developer
27 |   origin:
28 |     content: >-
29 |       A lot of small potatoes from the marvelous community of Robynn Frauhn were
30 |       used to the Pomodoro technique to help them work. As in Robynn's oasis,
31 |       potatoes reign, they decided to replace tomates in their technique. This
32 |       is how was born the Potato technique and its Potato Timer.
33 |     title: The origin of the Potato Timer
34 |   technique:
35 |     content: >-
36 |       The Pomodoro technique is a time management technique. It consists of
37 |       defining periods of work, separated by smaller periods of pause. Before
38 |       starting, several tasks should be planned, so they can be worked on during
39 |       work time. It can be split in 5 steps:
40 |     steps:
41 |       - Defining the task to work on.
42 |       - Setup a work timer (25 minutes).
43 |       - Work on the task for 25 minutes.
44 |       - Take a 5 minute break.
45 |       - Start over with a 15-30 minute pause on the 4th cycle.
46 |     title: The Pomodoro technique
47 |   title: What is Potato Timer ?
48 | not-found: Not found
49 | notification:
50 |   api-unavailable: >-
51 |     Your device or browser is not compatible with notifications. You will not
52 |     receive any when it's time to take a break or get back to work.
53 |   permission-warning: >-
54 |     You didn't allow the app to send you notifications. You may miss the moment
55 |     to take a break !
56 |   request-permission: Allow notifications
57 | options:
58 |   change-language: Change language — currently {current}
59 |   change-theme: Change theme — currently {current}
60 |   info: About the app
61 |   title: Options
62 | reset:
63 |   cancel: Cancel
64 |   confirm: Reset
65 |   message: There is a potato running, are you sure you want to reset?
66 | settings:
67 |   cancel: Cancel
68 |   long-pause: Final pause duration (minutes)
69 |   pause-time: Pause potato duration (minutes)
70 |   reset: Restore default durations
71 |   save: Save
72 |   title: Settings
73 |   work-time: Work potato duration (minutes)
74 | steps:
75 |   done: We're done !
76 |   pause: Time to chill...
77 |   ready: Ready to start ?
78 |   work: Let's get to work !
79 | tasks:
80 |   add: Add task
81 |   delete: Delete task "{task}"
82 |   empty: No task to work on.
83 | timer: Potato progress
84 | theme:
85 |   dark: Dark
86 |   light: Light
87 | 


--------------------------------------------------------------------------------
/locales/fr.yml:
--------------------------------------------------------------------------------
 1 | common:
 2 |   close: Fermer la modale
 3 |   incompatibility: Incompatibilité
 4 |   pause: Mettre en pause
 5 |   reset: Réinitialiser
 6 |   resume: Continuer
 7 |   warning: Attention
 8 | footer:
 9 |   credits: Crédits patates à {robynn} et {hels}
10 |   hels: HelS
11 |   made: Fait avec ❤️ par {praz}
12 |   praz: PraZ
13 |   robynn: Robynn Frauhn
14 | info:
15 |   developer:
16 |     contact: me contacter
17 |     content: >-
18 |       Cette appli est mon cadeau à une communauté adorable et bienveillante qui
19 |       m'a beaucoup apporté. C'est aussi un terrain de jeu qui me permet
20 |       d'expérimenter des technologies que j'apprécie. J'ai essayé de la rendre
21 |       la plus accessible possible. Cependant il se peut qu'il y ait des bugs et
22 |       si tu en trouves un tu peux {contact}. Si tu es un développeur, tu peux
23 |       aussi {contribute}. Enfin, si tu veux contribuer d'une autre façon, tu
24 |       peux toujours {kofi}.
25 |     contribute: contribuer
26 |     kofi: m'offrir un café
27 |     title: Un mot du développeur
28 |   origin:
29 |     content: >-
30 |       Beacoup de petites patates de la merveilleuse communauté de Robynn Frauhn
31 |       utilisaient la technique Pomodoro dans leur travail. Comme dans l'oasis de
32 |       Robynn, les patates reignaient, elles décidèrent de remplacer les tomates
33 |       dans leur technique. C'est ainsi que naquit la technique Potato et son
34 |       Potato Timer.
35 |     title: L'origine du Potato Timer
36 |   technique:
37 |     content: >-
38 |       La technique Pomodoro est une technique de gestion du temps. Elle permet
39 |       de définir des périodes de travail séparées par des courtes périodes de
40 |       pause. Il convient avant de commencer de définir des tâches à effectuer
41 |       pendant chaque période de travail. On peut la décomposer en 5 étapes :
42 |     steps:
43 |       - Définir la tâche sur laquelle travailler.
44 |       - Lancer un timer travail (25 minutes).
45 |       - Travailler sur cette tâche pendant ces 25 minutes).
46 |       - Faire une pause de 5 minutes.
47 |       - Recommencer en prenant une pause de 15-30 minutes au 4e cycle.
48 |     title: La technique Pomodoro
49 |   title: C'est quoi Potato Timer ?
50 | not-found: Page non trouvée
51 | notification:
52 |   api-unavailable: >-
53 |     Ton appareil ou navigateur est incompatible avec les notifications. Tu n'en
54 |     recevras pas quand il sera l'heure de prendre une pause ou de se remettre au
55 |     travail.
56 |   permission-warning: >-
57 |     Tu n'as pas autorisé l'application à t'envoyer des notifications. Tu risques
58 |     de ne pas t'apercevoir que c'est le moment de faire une pause !
59 |   request-permission: Autoriser les notifications
60 | options:
61 |   change-language: Changer de langue — actuellement {current}
62 |   change-theme: Changer le theme — actuellement {current}
63 |   info: Informations sur l'app
64 |   title: Options
65 | reset:
66 |   cancel: Annuler
67 |   confirm: Réinitialiser
68 |   message: Il y a une patate en cours, es-tu sûr·e de vouloir réinitialiser ?
69 | settings:
70 |   cancel: Annuler
71 |   long-pause: Durée de la pause finale (minutes)
72 |   pause-time: Durée d'une patate pause (minutes)
73 |   reset: Rétablir les durées par défaut
74 |   save: Sauvegarder
75 |   title: Réglages
76 |   work-time: Durée d'une patate travail (minutes)
77 | steps:
78 |   done: Terminé !
79 |   pause: On se détend...
80 |   ready: Prêt·e ?
81 |   work: Au travail !
82 | tasks:
83 |   add: Ajouter une tâche
84 |   delete: Supprimer la tâche "{task}"
85 |   empty: Aucune tâche à effectuer.
86 | timer: Progression de la patate
87 | theme:
88 |   dark: Sombre
89 |   light: Clair
90 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NODE_VERSION = "18"
 3 | 
 4 | [build]
 5 |   publish = "dist"
 6 |   command = "pnpm run build"
 7 | 
 8 | [[redirects]]
 9 |   from = "/*"
10 |   to = "/index.html"
11 |   status = 200
12 | 
13 | [[headers]]
14 |   for = "/manifest.webmanifest"
15 |   [headers.values]
16 |     Content-Type = "application/manifest+json"
17 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "potato-timer",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "vite --port 3333",
 6 |     "build": "cross-env NODE_ENV=production vite build",
 7 |     "lint": "eslint . --fix",
 8 |     "preview": "vite preview"
 9 |   },
10 |   "dependencies": {
11 |     "@vueuse/components": "^9.13.0",
12 |     "@vueuse/core": "^9.13.0",
13 |     "@vueuse/head": "^1.1.9",
14 |     "date-fns": "^2.29.3",
15 |     "focus-trap": "^7.3.1",
16 |     "focus-trap-vue": "^3.4.0",
17 |     "use-persistent-stopwatch": "^1.3.0",
18 |     "vue": "^3.2.47",
19 |     "vue-i18n": "^9.2.2",
20 |     "vue-router": "^4.1.6"
21 |   },
22 |   "devDependencies": {
23 |     "@antfu/eslint-config": "^0.31.1",
24 |     "@iconify/json": "^2.2.28",
25 |     "@intlify/vite-plugin-vue-i18n": "^6.0.3",
26 |     "@vitejs/plugin-vue": "^3.2.0",
27 |     "cross-env": "^7.0.3",
28 |     "eslint": "^8.35.0",
29 |     "naive-ui": "^2.34.3",
30 |     "sass": "^1.58.3",
31 |     "typescript": "^4.9.5",
32 |     "unplugin-auto-import": "^0.12.2",
33 |     "unplugin-icons": "^0.14.15",
34 |     "unplugin-vue-components": "^0.22.12",
35 |     "vite": "^3.2.5",
36 |     "vite-plugin-fonts": "^0.6.0",
37 |     "vite-plugin-pages": "^0.27.1",
38 |     "vite-plugin-pwa": "^0.13.3",
39 |     "vite-plugin-vue-layouts": "^0.7.0",
40 |     "vitest": "^0.25.8",
41 |     "vue-tsc": "^1.2.0"
42 |   },
43 |   "volta": {
44 |     "node": "16.13.1"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/public/potato.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/public/potato.png


--------------------------------------------------------------------------------
/public/pwa-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/public/pwa-192x192.png


--------------------------------------------------------------------------------
/public/pwa-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/public/pwa-512x512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | Allow: /
3 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useLocalStorage } from '@vueuse/core'
 3 | import { useHead } from '@vueuse/head'
 4 | import { type GlobalThemeOverrides, NConfigProvider, NGlobalStyle, darkTheme } from 'naive-ui'
 5 | import Layout from '~/layouts/default.vue'
 6 | import Index from '~/pages/index.vue'
 7 | 
 8 | import { isDark } from '~/logic'
 9 | 
10 | useHead({
11 |   title: 'Potato Timer 🥔',
12 |   meta: [
13 |     {
14 |       name: 'description',
15 |       content: 'A pomodoro timer, but with potatoes.',
16 |     },
17 |   ],
18 | })
19 | 
20 | const language = useLocalStorage('language', 'en')
21 | const { locale } = useI18n()
22 | 
23 | const overrides: GlobalThemeOverrides = {
24 |   common: {
25 |     fontFamily: 'Quicksand',
26 |   },
27 | }
28 | 
29 | onMounted(() => {
30 |   locale.value = language.value
31 |   document.documentElement.setAttribute('lang', language.value)
32 | })
33 | </script>
34 | 
35 | <template>
36 |   <NConfigProvider
37 |     :theme="isDark ? darkTheme : undefined"
38 |     :theme-overrides="overrides"
39 |   >
40 |     <NGlobalStyle />
41 |     <Layout>
42 |       <Index />
43 |     </Layout>
44 |   </NConfigProvider>
45 | </template>
46 | 
47 | <style>
48 | html,
49 | body,
50 | #app {
51 |   height: 100%;
52 |   margin: 0;
53 |   padding: 0;
54 | }
55 | 
56 | .sr-only {
57 |   position: absolute;
58 |   width: 1px;
59 |   height: 1px;
60 |   padding: 0;
61 |   margin: -1px;
62 |   overflow: hidden;
63 |   clip: rect(0, 0, 0, 0);
64 |   white-space: nowrap; /* added line */
65 |   border: 0;
66 | }
67 | 
68 | a:focus-visible {
69 |   outline: var(--primary-color-hover) solid 1px;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/assets/potatoCry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoCry.png


--------------------------------------------------------------------------------
/src/assets/potatoDetect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoDetect.png


--------------------------------------------------------------------------------
/src/assets/potatoHappy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoHappy.png


--------------------------------------------------------------------------------
/src/assets/potatoLost.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoLost.png


--------------------------------------------------------------------------------
/src/assets/potatoLurk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoLurk.png


--------------------------------------------------------------------------------
/src/assets/potatoNap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoNap.png


--------------------------------------------------------------------------------
/src/assets/potatoNote.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoNote.png


--------------------------------------------------------------------------------
/src/assets/potatoNotif.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoNotif.png


--------------------------------------------------------------------------------
/src/assets/potatoParty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoParty.png


--------------------------------------------------------------------------------
/src/assets/potatoShy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/prazdevs/potato-timer/d95f8f57d18f2df685faa9488895125ad02aa2a7/src/assets/potatoShy.png


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | // Generated by 'unplugin-auto-import'
 2 | export {}
 3 | declare global {
 4 |   const EffectScope: typeof import('vue')['EffectScope']
 5 |   const computed: typeof import('vue')['computed']
 6 |   const createApp: typeof import('vue')['createApp']
 7 |   const customRef: typeof import('vue')['customRef']
 8 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 9 |   const defineComponent: typeof import('vue')['defineComponent']
10 |   const effectScope: typeof import('vue')['effectScope']
11 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
12 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
13 |   const h: typeof import('vue')['h']
14 |   const inject: typeof import('vue')['inject']
15 |   const isProxy: typeof import('vue')['isProxy']
16 |   const isReactive: typeof import('vue')['isReactive']
17 |   const isReadonly: typeof import('vue')['isReadonly']
18 |   const isRef: typeof import('vue')['isRef']
19 |   const markRaw: typeof import('vue')['markRaw']
20 |   const nextTick: typeof import('vue')['nextTick']
21 |   const onActivated: typeof import('vue')['onActivated']
22 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
23 |   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
24 |   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
25 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
26 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
27 |   const onDeactivated: typeof import('vue')['onDeactivated']
28 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
29 |   const onMounted: typeof import('vue')['onMounted']
30 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
31 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
32 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
33 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
34 |   const onUnmounted: typeof import('vue')['onUnmounted']
35 |   const onUpdated: typeof import('vue')['onUpdated']
36 |   const provide: typeof import('vue')['provide']
37 |   const reactive: typeof import('vue')['reactive']
38 |   const readonly: typeof import('vue')['readonly']
39 |   const ref: typeof import('vue')['ref']
40 |   const resolveComponent: typeof import('vue')['resolveComponent']
41 |   const resolveDirective: typeof import('vue')['resolveDirective']
42 |   const shallowReactive: typeof import('vue')['shallowReactive']
43 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
44 |   const shallowRef: typeof import('vue')['shallowRef']
45 |   const toRaw: typeof import('vue')['toRaw']
46 |   const toRef: typeof import('vue')['toRef']
47 |   const toRefs: typeof import('vue')['toRefs']
48 |   const triggerRef: typeof import('vue')['triggerRef']
49 |   const unref: typeof import('vue')['unref']
50 |   const useAttrs: typeof import('vue')['useAttrs']
51 |   const useCssModule: typeof import('vue')['useCssModule']
52 |   const useCssVars: typeof import('vue')['useCssVars']
53 |   const useI18n: typeof import('vue-i18n')['useI18n']
54 |   const useLink: typeof import('vue-router')['useLink']
55 |   const useRoute: typeof import('vue-router')['useRoute']
56 |   const useRouter: typeof import('vue-router')['useRouter']
57 |   const useSlots: typeof import('vue')['useSlots']
58 |   const watch: typeof import('vue')['watch']
59 |   const watchEffect: typeof import('vue')['watchEffect']
60 |   const watchPostEffect: typeof import('vue')['watchPostEffect']
61 |   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
62 | }
63 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | // generated by unplugin-vue-components
 2 | // We suggest you to commit this file into source control
 3 | // Read more: https://github.com/vuejs/core/pull/3399
 4 | import '@vue/runtime-core'
 5 | 
 6 | export {}
 7 | 
 8 | declare module '@vue/runtime-core' {
 9 |   export interface GlobalComponents {
10 |     CarbonAdd: typeof import('~icons/carbon/add')['default']
11 |     CarbonClose: typeof import('~icons/carbon/close')['default']
12 |     CarbonDelete: typeof import('~icons/carbon/delete')['default']
13 |     CarbonHelp: typeof import('~icons/carbon/help')['default']
14 |     CarbonMoon: typeof import('~icons/carbon/moon')['default']
15 |     CarbonPause: typeof import('~icons/carbon/pause')['default']
16 |     CarbonPlay: typeof import('~icons/carbon/play')['default']
17 |     CarbonReset: typeof import('~icons/carbon/reset')['default']
18 |     CarbonSettings: typeof import('~icons/carbon/settings')['default']
19 |     CarbonSun: typeof import('~icons/carbon/sun')['default']
20 |     CarbonTranslate: typeof import('~icons/carbon/translate')['default']
21 |     InfoPanel: typeof import('./components/InfoPanel.vue')['default']
22 |     LanguageSelector: typeof import('./components/LanguageSelector.vue')['default']
23 |     NAlert: typeof import('naive-ui')['NAlert']
24 |     NButton: typeof import('naive-ui')['NButton']
25 |     NCard: typeof import('naive-ui')['NCard']
26 |     NCheckbox: typeof import('naive-ui')['NCheckbox']
27 |     NDivider: typeof import('naive-ui')['NDivider']
28 |     NElement: typeof import('naive-ui')['NElement']
29 |     NEllipsis: typeof import('naive-ui')['NEllipsis']
30 |     NIcon: typeof import('naive-ui')['NIcon']
31 |     NInput: typeof import('naive-ui')['NInput']
32 |     NInputGroup: typeof import('naive-ui')['NInputGroup']
33 |     NInputNumber: typeof import('naive-ui')['NInputNumber']
34 |     NLayout: typeof import('naive-ui')['NLayout']
35 |     NList: typeof import('naive-ui')['NList']
36 |     NListItem: typeof import('naive-ui')['NListItem']
37 |     NModal: typeof import('naive-ui')['NModal']
38 |     NotificationsWarning: typeof import('./components/NotificationsWarning.vue')['default']
39 |     NPopover: typeof import('naive-ui')['NPopover']
40 |     NProgress: typeof import('naive-ui')['NProgress']
41 |     NSpace: typeof import('naive-ui')['NSpace']
42 |     OptionControls: typeof import('./components/OptionControls.vue')['default']
43 |     PotatoProgress: typeof import('./components/PotatoProgress.vue')['default']
44 |     PotatoSettings: typeof import('./components/PotatoSettings.vue')['default']
45 |     PotatoTimer: typeof import('./components/PotatoTimer.vue')['default']
46 |     ResetButton: typeof import('./components/ResetButton.vue')['default']
47 |     RouterLink: typeof import('vue-router')['RouterLink']
48 |     RouterView: typeof import('vue-router')['RouterView']
49 |     TaskList: typeof import('./components/TaskList.vue')['default']
50 |     ThemeSelector: typeof import('./components/ThemeSelector.vue')['default']
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/components/InfoPanel.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { OnClickOutside } from '@vueuse/components'
  3 | import { FocusTrap } from 'focus-trap-vue'
  4 | 
  5 | import potatoShy from '~/assets/potatoShy.png'
  6 | 
  7 | const { t } = useI18n()
  8 | 
  9 | const show = ref(false)
 10 | </script>
 11 | 
 12 | <template>
 13 |   <NButton
 14 |     id="info-button"
 15 |     :aria-label="t('options.info')"
 16 |     circle
 17 |     size="large"
 18 |     @click="show = true"
 19 |   >
 20 |     <template #icon>
 21 |       <NIcon>
 22 |         <carbon-help />
 23 |       </NIcon>
 24 |     </template>
 25 |   </NButton>
 26 |   <NModal :show="show">
 27 |     <OnClickOutside @trigger="show = false">
 28 |       <FocusTrap
 29 |         fallback-focus="#info-button"
 30 |         initial-focus="#close-button"
 31 |         :value="show"
 32 |         @deactivate="show = false"
 33 |       >
 34 |         <!-- container div needed for focus-trap -->
 35 |         <div>
 36 |           <NCard class="modal" :segmented="{ content: 'hard' }">
 37 |             <template #header>
 38 |               <div class="modal-header">
 39 |                 <img alt="" :src="potatoShy">
 40 |                 <span>
 41 |                   {{ t('info.title') }}
 42 |                 </span>
 43 |               </div>
 44 |             </template>
 45 |             <template #header-extra>
 46 |               <NButton
 47 |                 id="close-button"
 48 |                 :aria-label="t('common.close')"
 49 |                 size="large"
 50 |                 text
 51 |                 @click="show = false"
 52 |               >
 53 |                 <template #icon>
 54 |                   <NIcon size="25">
 55 |                     <carbon-close />
 56 |                   </NIcon>
 57 |                 </template>
 58 |               </NButton>
 59 |             </template>
 60 |             <template #default>
 61 |               <NLayout class="modal-body">
 62 |                 <div class="content-title">
 63 |                   {{ t('info.technique.title') }}
 64 |                 </div>
 65 |                 <div class="content-body">
 66 |                   <div>{{ t('info.technique.content') }}</div>
 67 |                   <ol>
 68 |                     <li>{{ t('info.technique.steps[0]') }}</li>
 69 |                     <li>{{ t('info.technique.steps[1]') }}</li>
 70 |                     <li>{{ t('info.technique.steps[2]') }}</li>
 71 |                     <li>{{ t('info.technique.steps[3]') }}</li>
 72 |                     <li>{{ t('info.technique.steps[4]') }}</li>
 73 |                   </ol>
 74 |                 </div>
 75 |                 <NDivider />
 76 |                 <div class="content-title">
 77 |                   {{ t('info.origin.title') }}
 78 |                 </div>
 79 |                 <div class="content-body">
 80 |                   {{ t('info.origin.content') }}
 81 |                 </div>
 82 |                 <NDivider />
 83 |                 <div class="content-title">
 84 |                   {{ t('info.developer.title') }}
 85 |                 </div>
 86 | 
 87 |                 <i18n-t
 88 |                   class="content-body"
 89 |                   keypath="info.developer.content"
 90 |                   tag="div"
 91 |                 >
 92 |                   <template #contact>
 93 |                     <NElement
 94 |                       href="https://twitter.com/prazdevs"
 95 |                       rel="noreferrer noopener"
 96 |                       tag="a"
 97 |                       target="_blank"
 98 |                     >
 99 |                       {{ t('info.developer.contact') }}
100 |                     </NElement>
101 |                   </template>
102 |                   <template #contribute>
103 |                     <NElement
104 |                       href="https://github.com/prazdevs/potato-timer"
105 |                       rel="noreferrer noopener"
106 |                       tag="a"
107 |                       target="_blank"
108 |                     >
109 |                       {{ t('info.developer.contribute') }}
110 |                     </NElement>
111 |                   </template>
112 |                   <template #kofi>
113 |                     <NElement
114 |                       href="https://ko-fi.com/prazdevs"
115 |                       rel="noreferrer noopener"
116 |                       tag="a"
117 |                       target="_blank"
118 |                     >
119 |                       {{ t('info.developer.kofi') }}
120 |                     </NElement>
121 |                   </template>
122 |                 </i18n-t>
123 |               </NLayout>
124 |             </template>
125 |           </NCard>
126 |         </div>
127 |       </FocusTrap>
128 |     </OnClickOutside>
129 |   </NModal>
130 | </template>
131 | 
132 | <style scoped lang="scss">
133 | .modal {
134 |   max-width: 700px;
135 | 
136 |   .modal-header {
137 |     display: flex;
138 |     align-items: center;
139 |     font-size: 1.2rem;
140 | 
141 |     img {
142 |       width: 30px;
143 |       margin-right: 5px;
144 |     }
145 |   }
146 | 
147 |   .modal-body {
148 |     background-color: var(--color-modal);
149 | 
150 |     .content-title {
151 |       font-size: 1.1rem;
152 |       margin-bottom: 5px;
153 |     }
154 | 
155 |     .content-body {
156 |       a {
157 |         color: var(--text-color-base);
158 | 
159 |         &:hover,
160 |         &:focus {
161 |           color: var(--primary-color-hover);
162 |         }
163 |       }
164 |     }
165 |   }
166 | }
167 | </style>
168 | 


--------------------------------------------------------------------------------
/src/components/LanguageSelector.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useLocalStorage } from '@vueuse/core'
 3 | 
 4 | const { availableLocales, locale, t } = useI18n()
 5 | const language = useLocalStorage('language', 'en')
 6 | 
 7 | const label = computed(() =>
 8 |   t('options.change-language', { current: language.value.toUpperCase() }),
 9 | )
10 | 
11 | const changeLocale = () => {
12 |   language.value
13 |     = availableLocales[
14 |       (availableLocales.indexOf(language.value) + 1) % availableLocales.length
15 |     ]
16 |   locale.value = language.value
17 |   document.documentElement.setAttribute('lang', language.value)
18 | }
19 | </script>
20 | 
21 | <template>
22 |   <NButton :aria-label="label" circle size="large" @click="changeLocale">
23 |     <template #icon>
24 |       <NIcon>
25 |         <carbon-translate />
26 |       </NIcon>
27 |     </template>
28 |   </NButton>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/src/components/NotificationsWarning.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { usePermission } from '@vueuse/core'
 3 | 
 4 | import potatoCry from '~/assets/potatoCry.png'
 5 | import potatoNotif from '~/assets/potatoNotif.png'
 6 | 
 7 | const notificationAccess = usePermission('notifications')
 8 | const { t } = useI18n()
 9 | 
10 | const apiUnavailable = computed(() => !window.Notification)
11 | 
12 | function requestPermission() {
13 |   Notification.requestPermission()
14 | }
15 | </script>
16 | 
17 | <template>
18 |   <NAlert
19 |     v-if="apiUnavailable"
20 |     class="alert-panel"
21 |     :show-icon="false"
22 |     title
23 |     type="info"
24 |   >
25 |     <template #header>
26 |       <div class="alert-header">
27 |         <img alt="" :src="potatoCry">
28 |         <span>{{ t('common.incompatibility') }}</span>
29 |       </div>
30 |     </template>
31 |     <NSpace align="center" vertical>
32 |       <div style="max-width: 400px">
33 |         {{ t('notification.api-unavailable') }}
34 |       </div>
35 |     </NSpace>
36 |   </NAlert>
37 |   <NAlert
38 |     v-else-if="notificationAccess !== 'granted'"
39 |     class="alert-panel"
40 |     :show-icon="false"
41 |     title
42 |     type="warning"
43 |   >
44 |     <template #header>
45 |       <div class="alert-header">
46 |         <img alt="" :src="potatoNotif">
47 |         <span>{{ t('common.warning') }}</span>
48 |       </div>
49 |     </template>
50 |     <NSpace align="center" vertical>
51 |       <div style="max-width: 400px">
52 |         {{ t('notification.permission-warning') }}
53 |       </div>
54 |       <n-button type="success" @click="requestPermission">
55 |         {{ t('notification.request-permission') }}
56 |       </n-button>
57 |     </NSpace>
58 |   </NAlert>
59 | </template>
60 | 
61 | <style scoped lang="scss">
62 | .alert-panel {
63 |   width: 95%;
64 | 
65 |   .alert-header {
66 |     display: flex;
67 |     align-items: center;
68 |     font-size: 1.3rem;
69 | 
70 |     img {
71 |       width: 30px;
72 |       margin-right: 5px;
73 |     }
74 |   }
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/components/OptionControls.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { t } = useI18n()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="options">
 7 |     <span class="options-title">{{ t('options.title') }}</span>
 8 |     <NSpace class="options-buttons">
 9 |       <LanguageSelector />
10 |       <ThemeSelector />
11 |       <InfoPanel />
12 |     </NSpace>
13 |   </div>
14 | </template>
15 | 
16 | <style scoped lang="scss">
17 | .options {
18 |   margin-bottom: 40px;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 | 
24 |   .options-title {
25 |     font-size: 1.5rem;
26 |   }
27 | 
28 |   .options-buttons {
29 |     margin-top: 5px !important;
30 |     justify-content: center !important;
31 |   }
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/components/PotatoProgress.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { format } from 'date-fns'
 3 | 
 4 | import potatoHappy from '~/assets/potatoHappy.png'
 5 | import potatoNap from '~/assets/potatoNap.png'
 6 | import potatoNote from '~/assets/potatoNote.png'
 7 | import potatoParty from '~/assets/potatoParty.png'
 8 | import { Step } from '~/composables/usePotato'
 9 | import { isDark } from '~/logic'
10 | 
11 | const props = defineProps<{
12 |   step: string
13 |   percentage: number
14 |   remaining: number
15 | }>()
16 | 
17 | const { t } = useI18n()
18 | 
19 | const potatoImage = computed(() => {
20 |   switch (props.step) {
21 |     case Step.work:
22 |       return potatoNote
23 |     case Step.pause:
24 |       return potatoNap
25 |     case Step.done:
26 |       return potatoParty
27 |     case Step.ready:
28 |       return potatoHappy
29 |     default:
30 |       return ''
31 |   }
32 | })
33 | 
34 | const remainingTime = computed(() => format(props.remaining * 1000, 'm:ss'))
35 | </script>
36 | 
37 | <template>
38 |   <NSpace align="center" vertical>
39 |     <NProgress
40 |       :aria-label="t('timer')"
41 |       :color="isDark ? 'white' : 'black'"
42 |       :percentage="percentage"
43 |       processing
44 |       style="width: 250px"
45 |       type="circle"
46 |     >
47 |       <div>
48 |         <img alt="" :src="potatoImage" style="width: 128px">
49 |         <div class="remaining-time">
50 |           {{ remainingTime }}
51 |         </div>
52 |       </div>
53 |     </NProgress>
54 |     <div class="step">
55 |       {{ t(`steps.${step}`) }}
56 |     </div>
57 |   </NSpace>
58 | </template>
59 | 
60 | <style scoped>
61 | .remaining-time {
62 |   font-size: 1.8rem;
63 |   text-align: center;
64 |   border-top: 1px solid var(--text-color);
65 | }
66 | 
67 | .step {
68 |   font-size: 1.8rem;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/PotatoSettings.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { OnClickOutside } from '@vueuse/components'
  3 | import { FocusTrap } from 'focus-trap-vue'
  4 | 
  5 | import potatoDetect from '~/assets/potatoDetect.png'
  6 | import usePotatoStorage, {
  7 |   DEFAULT_LONG_PAUSE,
  8 |   DEFAULT_PAUSE_TIME,
  9 |   DEFAULT_WORK_TIME,
 10 | } from '~/composables/usePotatoStorage'
 11 | 
 12 | interface Props {
 13 |   disabled: boolean
 14 | }
 15 | const props = withDefaults(defineProps<Props>(), {
 16 |   disabled: false,
 17 | })
 18 | 
 19 | const emit = defineEmits<{
 20 |   (
 21 |     event: 'changeTimes',
 22 |     payload: { workTime: number; pauseTime: number; longPause: number }
 23 |   ): void
 24 | }>()
 25 | 
 26 | const { t } = useI18n()
 27 | 
 28 | const {
 29 |   workTime: storedWorkTime,
 30 |   pauseTime: storedPauseTime,
 31 |   longPause: storedLongPause,
 32 | } = usePotatoStorage()
 33 | 
 34 | const workTime = ref<number>(storedWorkTime.value / 60)
 35 | const pauseTime = ref<number>(storedPauseTime.value / 60)
 36 | const longPause = ref<number>(storedLongPause.value / 60)
 37 | const active = ref(false)
 38 | 
 39 | const show = computed(() => active.value && !props.disabled)
 40 | 
 41 | function save() {
 42 |   if (workTime.value > 0 && pauseTime.value > 0 && longPause.value > 0) {
 43 |     emit('changeTimes', {
 44 |       workTime: workTime.value * 60,
 45 |       pauseTime: pauseTime.value * 60,
 46 |       longPause: longPause.value * 60,
 47 |     })
 48 | 
 49 |     active.value = false
 50 |   }
 51 | }
 52 | 
 53 | function reset() {
 54 |   workTime.value = DEFAULT_WORK_TIME / 60
 55 |   pauseTime.value = DEFAULT_PAUSE_TIME / 60
 56 |   longPause.value = DEFAULT_LONG_PAUSE / 60
 57 | }
 58 | 
 59 | function validator(v: number) {
 60 |   return v > 0
 61 | }
 62 | </script>
 63 | 
 64 | <template>
 65 |   <NButton
 66 |     id="settings-button"
 67 |     :aria-label="t('settings.title')"
 68 |     circle
 69 |     :disabled="props.disabled"
 70 |     size="large"
 71 |     :style="{ marginLeft: '12px' }"
 72 |     @click="active = true"
 73 |   >
 74 |     <template #icon>
 75 |       <NIcon>
 76 |         <carbon-settings />
 77 |       </NIcon>
 78 |     </template>
 79 |   </NButton>
 80 |   <NModal :show="show">
 81 |     <OnClickOutside @trigger="active = false">
 82 |       <FocusTrap
 83 |         fallback-focus="#settings-button"
 84 |         initial-focus="#work-time-input > div > div > div > input"
 85 |         :value="show"
 86 |         @deactivate="active = false"
 87 |       >
 88 |         <!-- container div needed for focus-trap -->
 89 |         <div>
 90 |           <NCard class="modal" :segmented="{ content: 'hard' }" size="small">
 91 |             <template #header>
 92 |               <div class="modal-header">
 93 |                 <img alt="" :src="potatoDetect">
 94 |                 <span>{{ t('settings.title') }}</span>
 95 |               </div>
 96 |             </template>
 97 |             <template #default>
 98 |               <div class="modal-body">
 99 |                 <label class="modal-input">
100 |                   {{ t('settings.work-time') }}
101 |                   <NInputNumber
102 |                     id="work-time-input"
103 |                     v-model:value="workTime"
104 |                     :step="5"
105 |                     :validator="validator"
106 |                   />
107 |                 </label>
108 |                 <label class="modal-input">
109 |                   {{ t('settings.pause-time') }}
110 |                   <NInputNumber
111 |                     v-model:value="pauseTime"
112 |                     :step="5"
113 |                     :validator="validator"
114 |                   />
115 |                 </label>
116 |                 <label class="modal-input">
117 |                   {{ t('settings.long-pause') }}
118 |                   <NInputNumber
119 |                     v-model:value="longPause"
120 |                     :step="5"
121 |                     :validator="validator"
122 |                   />
123 |                 </label>
124 |                 <NButton class="modal-reset" @click="reset">
125 |                   {{ t('settings.reset') }}
126 |                 </NButton>
127 |               </div>
128 |             </template>
129 |             <template #action>
130 |               <div class="modal-actions">
131 |                 <NButton
132 |                   id="cancel-button"
133 |                   size="small"
134 |                   type="default"
135 |                   @click="active = false"
136 |                 >
137 |                   {{ t('settings.cancel') }}
138 |                 </NButton>
139 |                 <NButton size="small" type="success" @click="save">
140 |                   {{ t('settings.save') }}
141 |                 </NButton>
142 |               </div>
143 |             </template>
144 |           </NCard>
145 |         </div>
146 |       </FocusTrap>
147 |     </OnClickOutside>
148 |   </NModal>
149 | </template>
150 | 
151 | <style scoped lang="scss">
152 | .modal {
153 |   max-width: 320px;
154 | 
155 |   .modal-header {
156 |     display: flex;
157 |     align-items: center;
158 |     font-size: 1.3rem;
159 | 
160 |     img {
161 |       width: 30px;
162 |       margin-right: 5px;
163 |     }
164 |   }
165 | 
166 |   .modal-body {
167 |     display: flex;
168 |     flex-direction: column;
169 | 
170 |     .modal-reset {
171 |       margin-top: 5px;
172 |     }
173 | 
174 |     .modal-input {
175 |       display: inline-block;
176 |       margin-bottom: 10px;
177 |     }
178 |   }
179 | 
180 |   .modal-actions {
181 |     display: flex;
182 |     justify-content: flex-end;
183 | 
184 |     button:not(:last-child) {
185 |       margin-right: 8px;
186 |     }
187 |   }
188 | }
189 | </style>
190 | 


--------------------------------------------------------------------------------
/src/components/PotatoTimer.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import useNotifier from '~/composables/useNotifier'
 3 | import usePotato, { Step } from '~/composables/usePotato'
 4 | 
 5 | const { t } = useI18n()
 6 | const {
 7 |   toggle,
 8 |   reset,
 9 |   currentStep,
10 |   currentRemaining,
11 |   currentPercentage,
12 |   running,
13 |   changeTimes,
14 | } = usePotato()
15 | 
16 | useNotifier(currentStep)
17 | </script>
18 | 
19 | <template>
20 |   <div class="potato-timer">
21 |     <PotatoProgress
22 |       :percentage="currentPercentage"
23 |       :remaining="currentRemaining"
24 |       :step="currentStep"
25 |     />
26 |     <div class="controls">
27 |       <NButton
28 |         :aria-label="running ? t('common.pause') : t('common.resume')"
29 |         circle
30 |         :disabled="currentStep === Step.done"
31 |         size="large"
32 |         @click="toggle"
33 |       >
34 |         <template #icon>
35 |           <NIcon>
36 |             <carbon-pause v-if="running" />
37 |             <carbon-play v-else />
38 |           </NIcon>
39 |         </template>
40 |       </NButton>
41 |       <ResetButton
42 |         :confirm="currentStep === Step.work || currentStep === Step.pause"
43 |         :disabled="running || currentStep === Step.ready"
44 |         @click="reset"
45 |       />
46 |       <PotatoSettings
47 |         :disabled="currentStep !== Step.ready"
48 |         @change-times="changeTimes"
49 |       />
50 |     </div>
51 |   </div>
52 | </template>
53 | 
54 | <style scoped lang="scss">
55 | .controls {
56 |   display: flex;
57 |   justify-content: center !important;
58 |   margin-top: 10px;
59 | }
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/components/ResetButton.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import { OnClickOutside } from '@vueuse/components'
  3 | import { FocusTrap } from 'focus-trap-vue'
  4 | 
  5 | const props = withDefaults(defineProps<{
  6 |   confirm: boolean
  7 |   disabled: boolean
  8 | }>(), {
  9 |   disabled: false,
 10 | })
 11 | 
 12 | const emit = defineEmits<{
 13 |   (event: 'click'): void
 14 | }>()
 15 | 
 16 | const { t } = useI18n()
 17 | 
 18 | const show = ref(false)
 19 | 
 20 | const click = () => {
 21 |   if (props.confirm)
 22 |     show.value = !show.value
 23 |   else emit('click')
 24 | }
 25 | 
 26 | const reset = () => {
 27 |   emit('click')
 28 |   show.value = false
 29 | }
 30 | </script>
 31 | 
 32 | <template>
 33 |   <NPopover :show="show" :style="{ padding: 0 }" trigger="manual" width="260">
 34 |     <template #trigger>
 35 |       <NButton
 36 |         id="trigger-button"
 37 |         :aria-label="t('common.reset')"
 38 |         circle
 39 |         :disabled="props.disabled"
 40 |         size="large"
 41 |         :style="{ marginLeft: '12px' }"
 42 |         @click="click"
 43 |       >
 44 |         <template #icon>
 45 |           <NIcon>
 46 |             <carbon-reset />
 47 |           </NIcon>
 48 |         </template>
 49 |       </NButton>
 50 |     </template>
 51 |     <OnClickOutside @trigger="show = false">
 52 |       <FocusTrap
 53 |         v-model="show"
 54 |         fallback-focus="#trigger-button"
 55 |         initial-focus="#cancel-button"
 56 |         @deactivate="show = false"
 57 |       >
 58 |         <div class="reset-popover">
 59 |           <div class="popover-body" role="alert">
 60 |             {{ t('reset.message') }}
 61 |           </div>
 62 |           <div class="popover-actions">
 63 |             <NButton
 64 |               id="cancel-button"
 65 |               size="small"
 66 |               type="default"
 67 |               @click="show = false"
 68 |             >
 69 |               {{ t('reset.cancel') }}
 70 |             </NButton>
 71 |             <NButton size="small" type="error" @click="reset">
 72 |               {{ t('reset.confirm') }}
 73 |             </NButton>
 74 |           </div>
 75 |         </div>
 76 |       </FocusTrap>
 77 |     </OnClickOutside>
 78 |   </NPopover>
 79 | </template>
 80 | 
 81 | <style scoped lang="scss">
 82 | .reset-popover {
 83 |   padding: 8px;
 84 |   display: flex;
 85 |   flex-direction: column;
 86 | 
 87 |   .popover-body {
 88 |     display: flex;
 89 |   }
 90 | 
 91 |   .popover-actions {
 92 |     display: flex;
 93 |     align-self: flex-end;
 94 |     margin-top: 8px;
 95 | 
 96 |     button:not(:last-child) {
 97 |       margin-right: 8px;
 98 |     }
 99 |   }
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/components/TaskList.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | import useTasks, { type Task } from '~/composables/useTasks'
  3 | 
  4 | import potatoLost from '~/assets/potatoLost.png'
  5 | 
  6 | const { t } = useI18n()
  7 | const tasks = useTasks()
  8 | 
  9 | const newTask = ref('')
 10 | 
 11 | const taskStyle = (task: Task) => ({
 12 |   maxWidth: '190px',
 13 |   textDecoration: task.done ? 'line-through' : 'none',
 14 |   fontStyle: task.done ? 'italic' : 'normal',
 15 |   fontSize: '1rem',
 16 | })
 17 | 
 18 | function addTask() {
 19 |   tasks.value.push({ text: newTask.value, done: false })
 20 |   newTask.value = ''
 21 | }
 22 | </script>
 23 | 
 24 | <template>
 25 |   <div class="tasks">
 26 |     <NCard class="tasks-list" size="small">
 27 |       <div v-if="!tasks.length" class="tasks-empty">
 28 |         <img alt="" :src="potatoLost">
 29 |         <NElement tag="span">
 30 |           {{ t('tasks.empty') }}
 31 |         </NElement>
 32 |       </div>
 33 |       <NList v-else :style="{ margin: 0 }">
 34 |         <NListItem v-for="(task, idx) in tasks" :key="idx">
 35 |           <NCheckbox v-model:checked="task.done">
 36 |             <NEllipsis :style="taskStyle(task)">
 37 |               {{ task.text }}
 38 |             </NEllipsis>
 39 |           </NCheckbox>
 40 |           <template #suffix>
 41 |             <NButton
 42 |               :aria-label="t('tasks.delete', { task: task.text })"
 43 |               circle
 44 |               ghost
 45 |               size="small"
 46 |               text
 47 |               type="error"
 48 |               @click="() => tasks.splice(idx, 1)"
 49 |             >
 50 |               <template #icon>
 51 |                 <NIcon>
 52 |                   <carbon-delete />
 53 |                 </NIcon>
 54 |               </template>
 55 |             </NButton>
 56 |           </template>
 57 |         </NListItem>
 58 |       </NList>
 59 |       <template #action>
 60 |         <div class="tasks-actions">
 61 |           <NInputGroup>
 62 |             <label :style="{ width: '100%' }">
 63 |               <span class="sr-only">{{ t('tasks.add') }}</span>
 64 |               <NInput
 65 |                 id="add-task"
 66 |                 v-model:value="newTask"
 67 |                 placeholder
 68 |                 round
 69 |                 @keypress.enter="addTask"
 70 |               />
 71 |             </label>
 72 |             <NButton
 73 |               :aria-label="t('tasks.add')"
 74 |               circle
 75 |               :disabled="!newTask"
 76 |               @click="addTask"
 77 |             >
 78 |               <template #icon>
 79 |                 <NIcon size="large">
 80 |                   <carbon-add />
 81 |                 </NIcon>
 82 |               </template>
 83 |             </NButton>
 84 |           </NInputGroup>
 85 |         </div>
 86 |       </template>
 87 |     </NCard>
 88 |   </div>
 89 | </template>
 90 | 
 91 | <style scoped lang="scss">
 92 | .n-list-item__suffix {
 93 |   margin-left: 0;
 94 | }
 95 | .tasks {
 96 |   display: flex;
 97 |   flex-direction: column;
 98 |   align-items: center;
 99 |   width: 300px;
100 | 
101 |   .tasks-list {
102 |     margin-top: 5px;
103 | 
104 |     .tasks-empty {
105 |       display: flex;
106 |       flex-direction: column;
107 |       align-items: center;
108 |       justify-content: center;
109 | 
110 |       img {
111 |         width: 50px;
112 |         margin-bottom: 5px;
113 |       }
114 | 
115 |       span {
116 |         color: var(--text-color-2);
117 |       }
118 |     }
119 |   }
120 | }
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/components/ThemeSelector.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { isDark, toggleDark } from '~/logic'
 3 | 
 4 | const { t } = useI18n()
 5 | 
 6 | const label = computed(() =>
 7 |   t('options.change-theme', {
 8 |     current: isDark.value ? t('theme.dark') : t('theme.light'),
 9 |   }),
10 | )
11 | </script>
12 | 
13 | <template>
14 |   <NButton :aria-label="label" circle size="large" @click="() => toggleDark()">
15 |     <template #icon>
16 |       <NIcon>
17 |         <carbon-moon v-if="isDark" />
18 |         <carbon-sun v-else />
19 |       </NIcon>
20 |     </template>
21 |   </NButton>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/src/composables/useNotifier.ts:
--------------------------------------------------------------------------------
 1 | import { usePermission } from '@vueuse/core'
 2 | import { type ComputedRef } from 'vue'
 3 | 
 4 | import potatoNap from '~/assets/potatoNap.png'
 5 | import potatoNote from '~/assets/potatoNote.png'
 6 | import potatoParty from '~/assets/potatoParty.png'
 7 | import { Step } from '~/composables/usePotato'
 8 | 
 9 | export default function useNotifier(step: ComputedRef<Step>): void {
10 |   const notificationAccess = usePermission('notifications')
11 |   const { t } = useI18n()
12 | 
13 |   watch(step, (next, prev) => {
14 |     if (
15 |       !window.Notification
16 |       || notificationAccess.value !== 'granted'
17 |       || prev === Step.ready
18 |     )
19 |       return
20 |     switch (next) {
21 |       case Step.work:
22 |         return new Notification(t('steps.work'), { icon: potatoNote })
23 |       case Step.pause:
24 |         return new Notification(t('steps.pause'), { icon: potatoNap })
25 |       case Step.done:
26 |         return new Notification(t('steps.done'), { icon: potatoParty })
27 |     }
28 |   })
29 | }
30 | 


--------------------------------------------------------------------------------
/src/composables/usePotato.ts:
--------------------------------------------------------------------------------
  1 | import usePersistentStopwatch from 'use-persistent-stopwatch'
  2 | import { type ComputedRef, type Ref } from 'vue'
  3 | 
  4 | import usePotatoStorage from '~/composables/usePotatoStorage'
  5 | 
  6 | export interface TimeSettings {
  7 |   workTime: number
  8 |   pauseTime: number
  9 |   longPause: number
 10 | }
 11 | 
 12 | export enum Step {
 13 |   ready = 'ready',
 14 |   done = 'done',
 15 |   work = 'work',
 16 |   pause = 'pause',
 17 | }
 18 | 
 19 | export interface Potato {
 20 |   running: ComputedRef<boolean>
 21 |   currentStep: ComputedRef<Step>
 22 |   currentDuration: ComputedRef<number>
 23 |   currentRemaining: ComputedRef<number>
 24 |   currentPercentage: ComputedRef<number>
 25 |   workTime: Ref<number>
 26 |   reset: () => void
 27 |   toggle: () => void
 28 |   changeTimes: (ts: TimeSettings) => void
 29 | }
 30 | 
 31 | function usePotato(): Potato {
 32 |   const { elapsed, pause, resume, reset, running } = usePersistentStopwatch(
 33 |     'potato',
 34 |     { interval: 1 },
 35 |   )
 36 | 
 37 |   const { workTime, pauseTime, longPause } = usePotatoStorage()
 38 | 
 39 |   const elapsedSeconds = computed(() => Math.floor(elapsed.value / 1000))
 40 | 
 41 |   const timestamps = computed(() =>
 42 |     [0, 1, 2, 3]
 43 |       .map(val => val * (workTime.value + pauseTime.value) + workTime.value)
 44 |       .reduce(
 45 |         (acc: number[], cur: number, idx: number) => [
 46 |           ...acc,
 47 |           cur,
 48 |           idx === 3 ? cur + longPause.value : cur + pauseTime.value,
 49 |         ],
 50 |         [],
 51 |       ),
 52 |   )
 53 | 
 54 |   const durations = computed(() =>
 55 |     timestamps.value.map((val: number, idx: number, arr: number[]) =>
 56 |       idx ? val - arr[idx - 1] : val,
 57 |     ),
 58 |   )
 59 | 
 60 |   const currentIndex = computed(() =>
 61 |     timestamps.value.findIndex((val: number) => {
 62 |       return elapsedSeconds.value < val
 63 |     }),
 64 |   )
 65 | 
 66 |   const currentStep = computed(() =>
 67 |     elapsed.value === 0
 68 |       ? Step.ready
 69 |       : currentIndex.value === -1
 70 |         ? Step.done
 71 |         : currentIndex.value % 2 === 0
 72 |           ? Step.work
 73 |           : Step.pause,
 74 |   )
 75 | 
 76 |   const potatoRunning = computed(
 77 |     () => running.value && [Step.work, Step.pause].includes(currentStep.value),
 78 |   )
 79 | 
 80 |   const currentDuration = computed(() =>
 81 |     currentIndex.value < 0
 82 |       ? durations.value[durations.value.length - 1]
 83 |       : durations.value[currentIndex.value],
 84 |   )
 85 | 
 86 |   const currentRemaining = computed(() =>
 87 |     currentIndex.value < 0
 88 |       ? 0
 89 |       : timestamps.value[currentIndex.value] - elapsedSeconds.value,
 90 |   )
 91 | 
 92 |   const currentPercentage = computed(
 93 |     () => 100 - (currentRemaining.value / currentDuration.value) * 100,
 94 |   )
 95 | 
 96 |   function toggle() {
 97 |     if (running.value)
 98 |       pause()
 99 |     else if (currentIndex.value >= 0)
100 |       resume()
101 |   }
102 | 
103 |   function changeTimes(settings: TimeSettings) {
104 |     workTime.value = settings.workTime
105 |     pauseTime.value = settings.pauseTime
106 |     longPause.value = settings.longPause
107 |     reset()
108 |   }
109 | 
110 |   onMounted(() => {
111 |     if (currentIndex.value < 0)
112 |       pause()
113 |   })
114 | 
115 |   watch(currentIndex, (v) => {
116 |     if (v < 0)
117 |       pause()
118 |   })
119 | 
120 |   return {
121 |     running: potatoRunning,
122 |     reset,
123 |     currentStep,
124 |     currentDuration,
125 |     currentRemaining,
126 |     currentPercentage,
127 |     toggle,
128 |     workTime,
129 |     changeTimes,
130 |   }
131 | }
132 | 
133 | export default usePotato
134 | 


--------------------------------------------------------------------------------
/src/composables/usePotatoStorage.ts:
--------------------------------------------------------------------------------
 1 | import { useLocalStorage } from '@vueuse/core'
 2 | import { type Ref } from 'vue'
 3 | 
 4 | export const STORAGE_WORK_TIME = 'potato-work-time'
 5 | export const STORAGE_PAUSE_TIME = 'potato-pause-time'
 6 | export const STORAGE_LONG_PAUSE = 'potato-long-pause'
 7 | export const DEFAULT_WORK_TIME = 25 * 60
 8 | export const DEFAULT_PAUSE_TIME = 5 * 60
 9 | export const DEFAULT_LONG_PAUSE = 15 * 60
10 | 
11 | export interface PotatoStorage {
12 |   workTime: Ref<number>
13 |   pauseTime: Ref<number>
14 |   longPause: Ref<number>
15 | }
16 | 
17 | function usePotatoStorage(): PotatoStorage {
18 |   const workTime = useLocalStorage(STORAGE_WORK_TIME, DEFAULT_WORK_TIME)
19 |   const pauseTime = useLocalStorage(STORAGE_PAUSE_TIME, DEFAULT_PAUSE_TIME)
20 |   const longPause = useLocalStorage(STORAGE_LONG_PAUSE, DEFAULT_LONG_PAUSE)
21 | 
22 |   return {
23 |     workTime,
24 |     pauseTime,
25 |     longPause,
26 |   }
27 | }
28 | 
29 | export default usePotatoStorage
30 | 


--------------------------------------------------------------------------------
/src/composables/useTasks.ts:
--------------------------------------------------------------------------------
 1 | import { useLocalStorage } from '@vueuse/core'
 2 | import { type Ref } from 'vue'
 3 | 
 4 | export interface Task {
 5 |   text: string
 6 |   done: boolean
 7 | }
 8 | 
 9 | export default function useTasks(): Ref<Task[]> {
10 |   const tasks: Ref<Task[]> = useLocalStorage('potato-tasks', [])
11 | 
12 |   return tasks
13 | }
14 | 


--------------------------------------------------------------------------------
/src/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { t } = useI18n()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="layout">
 7 |     <h1 class="header">
 8 |       POTATO TIMER
 9 |     </h1>
10 |     <div class="view">
11 |       <slot />
12 |     </div>
13 | 
14 |     <div class="footer">
15 |       <option-controls />
16 |       <i18n-t keypath="footer.credits" tag="div">
17 |         <template #robynn>
18 |           <n-element
19 |             href="https://twitter.com/RFrauhn"
20 |             rel="noreferrer noopener"
21 |             tag="a"
22 |             target="_blank"
23 |           >
24 |             {{ t('footer.robynn') }}
25 |           </n-element>
26 |         </template>
27 |         <template #hels>
28 |           <n-element
29 |             href="https://twitter.com/hels_draws"
30 |             rel="noreferrer noopener"
31 |             tag="a"
32 |             target="_blank"
33 |           >
34 |             {{ t('footer.hels') }}
35 |           </n-element>
36 |         </template>
37 |       </i18n-t>
38 |       <i18n-t keypath="footer.made" tag="div">
39 |         <template #praz>
40 |           <n-element
41 |             href="https://github.com/prazdevs"
42 |             rel="noreferrer noopener"
43 |             tag="a"
44 |             target="_blank"
45 |           >
46 |             {{ t('footer.praz') }}
47 |           </n-element>
48 |         </template>
49 |       </i18n-t>
50 |     </div>
51 |   </div>
52 | </template>
53 | 
54 | <style scoped lang="scss">
55 | .layout {
56 |   height: 100vh;
57 |   display: flex;
58 |   flex-direction: column;
59 |   align-items: center;
60 | 
61 |   .header {
62 |     font-size: 3rem;
63 |     margin-bottom: 20px;
64 |     text-align: center;
65 |     margin: 0;
66 |   }
67 | 
68 |   .view {
69 |     width: 100%;
70 |     max-width: 450px;
71 |   }
72 | 
73 |   .footer {
74 |     margin-top: auto;
75 |     padding: 20px 0;
76 |     text-align: center;
77 | 
78 |     a {
79 |       color: var(--text-color-base);
80 | 
81 |       &:hover,
82 |       &:focus {
83 |         color: var(--primary-color-hover);
84 |       }
85 |     }
86 |   }
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/logic/dark.ts:
--------------------------------------------------------------------------------
1 | import { useDark, useToggle } from '@vueuse/core'
2 | 
3 | export const isDark = useDark()
4 | export const toggleDark = useToggle(isDark)
5 | 


--------------------------------------------------------------------------------
/src/logic/index.ts:
--------------------------------------------------------------------------------
1 | export * from './dark'
2 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createHead } from '@vueuse/head'
 2 | import { createApp } from 'vue'
 3 | import { createI18n } from 'vue-i18n'
 4 | 
 5 | import messages from '@intlify/vite-plugin-vue-i18n/messages'
 6 | 
 7 | import App from './App.vue'
 8 | 
 9 | const app = createApp(App)
10 | 
11 | //* @vueuse/head
12 | const head = createHead()
13 | app.use(head)
14 | 
15 | //* vue-i18n
16 | const i18n = createI18n({
17 |   legacy: false,
18 |   locale: 'fr',
19 |   messages,
20 | })
21 | app.use(i18n)
22 | 
23 | app.mount('#app')
24 | 


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="index-container">
 3 |     <NotificationsWarning />
 4 |     <PotatoTimer />
 5 |     <TaskList />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <style scoped lang="scss">
10 | .index-container {
11 |   display: flex;
12 |   flex-direction: column;
13 |   align-items: center;
14 |   justify-content: center;
15 | 
16 |   > * {
17 |     margin-top: 20px;
18 |     margin-bottom: 20px;
19 |   }
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/src/shims.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import type { ComponentOptions } from 'vue'
3 | 
4 |   const component: ComponentOptions
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "esModuleInterop": true,
 5 |     "forceConsistentCasingInFileNames": true,
 6 |     "incremental": false,
 7 |     "lib": ["DOM", "ESNext"],
 8 |     "module": "ESNext",
 9 |     "moduleResolution": "node",
10 |     "noUnusedLocals": true,
11 |     "jsx": "preserve",
12 |     "paths": {
13 |       "~/*": ["src/*"]
14 |     },
15 |     "resolveJsonModule": true,
16 |     "skipLibCheck": true,
17 |     "strict": true,
18 |     "strictNullChecks": true,
19 |     "target": "es2016",
20 |     "types": [
21 |       "vite/client",
22 |       "vite-plugin-pages/client",
23 |       "vite-plugin-vue-layouts/client",
24 |       "@intlify/vite-plugin-vue-i18n/client"
25 |     ]
26 |   },
27 |   "exclude": ["dist", "node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import VueI18n from '@intlify/vite-plugin-vue-i18n'
 3 | import Vue from '@vitejs/plugin-vue'
 4 | import AutoImport from 'unplugin-auto-import/vite'
 5 | import IconsResolver from 'unplugin-icons/resolver'
 6 | import Icons from 'unplugin-icons/vite'
 7 | import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
 8 | import Components from 'unplugin-vue-components/vite'
 9 | import { defineConfig } from 'vite'
10 | import Fonts from 'vite-plugin-fonts'
11 | import { VitePWA } from 'vite-plugin-pwa'
12 | 
13 | export default defineConfig({
14 |   resolve: {
15 |     alias: {
16 |       '~/': `${path.resolve(__dirname, 'src')}/`,
17 |     },
18 |   },
19 |   plugins: [
20 |     Vue(),
21 |     Components({
22 |       dts: 'src/components.d.ts',
23 |       resolvers: [
24 |         NaiveUiResolver(),
25 |         IconsResolver({
26 |           componentPrefix: '',
27 |         }),
28 |       ],
29 |     }),
30 |     Fonts({
31 |       google: {
32 |         families: ['Quicksand'],
33 |       },
34 |     }),
35 |     AutoImport({
36 |       dts: 'src/auto-imports.d.ts',
37 |       imports: ['vue', 'vue-i18n', 'vue-router'],
38 |     }),
39 |     Icons({}),
40 |     VitePWA({
41 |       registerType: 'autoUpdate',
42 |       manifest: {
43 |         name: 'Potato Timer',
44 |         short_name: 'Potato Timer',
45 |         theme_color: '#ffffff',
46 |         icons: [
47 |           {
48 |             src: '/pwa-192x192.png',
49 |             sizes: '192x192',
50 |             type: 'image/png',
51 |           },
52 |           {
53 |             src: '/pwa-512x512.png',
54 |             sizes: '512x512',
55 |             type: 'image/png',
56 |           },
57 |           {
58 |             src: '/pwa-512x512.png',
59 |             sizes: '512x512',
60 |             type: 'image/png',
61 |             purpose: 'any maskable',
62 |           },
63 |         ],
64 |       },
65 |     }),
66 |     VueI18n({
67 |       include: [path.resolve(__dirname, 'locales/**')],
68 |     }),
69 |   ],
70 | })
71 | 


--------------------------------------------------------------------------------