snapexcel 1.1.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snapexcel",
-  "version": "1.1.0",
+  "version": "1.2.2",
   "description": "Desktop Screenshot Logger for UI Testing - Capture any window including Android emulators",
   "main": "src/main.js",
   "bin": {

package/src/index.html

@@ -11,13 +11,19 @@
     <!-- Header -->
     <header class="header">
       <div class="logo">
-        <span class="logo-icon">📸</span>
+        <div class="logo-icon-wrapper">
+          <svg class="logo-icon-svg" width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="5" width="20" height="14" rx="2" stroke="white" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="3.5" stroke="white" stroke-width="1.5"/>
+            <circle cx="12" cy="12" r="1.5" fill="white"/>
+            <path d="M7 5V4C7 3.44772 7.44772 3 8 3H10" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+            <circle cx="17" cy="8" r="1" fill="#FFC107"/>
+            <path d="M2 8H4" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
         <h1>Screenshot Logger</h1>
       </div>
-      <div class="header-actions">
-        <button id="btn-minimize-header" class="btn-icon btn-minimize-header hidden" title="Minimize">➖</button>
-      </div>
-    </header>
+          </header>
 
     <!-- Setup View -->
     <div id="setup-view" class="view">
@@ -39,8 +45,8 @@
             <path d="M13 15.5H16V18H13" stroke="#217346" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         </div>
-        <h2>Start New Session</h2>
-        <p>Capture screenshots and export to Excel</p>
+        <h2>New Capture Session</h2>
+        <p>Document your workflow with screenshots</p>
 
         <div class="form-group">
           <label for="file-name">Excel File Name</label>
@@ -53,15 +59,28 @@
         </div>
 
         <button id="btn-start-session" class="btn btn-primary btn-large">
-          Start Session
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 6px;">
+            <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2"/>
+            <circle cx="12" cy="12" r="3" fill="white"/>
+            <path d="M12 5V3" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M12 21V19" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M5 12H3" stroke="white" stroke-width="2" stroke-linecap="round"/>
+            <path d="M21 12H19" stroke="white" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          Start Capturing
         </button>
 
         <div class="divider-text">
           <span>or</span>
         </div>
 
-        <button id="btn-import-excel" class="btn btn-secondary btn-large">
-          📂 Import Existing Excel
+        <button id="btn-import-excel" class="btn-import-excel">
+          <svg class="btn-import-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" fill="white" stroke="white" stroke-width="0.5"/>
+            <path d="M14 2V8H20" fill="rgba(255,255,255,0.8)" stroke="white" stroke-width="0.5"/>
+            <text x="12" y="16" text-anchor="middle" fill="#185c37" font-size="7" font-weight="bold" font-family="Arial">XLS</text>
+          </svg>
+          Open Excel
         </button>
       </div>
     </div>
@@ -93,13 +112,6 @@
         </div>
       </div>
 
-      <!-- Secondary Actions -->
-      <div class="secondary-actions">
-        <button id="btn-note" class="btn btn-secondary btn-full" title="Add Note">
-          📝 Add Note
-        </button>
-      </div>
-
       <!-- Screenshots Grid -->
       <div class="screenshots-section">
         <div class="section-header">

package/src/renderer.js

@@ -33,17 +33,11 @@ const elements = {
   btnStartSession: document.getElementById('btn-start-session'),
   btnImportExcel: document.getElementById('btn-import-excel'),
 
-  // Header
-  btnMinimizeHeader: document.getElementById('btn-minimize-header'),
-
   // Session Info
   currentFileName: document.getElementById('current-file-name'),
   sheetSelect: document.getElementById('sheet-select'),
   btnAddSheet: document.getElementById('btn-add-sheet'),
 
-  // Actions
-  btnNote: document.getElementById('btn-note'),
-
   // Screenshots
   screenshotsGrid: document.getElementById('screenshots-grid'),
   screenshotCount: document.getElementById('screenshot-count'),
@@ -276,15 +270,6 @@ function setupEventListeners() {
     if (e.key === 'Enter') startSession();
   });
 
-  // Header
-  elements.btnMinimizeHeader.addEventListener('click', showMinimalView);
-
-  // Minimal view capture
-  elements.btnCaptureMinimal.addEventListener('click', captureScreenshot);
-
-  // Secondary Actions
-  elements.btnNote.addEventListener('click', openNoteModal);
-
   // Sheet Management
   elements.sheetSelect.addEventListener('change', switchSheet);
   elements.btnAddSheet.addEventListener('click', openSheetModal);
@@ -299,6 +284,14 @@ function setupEventListeners() {
   elements.btnCancelNote.addEventListener('click', closeNoteModal);
   elements.btnSaveNote.addEventListener('click', saveNote);
 
+  // Save note on Ctrl+Enter or Cmd+Enter
+  elements.noteText.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      saveNote();
+    }
+  });
+
   // Preview Modal
   elements.btnPreviewClose.addEventListener('click', closePreview);
   elements.btnPreviewPrev.addEventListener('click', showPrevPreview);
