0.1.2

feat: update passwords tool UI, fix layout issues, and set PWA theme color
fix(pwa): add workbox cleanup options to fix undefined payload error
2026-02-27 00:31:40 +00:00 · 2026-02-27 00:31:26 +00:00 · 2026-02-26 23:52:47 +00:00 · 2026-02-26 23:49:55 +00:00 · 2026-02-26 23:46:17 +00:00 · 2026-02-26 23:41:28 +00:00
14 changed files with 8720 additions and 54 deletions
--- a/dev-dist/registerSW.js
+++ b/dev-dist/registerSW.js
@@ -0,0 +1 @@
 if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -0,0 +1,92 @@
 /**
 * Copyright 2018 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *     http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 // If the loader is already loaded, just stop.
 if (!self.define) {
  let registry = {};
  // Used for `eval` and `importScripts` where we can't get script URL by other means.
  // In both cases, it's safe to use a global var because those functions are synchronous.
  let nextDefineUri;
  const singleRequire = (uri, parentUri) => {
    uri = new URL(uri + ".js", parentUri).href;
    return registry[uri] || (
        new Promise(resolve => {
          if ("document" in self) {
            const script = document.createElement("script");
            script.src = uri;
            script.onload = resolve;
            document.head.appendChild(script);
          } else {
            nextDefineUri = uri;
            importScripts(uri);
            resolve();
          }
        })
      .then(() => {
        let promise = registry[uri];
        if (!promise) {
          throw new Error(`Module ${uri} didn’t register its module`);
        }
        return promise;
      })
    );
  };
  self.define = (depsNames, factory) => {
    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
    if (registry[uri]) {
      // Module is already loading or loaded.
      return;
    }
    let exports = {};
    const require = depUri => singleRequire(depUri, uri);
    const specialDeps = {
      module: { uri },
      exports,
      require
    };
    registry[uri] = Promise.all(depsNames.map(
      depName => specialDeps[depName] || require(depName)
    )).then(deps => {
      factory(...deps);
      return exports;
    });
  };
 }
 define(['./workbox-5a5d9309'], (function (workbox) { 'use strict';
  self.skipWaiting();
  workbox.clientsClaim();
  /**
   * The precacheAndRoute() method efficiently caches and responds to
   * requests for URLs in the manifest.
   * See https://goo.gl/S9QRab
   */
  workbox.precacheAndRoute([{
    "url": "registerSW.js",
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
    "revision": "0.blm8uefachg"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
    allowlist: [/^\/$/]
  }));
 }));
--- a/dev-dist/workbox-5a5d9309.js
+++ b/dev-dist/workbox-5a5d9309.js
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="apple-touch-icon" href="/favicon.svg" />
    <meta name="theme-color" content="#4facfe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tools App</title>
  </head>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tools-app",
  "private": true,
