quasar

2026-04-20 05:52:21 +02:00 · 2025-06-04 10:18:48 +08:00 · 2025-06-04 10:18:48 +08:00 · e12f2c2b71
commit e12f2c2b71
parent af4b786b20
87 changed files with 21790 additions and 0 deletions
--- a/komga/src/main/resources/application-dev.yml
+++ b/komga/src/main/resources/application-dev.yml
@ -6,6 +6,7 @@ komga:
  cors.allowed-origins:
    - http://localhost:8081
    - http://localhost:3000
+    - http://localhost:8085
    - https://komga.org
  oauth2-account-creation: false
  config-dir: ${rootDir}/config-dir
--- a/tsugini/.editorconfig
+++ b/tsugini/.editorconfig
@ -0,0 +1,7 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/tsugini/.eslintrc-auto-import.json
+++ b/tsugini/.eslintrc-auto-import.json
@ -0,0 +1,80 @@
+{
+  "globals": {
+    "Component": true,
+    "ComponentPublicInstance": true,
+    "ComputedRef": true,
+    "DirectiveBinding": true,
+    "EffectScope": true,
+    "ExtractDefaultPropTypes": true,
+    "ExtractPropTypes": true,
+    "ExtractPublicPropTypes": true,
+    "InjectionKey": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "PropType": true,
+    "Ref": true,
+    "Slot": true,
+    "Slots": true,
+    "VNode": true,
+    "WritableComputedRef": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeRouteLeave": true,
+    "onBeforeRouteUpdate": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "onWatcherCleanup": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "toValue": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useId": true,
+    "useModel": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "useTemplateRef": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}
--- a/tsugini/.gitignore
+++ b/tsugini/.gitignore
@ -0,0 +1,33 @@
+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# local .env files
+.env.local*
--- a/tsugini/.npmrc
+++ b/tsugini/.npmrc
@ -0,0 +1,5 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false
+# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
+resolution-mode=highest
--- a/tsugini/.prettierrc.json
+++ b/tsugini/.prettierrc.json
@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "all",
+  "semi": false,
+  "singleAttributePerLine": true
+}
--- a/tsugini/.vscode/extensions.json
+++ b/tsugini/.vscode/extensions.json
@ -0,0 +1,15 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur",
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}
--- a/tsugini/.vscode/settings.json
+++ b/tsugini/.vscode/settings.json
@ -0,0 +1,9 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
--- a/tsugini/README.md
+++ b/tsugini/README.md
@ -0,0 +1,43 @@
+# Komga (komga-webui-v2)
+
+Komga client
+
+## Install the dependencies
+
+```bash
+yarn
+# or
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+
+```bash
+quasar dev
+```
+
+### Lint the files
+
+```bash
+yarn lint
+# or
+npm run lint
+```
+
+### Format the files
+
+```bash
+yarn format
+# or
+npm run format
+```
+
+### Build the app for production
+
+```bash
+quasar build
+```
+
+### Customize the configuration
+
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).
--- a/tsugini/eslint.config.js
+++ b/tsugini/eslint.config.js
@ -0,0 +1,92 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-vite/eslint'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import prettierSkipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default defineConfigWithVueTs(
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended() already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    ignores: ['**/generated/openapi/komga.d.ts'],
+  },
+
+  pluginQuasar.configs.recommended(),
+  js.configs.recommended,
+
+  /**
+   * https://eslint.vuejs.org
+   *
+   * pluginVue.configs.base
+   *   -> Settings and rules to enable correct ESLint parsing.
+   * pluginVue.configs[ 'flat/essential']
+   *   -> base, plus rules to prevent errors or unintended behavior.
+   * pluginVue.configs["flat/strongly-recommended"]
+   *   -> Above, plus rules to considerably improve code readability and/or dev experience.
+   * pluginVue.configs["flat/recommended"]
+   *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
+   */
+  pluginVue.configs['flat/essential'],
+
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    },
+  },
+  // https://github.com/vuejs/eslint-config-typescript
+  vueTsConfigs.recommendedTypeChecked,
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly', // BEX related
+        definePage: 'readonly', // Komga: https://uvr.esm.is/guide/eslint.html
+      },
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+
+      // Komga: custom rules
+      'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { caughtErrors: 'all', caughtErrorsIgnorePattern: '^ignore' },
+      ],
+      'no-empty': ['error', { allowEmptyCatch: true }],
+    },
+  },
+
+  {
+    files: ['src-pwa/custom-service-worker.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+
+  prettierSkipFormatting,
+)
--- a/tsugini/index.html
+++ b/tsugini/index.html
@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+    <head>
+        <title><%= productName %></title>
+
+        <meta charset="utf-8" />
+        <meta
+            name="description"
+            content="<%= productDescription %>"
+        />
+        <meta
+            name="format-detection"
+            content="telephone=no"
+        />
+        <meta
+            name="msapplication-tap-highlight"
+            content="no"
+        />
+        <meta
+            name="viewport"
+            content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+        />
+
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="128x128"
+            href="icons/favicon-128x128.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="96x96"
+            href="icons/favicon-96x96.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="icons/favicon-32x32.png"
+        />
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="16x16"
+            href="icons/favicon-16x16.png"
+        />
+        <link
+            rel="icon"
+            type="image/ico"
+            href="favicon.ico"
+        />
+    </head>
+    <body>
+        <!-- quasar:entry-point -->
+    </body>
+</html>
--- a/tsugini/openapi-generator.ts
+++ b/tsugini/openapi-generator.ts
@ -0,0 +1,25 @@
+import fs from 'node:fs'
+import openapiTS, { astToString } from 'openapi-typescript'
+import ts from 'typescript'
+
+// From https://openapi-ts.dev/node
+// We use the Node.js API as the CLI does not support Date types
+
+const mySchema = new URL('../komga/docs/openapi.json', import.meta.url)
+
+const DATE = ts.factory.createTypeReferenceNode(ts.factory.createIdentifier('Date')) // `Date`
+const NULL = ts.factory.createLiteralTypeNode(ts.factory.createNull()) // `null`
+
+const ast = await openapiTS(mySchema, {
+  transform(schemaObject) {
+    if (schemaObject.format === 'date-time') {
+      return schemaObject.nullable ? ts.factory.createUnionTypeNode([DATE, NULL]) : DATE
+    }
+  },
+})
+
+const contents = astToString(ast)
+
+// write to file
+fs.mkdirSync('./src/generated/openapi', { recursive: true })
+fs.writeFileSync('./src/generated/openapi/komga.d.ts', contents)
--- a/tsugini/package-lock.json
+++ b/tsugini/package-lock.json
--- a/tsugini/package.json
+++ b/tsugini/package.json
@ -0,0 +1,55 @@
+{
+  "name": "komga-webui-v2",
+  "version": "0.0.1",
+  "description": "Komga client",
+  "productName": "Komga",
+  "author": "Gauthier Roebroeck <gauthier.roebroeck@gmail.com>",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint -c ./eslint.config.js \"./src*/**/*.{ts,js,cjs,mjs,vue}\"",
+    "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "postinstall": "quasar prepare",
+    "openapi-generate": "npx tsx ./openapi-generator.ts"
+  },
+  "dependencies": {
+    "@pinia/colada": "^0.16.1",
+    "@pinia/colada-plugin-auto-refetch": "^0.1.0",
+    "@quasar/extras": "^1.16.4",
+    "openapi-fetch": "^0.14.0",
+    "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.3.0",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.18",
+    "vue-intl": "^6.5.25",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@quasar/app-vite": "^2.1.0",
+    "@types/node": "^22.15.29",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.4.0",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^9.14.0",
+    "eslint-plugin-vue": "^10.1.0",
+    "globals": "^15.12.0",
+    "openapi-typescript": "^7.8.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.8.3",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.7.0",
+    "unplugin-vue-router": "^0.12.0",
+    "vite-plugin-checker": "^0.9.0",
+    "vite-plugin-vue-layouts-next": "^0.1.3",
+    "vue-tsc": "^2.0.29"
+  },
+  "engines": {
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}
--- a/tsugini/postcss.config.js
+++ b/tsugini/postcss.config.js
@ -0,0 +1,29 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
+  plugins: [
+    // https://github.com/postcss/autoprefixer
+    autoprefixer({
+      overrideBrowserslist: [
+        'last 4 Chrome versions',
+        'last 4 Firefox versions',
+        'last 4 Edge versions',
+        'last 4 Safari versions',
+        'last 4 Android versions',
+        'last 4 ChromeAndroid versions',
+        'last 4 FirefoxAndroid versions',
+        'last 4 iOS versions',
+      ],
+    }),
+
+    // https://github.com/elchininet/postcss-rtlcss
+    // If you want to support RTL css, then
+    // 1. yarn/pnpm/bun/npm install postcss-rtlcss
+    // 2. optionally set quasar.config.js > framework > lang to an RTL language
+    // 3. uncomment the following line (and its import statement above):
+    // rtlcss()
+  ],
+}
--- a/tsugini/public/favicon.ico
+++ b/tsugini/public/favicon.ico
--- a/tsugini/public/icons/favicon-128x128.png
+++ b/tsugini/public/icons/favicon-128x128.png
--- a/tsugini/public/icons/favicon-16x16.png
+++ b/tsugini/public/icons/favicon-16x16.png
--- a/tsugini/public/icons/favicon-32x32.png
+++ b/tsugini/public/icons/favicon-32x32.png
--- a/tsugini/public/icons/favicon-96x96.png
+++ b/tsugini/public/icons/favicon-96x96.png
--- a/tsugini/quasar.config.ts
+++ b/tsugini/quasar.config.ts
@ -0,0 +1,266 @@
+// Configuration for your app
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
+
+import { defineConfig } from '#q-app/wrappers'
+import { VueRouterAutoImports } from 'unplugin-vue-router'
+import { QuasarResolver } from 'unplugin-vue-components/resolvers'
+import { fileURLToPath } from 'node:url'
+
+export default defineConfig((ctx) => {
+  return {
+    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli-vite/boot-files
+    boot: ['colada', 'vue-intl'],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
+    css: ['app.scss'],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      'mdi-v7',
+      // 'fontawesome-v6',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      // 'material-icons', // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build
+    build: {
+      target: {
+        browser: ['es2022', 'firefox115', 'chrome115', 'safari14'],
+        node: 'node20',
+      },
+
+      typescript: {
+        strict: true,
+        vueShim: true,
+        // extendTsConfig (tsConfig) {}
+      },
+
+      // Komga: use 'history' instead of 'hash'
+      vueRouterMode: 'history', // available values: 'hash', 'history'
+      // vueRouterBase,
+      // vueDevtools,
+      // vueOptionsAPI: false,
+
+      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
+
+      // publicPath: '/',
+      // analyze: true,
+      // env: {},
+      // rawDefine: {}
+      // ignorePublicFolder: true,
+      // minify: false,
+      // polyfillModulePreload: true,
+      // distDir
+
+      // extendViteConf (viteConf) {},
+      // viteVuePluginOptions: {},
+
+      // Komga: folder aliases
+      alias: {
+        api: fileURLToPath(new URL('./src/api', import.meta.url)),
+        colada: fileURLToPath(new URL('./src/colada', import.meta.url)),
+        openapi: fileURLToPath(new URL('./src/generated/openapi', import.meta.url)),
+        types: fileURLToPath(new URL('./src/types', import.meta.url)),
+      },
+
+      // Komga: cannot use the import syntax as it breaks the type checker, meaning we cannot use strongly typed options
+      vitePlugins: [
+        [
+          'unplugin-vue-router/vite',
+          {
+            dts: 'src/typed-router.d.ts',
+          },
+        ],
+        ['vite-plugin-vue-layouts-next'],
+        [
+          'unplugin-vue-components/vite',
+          {
+            dts: 'src/components.d.ts',
+            directoryAsNamespace: true,
+            collapseSamePrefixes: true,
+            resolvers: [
+              QuasarResolver(),
+              // VueUseComponentsResolver(),
+              // VueUseDirectiveResolver()
+            ],
+          },
+        ],
+        [
+          'vite-plugin-checker',
+          {
+            vueTsc: true,
+            eslint: {
+              lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
+              useFlatConfig: true,
+            },
+            overlay: false,
+          },
+        ],
+        [
+          'unplugin-auto-import/vite',
+          {
+            imports: ['vue', VueRouterAutoImports],
+            dts: 'src/auto-imports.d.ts',
+            eslintrc: {
+              enabled: true,
+            },
+            vueTemplate: true,
+          },
+        ],
+      ],
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
+    devServer: {
+      // https: true,
+      open: true, // opens browser window automatically
+      port: Object.prototype.hasOwnProperty.call(ctx.mode, 'spa')
+        ? 8085
+        : Object.prototype.hasOwnProperty.call(ctx.mode, 'pwa')
+          ? 8086
+          : 8087,
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework
+    framework: {
+      config: {},
+
+      iconSet: 'mdi-v7', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: ['Notify'],
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://v2.quasar.dev/options/animations
+    animations: [],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
+    // sourceFiles: {
+    //   rootComponent: 'src/App.vue',
+    //   router: 'src/router/index',
+    //   store: 'src/store/index',
+    //   pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
+    //   pwaServiceWorker: 'src-pwa/custom-service-worker',
+    //   pwaManifestFile: 'src-pwa/manifest.json',
+    //   electronMain: 'src-electron/electron-main',
+    //   electronPreload: 'src-electron/electron-preload'
+    //   bexManifestFile: 'src-bex/manifest.json
+    // },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
+    ssr: {
+      prodPort: 3000, // The default port that the production server should use
+      // (gets superseded if process.env.PORT is specified at runtime)
+
+      middlewares: [
+        'render', // keep this as last one
+      ],
+
+      // extendPackageJson (json) {},
+      // extendSSRWebserverConf (esbuildConf) {},
+
+      // manualStoreSerialization: true,
+      // manualStoreSsrContextInjection: true,
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      pwa: false,
+      // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
+
+      // pwaExtendGenerateSWOptions (cfg) {},
+      // pwaExtendInjectManifestOptions (cfg) {}
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
+    pwa: {
+      workboxMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
+      // swFilename: 'sw.js',
+      // manifestFilename: 'manifest.json',
+      // extendManifestJson (json) {},
+      // useCredentialsForManifestTag: true,
+      // injectPwaMetaTags: false,
+      // extendPWACustomSWConf (esbuildConf) {},
+      // extendGenerateSWOptions (cfg) {},
+      // extendInjectManifestOptions (cfg) {}
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true,
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
+    electron: {
+      // extendElectronMainConf (esbuildConf) {},
+      // extendElectronPreloadConf (esbuildConf) {},
+
+      // extendPackageJson (json) {},
+
+      // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
+      preloadScripts: ['electron-preload'],
+
+      // specify the debugging port to use for the Electron app when running in development mode
+      inspectPort: 5858,
+
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'komga-webui-v2',
+      },
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
+    bex: {
+      // extendBexScriptsConf (esbuildConf) {},
+      // extendBexManifestJson (json) {},
+
+      /**
+       * The list of extra scripts (js/ts) not in your bex manifest that you want to
+       * compile and use in your browser extension. Maybe dynamic use them?
+       *
+       * Each entry in the list should be a relative filename to /src-bex/
+       *
+       * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
+       */
+      extraScripts: [],
+    },
+  }
+})
--- a/tsugini/src/App.vue
+++ b/tsugini/src/App.vue
@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+//
+</script>
+
+<style>
+@import 'styles/global.scss';
+</style>
--- a/tsugini/src/api/komga-client.ts
+++ b/tsugini/src/api/komga-client.ts
@ -0,0 +1,48 @@
+import type { Middleware } from 'openapi-fetch'
+import createClient from 'openapi-fetch'
+import type { paths } from 'openapi/komga'
+
+// Middleware that throws on error, so it works with Pinia Colada
+const coladaMiddleware: Middleware = {
+  async onResponse({ response }: { response: Response }) {
+    if (!response.ok) {
+      let body: unknown
+      try {
+        body = await response.json()
+      } catch (ignoreErr) {}
+      throw new Error(`${response.url}: ${response.status} ${response.statusText}`, {
+        cause: {
+          body: body,
+          status: response.status,
+          message: 'Invalid authentication',
+        },
+      })
+    }
+    // return response untouched
+    return undefined
+  },
+  onError() {
+    throw new Error('error', {
+      cause: {
+        message: 'Server is unreachable',
+      },
+    })
+  },
+}
+
+const client = createClient<paths>({
+  baseUrl: 'http://localhost:8080',
+  // required to pass the session cookie on all requests
+  credentials: 'include',
+  // required to avoid browser basic-auth popups
+  headers: { 'X-Requested-With': 'XMLHttpRequest' },
+})
+client.use(coladaMiddleware)
+
+export interface ErrorCause {
+  body?: unknown
+  status?: number
+  message?: string
+}
+
+export const komgaClient = client
--- a/tsugini/src/assets/logo.svg
+++ b/tsugini/src/assets/logo.svg
@ -0,0 +1,113 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+        xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+        xmlns:dc="http://purl.org/dc/elements/1.1/"
+        xmlns:cc="http://creativecommons.org/ns#"
+        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+        height="512pt"
+        viewBox="0 0 512 512"
+        width="512pt"
+        version="1.1"
+        id="svg4586"
+        sodipodi:docname="komga - Copy.svg"
+        inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+          id="metadata4592">
+    <rdf:RDF>
+      <cc:Work
+              rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+                rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+          id="defs4590">
+    <linearGradient
+            id="linearGradient6082"
+            osb:paint="solid">
+      <stop
+              style="stop-color:#000000;stop-opacity:1;"
+              offset="0"
+              id="stop6080"/>
+    </linearGradient>
+    <linearGradient
+            id="linearGradient6076"
+            osb:paint="solid">
+      <stop
+              style="stop-color:#000000;stop-opacity:1;"
+              offset="0"
+              id="stop6074"/>
+    </linearGradient>
+    <linearGradient
+            inkscape:collect="always"
+            xlink:href="#linearGradient6082"
+            id="linearGradient6084"
+            x1="77.866812"
+            y1="386.00679"
+            x2="217.20259"
+            y2="386.00679"
+            gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <sodipodi:namedview
+          pagecolor="#ffffff"
+          bordercolor="#666666"
+          borderopacity="1"
+          objecttolerance="10"
+          gridtolerance="10"
+          guidetolerance="10"
+          inkscape:pageopacity="0"
+          inkscape:pageshadow="2"
+          inkscape:window-width="1656"
+          inkscape:window-height="1368"
+          id="namedview4588"
+          showgrid="false"
+          inkscape:zoom="1.2512475"
+          inkscape:cx="264.73114"
+          inkscape:cy="305.20589"
+          inkscape:window-x="-7"
+          inkscape:window-y="0"
+          inkscape:window-maximized="0"
+          inkscape:current-layer="svg4586"/>
+  <path
+          d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
+          fill="#005ed3"
+          id="path4556"/>
+  <path
+          d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
+          id="path4558"
+          inkscape:connector-curvature="0"
+          style="fill:#00459f"
+          sodipodi:nodetypes="scccccccccccccss"/>
+  <path
+          d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
+          fill="#ff0335"
+          id="path4560"/>
+  <path
+          d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
+          fill="#c2001b"
+          id="path4562"/>
+  <path
+          d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
+          fill="#ffdf47"
+          id="path4564"/>
+  <path
+          d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
+          fill="#fec000"
+          id="path4566"/>
+  <g
+          aria-label="K"
+          transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
+          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+          id="text4596">
+    <path
+            d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
+            style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+            id="path824"/>
+  </g>
+</svg>
--- a/tsugini/src/assets/quasar-logo-vertical.svg
+++ b/tsugini/src/assets/quasar-logo-vertical.svg
@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>
--- a/tsugini/src/auto-imports.d.ts
+++ b/tsugini/src/auto-imports.d.ts
@ -0,0 +1,143 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
+
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+  }
+}
--- a/tsugini/src/boot/.gitkeep
+++ b/tsugini/src/boot/.gitkeep
--- a/tsugini/src/boot/colada.ts
+++ b/tsugini/src/boot/colada.ts
@ -0,0 +1,11 @@
+import { defineBoot } from '#q-app/wrappers'
+import { PiniaColada } from '@pinia/colada'
+import { PiniaColadaAutoRefetch } from '@pinia/colada-plugin-auto-refetch'
+
+// "async" is optional;
+// more info on params: https://v2.quasar.dev/quasar-cli-vite/boot-files
+export default defineBoot(({ app }) => {
+  app.use(PiniaColada, {
+    plugins: [PiniaColadaAutoRefetch()],
+  })
+})
--- a/tsugini/src/boot/vue-intl.ts
+++ b/tsugini/src/boot/vue-intl.ts
@ -0,0 +1,14 @@
+import { defineBoot } from '#q-app/wrappers'
+import { createIntl } from 'vue-intl'
+
+// "async" is optional;
+// more info on params: https://v2.quasar.dev/quasar-cli-vite/boot-files
+export default defineBoot(({ app }) => {
+  app.use(
+    createIntl({
+      locale: 'en',
+      defaultLocale: 'en',
+      messages: {},
+    }),
+  )
+})
--- a/tsugini/src/colada/mutations/logout.ts
+++ b/tsugini/src/colada/mutations/logout.ts
@ -0,0 +1,15 @@
+import { defineMutation, useMutation, useQueryCache } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useLogout = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
+    mutation: () => komgaClient.POST('/api/logout'),
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: ['current-user'] })
+    },
+    onError: (error) => {
+      console.log('logout error', error)
+    },
+  })
+})
--- a/tsugini/src/colada/mutations/mark-announcements-read.ts
+++ b/tsugini/src/colada/mutations/mark-announcements-read.ts
@ -0,0 +1,16 @@
+import { defineMutation, useMutation, useQueryCache } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useMarkAnnouncementsRead = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
+    mutation: (announcementIds: string[]) =>
+      komgaClient.PUT('/api/v1/announcements', { body: announcementIds }),
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: ['announcements'] })
+    },
+    onError: (error) => {
+      console.log('announcements mark read error', error)
+    },
+  })
+})
--- a/tsugini/src/colada/mutations/update-user.ts
+++ b/tsugini/src/colada/mutations/update-user.ts
@ -0,0 +1,66 @@
+import { defineMutation, useMutation, useQueryCache } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+import type { components } from 'openapi/komga'
+
+export const useCreateUser = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
+    mutation: (user: components['schemas']['UserCreationDto']) =>
+      komgaClient.POST('/api/v2/users', {
+        body: user,
+      }),
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: ['users'] })
+    },
+    onError: (error) => {
+      console.log('create user error', error)
+    },
+  })
+})
+export const useUpdateUser = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
+    mutation: (user: components['schemas']['UserDto']) =>
+      komgaClient.PATCH('/api/v2/users/{id}', {
+        params: { path: { id: user.id } },
+        body: user,
+      }),
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: ['users'] })
+    },
+    onError: (error) => {
+      console.log('update user error', error)
+    },
+  })
+})
+
+export const useUpdateUserPassword = defineMutation(() => {
+  return useMutation({
+    mutation: ({ userId, newPassword }: { userId: string; newPassword: string }) =>
+      komgaClient.PATCH('/api/v2/users/{id}/password', {
+        params: { path: { id: userId } },
+        body: {
+          password: newPassword,
+        },
+      }),
+    onError: (error) => {
+      console.log('update user password error', error)
+    },
+  })
+})
+
+export const useDeleteUser = defineMutation(() => {
+  const queryCache = useQueryCache()
+  return useMutation({
+    mutation: (userId: string) =>
+      komgaClient.DELETE('/api/v2/users/{id}', {
+        params: { path: { id: userId } },
+      }),
+    onSuccess: () => {
+      void queryCache.invalidateQueries({ key: ['users'] })
+    },
+    onError: (error) => {
+      console.log('delete user error', error)
+    },
+  })
+})
--- a/tsugini/src/colada/queries/actuator-info.ts
+++ b/tsugini/src/colada/queries/actuator-info.ts
@ -0,0 +1,27 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+import type { ActuatorInfo } from 'types/Actuator'
+
+export const useActuatorInfo = defineQuery(() => {
+  const { data, ...rest } = useQuery({
+    key: () => ['actuator-info'],
+    query: () =>
+      komgaClient
+        .GET('/actuator/info')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data as ActuatorInfo),
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    gcTime: false,
+  })
+
+  const buildVersion = computed(() => data.value?.build?.version)
+  const commitId = computed(() => data.value?.git?.commit?.id)
+
+  return {
+    data,
+    ...rest,
+    buildVersion,
+    commitId,
+  }
+})
--- a/tsugini/src/colada/queries/announcements.ts
+++ b/tsugini/src/colada/queries/announcements.ts
@ -0,0 +1,22 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useAnnouncements = defineQuery(() => {
+  const { data, ...rest } = useQuery({
+    key: () => ['announcements'],
+    query: () =>
+      komgaClient
+        .GET('/api/v1/announcements')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    gcTime: false,
+  })
+
+  const unreadCount = computed(
+    () => data.value?.items?.filter((x) => false == x._komga?.read)?.length || 0,
+  )
+
+  return { ...rest, data, unreadCount }
+})
--- a/tsugini/src/colada/queries/app-releases.ts
+++ b/tsugini/src/colada/queries/app-releases.ts
@ -0,0 +1,34 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+import { useActuatorInfo } from 'colada/queries/actuator-info'
+
+export const useAppReleases = defineQuery(() => {
+  const { data, ...rest } = useQuery({
+    key: () => ['app-releases'],
+    query: () =>
+      komgaClient
+        .GET('/api/v1/releases')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    gcTime: false,
+  })
+
+  const { buildVersion } = useActuatorInfo()
+  const latestRelease = computed(() => data.value?.find((x) => x.latest))
+
+  const isLatestVersion = computed(() => {
+    if (buildVersion.value && latestRelease.value)
+      return buildVersion.value == latestRelease.value?.version
+    else return undefined
+  })
+
+  return {
+    data,
+    ...rest,
+    buildVersion,
+    latestRelease,
+    isLatestVersion,
+  }
+})
--- a/tsugini/src/colada/queries/current-user.ts
+++ b/tsugini/src/colada/queries/current-user.ts
@ -0,0 +1,28 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+import { UserRoles } from 'types/UserRoles'
+
+export const useCurrentUser = defineQuery(() => {
+  const { data, ...rest } = useQuery({
+    key: () => ['current-user'],
+    query: () =>
+      komgaClient
+        .GET('/api/v2/users/me')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    // 10 minutes
+    staleTime: 10 * 60 * 1000,
+    gcTime: false,
+    autoRefetch: true,
+  })
+
+  const hasRole = (role: UserRoles) => data.value?.roles.includes(role)
+  const isAdmin = computed(() => hasRole(UserRoles.ADMIN))
+
+  return {
+    data,
+    ...rest,
+    hasRole,
+    isAdmin,
+  }
+})
--- a/tsugini/src/colada/queries/libraries.ts
+++ b/tsugini/src/colada/queries/libraries.ts
@ -0,0 +1,16 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useLibraries = defineQuery(() => {
+  return useQuery({
+    key: () => ['libraries'],
+    query: () =>
+      komgaClient
+        .GET('/api/v1/libraries')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    gcTime: false,
+  })
+})
--- a/tsugini/src/colada/queries/referential.ts
+++ b/tsugini/src/colada/queries/referential.ts
@ -0,0 +1,16 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useSharingLabels = defineQuery(() => {
+  return useQuery({
+    key: () => ['sharing-labels'],
+    query: () =>
+      komgaClient
+        .GET('/api/v1/sharing-labels')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+    // 1 hour
+    staleTime: 60 * 60 * 1000,
+    gcTime: false,
+  })
+})
--- a/tsugini/src/colada/queries/users.ts
+++ b/tsugini/src/colada/queries/users.ts
@ -0,0 +1,13 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { komgaClient } from 'api/komga-client'
+
+export const useUsers = defineQuery(() => {
+  return useQuery({
+    key: () => ['users'],
+    query: () =>
+      komgaClient
+        .GET('/api/v2/users')
+        // unwrap the openapi-fetch structure on success
+        .then((res) => res.data),
+  })
+})
--- a/tsugini/src/components.d.ts
+++ b/tsugini/src/components.d.ts
@ -0,0 +1,28 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AppBar: typeof import('./components/app/Bar.vue')['default']
+    AppDrawer: typeof import('./components/app/drawer/Drawer.vue')['default']
+    AppDrawerFooter: typeof import('./components/app/drawer/Footer.vue')['default']
+    AppDrawerMenu: typeof import('./components/app/drawer/menu/Menu.vue')['default']
+    AppDrawerMenuAccount: typeof import('./components/app/drawer/menu/Account.vue')['default']
+    AppDrawerMenuHistory: typeof import('./components/app/drawer/menu/History.vue')['default']
+    AppDrawerMenuImport: typeof import('./components/app/drawer/menu/Import.vue')['default']
+    AppDrawerMenuLogout: typeof import('./components/app/drawer/menu/Logout.vue')['default']
+    AppDrawerMenuMedia: typeof import('./components/app/drawer/menu/Media.vue')['default']
+    AppDrawerMenuMenu: typeof import('./components/app/drawer/menu/Menu.vue')['default']
+    AppDrawerMenuServer: typeof import('./components/app/drawer/menu/Server.vue')['default']
+    EmptyState: typeof import('./components/EmptyState.vue')['default']
+    EssentialLink: typeof import('./components/EssentialLink.vue')['default']
+    ExampleComponent: typeof import('./components/ExampleComponent.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
--- a/tsugini/src/components/EmptyState.vue
+++ b/tsugini/src/components/EmptyState.vue
@ -0,0 +1,30 @@
+<template>
+  <div class="column items-center">
+    <q-avatar
+      v-if="icon"
+      :color="avatarColor"
+      :size="iconSize"
+      class="q-mb-sm"
+    >
+      <q-icon
+        :name="icon"
+        :color="iconColor"
+      />
+    </q-avatar>
+    <div class="text-h4">{{ title }}</div>
+    <div class="text-subtitle1">{{ subTitle }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  subTitle?: string
+  icon?: string
+  iconColor?: string
+  iconSize?: string
+  avatarColor?: string
+}
+
+const { title, subTitle, icon, iconSize, iconColor, avatarColor } = defineProps<Props>()
+</script>
--- a/tsugini/src/components/EssentialLink.vue
+++ b/tsugini/src/components/EssentialLink.vue
@ -0,0 +1,35 @@
+<template>
+  <q-item
+    clickable
+    tag="a"
+    target="_blank"
+    :href="link"
+  >
+    <q-item-section
+      v-if="icon"
+      avatar
+    >
+      <q-icon :name="icon" />
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label>{{ title }}</q-item-label>
+      <q-item-label caption>{{ caption }}</q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+export interface EssentialLinkProps {
+  title: string
+  caption?: string
+  link?: string
+  icon?: string
+}
+
+withDefaults(defineProps<EssentialLinkProps>(), {
+  caption: '',
+  link: '#',
+  icon: '',
+})
+</script>
--- a/tsugini/src/components/ExampleComponent.vue
+++ b/tsugini/src/components/ExampleComponent.vue
@ -0,0 +1,40 @@
+<template>
+  <div>
+    <p>{{ title }}</p>
+    <ul>
+      <li
+        v-for="todo in todos"
+        :key="todo.id"
+        @click="increment"
+      >
+        {{ todo.id }} - {{ todo.content }}
+      </li>
+    </ul>
+    <p>Count: {{ todoCount }} / {{ meta.totalCount }}</p>
+    <p>Active: {{ active ? 'yes' : 'no' }}</p>
+    <p>Clicks on todos: {{ clickCount }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Todo, Meta } from './models'
+
+interface Props {
+  title: string
+  todos?: Todo[]
+  meta: Meta
+  active: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  todos: () => [],
+})
+
+const clickCount = ref(0)
+function increment() {
+  clickCount.value += 1
+  return clickCount.value
+}
+
+const todoCount = computed(() => props.todos.length)
+</script>
--- a/tsugini/src/components/app/Bar.vue
+++ b/tsugini/src/components/app/Bar.vue
@ -0,0 +1,33 @@
+<template>
+  <q-header elevated>
+    <q-toolbar>
+      <q-btn
+        flat
+        dense
+        round
+        icon="mdi-menu"
+        aria-label="Menu"
+        @click="appStore.drawer = !appStore.drawer"
+      />
+
+      <RouterLink to="/">
+        <q-avatar>
+          <img src="~assets/logo.svg" />
+        </q-avatar>
+      </RouterLink>
+
+      <q-toolbar-title>Komga</q-toolbar-title>
+
+      <div>Quasar v{{ $q.version }}</div>
+    </q-toolbar>
+  </q-header>
+</template>
+<script setup lang="ts">
+import { useAppStore } from 'stores/app'
+
+const appStore = useAppStore()
+</script>
+
+<script lang="ts"></script>
+
+<style scoped></style>
--- a/tsugini/src/components/app/drawer/Drawer.vue
+++ b/tsugini/src/components/app/drawer/Drawer.vue
@ -0,0 +1,16 @@
+<template>
+  <q-drawer
+    v-model="appStore.drawer"
+    show-if-above
+    bordered
+  >
+    <AppDrawerMenu />
+    <!--    <AppDrawerFooter />-->
+  </q-drawer>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from 'stores/app'
+
+const appStore = useAppStore()
+</script>
--- a/tsugini/src/components/app/drawer/Footer.vue
+++ b/tsugini/src/components/app/drawer/Footer.vue
@ -0,0 +1,38 @@
+<!--<template>-->
+<!--  <q-separator />-->
+
+<!--  <div class="d-flex align-center text-caption text-medium-emphasis pa-2">-->
+<!--    <div class="d-flex ms-auto">-->
+<!--      <q-btn-->
+<!--        icon="mdi-help-circle-outline"-->
+<!--        href="https://komga.org"-->
+<!--        target="_blank"-->
+<!--        :text="-->
+<!--          $formatMessage({-->
+<!--            description: 'Drawer menu footer: documentation link',-->
+<!--            defaultMessage: 'Documentation',-->
+<!--            id: 'ccAMWS',-->
+<!--          })-->
+<!--        "-->
+<!--      />-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--  <div-->
+<!--    v-if="isAdmin"-->
+<!--    class="d-flex align-center text-caption text-medium-emphasis pa-2"-->
+<!--  >-->
+<!--    <div class="d-flex ms-auto">-->
+<!--      &lt;!&ndash;      <BuildCommit class="me-2" />&ndash;&gt;-->
+<!--      &lt;!&ndash;      <BuildVersion />&ndash;&gt;-->
+<!--    </div>-->
+<!--  </div>-->
+
+<!--  &lt;!&ndash;  <AppFooter />&ndash;&gt;-->
+<!--</template>-->
+
+<!--<script setup lang="ts">-->
+<!--import { useCurrentUser } from 'colada/queries/current-user'-->
+
+<!--const { isAdmin } = useCurrentUser()-->
+<!--</script>-->
--- a/tsugini/src/components/app/drawer/menu/Account.vue
+++ b/tsugini/src/components/app/drawer/menu/Account.vue
@ -0,0 +1,64 @@
+<!--<template>-->
+<!--  <v-list-group value=" My Account">-->
+<!--    <template #activator="{ props }">-->
+<!--      <q-item-->
+<!--        v-bind="props"-->
+<!--        :title="-->
+<!--          $formatMessage({-->
+<!--            description: 'Drawer menu for My Account',-->
+<!--            defaultMessage: 'My Account',-->
+<!--            id: 'od545m',-->
+<!--          })-->
+<!--        "-->
+<!--        prepend-icon="mdi-account"-->
+<!--      />-->
+<!--    </template>-->
+
+<!--    <q-item-->
+<!--      to="/account/details"-->
+<!--      :title="-->
+<!--        $formatMessage({-->
+<!--          description: 'Drawer menu for My Account > Details',-->
+<!--          defaultMessage: 'Details',-->
+<!--          id: 'xYGXuU',-->
+<!--        })-->
+<!--      "-->
+<!--    />-->
+<!--    <q-item-->
+<!--      to="/account/api-keys"-->
+<!--      :title="-->
+<!--        $formatMessage({-->
+<!--          description: 'Drawer menu for My Account > API Keys',-->
+<!--          defaultMessage: 'API Keys',-->
+<!--          id: 'oFOkWZ',-->
+<!--        })-->
+<!--      "-->
+<!--    />-->
+<!--    <q-item-->
+<!--      to="/account/ui"-->
+<!--      :title="-->
+<!--        $formatMessage({-->
+<!--          description: 'Drawer menu for My Account > User Interface',-->
+<!--          defaultMessage: 'User Interface',-->
+<!--          id: 'rw/Dkw',-->
+<!--        })-->
+<!--      "-->
+<!--    />-->
+<!--    <q-item-->
+<!--      to="/account/activity"-->
+<!--      :title="-->
+<!--        $formatMessage({-->
+<!--          description: 'Drawer menu for My Account > Activity',-->
+<!--          defaultMessage: 'Activity',-->
+<!--          id: 'cGFtPg',-->
+<!--        })-->
+<!--      "-->
+<!--    />-->
+<!--  </v-list-group>-->
+<!--</template>-->
+
+<!--<script setup lang="ts"></script>-->
+
+<!--<script lang="ts"></script>-->
+
+<!--<style scoped></style>-->
--- a/tsugini/src/components/app/drawer/menu/History.vue
+++ b/tsugini/src/components/app/drawer/menu/History.vue
@ -0,0 +1,11 @@
+<!--<template>-->
+<!--  <v-list-item-->
+<!--    to="/history"-->
+<!--    :title="$formatMessage({-->
+<!--      description: 'Drawer menu for History',-->
+<!--      defaultMessage: 'History',-->
+<!--      id: 'l/To3S'-->
+<!--    })"-->
+<!--    prepend-icon="mdi-clock-time-four-outline"-->
+<!--  />-->
+<!--</template>-->
--- a/tsugini/src/components/app/drawer/menu/Import.vue
+++ b/tsugini/src/components/app/drawer/menu/Import.vue
@ -0,0 +1,33 @@
+<!--<template>-->
+<!--  <v-list-group value="Import">-->
+<!--    <template #activator="{ props }">-->
+<!--      <v-list-item-->
+<!--        v-bind="props"-->
+<!--        :title="$formatMessage({-->
+<!--          description: 'Drawer menu for Import',-->
+<!--          defaultMessage: 'Import',-->
+<!--          id: 'N7+QXi'-->
+<!--        })"-->
+<!--        prepend-icon="mdi-import"-->
+<!--      />-->
+<!--    </template>-->
+
+<!--    <v-list-item-->
+<!--      to="/import/books"-->
+<!--      :title="$formatMessage({-->
+<!--        description: 'Drawer menu for Import > Books',-->
+<!--        defaultMessage: 'Books',-->
+<!--        id: 'fQIepD'-->
+<!--      })"-->
+<!--    />-->
+
+<!--    <v-list-item-->
+<!--      to="/import/readlist"-->
+<!--      :title="$formatMessage({-->
+<!--        description: 'Drawer menu for Import > Read List',-->
+<!--        defaultMessage: 'Read List',-->
+<!--        id: 'Y6VlM9'-->
+<!--      })"-->
+<!--    />-->
+<!--  </v-list-group>-->
+<!--</template>-->
--- a/tsugini/src/components/app/drawer/menu/Logout.vue
+++ b/tsugini/src/components/app/drawer/menu/Logout.vue
@ -0,0 +1,28 @@
+<template>
+  <q-item
+    clickable
+    @click="performLogout"
+  >
+    <q-item-section avatar>
+      <q-icon name="mdi-power" />
+    </q-item-section>
+    <q-item-section>{{
+      $formatMessage({
+        description: 'Drawer menu for Logout',
+        defaultMessage: 'Logout',
+        id: 'ti4Pzo',
+      })
+    }}</q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { useLogout } from 'colada/mutations/logout'
+
+const router = useRouter()
+const { mutateAsync: logoutAsync } = useLogout()
+
+function performLogout() {
+  void logoutAsync().then(() => router.push('/login'))
+}
+</script>
--- a/tsugini/src/components/app/drawer/menu/Media.vue
+++ b/tsugini/src/components/app/drawer/menu/Media.vue
@ -0,0 +1,73 @@
+<!--<template>-->
+<!--  <v-list-group value="Media">-->
+<!--    <template #activator="{ props }">-->
+<!--      <v-list-item-->
+<!--        v-bind="props"-->
+<!--        :title="$formatMessage({-->
+<!--          description: 'Drawer menu for Media',-->
+<!--          defaultMessage: 'Media',-->
+<!--          id: 'Hl9H/B'-->
+<!--        })"-->
+<!--        prepend-icon="mdi-book-cog"-->
+<!--      />-->
+<!--    </template>-->
+
+<!--    <v-list-item-->
+<!--      to="/media/analysis"-->
+
+<!--      :title="$formatMessage({-->
+<!--        description: 'Drawer menu for Media > Media Analysis',-->
+<!--        defaultMessage: 'Media Analysis',-->
+<!--        id: 'DxtDpt'-->
+<!--      })"-->
+<!--    />-->
+<!--    <v-list-item-->
+<!--      to="/media/missing-posters"-->
+<!--      :title="$formatMessage({-->
+<!--        description: 'Drawer menu for Media > Missing Posters',-->
+<!--        defaultMessage: 'Missing Posters',-->
+<!--        id: 'Nb0V0p'-->
+<!--      })"-->
+<!--    />-->
+<!--    <v-list-item-->
+<!--      to="/media/duplicate-files"-->
+<!--      :title="$formatMessage({-->
+<!--        description: 'Drawer menu for Media > Duplicate Files',-->
+<!--        defaultMessage: 'Duplicate Files',-->
+<!--        id: 'eW3fXu'-->
+<!--      })"-->
+<!--    />-->
+
+<!--    <v-list-group value="Duplicate Pages">-->
+<!--      <template #activator="{ props }">-->
+<!--        <v-list-item-->
+<!--          v-bind="props"-->
+<!--          :title="$formatMessage({-->
+<!--            description: 'Drawer menu for Media > Duplicate Pages',-->
+<!--            defaultMessage: 'Duplicate Pages',-->
+<!--            id: 'cAu/I6'-->
+<!--          })"-->
+<!--        />-->
+<!--      </template>-->
+
+<!--      <v-list-item-->
+<!--        to="/media/duplicate-pages/known"-->
+<!--        :title="$formatMessage({-->
+<!--          description: 'Drawer menu for Media > Duplicate Pages > Known',-->
+<!--          defaultMessage: 'Known',-->
+<!--          id: 'MvwDsn'-->
+<!--        })"-->
+<!--      />-->
+<!--      <v-list-item-->
+<!--        to="/media/duplicate-pages/unknown"-->
+<!--        :title="$formatMessage({-->
+<!--          description: 'Drawer menu for Media > Duplicate Pages > Unknown',-->
+<!--          defaultMessage: 'Unknown',-->
+<!--          id: 'qiZm6U'-->
+<!--        })"-->
+<!--      />-->
+<!--    </v-list-group>-->
+<!--  </v-list-group>-->
+<!--</template>-->
+<!--<script setup lang="ts">-->
+<!--</script>-->
--- a/tsugini/src/components/app/drawer/menu/Menu.vue
+++ b/tsugini/src/components/app/drawer/menu/Menu.vue
@ -0,0 +1,16 @@
+<template>
+  <q-list>
+    <!--    <AppDrawerMenuImport v-if="isAdmin" />-->
+    <!--    <AppDrawerMenuMedia v-if="isAdmin" />-->
+    <!--    <AppDrawerMenuHistory v-if="isAdmin" />-->
+    <AppDrawerMenuServer v-if="isAdmin" />
+    <!--    <AppDrawerMenuAccount />-->
+    <AppDrawerMenuLogout />
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { useCurrentUser } from 'colada/queries/current-user'
+
+const { isAdmin } = useCurrentUser()
+</script>
--- a/tsugini/src/components/app/drawer/menu/Server.vue
+++ b/tsugini/src/components/app/drawer/menu/Server.vue
@ -0,0 +1,170 @@
+<template>
+  <q-expansion-item
+    icon="mdi-cog"
+    :label="
+      $formatMessage({
+        description: 'Drawer menu for Server',
+        defaultMessage: 'Server',
+        id: 'IpvWiZ',
+      })
+    "
+  >
+    <template #header>
+      <q-item-section avatar>
+        <q-icon name="mdi-cog">
+          <q-badge
+            v-if="unreadCount > 0"
+            color="info"
+            rounded
+            floating
+          />
+        </q-icon>
+      </q-item-section>
+      <q-item-section>
+        {{
+          $formatMessage({
+            description: 'Drawer menu for Server',
+            defaultMessage: 'Server',
+            id: 'IpvWiZ',
+          })
+        }}
+      </q-item-section>
+    </template>
+    <!--        <template #prepend>-->
+    <!--          <v-badge-->
+    <!--            :model-value="unreadCount > 0 && !($refs as any).group.isOpen"-->
+    <!--            dot-->
+    <!--            floating-->
+    <!--            color="info"-->
+    <!--          >-->
+    <!--            <v-icon>mdi-cog</v-icon>-->
+    <!--          </v-badge>-->
+    <!--        </template>-->
+
+    <q-item
+      to="/server/users"
+      clickable
+      :inset-level="1"
+    >
+      <q-item-section>
+        {{
+          $formatMessage({
+            description: 'Drawer menu for Server > Users',
+            defaultMessage: 'Users',
+            id: 'JGOfZq',
+          })
+        }}
+      </q-item-section>
+    </q-item>
+
+    <q-item
+      to="/server/announcements"
+      clickable
+      :inset-level="1"
+    >
+      <q-item-section>
+        <q-item-label
+          >{{
+            $formatMessage({
+              description: 'Drawer menu for Server > Announcements',
+              defaultMessage: 'Announcements',
+              id: 'G7quju',
+            })
+          }}
+        </q-item-label>
+      </q-item-section>
+      <q-item-section
+        side
+        v-if="unreadCount > 0"
+      >
+        <q-badge
+          color="info"
+          rounded
+          >{{ unreadCount }}</q-badge
+        >
+      </q-item-section>
+    </q-item>
+
+    <q-item
+      to="/server/updates"
+      clickable
+      :inset-level="1"
+    >
+      <q-item-section>{{
+        $formatMessage({
+          description: 'Drawer menu for Server > Updates',
+          defaultMessage: 'Updates',
+          id: 'lDnmZD',
+        })
+      }}</q-item-section>
+    </q-item>
+
+    <!--    <q-item-->
+    <!--      to="/server/settings"-->
+    <!--      :title="-->
+    <!--        $formatMessage({-->
+    <!--          description: 'Drawer menu for Server > Settings',-->
+    <!--          defaultMessage: 'Settings',-->
+    <!--          id: 'HaWCi3',-->
+    <!--        })-->
+    <!--      "-->
+    <!--    />-->
+    <!--    <q-item-->
+    <!--      to="/server/ui"-->
+    <!--      :title="-->
+    <!--        $formatMessage({-->
+    <!--          description: 'Drawer menu for Server > User Interface',-->
+    <!--          defaultMessage: 'User Interface',-->
+    <!--          id: 'Yf4DJ2',-->
+    <!--        })-->
+    <!--      "-->
+    <!--    />-->
+    <!--    <q-item-->
+    <!--      to="/server/metrics"-->
+    <!--      :title="-->
+    <!--        $formatMessage({-->
+    <!--          description: 'Drawer menu for Server > Metrics',-->
+    <!--          defaultMessage: 'Metrics',-->
+    <!--          id: '2g7iOx',-->
+    <!--        })-->
+    <!--      "-->
+    <!--    />-->
+
+    <!--    <q-item-->
+    <!--      to="/server/announcements"-->
+    <!--      :title="-->
+    <!--        $formatMessage({-->
+    <!--          description: 'Drawer menu for Server > Announcements',-->
+    <!--          defaultMessage: 'Announcements',-->
+    <!--          id: 'G7quju',-->
+    <!--        })-->
+    <!--      "-->
+    <!--    >-->
+    <!--      <template #append>-->
+    <!--        <v-badge-->
+    <!--          :model-value="unreadCount > 0"-->
+    <!--          :content="unreadCount"-->
+    <!--          inline-->
+    <!--          color="info"-->
+    <!--        />-->
+    <!--      </template>-->
+    <!--    </q-item>-->
+
+    <!--    <q-item-->
+    <!--      to="/server/updates"-->
+    <!--      :title="-->
+    <!--        $formatMessage({-->
+    <!--          description: 'Drawer menu for Server > Updates',-->
+    <!--          defaultMessage: 'Updates',-->
+    <!--          id: 'lDnmZD',-->
+    <!--        })-->
+    <!--      "-->
+    <!--    />-->
+  </q-expansion-item>
+</template>
+
+<script setup lang="ts">
+import { useAnnouncements } from 'colada/queries/announcements'
+
+const { unreadCount } = useAnnouncements()
+</script>
--- a/tsugini/src/components/models.ts
+++ b/tsugini/src/components/models.ts
@ -0,0 +1,8 @@
+export interface Todo {
+  id: number
+  content: string
+}
+
+export interface Meta {
+  totalCount: number
+}
--- a/tsugini/src/css/app.scss
+++ b/tsugini/src/css/app.scss
@ -0,0 +1 @@
+// app global css in SCSS form
--- a/tsugini/src/css/quasar.variables.scss
+++ b/tsugini/src/css/quasar.variables.scss
@ -0,0 +1,25 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary: #1976d2;
+$secondary: #26a69a;
+$accent: #9c27b0;
+
+$dark: #1d1d1d;
+$dark-page: #121212;
+
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;
--- a/tsugini/src/env.d.ts
+++ b/tsugini/src/env.d.ts
@ -0,0 +1,7 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    NODE_ENV: string
+    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined
+    VUE_ROUTER_BASE: string | undefined
+  }
+}
--- a/tsugini/src/generated/openapi/komga.d.ts
+++ b/tsugini/src/generated/openapi/komga.d.ts
--- a/tsugini/src/layouts/README.md
+++ b/tsugini/src/layouts/README.md
@ -0,0 +1,5 @@
+# Layouts
+
+Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
+
+Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts-next](https://github.com/loicduong/vite-plugin-vue-layouts-next) repository.
--- a/tsugini/src/layouts/default.vue
+++ b/tsugini/src/layouts/default.vue
@ -0,0 +1,15 @@
+<template>
+  <q-layout view="hHh Lpr lFf">
+    <AppBar />
+
+    <AppDrawer />
+
+    <q-page-container>
+      <q-page padding>
+        <router-view />
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts"></script>
--- a/tsugini/src/layouts/single.vue
+++ b/tsugini/src/layouts/single.vue
@ -0,0 +1,9 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts"></script>
--- a/tsugini/src/pages/README.md
+++ b/tsugini/src/pages/README.md
@ -0,0 +1,5 @@
+# Pages
+
+Vue components created in this folder will automatically be converted to navigable routes.
+
+Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
--- a/tsugini/src/pages/history.vue
+++ b/tsugini/src/pages/history.vue
@ -0,0 +1,12 @@
+<template>
+  <h1>History</h1>
+</template>
+
+<script lang="ts" setup>
+//
+</script>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/index.vue
+++ b/tsugini/src/pages/index.vue
@ -0,0 +1,26 @@
+<template>
+  <q-page class="row items-center justify-evenly">
+    <example-component
+      title="Example component"
+      active
+      :todos="todos"
+      :meta="meta"
+    ></example-component>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Todo, Meta } from 'components/models'
+
+const todos = ref<Todo[]>(
+  [...Array(100).keys()].map((i) => ({
+    id: i + 1,
+    content: `ct${i + 1}`,
+  })),
+)
+
+const meta = ref<Meta>({
+  totalCount: 1200,
+})
+</script>
--- a/tsugini/src/pages/login.vue
+++ b/tsugini/src/pages/login.vue
@ -0,0 +1,120 @@
+<template>
+  <q-page padding>
+    <div class="row justify-center">
+      <div class="col-xs-8 col-sm-6 col-md-3">
+        <q-img
+          src="~assets/logo.svg"
+          no-spinner
+        />
+      </div>
+    </div>
+
+    <q-form
+      greedy
+      @submit="performLogin()"
+    >
+      <div class="row justify-center">
+        <div class="col-xs-10 col-sm-6 col-md-4">
+          <q-input
+            v-model="username"
+            label="Email"
+            autofocus
+            :disable="isLoading"
+            lazy-rules
+            :rules="[
+              (x) => !!x || 'Required',
+              (x, r) => r.email(x) || 'Must be a valid email address',
+            ]"
+          />
+        </div>
+      </div>
+
+      <div class="row justify-center">
+        <div class="col-xs-10 col-sm-6 col-md-4">
+          <q-input
+            v-model="password"
+            label="Password"
+            type="password"
+            :disable="isLoading"
+            lazy-rules
+            :rules="[(x) => !!x || 'Required']"
+          />
+        </div>
+      </div>
+
+      <div class="row justify-center q-my-sm">
+        <div class="col-xs-10 col-sm-6 col-md-4">
+          <q-checkbox
+            v-model="app.loginRememberMe"
+            label="Remember Me"
+            :disable="isLoading"
+          />
+        </div>
+      </div>
+
+      <div class="row justify-center q-my-sm">
+        <div class="col-xs-10 col-sm-6 col-md-4">
+          <q-btn
+            class="row"
+            label="Sign in"
+            :loading="isLoading"
+            color="primary"
+            type="submit"
+          />
+        </div>
+      </div>
+    </q-form>
+  </q-page>
+</template>
+
+<script lang="ts" setup>
+import { useMutation, useQueryCache } from '@pinia/colada'
+import type { ErrorCause } from 'api/komga-client'
+import { komgaClient } from 'api/komga-client'
+import { useAppStore } from 'stores/app'
+import { Notify } from 'quasar'
+
+const username = ref('')
+const password = ref('')
+
+const router = useRouter()
+const route = useRoute()
+
+const app = useAppStore()
+
+const queryCache = useQueryCache()
+const { mutate: performLogin, isLoading } = useMutation({
+  mutation: () =>
+    komgaClient.GET('/api/v2/users/me', {
+      headers: {
+        authorization: 'Basic ' + btoa(username.value + ':' + password.value),
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      params: {
+        query: {
+          'remember-me': app.loginRememberMe,
+        },
+      },
+    }),
+  onSuccess: ({ data }) => {
+    queryCache.setQueryData(['current-user'], data)
+    queryCache.cancelQueries({ key: ['current-user'] })
+    if (route.query.redirect) void router.push({ path: route.query.redirect.toString() })
+    else void router.push('/')
+  },
+  onError: (error) => {
+    Notify.create({
+      type: 'negative',
+      progress: true,
+      message: (error.cause as ErrorCause).message!,
+      actions: [{ label: 'Dismiss', color: 'white' }],
+    })
+  },
+})
+</script>
+
+<route lang="yaml">
+meta:
+  layout: single
+  noAuth: true
+</route>
--- a/tsugini/src/pages/notfound.vue
+++ b/tsugini/src/pages/notfound.vue
@ -0,0 +1,28 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">404</div>
+
+      <div
+        class="text-h2"
+        style="opacity: 0.4"
+      >
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>
--- a/tsugini/src/pages/server/announcements.vue
+++ b/tsugini/src/pages/server/announcements.vue
@ -0,0 +1,131 @@
+<template>
+  <q-card v-if="isLoading">
+    <q-card-section>
+      <q-skeleton type="text" />
+      <q-skeleton
+        type="text"
+        width="200px"
+      />
+    </q-card-section>
+
+    <q-card-section>
+      <q-skeleton
+        height="300px"
+        square
+      />
+    </q-card-section>
+
+    <q-card-actions align="right">
+      <q-skeleton type="QBtn" />
+    </q-card-actions>
+  </q-card>
+
+  <EmptyState
+    v-else-if="error"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :sub-title="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+    icon="mdi-connection"
+    icon-size="250px"
+    avatar-color="grey-4"
+  />
+
+  <template v-else-if="announcements">
+    <div
+      v-for="(item, index) in announcements.items"
+      :key="index"
+      class="q-py-sm"
+    >
+      <q-card>
+        <q-card-section>
+          <div class="text-h3">
+            <a
+              :href="item.url!"
+              target="_blank"
+              class="link-underline"
+              >{{ item.title }}</a
+            >
+          </div>
+          <div class="text-subtitle1">
+            {{ $formatDate(item.date_modified, { dateStyle: 'long' }) }}
+          </div>
+        </q-card-section>
+
+        <q-card-section>
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            class="announcement"
+            v-html="item.content_html"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            flat
+            :color="item._komga?.read ? 'grey' : undefined"
+            :disable="item._komga?.read"
+            @click="markRead(item.id)"
+            >Mark as read</q-btn
+          >
+        </q-card-actions>
+      </q-card>
+      <div
+        v-if="index == announcements.items.length - 1"
+        class="q-mb-xl"
+      />
+    </div>
+
+    <q-page-sticky
+      position="bottom-right"
+      :offset="[18, 18]"
+      v-show="unreadCount > 0"
+    >
+      <q-btn
+        fab
+        icon="mdi-check-all"
+        color="positive"
+        @click="markAllRead()"
+      >
+        <q-tooltip class="text-body2">
+          {{
+            $formatMessage({
+              description: 'Announcements view: mark all as read button tooltip',
+              defaultMessage: 'Mark all as read',
+              id: 'da/wb0',
+            })
+          }}
+        </q-tooltip>
+      </q-btn>
+    </q-page-sticky>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useAnnouncements } from 'colada/queries/announcements'
+import { useMarkAnnouncementsRead } from 'colada/mutations/mark-announcements-read'
+import { commonMessages } from 'src/utils/common-messages'
+
+const { data: announcements, error, unreadCount, isLoading } = useAnnouncements()
+
+const { mutate: markAnnouncementsRead } = useMarkAnnouncementsRead()
+
+function markAllRead() {
+  const ids = announcements.value?.items.map((x) => x.id)
+  if (ids) markAnnouncementsRead(ids)
+}
+
+function markRead(id: string) {
+  markAnnouncementsRead([id])
+}
+</script>
+
+<style lang="scss">
+.announcement h2 {
+  font-size: 24px;
+}
+</style>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/server/metrics.vue
+++ b/tsugini/src/pages/server/metrics.vue
@ -0,0 +1,12 @@
+<template>
+  <h1>Metrics</h1>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/server/settings.vue
+++ b/tsugini/src/pages/server/settings.vue
@ -0,0 +1,12 @@
+<template>
+  <h1>Settings</h1>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/server/ui.vue
+++ b/tsugini/src/pages/server/ui.vue
@ -0,0 +1,12 @@
+<template>
+  <h1>UI</h1>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/server/updates.vue
+++ b/tsugini/src/pages/server/updates.vue
@ -0,0 +1,145 @@
+<template>
+  <v-skeleton-loader
+    v-if="isLoading"
+    type="heading, text, paragraph@3"
+  />
+
+  <v-empty-state
+    v-else-if="error"
+    icon="mdi-connection"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+  />
+
+  <template v-else-if="releases">
+    <v-row>
+      <v-col>
+        <div v-if="isLatestVersion == true">
+          <v-alert
+            type="success"
+            variant="tonal"
+          >
+            {{
+              $formatMessage({
+                description: 'Updates view: banner shown at the top',
+                defaultMessage: 'The latest version of Komga is already installed',
+                id: 'WNY0pu'
+              })
+            }}
+          </v-alert>
+        </div>
+        <div v-if="isLatestVersion == false">
+          <v-alert
+            type="warning"
+            variant="tonal"
+          >
+            {{
+              $formatMessage({
+                description: 'Updates view: banner shown at the top',
+                defaultMessage: 'Updates are available',
+                id: 'n1Ik+L'
+              })
+            }}
+          </v-alert>
+        </div>
+      </v-col>
+    </v-row>
+
+    <div
+      v-for="(release, index) in releases"
+      :key="index"
+    >
+      <v-row
+        justify="space-between"
+        align="center"
+      >
+        <v-col cols="auto">
+          <div>
+            <a
+              :href="release.url"
+              target="_blank"
+              class="text-h4 font-weight-medium link-underline me-2"
+            >{{
+              release.version
+            }}</a>
+            <v-chip
+              v-if="release.version == currentVersion"
+              class="mx-2 mt-n3"
+              size="small"
+              rounded
+              color="info"
+            >
+              {{
+                $formatMessage({
+                  description: 'Updates view: badge showing next to the currently installed release number',
+                  defaultMessage: 'Currently installed',
+                  id: '3jrAF6'
+                })
+              }}
+            </v-chip>
+            <v-chip
+              v-if="release.version == latest?.version"
+              class="mx-2 mt-n3"
+              size="small"
+              rounded
+            >
+              {{
+                $formatMessage({
+                  description: 'Updates view: badge showing next to the latest release number',
+                  defaultMessage: 'Latest',
+                  id: '2Bh8F2'
+                })
+              }}
+            </v-chip>
+          </div>
+          <div class="mt-2 subtitle-1">
+            {{ $formatDate(release.releaseDate, {dateStyle: 'long'}) }}
+          </div>
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="12">
+          <!-- eslint-disable vue/no-v-html -->
+          <div
+            class="release"
+            v-html="marked(release.description)"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+        </v-col>
+      </v-row>
+
+      <v-divider
+        v-if="index != releases.length - 1"
+        class="my-8"
+      />
+    </div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import {useAppReleases} from '@/colada/queries/app-releases.ts'
+import {marked} from 'marked'
+import {commonMessages} from '@/utils/common-messages.ts'
+
+const {data: releases, error, buildVersion: currentVersion, isLatestVersion, latestRelease: latest, isLoading} = useAppReleases()
+</script>
+
+<style lang="scss">
+.release p {
+  margin-bottom: 16px;
+}
+
+.release ul {
+  padding-left: 24px;
+}
+
+.release a {
+  color: var(--v-anchor-base);
+}
+</style>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/server/users.vue
+++ b/tsugini/src/pages/server/users.vue
@ -0,0 +1,279 @@
+<template>
+  <v-empty-state
+    v-if="error"
+    icon="mdi-connection"
+    :title="$formatMessage(commonMessages.somethingWentWrongTitle)"
+    :text="$formatMessage(commonMessages.somethingWentWrongSubTitle)"
+  />
+
+  <template v-else>
+    <v-data-table
+      :loading="isLoading"
+      :items="users"
+      :headers="headers"
+      :hide-default-footer="hideFooter"
+    >
+      <template #top>
+        <v-toolbar flat>
+          <v-toolbar-title>
+            <v-icon
+              color="medium-emphasis"
+              icon="mdi-account-multiple"
+              size="x-small"
+              start
+            />
+            Users
+          </v-toolbar-title>
+
+          <v-btn
+            class="me-2"
+            prepend-icon="mdi-plus"
+            rounded="lg"
+            text="Add a User"
+            border
+            @click="showDialog(ACTION.ADD)"
+            @mouseenter="activator = $event.currentTarget"
+          />
+        </v-toolbar>
+      </template>
+
+      <template #[`item.roles`]="{ value }">
+        <div class="d-flex ga-1">
+          <v-chip
+            v-for="role in value"
+            :key="role"
+            :color="getRoleColor(role)"
+            :text="role"
+            size="x-small"
+            rounded
+          />
+        </div>
+      </template>
+
+      <template #[`item.actions`]="{ item : user }">
+        <div class="d-flex ga-1 justify-end">
+          <v-icon-btn
+            v-tooltip:bottom="'Change password'"
+            icon="mdi-lock-reset"
+            @click="showDialog(ACTION.PASSWORD, user)"
+            @mouseenter="activator = $event.currentTarget"
+          />
+          <v-icon-btn
+            v-tooltip:bottom="'Edit user'"
+            icon="mdi-pencil"
+            :disabled="me?.id == user.id"
+            @click="showDialog(ACTION.EDIT, user)"
+            @mouseenter="activator = $event.currentTarget"
+          />
+          <v-icon-btn
+            v-tooltip:bottom="'Delete user'"
+            icon="mdi-delete"
+            :disabled="me?.id == user.id"
+            @click="showDialog(ACTION.DELETE, user)"
+            @mouseenter="activatorDelete = $event.currentTarget"
+          />
+        </div>
+      </template>
+    </v-data-table>
+
+    <DialogConfirmEdit
+      v-model:record="dialogRecord"
+      :activator="activator"
+      :title="dialogTitle"
+      :subtitle="userRecord?.email"
+      :max-width="currentAction === ACTION.PASSWORD ? 400 : 600"
+      @update:record="handleDialogConfirmation()"
+    >
+      <template #text="{proxyModel}">
+        <component
+          :is="dialogComponent"
+          v-model="proxyModel.value"
+        />
+      </template>
+    </DialogConfirmEdit>
+
+    <DialogConfirm
+      :activator="activatorDelete"
+      :title="dialogTitle"
+      :subtitle="userRecord?.email"
+      ok-text="Delete"
+      :validate-text="userRecord?.email"
+      max-width="600"
+      @confirm="handleDialogConfirmation()"
+    >
+      <template #warning>
+        <v-alert
+          type="warning"
+          variant="tonal"
+          class="mb-4"
+        >
+          <div>The user account will be deleted from this server.</div>
+          <ul class="ps-8">
+            <li>The read progress for this user account will be permanently deleted.</li>
+            <li>Authentication activity for this user will be permanently deleted.</li>
+          </ul>
+          <div class="font-weight-bold mt-4">
+            This action cannot be undone.
+          </div>
+        </v-alert>
+      </template>
+    </DialogConfirm>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import {useUsers} from '@/colada/queries/users.ts'
+import {komgaClient} from '@/api/komga-client.ts'
+import type {components} from '@/generated/openapi/komga'
+import {useCurrentUser} from '@/colada/queries/current-user.ts'
+import {UserRoles} from '@/types/UserRoles.ts'
+import {useCreateUser, useDeleteUser, useUpdateUser, useUpdateUserPassword} from '@/colada/mutations/update-user.ts'
+import FormUserChangePassword from '@/components/forms/user/FormUserChangePassword.vue'
+import FormUserEdit from '@/components/forms/user/FormUserEdit.vue'
+import type {Component} from 'vue'
+import {useLibraries} from '@/colada/queries/libraries.ts'
+import {commonMessages} from '@/utils/common-messages.ts'
+
+// API data
+const {data: users, error, isLoading, refetch: refetchUsers} = useUsers()
+const {data: me} = useCurrentUser()
+
+
+// Table
+const hideFooter = computed(() => users.value && users.value.length < 11)
+const headers = [
+  {title: 'Email', key: 'email'},
+  {title: 'Latest Activity', key: 'activity', value: (item: components["schemas"]["UserDto"]) => latestActivity[item.id]},
+  {title: 'Roles', value: 'roles', sortable: false},
+  {title: 'Actions', key: 'actions', align: 'end', sortable: false},
+] as const // workaround for https://github.com/vuetifyjs/vuetify/issues/18901
+
+function getRoleColor(role: UserRoles) {
+  if(role === UserRoles.ADMIN) return 'error'
+}
+
+
+// store each user's latest activity in a map
+// when the 'users' change, we call the API for each user
+const latestActivity: Record<string, Date | undefined> = reactive({})
+
+function getLatestActivity(userId: string) {
+  komgaClient.GET('/api/v2/users/{id}/authentication-activity/latest', {
+    params: {
+      path: { id: userId }
+    }
+  })
+    // unwrap the openapi-fetch structure on success
+    .then((res) => latestActivity[userId] = res.data?.dateTime)
+    .catch(() => {})
+}
+
+watch(users, (users) => {
+  if(users) for (const user of users) {
+    getLatestActivity(user.id)
+  }
+})
+
+onMounted(() => refetchUsers())
+
+
+// Dialogs handling
+// stores the user being actioned upon
+const userRecord = ref<components["schemas"]["UserDto"]>()
+// stores the ongoing action, so we can handle the action when the dialog is closed with changes
+const currentAction = ref<ACTION>()
+// the record passed to the dialog's form's model
+const dialogRecord = ref<unknown>()
+const activator = ref<Element>()
+const activatorDelete = ref<Element>()
+const dialogTitle = ref<string>()
+// dynamic component for the dialog's inner form
+const dialogComponent = shallowRef<Component>()
+
+const {mutate: mutateCreateUser} = useCreateUser()
+const {mutate: mutateUser} = useUpdateUser()
+const {mutate: mutateUserPassword} = useUpdateUserPassword()
+const {mutate: mutateDeleteUser} = useDeleteUser()
+const {data: libraries} = useLibraries()
+
+enum ACTION {
+  ADD, EDIT, DELETE, PASSWORD
+}
+
+function showDialog(action: ACTION, user?: components["schemas"]["UserDto"]) {
+  currentAction.value = action
+  switch (action) {
+    case ACTION.ADD:
+      dialogTitle.value = 'Add User'
+      dialogComponent.value = FormUserEdit
+      dialogRecord.value = {
+        email: '',
+        password: '',
+        roles: [UserRoles.PAGE_STREAMING, UserRoles.FILE_DOWNLOAD],
+        sharedLibraries: {
+          all: true,
+          // we fill the array with all libraries for a nicer display in the edit dialog
+          libraryIds: libraries.value?.map(x => x.id) || [],
+        },
+        ageRestriction: {
+          age: 0,
+          restriction: 'NONE',
+        }
+      } as components["schemas"]["UserCreationDto"]
+      break;
+    case ACTION.EDIT:
+      dialogTitle.value = 'Edit User'
+      dialogComponent.value = FormUserEdit
+      dialogRecord.value = {
+        ...user,
+        roles: user?.roles.filter(x => x !== 'USER'),
+        sharedLibraries: {
+          all: user?.sharedAllLibraries,
+          // we fill the array with all libraries for a nicer display in the edit dialog
+          libraryIds: user?.sharedAllLibraries ? libraries.value?.map(x => x.id) || [] : user?.sharedLibrariesIds,
+        },
+        ageRestriction: user?.ageRestriction || {
+          age: 0,
+          restriction: 'NONE',
+        }
+      } as components["schemas"]["UserUpdateDto"]
+      break;
+    case ACTION.DELETE:
+      dialogTitle.value = 'Delete User'
+      dialogComponent.value = FormUserEdit
+      dialogRecord.value = user
+      break;
+    case ACTION.PASSWORD:
+      dialogTitle.value = 'Change Password'
+      dialogComponent.value = FormUserChangePassword
+      // password change initiated with an empty string
+      dialogRecord.value = ''
+  }
+  userRecord.value = user
+}
+
+function handleDialogConfirmation() {
+  switch (currentAction.value) {
+    case ACTION.ADD:
+      mutateCreateUser(dialogRecord.value as components["schemas"]["UserCreationDto"])
+      break;
+    case ACTION.EDIT:
+      mutateUser(dialogRecord.value as components["schemas"]["UserDto"])
+      break;
+    case ACTION.DELETE:
+      mutateDeleteUser(userRecord.value!.id)
+      break;
+    case ACTION.PASSWORD:
+      mutateUserPassword({
+        userId: userRecord.value!.id,
+        newPassword: dialogRecord.value as string,
+      })
+      break;
+  }
+}
+</script>
+
+<route lang="yaml">
+meta:
+  requiresRole: ADMIN
+</route>
--- a/tsugini/src/pages/startup.vue
+++ b/tsugini/src/pages/startup.vue
@ -0,0 +1,30 @@
+<template>
+  <div>Komga startup</div>
+</template>
+
+<script lang="ts" setup>
+import { useCurrentUser } from 'colada/queries/current-user'
+
+async function checkAuthenticated() {
+  const router = useRouter()
+  const route = useRoute()
+  const { data, error, refresh } = useCurrentUser()
+
+  await refresh()
+  if (data.value) {
+    if (route.query.redirect) await router.push({ path: route.query.redirect.toString() })
+    else await router.push('/')
+  }
+  if (error.value) {
+    await router.push({ name: '/login', query: { redirect: route.query.redirect } })
+  }
+}
+
+onMounted(() => checkAuthenticated())
+</script>
+
+<route lang="yaml">
+meta:
+  layout: single
+  noAuth: true
+</route>
--- a/tsugini/src/router/index.ts
+++ b/tsugini/src/router/index.ts
@ -0,0 +1,47 @@
+import { defineRouter } from '#q-app/wrappers'
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router'
+import { routes, handleHotUpdate } from 'vue-router/auto-routes'
+import { setupLayouts } from 'virtual:generated-layouts'
+import { useLoginGuard } from 'src/router/login-guard'
+import { useRoleGuard } from 'src/router/role-guard'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default defineRouter(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : process.env.VUE_ROUTER_MODE === 'history'
+      ? createWebHistory
+      : createWebHashHistory
+
+  const router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes: setupLayouts(routes),
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.VUE_ROUTER_BASE),
+  })
+
+  if (import.meta.hot) {
+    handleHotUpdate(router)
+  }
+
+  useLoginGuard(router)
+  useRoleGuard(router)
+
+  return router
+})
--- a/tsugini/src/router/login-guard.ts
+++ b/tsugini/src/router/login-guard.ts
@ -0,0 +1,18 @@
+import type { Router } from 'vue-router'
+import { useCurrentUser } from 'colada/queries/current-user'
+
+// check if the user is authenticated before navigating to any page
+// the authentication is cached by Pinia Colada
+// redirect to the startup page if not authenticated
+export function useLoginGuard(router: Router) {
+  router.beforeEach((to) => {
+    if (!to.meta.noAuth) {
+      const { data } = useCurrentUser()
+      const authenticated = data.value
+      if (!authenticated) {
+        const query = Object.assign({}, to.query, { redirect: to.fullPath })
+        return { name: '/startup', query: query }
+      }
+    }
+  })
+}
--- a/tsugini/src/router/role-guard.ts
+++ b/tsugini/src/router/role-guard.ts
@ -0,0 +1,16 @@
+import type { Router } from 'vue-router'
+import { useCurrentUser } from 'colada/queries/current-user'
+
+// check if the user has the necessary role before navigating to restricted pages
+// the authentication is cached by Pinia Colada
+// redirect to the home page in case of insufficient permissions
+export function useRoleGuard(router: Router) {
+  router.beforeEach((to) => {
+    if (to.meta.requiresRole) {
+      const { data } = useCurrentUser()
+      if (!data.value?.roles?.includes(to.meta.requiresRole)) {
+        return { name: '/' }
+      }
+    }
+  })
+}
--- a/tsugini/src/stores/app.ts
+++ b/tsugini/src/stores/app.ts
@ -0,0 +1,14 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+import { useQuasar } from 'quasar'
+
+export const useAppStore = defineStore('app', {
+  state: () => ({
+    loginRememberMe: false,
+    drawer: !useQuasar().platform.is.mobile.valueOf(),
+  }),
+  persist: true,
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useAppStore, import.meta.hot))
+}
--- a/tsugini/src/stores/example-store.ts
+++ b/tsugini/src/stores/example-store.ts
@ -0,0 +1,21 @@
+import { defineStore, acceptHMRUpdate } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    counter: 0,
+  }),
+
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+
+  actions: {
+    increment() {
+      this.counter++
+    },
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useCounterStore, import.meta.hot))
+}
--- a/tsugini/src/stores/index.ts
+++ b/tsugini/src/stores/index.ts
@ -0,0 +1,33 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface PiniaCustomProperties {
+    // add your custom properties here, if any
+  }
+}
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  pinia.use(piniaPluginPersistedstate)
+
+  return pinia
+})
--- a/tsugini/src/styles/global.scss
+++ b/tsugini/src/styles/global.scss
@ -0,0 +1,12 @@
+.link-none {
+    text-decoration: none;
+}
+
+.link-underline {
+    text-decoration: none;
+    color: var(--input-text-color)
+}
+
+.link-underline:hover {
+    text-decoration: underline;
+}
--- a/tsugini/src/typed-router.d.ts
+++ b/tsugini/src/typed-router.d.ts
@ -0,0 +1,33 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/history': RouteRecordInfo<'/history', '/history', Record<never, never>, Record<never, never>>,
+    '/login': RouteRecordInfo<'/login', '/login', Record<never, never>, Record<never, never>>,
+    '/notfound': RouteRecordInfo<'/notfound', '/notfound', Record<never, never>, Record<never, never>>,
+    '/server/announcements': RouteRecordInfo<'/server/announcements', '/server/announcements', Record<never, never>, Record<never, never>>,
+    '/server/metrics': RouteRecordInfo<'/server/metrics', '/server/metrics', Record<never, never>, Record<never, never>>,
+    '/server/settings': RouteRecordInfo<'/server/settings', '/server/settings', Record<never, never>, Record<never, never>>,
+    '/server/ui': RouteRecordInfo<'/server/ui', '/server/ui', Record<never, never>, Record<never, never>>,
+    '/server/updates': RouteRecordInfo<'/server/updates', '/server/updates', Record<never, never>, Record<never, never>>,
+    '/server/users': RouteRecordInfo<'/server/users', '/server/users', Record<never, never>, Record<never, never>>,
+    '/startup': RouteRecordInfo<'/startup', '/startup', Record<never, never>, Record<never, never>>,
+  }
+}
--- a/tsugini/src/types/Actuator.ts
+++ b/tsugini/src/types/Actuator.ts
@ -0,0 +1,22 @@
+export interface ActuatorInfo {
+  git: ActuatorGit
+  build: ActuatorBuild
+}
+
+export interface ActuatorGit {
+  commit: ActuatorGitCommit
+  branch: string
+}
+
+export interface ActuatorGitCommit {
+  time: Date
+  id: string
+}
+
+export interface ActuatorBuild {
+  version: string
+  artifact: string
+  name: string
+  group: string
+  time: Date
+}
--- a/tsugini/src/types/RouterMeta.d.ts
+++ b/tsugini/src/types/RouterMeta.d.ts
@ -0,0 +1,15 @@
+// This can be directly added to any of your `.ts` files like `router.ts`
+// It can also be added to a `.d.ts` file. Make sure it's included in
+// project's tsconfig.json "files"
+import 'vue-router'
+import type { UserRoles } from '@/types/UserRoles.ts'
+
+// To ensure it is treated as a module, add at least one `export` statement
+export {}
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    noAuth?: boolean
+    requiresRole?: UserRoles
+  }
+}
--- a/tsugini/src/types/UserRoles.ts
+++ b/tsugini/src/types/UserRoles.ts
@ -0,0 +1,7 @@
+export enum UserRoles {
+  ADMIN = 'ADMIN',
+  FILE_DOWNLOAD = 'FILE_DOWNLOAD',
+  PAGE_STREAMING = 'PAGE_STREAMING',
+  KOBO_SYNC = 'KOBO_SYNC',
+  KOREADER_SYNC = 'KOREADER_SYNC',
+}
--- a/tsugini/src/utils/common-messages.ts
+++ b/tsugini/src/utils/common-messages.ts
@ -0,0 +1,14 @@
+import {defineMessage} from 'vue-intl'
+
+export const commonMessages = {
+  somethingWentWrongTitle: defineMessage({
+                  description: 'Common message: an error happened while loading data',
+                  defaultMessage: 'Something went wrong',
+                  id: 'ixQlWv',
+                }),
+  somethingWentWrongSubTitle: defineMessage({
+                  description: 'Common message: an error happened while loading data, explanation',
+                  defaultMessage: 'There might be a problem with your connection or your server.',
+                  id: 'hYO2n6',
+                }),
+}
--- a/tsugini/src/utils/dev.ts
+++ b/tsugini/src/utils/dev.ts
@ -0,0 +1,3 @@
+export function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
--- a/tsugini/tsconfig.json
+++ b/tsugini/tsconfig.json
@ -0,0 +1,12 @@
+{
+  "extends": "./.quasar/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler", // Komga: https://uvr.esm.is/introduction.html#setup
+    "types": [
+      "unplugin-vue-router/client", // Komga: https://uvr.esm.is/introduction.html#setup
+      "vite-plugin-vue-layouts-next/client" // Komga: https://github.com/loicduong/vite-plugin-vue-layouts-next#client-types
+    ]
+  }
+}