@@ -333,30 +326,15 @@ function setupEventListeners() {
 function showSetupView() {
   elements.setupView.classList.remove('hidden');
   elements.captureView.classList.add('hidden');
-  elements.minimalView.classList.add('hidden');
-  elements.btnMinimizeHeader.classList.add('hidden');
   elements.fileNameInput.focus();
 }
 
 function showCaptureView() {
   elements.setupView.classList.add('hidden');
   elements.captureView.classList.remove('hidden');
-  elements.minimalView.classList.add('hidden');
-  elements.btnMinimizeHeader.classList.remove('hidden');
-  state.isMinimalView = false;
   updateUI();
 }
 
-function showMinimalView() {
-  elements.setupView.classList.add('hidden');
-  elements.captureView.classList.add('hidden');
-  elements.minimalView.classList.remove('hidden');
-  elements.btnMinimizeHeader.classList.add('hidden');
-  state.isMinimalView = true;
-  ipcRenderer.invoke('set-window-size', { width: 300, height: 180 });
-  updateMinimalUI();
-}
-
 // ==================== Session Management ====================
 function startSession() {
   const fileName = elements.fileNameInput.value.trim();
@@ -1045,6 +1023,27 @@ function handlePreviewKeyboard(e) {
   // Only handle if preview is open
   if (state.previewIndex < 0) return;
 
+  // Don't handle keyboard shortcuts if user is typing in an input or textarea
+  const activeElement = document.activeElement;
+  const isTyping = activeElement && (
+    activeElement.tagName === 'INPUT' ||
+    activeElement.tagName === 'TEXTAREA' ||
+    activeElement.isContentEditable
+  );
+
+  // If note modal is open, only handle Escape to close it
+  if (!elements.noteModal.classList.contains('hidden')) {
+    if (e.key === 'Escape') {
+      closeNoteModal();
+      e.preventDefault();
+    }
+    // Don't process other keys when note modal is open
+    return;
+  }
+
+  // If user is typing somewhere, don't intercept
+  if (isTyping) return;
+
   switch (e.key) {
     case 'Escape':
       closePreview();
@@ -1060,9 +1059,9 @@ function handlePreviewKeyboard(e) {
       openNoteFromPreview();
       break;
     case 'Delete':
-    case 'Backspace':
       deleteFromPreview();
       break;
+    // Don't capture Backspace - it's used for typing
   }
 }
 
@@ -1282,7 +1281,7 @@ function generatePDFHTML() {
     .screenshot-row:hover { background: #E6F2FC; }
     .col-num { width: 50px; text-align: center; display: flex; align-items: center; justify-content: center; }
     .col-screenshot { width: 420px; }
-    .col-notes { flex: 1; font-size: 12px; padding-left: 15px; }
+    .col-notes { flex: 1; font-size: 12px; padding-left: 15px; word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; max-width: 400px; }
     .timestamp {
       font-size: 11px;
       color: #666;
@@ -1438,11 +1437,12 @@ function generateHTML() {
     .content { padding: 30px 40px; }
     .sheet { margin-bottom: 40px; }
     .sheet h2 { color: #041E42; font-size: 20px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 3px solid #0071DC; }
-    table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
+    table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; }
     th { background: #041E42; color: white; padding: 12px 16px; text-align: left; font-weight: 600; }
-    td { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; vertical-align: top; }
+    td { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; vertical-align: top; word-wrap: break-word; overflow-wrap: break-word; }
     tr:hover { background: #E6F2FC; }
     .timestamp { font-size: 12px; color: #666; margin-bottom: 8px; }
+    td:nth-child(3) { max-width: 400px; word-break: break-word; }
     .screenshot-img:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
     .footer { background: #041E42; color: white; padding: 20px 40px; text-align: center; font-size: 13px; }
 
@@ -1617,10 +1617,11 @@ async function generateXLSX() {
   // xl/styles.xml - Dark Blue Corporate Theme with timestamp style
   zip.file('xl/styles.xml', `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 <styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
-  <fonts count="3">
+  <fonts count="4">
     <font><sz val="11"/><name val="Calibri"/></font>
     <font><b/><sz val="11"/><color rgb="FFFFFFFF"/><name val="Calibri"/></font>
     <font><sz val="10"/><color rgb="FF666666"/><name val="Calibri"/></font>
+    <font><sz val="16"/><name val="Calibri"/></font>
   </fonts>
   <fills count="3">
     <fill><patternFill patternType="none"/></fill>
@@ -1632,11 +1633,12 @@ async function generateXLSX() {
     <border><left style="thin"><color rgb="FF041E42"/></left><right style="thin"><color rgb="FF041E42"/></right><top style="thin"><color rgb="FF041E42"/></top><bottom style="thin"><color rgb="FF041E42"/></bottom></border>
   </borders>
   <cellStyleXfs count="1"><xf/></cellStyleXfs>
-  <cellXfs count="4">
+  <cellXfs count="5">
     <xf/>
     <xf fontId="1" fillId="2" borderId="1" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1"><alignment horizontal="center" vertical="center"/></xf>
     <xf borderId="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
     <xf fontId="2" borderId="1" applyFont="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
+    <xf fontId="3" borderId="1" applyFont="1" applyBorder="1" applyAlignment="1"><alignment vertical="top" wrapText="1"/></xf>
   </cellXfs>
 </styleSheet>`);
 
@@ -1707,12 +1709,12 @@ async function generateXLSX() {
       // Row height: 540 for landscape (~7.5 inches), 720 for portrait (~10 inches)
       const rowHeight = isPortrait ? 720 : 540;
 
-      // Timestamp shown at top of cell B (above image), Notes in column C
+      // Timestamp shown at top of cell B (above image), Notes in column C with 16pt font
       sheetXml += `
     <row r="${rowNum}" ht="${rowHeight}" customHeight="1">
       <c r="A${rowNum}" s="2"><v>${i + 1}</v></c>
       <c r="B${rowNum}" s="3" t="s"><v>${stringIndex[timestamp]}</v></c>
-      <c r="C${rowNum}" s="2" t="s"><v>${stringIndex[notes]}</v></c>
+      <c r="C${rowNum}" s="4" t="s"><v>${stringIndex[notes]}</v></c>
     </row>`;
     }
 

package/src/styles.css

@@ -66,17 +66,36 @@ body {
 .logo {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
-.logo-icon {
-  font-size: 20px;
+.logo-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 10px;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+}
+
+.logo-icon-wrapper:hover {
+  background: rgba(255, 255, 255, 0.25);
+  transform: scale(1.05);
+}
+
+.logo-icon-svg {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
 }
 
 .logo h1 {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 600;
   letter-spacing: -0.3px;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .header-actions {
@@ -124,6 +143,17 @@ body {
   color: white;
 }
 
+.btn-floating-mode {
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+}
+
+.btn-floating-mode:hover {
+  background: rgba(255, 255, 255, 0.35);
+  transform: scale(1.05);
+}
+
 /* Views */
 .view {
   display: flex;
@@ -500,39 +530,68 @@ body {
   display: flex;
   flex-direction: column;
   margin-bottom: 12px;
+  background: linear-gradient(145deg, #f4f6f9 0%, #eaeff4 100%);
+  border-radius: 5px;
+  border: 0.5px solid rgba(4, 30, 66, 0.04);
+  padding: 5px;
 }
 
 .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 10px;
+  color: var(--primary-color);
+  margin-bottom: 5px;
+  padding: 0 3px 3px 3px;
+  border-bottom: 0.5px solid rgba(4, 30, 66, 0.04);
 }
 
 .badge {
   background: var(--primary-color);
   color: white;
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
+  padding: 2px 7px;
+  border-radius: 8px;
+  font-size: 10px;
   font-weight: 600;
 }
 
 .screenshots-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
+  gap: 8px;
   overflow-y: auto;
-  padding: 10px;
-  background: var(--background-secondary);
-  border-radius: var(--border-radius-sm);
-  min-height: 80px;
+  padding: 5px;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 3px;
+  min-height: 70px;
   max-height: 200px;
 }
 
+/* Ultra thin scrollbar - both vertical and horizontal */
+.screenshots-grid::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+.screenshots-grid::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.screenshots-grid::-webkit-scrollbar-thumb {
+  background: rgba(4, 30, 66, 0.15);
+  border-radius: 2px;
+}
+
+.screenshots-grid::-webkit-scrollbar-thumb:hover {
+  background: rgba(4, 30, 66, 0.3);
+}
+
+.screenshots-grid::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .empty-state {
   grid-column: 1 / -1;
   display: flex;
@@ -862,7 +921,7 @@ body {
   align-items: center;
   width: 100%;
   max-width: 280px;
-  margin: 16px 0;
+  margin: 20px 0 16px 0;
 }
 
 .divider-text::before,
@@ -879,6 +938,41 @@ body {
   font-size: 12px;
 }
 
+/* Import Excel Button - Rich Excel Green Theme */
+.btn-import-excel {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 280px;
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #217346 0%, #185c37 100%);
+  border: none;
+  border-radius: 10px;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 3px 10px rgba(33, 115, 70, 0.35);
+}
+
+.btn-import-excel:hover {
+  background: linear-gradient(135deg, #28a745 0%, #217346 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(33, 115, 70, 0.45);
+}
+
+.btn-import-excel:active {
+  transform: translateY(0);
+  box-shadow: 0 3px 10px rgba(33, 115, 70, 0.35);
+}
+
+.btn-import-icon {
+  flex-shrink: 0;
+}
+
 /* Fullscreen Preview Modal */
 .preview-modal {
   position: fixed;