-  "version": "0.1.0",
+  "version": "0.1.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -15,6 +15,7 @@
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
-    "vite": "^7.3.1"
+    "vite": "^7.3.1",
    "vite-plugin-pwa": "^1.2.0"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1,20 @@
 <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0ea5e9;stop-opacity:1" />
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-opacity="0.25"/>
    </filter>
  </defs>
  <!-- Background Circle with Gradient -->
  <circle cx="256" cy="256" r="240" fill="url(#grad1)" />
  <!-- Gear Icon -->
  <g transform="translate(106, 106) scale(0.6)" filter="url(#shadow)">
    <path fill="white" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/>
  </g>
 </svg>
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -51,6 +52,7 @@ onUnmounted(() => {
    </main>
  </div>
  <Footer />
  <InstallPrompt />
 </template>
 <style scoped>
@@ -59,16 +61,27 @@ onUnmounted(() => {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: hidden; /* Ensure body doesn't scroll */
 }
 .main-content {
  flex: 1;
  padding: 2rem;
  width: 100%;
-  max-width: 100%; /* Ensure it doesn't overflow */
+  max-width: 100%;
-  overflow-y: auto; /* Allow content to scroll independently */
+  /* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
-  height: 100%; /* Take full height of app-body */
+  padding-bottom: calc(2rem + 40px + env(safe-area-inset-bottom));
 }
@media (min-width: 768px) {
  .app-body {
    overflow: hidden;
  }
  .main-content {
    overflow-y: auto;
    height: 100%;
    padding-bottom: 2rem;
  }
 }
 .sidebar-overlay {
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -23,9 +23,20 @@ const version = __APP_VERSION__;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto; /* Push to bottom in flex container */
  z-index: 10;
-  height: 30px;
+  /* Remove fixed height to allow content to dictate size */
  /* height: 30px; */
  position: fixed;
  bottom: 0;
  left: 0;
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
 }
@media (min-width: 768px) {
  .app-footer {
    position: static;
    margin-top: auto;
  }
 }
 .footer-content {
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -31,7 +31,13 @@ onMounted(() => {
  <header class="app-header glass-panel unselectable">
    <div class="header-content">
      <div class="header-left">
-        <button class="menu-btn" @click="$emit('toggleSidebar')" aria-label="Toggle Menu" v-ripple>
+        <button
          class="menu-btn"
          @click="$emit('toggleSidebar')"
          aria-label="Toggle Menu"
          title="Toggle Menu"
          v-ripple
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="6" x2="21" y2="6"></line>
@@ -61,7 +67,8 @@ onMounted(() => {
  color: var(--text-color);
  padding: 1rem;
  /* box-shadow handled by glass-panel class */
-  position: relative;
+  position: sticky;
  top: 0;
  z-index: 100;
  border-left: none;
  border-right: none;
--- a/src/components/InstallPrompt.vue
+++ b/src/components/InstallPrompt.vue
@@ -0,0 +1,153 @@
 <template>
  <div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
    <div class="prompt-content">
      <span class="prompt-text">Install app for faster access</span>
      <div class="prompt-actions">
        <button @click="installPWA" class="install-btn">Install</button>
        <button @click="dismissPrompt" class="dismiss-btn">✕</button>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
 const showInstallPrompt = ref(false)
 let deferredPrompt = null
 const handleBeforeInstallPrompt = (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault()
  // Only show install prompt if we are on the specific domain
  if (window.location.hostname !== 'tools.7u.pl') {
    return
  }
  // Stash the event so it can be triggered later.
  deferredPrompt = e
  // Update UI to notify the user they can add to home screen
  showInstallPrompt.value = true
 }
 const installPWA = async () => {
  if (!deferredPrompt) return
  // Show the install prompt
  deferredPrompt.prompt()
  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice
  console.log(`User response to the install prompt: ${outcome}`)
  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null
  showInstallPrompt.value = false
 }
 const dismissPrompt = () => {
  showInstallPrompt.value = false
  deferredPrompt = null
 }
 onMounted(() => {
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
 })
 onBeforeUnmount(() => {
  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
 })
 </script>
 <style scoped>
 .install-prompt {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom)); /* Above footer with extra space */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  padding: 1rem;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
  border-radius: 12px;
 }
 .prompt-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
 }
 .prompt-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-strong);
 }
 .prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
 }
 .install-btn {
  background-color: var(--primary-accent);
  color: #000; /* Dark text on bright cyan accent for dark mode */
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
 }
 .dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.5rem;
 }
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
 }
@media (min-width: 768px) {
  .install-prompt {
    bottom: 2rem;
    right: 2rem;
    left: auto;
    transform: none;
  }
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
 }
 /* Light theme overrides for better contrast */
 :global(:root[data-theme="light"]) .install-btn {
  background-color: var(--accent-purple);
  color: #fff;
 }
 </style>
