04/26 Enhanced functionalities

app/templates/vault/index.html

@@ -122,6 +122,15 @@
           <span class="sidebar-icon">🚨</span>
           <span class="sidebar-label">Emergency Access</span>
         </li>
+        <li
+          class="sidebar-item"
+          id="sidebar-import-export"
+          data-view="import-export"
+          data-tooltip="Import / Export"
+        >
+          <span class="sidebar-icon">↕️</span>
+          <span class="sidebar-label">Import / Export</span>
+        </li>
         <li
           class="sidebar-item"
           id="sidebar-generator"
@@ -264,6 +273,54 @@
       </div>
     </div>
 
+    <!-- Import / Export view -->
+    <div id="view-import-export" class="hidden">
+      <header class="vault-header">
+        <h2 class="vault-title">Import / Export</h2>
+      </header>
+      <div class="panel-body">
+
+        <!-- Export -->
+        <section class="import-export-section">
+          <h3 class="import-export-heading">Export Vault</h3>
+          <p class="import-export-desc">
+            Download an encrypted backup of your entire vault. The file contains
+            AES-256-GCM ciphertext — your master password is required to read it.
+            Keep it safe.
+          </p>
+          <div class="import-export-row">
+            <button class="btn-primary" id="btn-export-json">Download encrypted JSON</button>
+            <button class="btn-secondary" id="btn-export-csv">Download CSV (plaintext — handle with care)</button>
+          </div>
+        </section>
+
+        <!-- Import -->
+        <section class="import-export-section">
+          <h3 class="import-export-heading">Import</h3>
+          <p class="import-export-desc">
+            Import from a PassKeeper encrypted JSON export, or from a CSV file exported
+            by Chrome, Bitwarden, or 1Password. Duplicates are not checked — review
+            your vault after importing.
+          </p>
+          <div class="import-export-row">
+            <label class="btn-secondary import-file-label" for="import-file-input">
+              Choose file&hellip;
+            </label>
+            <input type="file" id="import-file-input" accept=".json,.csv" class="hidden" />
+            <span id="import-file-name" class="import-file-name">No file chosen</span>
+          </div>
+          <div id="import-preview" class="import-preview hidden"></div>
+          <div class="import-export-row">
+            <button class="btn-primary" id="btn-import-confirm" disabled>
+              Import items
+            </button>
+          </div>
+          <div id="import-result" class="import-result hidden"></div>
+        </section>
+
+      </div>
+    </div>
+
     <!-- Emergency Access view -->
     <div id="view-emergency" class="hidden">
       <header class="vault-header">