0.3.5

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tools-app",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tools-app",
-      "version": "0.3.3",
+      "version": "0.3.5",
       "dependencies": {
         "lucide-vue-next": "^0.575.0",
         "vue": "^3.5.25",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tools-app",
   "private": true,
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -5,6 +5,7 @@ import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import Sidebar from './components/Sidebar.vue'
 import InstallPrompt from './components/InstallPrompt.vue'
+import ReloadPrompt from './components/ReloadPrompt.vue'
 
 const isSidebarOpen = ref(window.innerWidth >= 768)
 const router = useRouter()
@@ -53,6 +54,7 @@ onUnmounted(() => {
   </div>
   <Footer />
   <InstallPrompt />
+  <ReloadPrompt />
 </template>
 
 <style scoped>

src/components/ReloadPrompt.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { useRegisterSW } from 'virtual:pwa-register/vue'
+import { watch, onMounted } from 'vue'
+
+// Zmieniamy na autoUpdate w configu, więc tutaj tylko nasłuchujemy i ewentualnie wymuszamy
+const {
+  needRefresh,
+  updateServiceWorker,
+} = useRegisterSW({
+  immediate: true,
+  onRegistered(r) {
+    // Sprawdzaj aktualizacje co godzinę
+    r && setInterval(() => {
+      r.update()
+    }, 60 * 60 * 1000)
+  }
+})
+
+const updateSW = async () => {
+  if ('serviceWorker' in navigator) {
+    try {
+      const registration = await navigator.serviceWorker.ready
+      console.log('Checking for SW update...')
+      await registration.update()
+    } catch (e) {
+      console.error('Failed to update SW:', e)
+    }
+  }
+}
+
+onMounted(() => {
+  // Check on load
+  updateSW()
+
+  // Check when app becomes visible again (e.g. switching tabs/apps)
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      updateSW()
+    }
+  })
+})
+</script>
+
+<template>
+  <div
+    v-if="needRefresh"
+    class="pwa-toast"
+    role="alert"
+  >
+    <div class="message">
+      New content available, click on reload button to update.
+    </div>
+    <button @click="updateServiceWorker()">
+      Reload
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.pwa-toast {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  margin: 16px;
+  padding: 12px;
+  border: 1px solid var(--glass-border);
+  border-radius: 4px;
+  z-index: 10000;
+  text-align: left;
+  box-shadow: var(--glass-shadow);
+  background-color: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pwa-toast button {
+  border: 1px solid var(--glass-border);
+  outline: none;
+  margin-right: 5px;
+  border-radius: 2px;
+  padding: 3px 10px;
+  cursor: pointer;
+  background: var(--button-bg);
+  color: var(--text-color);
+  transition: all 0.2s;
+}
+
+.pwa-toast button:hover {
+  background: var(--button-hover-bg);
+}
+</style>

src/components/tools/Passwords.vue

@@ -75,7 +75,7 @@ const generatePasswords = () => {
     <div class="tool-panel">
       <div class="panel-header">
         <h2 class="tool-title">Bulk Passwords Generator</h2>
-        <div class="action-area">
+        <div class="action-area desktop-only">
           <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple>
             Generate
           </button>
@@ -131,6 +131,12 @@ const generatePasswords = () => {
         </div>
       </div>
 
+      <div class="mobile-only" style="margin-top: 1rem; width: 100%;">
+        <button class="btn-neon generate-btn" @click="generatePasswords" v-ripple style="width: 100%;">
+          Generate
+        </button>
+      </div>
+
       <div class="result-area" :style="{ height: textareaHeight }">
         <textarea
           class="tool-textarea"
@@ -353,6 +359,14 @@ const generatePasswords = () => {
   letter-spacing: 1px;
 }
 
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .options-grid {
     flex-direction: column;
@@ -372,5 +386,13 @@ const generatePasswords = () => {
   .generate-btn {
     width: 100%;
   }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: block !important;
+  }
 }
 </style>