--- a/src/components/tools/Passwords.vue
+++ b/src/components/tools/Passwords.vue
@@ -104,11 +104,19 @@ const generatePasswords = () => {
        <div class="inputs-group">
          <div class="input-wrapper">
            <label>Password Length</label>
            <div class="number-control">
              <button class="control-btn" @click="length > 4 ? length-- : null">-</button>
              <input type="number" v-model="length" min="4" max="128" class="number-input">
              <button class="control-btn" @click="length < 128 ? length++ : null">+</button>
            </div>
          </div>
          <div class="input-wrapper">
            <label>Passwords Number</label>
            <div class="number-control">
              <button class="control-btn" @click="count > 1 ? count-- : null">-</button>
              <input type="number" v-model="count" min="1" max="1000" class="number-input">
              <button class="control-btn" @click="count < 1000 ? count++ : null">+</button>
            </div>
          </div>
        </div>
      </div>
@@ -122,7 +130,7 @@ const generatePasswords = () => {
      <div class="result-area">
        <label>Passwords</label>
        <textarea
-          class="result-textarea glass-panel"
+          class="result-textarea glass-panel selectable"
          v-model="result"
          placeholder="Generated passwords will appear here..."
        ></textarea>
@@ -138,6 +146,7 @@ const generatePasswords = () => {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  height: 100%;
 }
 .tool-panel {
@@ -147,6 +156,27 @@ const generatePasswords = () => {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-height: 100%;
  overflow-y: auto;
 }
 /* Custom scrollbar for tool panel */
 .tool-panel::-webkit-scrollbar {
  width: 8px;
 }
 .tool-panel::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
 }
 .tool-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
 }
 .tool-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
 }
 .tool-title {
@@ -166,8 +196,8 @@ const generatePasswords = () => {
 }
 .checkbox-group {
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  flex-wrap: wrap;
  gap: 1rem;
 }
@@ -179,6 +209,8 @@ const generatePasswords = () => {
  user-select: none;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  flex: 1 0 auto;
 }
 .checkbox-label input {
@@ -196,16 +228,17 @@ const generatePasswords = () => {
  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: 4px;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
 }
-.checkbox-label:hover input ~ .checkmark {
+.checkbox-label:hover .checkmark {
-  border-color: var(--accent-cyan);
+  border-color: var(--toggle-hover-border);
 }
 .checkbox-label input:checked ~ .checkmark {
-  background-color: var(--accent-cyan);
+  background-color: var(--primary-accent);
-  border-color: var(--accent-cyan);
+  border-color: var(--primary-accent);
  box-shadow: 0 0 10px var(--primary-accent);
 }
 .checkmark:after {
@@ -230,8 +263,8 @@ const generatePasswords = () => {
 .inputs-group {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
 }
 .input-wrapper {
@@ -243,68 +276,169 @@ const generatePasswords = () => {
 }
 .input-wrapper label {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
-  color: var(--text-muted);
+}
-  font-weight: 600;
+
 .number-control {
  display: flex;
  align-items: stretch;
  gap: 0;
 }
 .control-btn {
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  color: var(--text-color);
  border-radius: 0;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
 }
 .control-btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-right: none;
 }
 .control-btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left: none;
 }
 .control-btn:hover {
  background-color: var(--button-hover-bg);
  border-color: var(--toggle-hover-border);
  z-index: 1;
 }
 .control-btn:active {
  transform: scale(0.98);
 }
 .number-input {
-  background: var(--toggle-bg);
+  flex: 1;
  padding: 0.8rem;
  background-color: var(--toggle-bg);
  border: 1px solid var(--toggle-border);
  border-radius: 0;
  color: var(--text-color);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 1rem;
-  outline: none;
+  transition: border-color 0.3s;
-  transition: border-color 0.2s;
+  text-align: center;
  appearance: textfield; /* Remove default spinner */
  min-width: 0;
 }
 .number-input::-webkit-outer-spin-button,
 .number-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
 }
 .number-input:focus {
-  border-color: var(--accent-cyan);
+  outline: none;
  border-color: var(--primary-accent);
  box-shadow: 0 0 0 2px var(--toggle-active-shadow);
  z-index: 2;
  position: relative;
 }
 .action-area {
  display: flex;
-  justify-content: flex-end; /* Align button to right */
+  justify-content: center;
  margin-top: 1rem;
  width: 100%;
 }
-.generate-btn {
+.btn-neon {
  width: 100%;
-  padding: 12px;
+  background: var(--button-bg);
  border: 1px solid var(--button-border);
  color: var(--button-text);
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
-  letter-spacing: 0.5px;
+  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
 }
 .btn-neon:hover {
  background: var(--button-hover-bg);
  box-shadow: var(--button-hover-shadow);
  transform: translateY(-2px);
  border-color: var(--toggle-hover-border);
 }
 .btn-neon:active {
  transform: translateY(1px);
  box-shadow: var(--button-active-shadow);
 }
 .result-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 200px;
 }
 .result-area label {
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  border-left: 3px solid var(--accent-purple);
  padding-left: 10px;
 }
 .result-textarea {
  width: 100%;
-  height: 300px;
+  box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.2); /* Slightly darker for contrast */
+  height: 100%;
-  color: var(--text-color);
+  min-height: 200px;
  border: 1px solid var(--accent-purple);
  padding: 1rem;
-  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--toggle-border);
  border-radius: 12px;
  color: var(--text-strong);
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
-  outline: none;
+  line-height: 1.6;
 }
-:root[data-theme="light"] .result-textarea {
+.result-textarea:focus {
-  background: rgba(255, 255, 255, 0.5);
+  outline: none;
  border-color: var(--primary-accent);
 }
 /* Scrollbar for textarea */
 .result-textarea::-webkit-scrollbar {
  width: 8px;
 }
 .result-textarea::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
 }
 .result-textarea::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
 }
 .result-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
 }
 </style>
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,8 @@
 /* Box sizing reset */
 *, *::before, *::after {
  box-sizing: border-box;
 }
 :root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
@@ -84,16 +89,35 @@ body {
  margin: 0;
  display: flex;
  min-width: 320px;
-  height: 100vh;
+  min-height: 100vh;
-  overflow: hidden; /* Prevent body scroll */
+  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
 }
 .selectable {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
 }
 #app {
  width: 100%;
-  height: 100vh;
+  min-height: 100vh;
  display: flex;
  flex-direction: column;
-  overflow: hidden; /* Prevent app scroll */
+}
@media (min-width: 768px) {
  body {
    height: 100vh;
    overflow: hidden;
  }
  #app {
    height: 100vh;
    overflow: hidden;
  }
 }
 /* Common UI Element Styles */
@@ -122,6 +146,12 @@ body {
  outline: none; /* Remove focus outline */
 }
 /* Global button styles */
 button {
  user-select: none;
  -webkit-user-select: none;
 }
 /* Remove focus outline for all buttons */
 button:focus {
  outline: none;
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,10 +1,46 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { VitePWA } from 'vite-plugin-pwa'
 import packageJson from './package.json'
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      includeAssets: ['favicon.svg'],
      manifest: {
        name: 'Tools App',
        short_name: 'Tools',
        description: 'A collection of useful tools',
        theme_color: '#4facfe',
        background_color: '#242424',
        display: 'standalone',
        orientation: 'portrait',
        icons: [
          {
            src: 'favicon.svg',
            sizes: 'any',
            type: 'image/svg+xml',
            purpose: 'any maskable'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,json,vue,txt,woff2}'],
        cleanupOutdatedCaches: true,
        clientsClaim: true,
        skipWaiting: true
      },
      devOptions: {
        enabled: true,
        /* when using generateSW the PWA plugin will switch to classic */
        type: 'module',
        navigateFallback: 'index.html',
      }
    })
  ],
  define: {
    '__APP_VERSION__': JSON.stringify(packageJson.version)
  }
Author	SHA1	Message	Date
Grzegorz Kucmierz	782786ec7e	0.1.2 All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-27 00:31:40 +00:00
Grzegorz Kucmierz	c8a009dda1	feat: update passwords tool UI, fix layout issues, and set PWA theme color	2026-02-27 00:31:26 +00:00
Grzegorz Kucmierz	7c4f1b20b3	fix(pwa): add workbox cleanup options to fix undefined payload error All checks were successful Deploy to Production / deploy (push) Successful in 7s Details	2026-02-26 23:52:47 +00:00
Grzegorz Kucmierz	c3f96bacc7	fix(pwa): improve install prompt visibility and styling All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:49:55 +00:00
Grzegorz Kucmierz	8655533a2d	feat(pwa): add PWA support with auto-update and install prompt All checks were successful Deploy to Production / deploy (push) Successful in 12s Details	2026-02-26 23:46:17 +00:00
Grzegorz Kucmierz	bec57f9e49	feat(ui): add new app icon svg All checks were successful Deploy to Production / deploy (push) Successful in 5s Details	2026-02-26 23:41:28 +00:00
Grzegorz Kucmierz	9ec71db87c	fix(ui): prevent label wrapping in passwords tool All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:38:07 +00:00
Grzegorz Kucmierz	3b229b4719	fix(ui): adjust mobile bottom padding to match top margin All checks were successful Deploy to Production / deploy (push) Successful in 5s Details	2026-02-26 23:35:00 +00:00
Grzegorz Kucmierz	c6baace721	fix(ui): prevent text selection on buttons All checks were successful Deploy to Production / deploy (push) Successful in 6s Details	2026-02-26 23:32:36 +00:00
Grzegorz Kucmierz	ab2da36aa1	0.1.1 All checks were successful Deploy to Production / deploy (push) Successful in 8s Details	2026-02-26 23:21:39 +00:00
Grzegorz Kucmierz	8691106d2f	fix(passwords): adjust textarea width with box-sizing	2026-02-26 23:21:30 +00:00
		`@@ -0,0 +1 @@`
							`if('serviceWorker' in navigator) navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' })`