From 01963218abd17d0a1aeafdbfae262b107740ebea Mon Sep 17 00:00:00 2001 From: Daniel Dada Date: Thu, 5 Feb 2026 16:49:00 +0300 Subject: [PATCH] redesign of popup --- popup/popup.css | 1549 +++++++++++++++++++++++----------- popup/popup.html | 346 +++++--- src/popup/PopupController.ts | 370 ++++---- 3 files changed, 1525 insertions(+), 740 deletions(-) diff --git a/popup/popup.css b/popup/popup.css index e25b9f6..38cfe8e 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -1,15 +1,19 @@ @import url('../shared/colors.css'); -@import url('../shared/ui-components.css'); -body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; - background: radial-gradient(120% 120% at 12% 0%, rgba(204, 106, 42, 0.08) 0%, transparent 45%), - linear-gradient(180deg, var(--bg-color) 0%, #f4e9df 100%); - color: var(--text-color); +/* Reset and Base Styles */ +* { + box-sizing: border-box; margin: 0; padding: 0; - width: 360px; - height: 600px; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; + background: var(--bg-color); + color: var(--text-color); + width: 600px; + min-height: 600px; + max-height: 600px; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -17,12 +21,6 @@ body { flex-direction: column; } -html.dark body, -body.dark { - background: radial-gradient(120% 120% at 10% 0%, rgba(242, 168, 101, 0.08) 0%, transparent 45%), - linear-gradient(180deg, var(--bg-color) 0%, #0f0d0b 100%); -} - /* Loading Overlay */ .loading-overlay { position: fixed; @@ -58,602 +56,895 @@ body.dark { } } -.container { - padding: 14px; +/* Main Container */ +.popup-container { display: flex; flex-direction: column; - gap: 12px; flex: 1; + background: var(--bg-color); overflow: hidden; min-height: 0; } +/* Header */ +.header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid var(--input-border); + background: var(--bg-color); + flex-shrink: 0; +} + +.header-content { + display: flex; + align-items: center; + gap: 10px; +} + +.header-logo { + width: 32px; + height: 32px; + border-radius: 8px; + background: var(--highlight-tag); + display: flex; + align-items: center; + justify-content: center; + padding: 4px; +} + +.header-logo img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.header-title { + font-size: 14px; + font-weight: 600; + color: var(--text-color); +} + +/* Switch Component */ +.switch-wrapper { + position: relative; + display: inline-block; + width: 44px; + height: 24px; + cursor: pointer; +} + +.switch-input { + opacity: 0; + width: 0; + height: 0; + position: absolute; +} + +.switch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--input-border); + transition: 0.3s; + border-radius: 24px; +} + +.switch-slider:before { + position: absolute; + content: ""; + height: 18px; + width: 18px; + left: 3px; + bottom: 3px; + background-color: white; + transition: 0.3s; + border-radius: 50%; +} + +.switch-input:checked + .switch-slider { + background-color: var(--accent); +} + +.switch-input:checked + .switch-slider:before { + transform: translateX(20px); +} + /* Tabs */ .tabs { display: flex; - gap: 6px; - padding: 6px; - border-radius: 12px; - background: var(--section-bg); - border: 1px solid var(--input-border); - box-shadow: var(--shadow-sm); - margin-bottom: 8px; + align-items: center; + gap: 4px; + padding: 12px 16px; + border-bottom: 1px solid var(--input-border); + background: transparent; + flex-shrink: 0; } .tab-button { flex: 1; - background: transparent; - border: 1px solid transparent; - border-bottom: none; - padding: 8px 6px; - font-size: 0.75em; - font-weight: 500; - color: var(--text-color); - opacity: 0.6; - cursor: pointer; display: flex; align-items: center; justify-content: center; - gap: 4px; - margin-bottom: 0; + gap: 6px; + padding: 6px 12px; + font-size: 12px; + font-weight: 500; + color: var(--text-color); + opacity: 0.6; + background: transparent; + border: none; + border-radius: 6px; + cursor: pointer; transition: all 0.2s; - border-radius: 10px; } .tab-button:hover { opacity: 0.9; - background: var(--highlight-tag); + background: var(--section-bg); } .tab-button.active { opacity: 1; - background: var(--accent); - color: var(--accent-text); - border-color: transparent; - box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); + background: var(--section-bg); + color: var(--text-color); } .tab-button i { - font-size: 0.9em; + font-size: 14px; } +/* Tab Content */ .tab-content { display: none; - flex-direction: column; - gap: 8px; flex: 1; overflow: hidden; - min-height: 0; } .tab-content.active { display: flex; -} - -/* Header */ -.header-bar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 14px; - background: linear-gradient(145deg, var(--section-bg) 0%, var(--input-bg) 100%); - border-radius: 14px; - border: 1px solid var(--highlight-tag-border); - color: var(--text-color); - font-weight: 600; - font-size: 0.95em; - margin-bottom: 0; - box-shadow: var(--shadow); - letter-spacing: -0.02em; -} - -.header-bar .title { - display: flex; - align-items: center; - gap: 6px; -} - -.header-bar .title i { - color: var(--accent); - font-size: 1em; -} - -.icon-toggles { - display: flex; - gap: 4px; -} - -/* GLOBAL HIGHLIGHT ICON: toggle-on/off */ -.global-icon::before { - content: "\f204"; -} - -#globalHighlightToggle:checked+.global-icon::before { - content: "\f205"; -} - -/* Sections */ -.section { - background: var(--section-bg); - border: 1px solid var(--highlight-tag-border); - border-radius: 14px; - padding: 12px; - box-shadow: var(--shadow); - display: flex; flex-direction: column; } -.section:hover { - box-shadow: var(--shadow); -} - -.section[data-section="wordlist"] { +.tab-inner { flex: 1; - overflow: hidden; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 16px; min-height: 0; - display: grid; - grid-template-rows: auto auto auto 1fr auto; - row-gap: 6px; } -.selection-hint { - font-size: 0.7em; - opacity: 0.6; - text-align: center; - font-style: italic; - padding: 4px 0 0 0; -} - -.section[data-section="addwords"] textarea { - height: 44px; -} - -.section h3 { - font-size: 0.85em; - margin: 0 0 8px 0; - font-weight: 600; - display: flex; - align-items: center; - gap: 6px; - letter-spacing: -0.01em; - color: var(--text-color); - opacity: 0.9; -} - -input[type="text"], -textarea, -select { - margin-top: 4px; - margin-bottom: 6px; -} - -textarea { - resize: none; - height: 60px; -} - -input[type="color"] { - box-shadow: var(--shadow-sm); - width: 24px; - height: 24px; - margin-left: 6px; -} - -.color-row { +/* Lists Tab Styles */ +.list-selector-section { display: flex; + flex-direction: column; gap: 12px; - align-items: center; - margin-bottom: 8px; - margin-top: 4px; } -.color-label { +.list-selector-row { + display: flex; + gap: 8px; +} + +.list-dropdown-wrapper { + flex: 1; + position: relative; +} + +.list-dropdown-button { + width: 100%; + height: 40px; display: flex; align-items: center; - gap: 6px; - font-size: 0.8em; - font-weight: 500; + justify-content: space-between; + padding: 0 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + font-size: 14px; + color: var(--text-color); } - - -button { - padding: 8px 12px; - font-size: 0.8em; +.list-dropdown-button:hover { + background: var(--section-bg); } -.button-row { +.list-dropdown-content { display: flex; - gap: 6px; - flex-wrap: wrap; - margin-top: 6px; - margin-bottom: 8px; align-items: center; + gap: 8px; } -.section[data-section="wordlist"] .button-row { - flex-wrap: wrap; - overflow: visible; - gap: 4px; - margin: 0; -} - -.section[data-section="wordlist"] .button-row button { - padding: 6px 8px; - font-size: 0.72em; -} - -.button-row button { +.list-color-indicator { + width: 12px; + height: 12px; + border-radius: 50%; flex-shrink: 0; } -.button-row label { - display: flex; - align-items: center; - gap: 6px; - cursor: pointer; - font-size: 0.8em; - padding: 6px 10px; - border-radius: 999px; - border: 1px solid var(--input-border); - background: var(--input-bg); +.list-dropdown-text { + font-size: 14px; + color: var(--text-color); } -.button-row label:hover { - background: var(--highlight-tag); - border-color: var(--highlight-tag-border); +.list-dropdown-button i { + font-size: 16px; + color: var(--text-color); + opacity: 0.6; } -.button-row input[type="checkbox"] { - margin: 0; - vertical-align: middle; -} - -input[type="file"] { +.list-dropdown-menu { display: none; -} - -/* Word List */ -#wordSearch { - width: 100%; - margin: 0; -} - -#wordList { - margin-top: 6px; - position: relative; - overflow-y: auto; - overflow-x: hidden; - flex: 1 1 auto; - min-height: 0; - height: 100%; - max-height: 100%; - box-sizing: border-box; + position: absolute; + top: 100%; + left: 0; + right: 0; + margin-top: 4px; + background: var(--input-bg); border: 1px solid var(--input-border); - border-radius: 12px; - background: var(--section-bg); - padding: 6px; -} - -#wordList .word-item { - width: calc(100% - 8px); - left: 4px; - height: 34px; - display: grid; - grid-template-columns: 1fr auto auto auto auto; - align-items: center; - gap: 6px; - padding: 6px 8px; - box-sizing: border-box; border-radius: 8px; - background: var(--input-bg); - border: 2px solid transparent; - transition: all 0.2s; - cursor: pointer; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + z-index: 100; + max-height: 200px; + overflow-y: auto; } -#wordList .word-item:hover { - background: var(--highlight-tag); - border-color: rgba(242, 168, 101, 0.3); - box-shadow: var(--shadow-sm); -} - -#wordList .word-item.selected { - background: rgba(242, 168, 101, 0.15); - border-color: rgba(242, 168, 101, 0.6); -} - -#wordList .word-item.disabled { - opacity: 0.5; - background: var(--section-bg); -} - -#wordList .word-item.disabled:hover { - opacity: 0.65; -} - -#wordList .word-item.disabled .word-text { - text-decoration: line-through; -} - -#wordList .word-text { - font-size: 0.8em; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - user-select: none; - min-width: 0; -} - -#wordList .word-text.editing { - display: none; -} - -#wordList .word-edit-input { - display: none; - min-width: 0; - width: 100%; - background-color: var(--section-bg) !important; - color: var(--text-color) !important; - border: 1px solid var(--accent) !important; - padding: 4px 6px; - border-radius: 6px; - font-size: 0.8em; - transition: border-color 0.2s; - margin: 0; -} - -#wordList .word-edit-input.active { +.list-dropdown-menu.open { display: block; } -#wordList .word-edit-input:focus { - border-color: var(--accent) !important; - outline: none; -} - -#wordList .word-actions { +.list-dropdown-item { display: flex; - gap: 4px; align-items: center; - pointer-events: auto; -} - -#wordList .word-actions > * { - pointer-events: auto; -} - -#wordList .icon-btn { - background: transparent; - border: none; - color: var(--text-color); - opacity: 0.6; + gap: 8px; + padding: 10px 12px; cursor: pointer; - padding: 3px 5px; - border-radius: 4px; - transition: all 0.2s ease; - font-size: 0.75em; + transition: background 0.2s; +} + +.list-dropdown-item:hover { + background: var(--section-bg); +} + +.list-dropdown-item.selected { + background: var(--section-bg); +} + +.list-dropdown-item-check { + margin-left: auto; + color: var(--accent); + font-size: 16px; +} + +.icon-button { + width: 40px; + height: 40px; display: flex; align-items: center; justify-content: center; - min-width: 22px; - min-height: 22px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + flex-shrink: 0; } -#wordList .icon-btn:hover { - opacity: 1; - background: rgba(242, 168, 101, 0.15); +.icon-button:hover { + background: var(--section-bg); +} + +.icon-button.danger:hover { + background: rgba(239, 68, 68, 0.1); + color: var(--danger); + border-color: rgba(239, 68, 68, 0.5); +} + +.icon-button i { + font-size: 16px; + color: var(--text-color); +} + +.icon-button.danger i { + color: var(--text-color); +} + +.icon-button.danger:hover i { + color: var(--danger); +} + +.manage-lists-btn { + width: 100%; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + transition: all 0.2s; + font-size: 14px; + color: var(--text-color); +} + +.manage-lists-btn:hover { + background: var(--section-bg); +} + +.manage-lists-btn i { + font-size: 16px; +} + +/* Color Pickers */ +.color-pickers-row { + display: flex; + gap: 16px; +} + +.color-picker-group { + flex: 1; + display: flex; + flex-direction: column; + gap: 6px; +} + +.color-picker-label { + font-size: 12px; + color: var(--text-color); + opacity: 0.6; +} + +.color-picker-input-group { + display: flex; + align-items: center; + gap: 8px; +} + +.color-picker-swatch { + width: 40px; + height: 40px; + border-radius: 8px; + border: 2px solid var(--input-border); + cursor: pointer; + background: transparent; + padding: 0; +} + +.color-picker-swatch::-webkit-color-swatch-wrapper { + padding: 0; + border-radius: 6px; +} + +.color-picker-swatch::-webkit-color-swatch { + border: none; + border-radius: 6px; +} + +.color-picker-text { + flex: 1; + height: 40px; + padding: 0 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + font-size: 14px; + font-family: 'Courier New', monospace; + text-transform: uppercase; + color: var(--text-color); +} + +.color-picker-text:focus { + outline: none; + border-color: var(--accent); +} + +/* Preview */ +.preview-section { + display: flex; + flex-direction: column; + gap: 6px; +} + +.preview-label { + font-size: 12px; + color: var(--text-color); + opacity: 0.6; +} + +.preview-box { + padding: 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; +} + +.preview-text { + font-size: 14px; + color: var(--text-color); + opacity: 0.6; + line-height: 1.5; +} + +.preview-highlight { + padding: 2px 4px; + border-radius: 4px; +} + +/* Enable Toggle */ +.enable-toggle-section { + padding: 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; +} + +.enable-toggle-content { + display: flex; + align-items: center; + justify-content: space-between; +} + +.enable-toggle-text { + display: flex; + flex-direction: column; + gap: 2px; +} + +.enable-toggle-title { + font-size: 14px; + font-weight: 500; + color: var(--text-color); +} + +.enable-toggle-subtitle { + font-size: 12px; + color: var(--text-color); + opacity: 0.6; +} + +/* Apply Button */ +.apply-button { + width: 100%; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--accent); + color: var(--accent-text); + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.2s; +} + +.apply-button:hover { + background: var(--accent-hover); +} + +.apply-button i { + font-size: 16px; +} + +/* Words Tab Styles */ +.add-words-section { + display: flex; + flex-direction: column; + gap: 8px; +} + +.section-label { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + font-weight: 500; + color: var(--text-color); + opacity: 0.6; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.section-label i { + font-size: 14px; +} + +.word-count-badge { color: var(--accent); + opacity: 1; } -#wordList .icon-btn i { +.add-words-textarea { + min-height: 72px; + padding: 10px 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + font-size: 14px; + color: var(--text-color); + font-family: inherit; + resize: none; + line-height: 1.5; +} + +.add-words-textarea:focus { + outline: none; + border-color: var(--accent); +} + +.add-words-button { + width: 100%; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + background: var(--accent); + color: var(--accent-text); + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + transition: all 0.2s; +} + +.add-words-button:hover { + background: var(--accent-hover); +} + +.add-words-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Word List Section */ +.word-list-section { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + min-height: 0; +} + +.word-list-header { + display: flex; + align-items: center; + justify-content: space-between; +} + +.word-actions-row { + display: flex; + flex-wrap: wrap; + gap: 6px; +} + +.word-action-btn { + height: 28px; + padding: 0 10px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 6px; + cursor: pointer; + font-size: 12px; + color: var(--text-color); + transition: all 0.2s; +} + +.word-action-btn:hover { + background: var(--section-bg); +} + +.word-action-btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.word-action-btn.danger { + background: rgba(239, 68, 68, 0.1); + border-color: rgba(239, 68, 68, 0.3); + color: var(--danger); +} + +.word-action-btn.danger:hover { + background: rgba(239, 68, 68, 0.2); +} + +/* Word Search */ +.word-search-wrapper { + position: relative; +} + +.word-search-icon { + position: absolute; + left: 12px; + top: 50%; + transform: translateY(-50%); + font-size: 16px; + color: var(--text-color); + opacity: 0.6; pointer-events: none; } -#wordList .toggle-btn { - width: 32px; - height: 18px; - background: rgba(255, 255, 255, 0.1); +.word-search-input { + width: 100%; + height: 36px; + padding: 0 12px 0 36px; + background: var(--input-bg); border: 1px solid var(--input-border); - border-radius: 9px; - position: relative; - cursor: pointer; - transition: all 0.2s ease; - padding: 0; - flex-shrink: 0; + border-radius: 8px; + font-size: 14px; + color: var(--text-color); } -#wordList .toggle-btn::after { - content: ''; - position: absolute; - width: 12px; - height: 12px; - background: var(--text-color); - border-radius: 50%; - top: 2px; - left: 2px; - transition: all 0.2s ease; -} - -#wordList .toggle-btn.active { - background: var(--accent); +.word-search-input:focus { + outline: none; border-color: var(--accent); } -#wordList .toggle-btn.active::after { - left: 16px; - background: var(--accent-text); -} - -#wordList input[type="color"] { - width: 22px; - height: 22px; - padding: 0; - border-radius: 3px; - border: 1px solid var(--input-border); - cursor: pointer; - transition: all 0.2s; - align-self: center; - flex-shrink: 0; -} - -#wordList input[type="color"]:hover { - border-color: var(--accent); - transform: scale(1.05); -} - -#wordCount { - font-weight: normal; - margin-left: -8px; - margin-right: -8px; -} - -/* Exception Panel */ -.section[data-section="exceptions"] { - flex: 1; - overflow: hidden; - min-height: 0; -} - -.exceptions-list { +/* Word List Container */ +.word-list-container { flex: 1; overflow-y: auto; - margin: 8px 0; - border: 1px solid var(--input-border); - border-radius: 12px; background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + max-height: 180px; min-height: 0; } -.exception-item { - display: flex; - justify-content: space-between; - align-items: center; - gap: 10px; - padding: 8px 12px; - border-bottom: none; - font-size: 0.85em; -} - -.exception-item:nth-child(odd) { - background: var(--section-bg); -} - -.exception-item:nth-child(even) { - background: var(--input-bg); -} - -.exception-item:hover { - background: var(--highlight-tag) !important; -} - -.exception-domain { - flex: 1; - word-break: break-word; - font-family: inherit; - font-size: 1em; - line-height: 1.4; - display: flex; - align-items: center; -} - -.exception-remove { - background: var(--danger); - color: white; - border: none; - padding: 4px 10px; - border-radius: 4px; - cursor: pointer; - font-size: 0.75em; - font-weight: 500; - white-space: nowrap; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.exception-remove:hover { - background: #dc2626; -} - -/* Footer */ -.footer { - padding: 10px 12px; - border-top: 1px solid var(--highlight-tag-border); - background: var(--section-bg); - flex-shrink: 0; - box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.12); -} - -.footer-content { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 0.75em; +.word-list-empty { + padding: 24px; + text-align: center; + font-size: 14px; color: var(--text-color); opacity: 0.6; } -.version { - font-weight: 500; - font-family: 'Courier New', monospace; +.word-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + cursor: pointer; + transition: all 0.2s; + border-bottom: 1px solid var(--input-border); } -.github-link { +.word-item:last-child { + border-bottom: none; +} + +.word-item:hover { + background: var(--highlight-tag); +} + +.word-item.selected { + background: var(--section-bg); +} + +.word-item-checkbox { + width: 16px; + height: 16px; + border: 1.5px solid var(--text-color); + border-radius: 4px; + cursor: pointer; + flex-shrink: 0; + opacity: 0.6; + position: relative; + background: transparent; +} + +.word-item-checkbox.checked { + background: var(--accent); + border-color: var(--accent); + opacity: 1; +} + +.word-item-checkbox.checked::after { + content: "✓"; + position: absolute; + top: -3px; + left: 2px; + color: white; + font-size: 12px; + font-weight: bold; +} + +.word-item-text { + flex: 1; + font-size: 14px; + color: var(--text-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + min-width: 0; +} + +.word-item-edit-input { + flex: 1; + height: 28px; + padding: 0 8px; + background: var(--bg-color); + border: 1px solid var(--accent); + border-radius: 4px; + font-size: 14px; + color: var(--text-color); +} + +.word-item-edit-input:focus { + outline: none; +} + +.word-item-actions { display: flex; align-items: center; gap: 4px; - color: var(--text-color); - text-decoration: none; - padding: 3px 6px; +} + +.word-item-icon-btn { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + background: transparent; + border: none; + cursor: pointer; border-radius: 4px; - border: 1px solid transparent; + transition: all 0.2s; + color: var(--text-color); + opacity: 0.6; + flex-shrink: 0; } -.github-link:hover { +.word-item-icon-btn:hover { opacity: 1; - color: var(--accent); background: var(--highlight-tag); - border-color: var(--highlight-tag-border); + color: var(--accent); } +.word-item-icon-btn i { + font-size: 14px; +} +.word-item-color-picker { + width: 28px; + height: 28px; + border-radius: 4px; + border: 1px solid var(--input-border); + cursor: pointer; + background: transparent; + padding: 0; + flex-shrink: 0; +} -/* Page Highlights Section */ -.section[data-section="page-highlights"] { +.word-item-color-picker::-webkit-color-swatch-wrapper { + padding: 0; + border-radius: 3px; +} + +.word-item-color-picker::-webkit-color-swatch { + border: none; + border-radius: 3px; +} + +.word-item-color-picker:hover { + border-color: var(--accent); +} + +.word-item-switch { + flex-shrink: 0; +} + +.word-list-hint { + font-size: 12px; + color: var(--text-color); + opacity: 0.6; + text-align: center; +} + +/* Empty State */ +.empty-state { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + padding: 32px; + text-align: center; +} + +.empty-state p { + font-size: 14px; + color: var(--text-color); + opacity: 0.6; +} + +/* Page Highlights Tab */ +.page-highlights-section { + display: flex; + flex-direction: column; + gap: 12px; flex: 1; - overflow: hidden; min-height: 0; } -.page-highlights-info { - font-size: 0.85em; - padding: 8px 10px; +.page-highlights-info-card { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 16px; background: var(--input-bg); - border-radius: 10px; border: 1px solid var(--input-border); - margin-bottom: 8px; + border-radius: 8px; + font-size: 14px; + color: var(--text-color); +} + +.page-highlights-info-card strong { + font-weight: 600; + color: var(--accent); +} + +.refresh-button { + width: 100%; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + font-size: 14px; + color: var(--text-color); + transition: all 0.2s; +} + +.refresh-button:hover { + background: var(--section-bg); +} + +.refresh-button i { + font-size: 16px; } .page-highlights-list { flex: 1; overflow-y: auto; - margin-top: 8px; - border: 1px solid var(--input-border); - border-radius: 12px; background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; min-height: 0; } +.page-highlights-empty { + padding: 24px; + text-align: center; + font-size: 14px; + color: var(--text-color); + opacity: 0.6; +} + .page-highlight-item { display: flex; - justify-content: space-between; align-items: center; - gap: 8px; - padding: 10px 12px; + justify-content: space-between; + gap: 12px; + padding: 12px; border-bottom: 1px solid var(--input-border); - font-size: 0.85em; cursor: pointer; transition: all 0.2s; } @@ -663,7 +954,7 @@ input[type="file"] { } .page-highlight-item:hover { - background: var(--highlight-tag); + background: var(--section-bg); border-left: 3px solid var(--accent); padding-left: 9px; } @@ -673,23 +964,30 @@ input[type="file"] { display: flex; align-items: center; gap: 8px; - word-break: break-word; - font-weight: 500; + min-width: 0; } .page-highlight-preview { display: inline-block; - padding: 2px 6px; - border-radius: 3px; - font-size: 0.9em; + padding: 3px 8px; + border-radius: 4px; + font-size: 13px; + font-weight: 500; +} + +.page-highlight-position { + font-size: 11px; + color: var(--text-color); + opacity: 0.6; + margin-left: 4px; } .page-highlight-count { background: var(--accent); color: var(--accent-text); - padding: 2px 8px; + padding: 3px 10px; border-radius: 12px; - font-size: 0.75em; + font-size: 12px; font-weight: 600; flex-shrink: 0; } @@ -701,22 +999,291 @@ input[type="file"] { } .page-highlight-nav button { - padding: 4px 8px; - font-size: 0.75em; - min-width: 28px; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 6px; + cursor: pointer; + transition: all 0.2s; + padding: 0; } -.page-highlight-position { - font-size: 0.7em; +.page-highlight-nav button:hover { + background: var(--section-bg); + border-color: var(--accent); +} + +.page-highlight-nav button i { + font-size: 14px; + color: var(--text-color); +} + +/* Exceptions Tab */ +.exceptions-section { + display: flex; + flex-direction: column; + gap: 12px; + flex: 1; + min-height: 0; +} + +.exception-toggle-btn { + width: 100%; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + font-size: 14px; + color: var(--text-color); + transition: all 0.2s; +} + +.exception-toggle-btn:hover { + background: var(--section-bg); +} + +.exception-toggle-btn.danger { + background: rgba(239, 68, 68, 0.1); + border-color: rgba(239, 68, 68, 0.3); + color: var(--danger); +} + +.exception-toggle-btn.danger:hover { + background: rgba(239, 68, 68, 0.2); +} + +.exception-toggle-btn i { + font-size: 16px; +} + +.exceptions-list-wrapper { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; + min-height: 0; +} + +.exceptions-list { + flex: 1; + overflow-y: auto; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + min-height: 0; +} + +.exception-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px; + border-bottom: 1px solid var(--input-border); + transition: background 0.2s; +} + +.exception-item:last-child { + border-bottom: none; +} + +.exception-item:hover { + background: var(--section-bg); +} + +.exception-domain { + flex: 1; + font-size: 14px; + color: var(--text-color); + word-break: break-word; + line-height: 1.4; +} + +.exception-remove { + background: var(--danger); + color: white; + border: none; + padding: 6px 12px; + border-radius: 6px; + cursor: pointer; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + flex-shrink: 0; + transition: all 0.2s; +} + +.exception-remove:hover { + background: #dc2626; +} + +.clear-exceptions-btn { + width: 100%; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: rgba(239, 68, 68, 0.1); + border: 1px solid rgba(239, 68, 68, 0.3); + color: var(--danger); + border-radius: 8px; + cursor: pointer; + font-size: 14px; + transition: all 0.2s; +} + +.clear-exceptions-btn:hover { + background: rgba(239, 68, 68, 0.2); +} + +.clear-exceptions-btn i { + font-size: 16px; +} + +/* Options Tab */ +.options-section { + display: flex; + flex-direction: column; + gap: 16px; +} + +.options-checkboxes { + display: flex; + flex-direction: column; + gap: 12px; + padding: 12px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; +} + +.option-checkbox-label { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + font-size: 14px; + color: var(--text-color); +} + +.option-checkbox { + width: 18px; + height: 18px; + border: 2px solid var(--input-border); + border-radius: 4px; + cursor: pointer; + flex-shrink: 0; + appearance: none; + background: var(--input-bg); + position: relative; +} + +.option-checkbox:checked { + background: var(--accent); + border-color: var(--accent); +} + +.option-checkbox:checked::after { + content: "✓"; + position: absolute; + top: -2px; + left: 3px; + color: white; + font-size: 14px; + font-weight: bold; +} + +.options-buttons { + display: flex; + gap: 8px; +} + +.option-button { + flex: 1; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--input-bg); + border: 1px solid var(--input-border); + border-radius: 8px; + cursor: pointer; + font-size: 14px; + color: var(--text-color); + transition: all 0.2s; +} + +.option-button:hover { + background: var(--section-bg); +} + +.option-button i { + font-size: 16px; +} + +/* Footer */ +.footer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 20px; + border-top: 1px solid var(--input-border); + background: var(--section-bg); + flex-shrink: 0; +} + +.footer-version { + font-size: 12px; color: var(--text-color); opacity: 0.6; - margin-left: 4px; } -.page-highlights-empty { - padding: 20px; - text-align: center; +.footer-link { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; color: var(--text-color); - opacity: 0.5; - font-size: 0.85em; + opacity: 0.6; + text-decoration: none; + transition: all 0.2s; +} + +.footer-link:hover { + opacity: 1; + color: var(--accent); +} + +.footer-link i { + font-size: 14px; +} + +/* Scrollbar Styles */ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar-track { + background: transparent; +} + +::-webkit-scrollbar-thumb { + background: var(--input-border); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--accent); } diff --git a/popup/popup.html b/popup/popup.html index d447b20..77e0331 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -4,160 +4,292 @@ - Goose Highlighter + Goose Highlighter -
-
+
-
- - Goose Highlighter Goose Highlighter - -
- - + +
+
+ + Goose Highlighter
+
+
- - - - - + + + + +
+
-
- - -
- - -
-
- -
-
+
+
+ +
+
+ +
+ +
+
+ + + +
-
-

List Settings

- -
-
- Background: - + + + + +
+
+ +
+ + +
+
+
+ +
+ + +
+
-
- Foreground: - + + +
+ +
+

+ This is how your highlighted text will appear. +

+
+
+ + +
+
+
+

Enable Highlighting

+

Show highlights on pages

+
+ +
- - + + +
+
-
-

Add Words

- - -
- -
-

Word List (0)

-
- - - - - +
+ +
+ + + +
+ + +
+
+ +
+ + +
+ + + + + +
+ + +
+ + +
+ + +
+ + +

Click to select • Ctrl/Cmd+Click for multi-select

- -
-
Click to select • Ctrl/Cmd+Click for multi-select
+
-
-

Highlights on This Page -

-
- Total: 0 +
+
+
+ Total: + 0 +
+ + + +
- -
+
-
-

Site Exceptions

-
- +
+
+ + + + +
+ +
+
+ +
-

Exception Sites:

-
-
+
-
-

Options

-
- - -
-
- - - +
+
+ + +
+ + +
+ +
+ + + +
-
- +
diff --git a/src/popup/PopupController.ts b/src/popup/PopupController.ts index 8b7006d..add0a1b 100644 --- a/src/popup/PopupController.ts +++ b/src/popup/PopupController.ts @@ -131,13 +131,18 @@ export class PopupController { } private setupListManagement(): void { - const listSelect = document.getElementById('listSelect') as HTMLSelectElement; + const dropdownBtn = document.getElementById('listDropdownBtn'); + const dropdownMenu = document.getElementById('listDropdownMenu'); - listSelect.addEventListener('change', () => { - this.selectedCheckboxes.clear(); - this.currentListIndex = +listSelect.value; - this.renderWords(); - this.updateListForm(); + // Toggle dropdown + dropdownBtn?.addEventListener('click', (e) => { + e.stopPropagation(); + dropdownMenu?.classList.toggle('open'); + }); + + // Close dropdown when clicking outside + document.addEventListener('click', () => { + dropdownMenu?.classList.remove('open'); }); // Apply button for list settings @@ -145,11 +150,21 @@ export class PopupController { this.applyListSettings(); }); + // Rename list + document.getElementById('renameListBtn')?.addEventListener('click', () => { + const newName = prompt(chrome.i18n.getMessage('enter_list_name') || 'Enter list name:', this.lists[this.currentListIndex].name); + if (newName && newName.trim()) { + this.lists[this.currentListIndex].name = newName.trim(); + this.save(); + } + }); + + // New list document.getElementById('newListBtn')?.addEventListener('click', () => { this.lists.push({ id: Date.now(), name: chrome.i18n.getMessage('new_list_name') || 'New List', - background: '#ffff00', + background: '#22c55e', foreground: '#000000', active: true, words: [] @@ -158,7 +173,12 @@ export class PopupController { this.save(); }); + // Delete list document.getElementById('deleteListBtn')?.addEventListener('click', () => { + if (this.lists.length <= 1) { + alert(chrome.i18n.getMessage('cannot_delete_last_list') || 'Cannot delete the last list'); + return; + } if (confirm(chrome.i18n.getMessage('confirm_delete_list') || 'Delete this list?')) { this.lists.splice(this.currentListIndex, 1); this.currentListIndex = Math.max(0, this.currentListIndex - 1); @@ -166,9 +186,40 @@ export class PopupController { } }); + // Manage lists document.getElementById('manageListsBtn')?.addEventListener('click', () => { this.openListManagerWindow(); }); + + // Color picker text inputs sync + const listBg = document.getElementById('listBg') as HTMLInputElement; + const listBgText = document.getElementById('listBgText') as HTMLInputElement; + const listFg = document.getElementById('listFg') as HTMLInputElement; + const listFgText = document.getElementById('listFgText') as HTMLInputElement; + + listBg?.addEventListener('input', () => { + if (listBgText) listBgText.value = listBg.value; + this.updatePreview(); + }); + + listBgText?.addEventListener('input', () => { + if (listBg && /^#[0-9A-F]{6}$/i.test(listBgText.value)) { + listBg.value = listBgText.value; + this.updatePreview(); + } + }); + + listFg?.addEventListener('input', () => { + if (listFgText) listFgText.value = listFg.value; + this.updatePreview(); + }); + + listFgText?.addEventListener('input', () => { + if (listFg && /^#[0-9A-F]{6}$/i.test(listFgText.value)) { + listFg.value = listFgText.value; + this.updatePreview(); + } + }); } private setupWordManagement(): void { @@ -206,8 +257,22 @@ export class PopupController { const list = this.lists[this.currentListIndex]; if (!list) return; + // Handle checkbox click + if (target.classList.contains('word-item-checkbox')) { + e.stopPropagation(); + const wordItem = target.closest('.word-item') as HTMLElement; + if (wordItem) { + const index = Number(wordItem.dataset.index); + if (!Number.isNaN(index)) { + const mouseEvent = e as MouseEvent; + this.toggleWordSelection(index, mouseEvent.ctrlKey || mouseEvent.metaKey); + } + } + return; + } + // Handle edit button click - const editBtn = target.closest('.icon-btn.edit-word-btn') as HTMLElement | null; + const editBtn = target.closest('.word-item-icon-btn.edit-word-btn') as HTMLElement | null; if (editBtn) { e.stopPropagation(); const index = Number(editBtn.dataset.index); @@ -217,34 +282,25 @@ export class PopupController { return; } - // Handle toggle button click - if (target.classList.contains('toggle-btn')) { - e.stopPropagation(); - const index = Number(target.dataset.index); - if (!Number.isNaN(index)) { - const word = list.words[index]; - if (word) { - word.active = !word.active; - this.save(); - } - } - return; - } - // Don't select if clicking on color inputs or edit input if (target.tagName === 'INPUT') { if ((target as HTMLInputElement).type === 'color') { e.stopPropagation(); return; } - if (target.classList.contains('word-edit-input')) { + if (target.classList.contains('word-item-edit-input')) { e.stopPropagation(); return; } } // Don't select if clicking inside word-actions area - if (target.closest('.word-actions') && !target.classList.contains('word-item')) { + if (target.closest('.word-item-actions') && !target.classList.contains('word-item')) { + return; + } + + // Don't select if clicking on switch + if (target.closest('.switch-wrapper')) { return; } @@ -256,28 +312,29 @@ export class PopupController { if (Number.isNaN(index)) return; const mouseEvent = e as MouseEvent; - // Ctrl/Cmd + click for multi-select - if (mouseEvent.ctrlKey || mouseEvent.metaKey) { - if (this.selectedCheckboxes.has(index)) { - this.selectedCheckboxes.delete(index); - } else { - this.selectedCheckboxes.add(index); - } - this.renderWords(); - return; - } - - // Regular click - toggle selection - if (this.selectedCheckboxes.has(index)) { - this.selectedCheckboxes.delete(index); - } else { - this.selectedCheckboxes.add(index); - } - this.renderWords(); + this.toggleWordSelection(index, mouseEvent.ctrlKey || mouseEvent.metaKey); }); wordList.addEventListener('change', (e) => { const target = e.target as HTMLInputElement; + const list = this.lists[this.currentListIndex]; + + // Handle switch toggle + if (target.classList.contains('switch-input')) { + const wordItem = target.closest('.word-item') as HTMLElement; + if (wordItem) { + const index = Number(wordItem.dataset.index); + if (!Number.isNaN(index)) { + const word = list.words[index]; + if (word) { + word.active = target.checked; + this.save(); + } + } + } + return; + } + const index = +(target.dataset.bgEdit ?? target.dataset.fgEdit ?? -1); if (index === -1) return; @@ -290,7 +347,7 @@ export class PopupController { wordList.addEventListener('keydown', (e) => { const target = e.target as HTMLInputElement; - if (!target.classList.contains('word-edit-input')) return; + if (!target.classList.contains('word-item-edit-input')) return; if (e.key === 'Enter') { e.preventDefault(); @@ -303,7 +360,7 @@ export class PopupController { wordList.addEventListener('blur', (e) => { const target = e.target as HTMLInputElement; - if (!target.classList.contains('word-edit-input')) return; + if (!target.classList.contains('word-item-edit-input')) return; const list = this.lists[this.currentListIndex]; if (!list) return; @@ -334,16 +391,33 @@ export class PopupController { }); } + private toggleWordSelection(index: number, multiSelect: boolean): void { + if (multiSelect) { + if (this.selectedCheckboxes.has(index)) { + this.selectedCheckboxes.delete(index); + } else { + this.selectedCheckboxes.add(index); + } + } else { + if (this.selectedCheckboxes.has(index)) { + this.selectedCheckboxes.delete(index); + } else { + this.selectedCheckboxes.add(index); + } + } + this.renderWords(); + } + private startEditingWord(index: number): void { const wordItem = document.querySelector(`.word-item[data-index="${index}"]`); if (!wordItem) return; - const textSpan = wordItem.querySelector('.word-text') as HTMLElement; - const input = wordItem.querySelector('.word-edit-input') as HTMLInputElement; + const textSpan = wordItem.querySelector('.word-item-text') as HTMLElement; + const input = wordItem.querySelector('.word-item-edit-input') as HTMLInputElement; if (!textSpan || !input) return; - textSpan.classList.add('editing'); - input.classList.add('active'); + textSpan.style.display = 'none'; + input.style.display = 'block'; input.focus(); input.select(); } @@ -397,7 +471,7 @@ export class PopupController { const matchCase = document.getElementById('matchCase') as HTMLInputElement; const matchWhole = document.getElementById('matchWhole') as HTMLInputElement; - globalToggle.addEventListener('change', async () => { + globalToggle?.addEventListener('change', async () => { this.globalHighlightEnabled = globalToggle.checked; await StorageService.update('globalHighlightEnabled', this.globalHighlightEnabled); MessageService.sendToAllTabs({ @@ -406,7 +480,7 @@ export class PopupController { }); }); - matchCase.addEventListener('change', async () => { + matchCase?.addEventListener('change', async () => { this.matchCaseEnabled = matchCase.checked; await StorageService.update('matchCaseEnabled', this.matchCaseEnabled); MessageService.sendToAllTabs({ @@ -416,7 +490,7 @@ export class PopupController { }); }); - matchWhole.addEventListener('change', async () => { + matchWhole?.addEventListener('change', async () => { this.matchWholeEnabled = matchWhole.checked; await StorageService.update('matchWholeEnabled', this.matchWholeEnabled); MessageService.sendToAllTabs({ @@ -524,10 +598,10 @@ export class PopupController { ${highlight.count > 1 ? `
` : ''} @@ -631,44 +705,23 @@ export class PopupController { } private setupTheme(): void { - const toggle = document.getElementById('themeToggle') as HTMLInputElement; - const body = document.body; - + // Theme is now controlled by system/browser preference + // Remove the manual theme toggle from the UI const savedTheme = localStorage.getItem('theme'); if (savedTheme === 'light') { - body.classList.remove('dark'); - body.classList.add('light'); - toggle.checked = false; + document.documentElement.classList.remove('dark'); + document.documentElement.classList.add('light'); } else { - body.classList.add('dark'); - body.classList.remove('light'); - toggle.checked = true; + document.documentElement.classList.add('dark'); + document.documentElement.classList.remove('light'); } - - toggle.addEventListener('change', () => { - if (toggle.checked) { - body.classList.add('dark'); - body.classList.remove('light'); - document.documentElement.classList.add('dark'); - document.documentElement.classList.remove('light'); - localStorage.setItem('theme', 'dark'); - } else { - body.classList.remove('dark'); - body.classList.add('light'); - document.documentElement.classList.remove('dark'); - document.documentElement.classList.add('light'); - localStorage.setItem('theme', 'light'); - } - }); } private applyListSettings(): void { - const listName = document.getElementById('listName') as HTMLInputElement; const listBg = document.getElementById('listBg') as HTMLInputElement; const listFg = document.getElementById('listFg') as HTMLInputElement; const listActive = document.getElementById('listActive') as HTMLInputElement; - this.lists[this.currentListIndex].name = listName.value; this.lists[this.currentListIndex].background = listBg.value; this.lists[this.currentListIndex].foreground = listFg.value; this.lists[this.currentListIndex].active = listActive.checked; @@ -676,6 +729,17 @@ export class PopupController { this.save(); } + private updatePreview(): void { + const listBg = document.getElementById('listBg') as HTMLInputElement; + const listFg = document.getElementById('listFg') as HTMLInputElement; + const preview = document.getElementById('previewHighlight') as HTMLElement; + + if (preview && listBg && listFg) { + preview.style.backgroundColor = listBg.value; + preview.style.color = listFg.value; + } + } + private async save(): Promise { await StorageService.set({ lists: this.lists, @@ -744,20 +808,64 @@ export class PopupController { } private renderLists(): void { - const listSelect = document.getElementById('listSelect') as HTMLSelectElement; - listSelect.innerHTML = this.lists.map((list, index) => - `` - ).join(''); - listSelect.value = this.currentListIndex.toString(); + const currentListName = document.getElementById('currentListName'); + const currentListColor = document.getElementById('currentListColor') as HTMLElement; + const dropdownMenu = document.getElementById('listDropdownMenu'); + + const list = this.lists[this.currentListIndex]; + + // Update current list display + if (currentListName) { + currentListName.textContent = list.name; + } + if (currentListColor) { + currentListColor.style.backgroundColor = list.background; + } + + // Update dropdown menu + if (dropdownMenu) { + dropdownMenu.innerHTML = this.lists.map((l, index) => ` +
+
+ ${DOMUtils.escapeHtml(l.name)} + ${index === this.currentListIndex ? '' : ''} +
+ `).join(''); + + // Add click handlers to dropdown items + dropdownMenu.querySelectorAll('.list-dropdown-item').forEach(item => { + item.addEventListener('click', () => { + const index = Number((item as HTMLElement).dataset.index); + if (!Number.isNaN(index)) { + this.selectedCheckboxes.clear(); + this.currentListIndex = index; + this.renderWords(); + this.updateListForm(); + this.renderLists(); + dropdownMenu.classList.remove('open'); + } + }); + }); + } + this.updateListForm(); } private updateListForm(): void { const list = this.lists[this.currentListIndex]; - (document.getElementById('listName') as HTMLInputElement).value = list.name; - (document.getElementById('listBg') as HTMLInputElement).value = list.background; - (document.getElementById('listFg') as HTMLInputElement).value = list.foreground; - (document.getElementById('listActive') as HTMLInputElement).checked = list.active; + const listBg = document.getElementById('listBg') as HTMLInputElement; + const listBgText = document.getElementById('listBgText') as HTMLInputElement; + const listFg = document.getElementById('listFg') as HTMLInputElement; + const listFgText = document.getElementById('listFgText') as HTMLInputElement; + const listActive = document.getElementById('listActive') as HTMLInputElement; + + if (listBg) listBg.value = list.background; + if (listBgText) listBgText.value = list.background; + if (listFg) listFg.value = list.foreground; + if (listFgText) listFgText.value = list.foreground; + if (listActive) listActive.checked = list.active; + + this.updatePreview(); } private renderWords(): void { @@ -770,32 +878,18 @@ export class PopupController { filteredWords = list.words.filter(w => w.wordStr.toLowerCase().includes(q)); } - const itemHeight = 32; - const itemSpacing = 4; - const totalItemHeight = itemHeight + itemSpacing; - const containerHeight = wordList.clientHeight || 250; - const scrollTop = wordList.scrollTop; - const startIndex = Math.max(0, Math.floor(scrollTop / totalItemHeight) - 1); - const visibleCount = Math.ceil(containerHeight / totalItemHeight); - const endIndex = Math.min(startIndex + visibleCount + 2, filteredWords.length); - - wordList.innerHTML = ''; - - const spacer = document.createElement('div'); - spacer.style.position = 'relative'; - spacer.style.height = `${filteredWords.length * totalItemHeight - itemSpacing}px`; - spacer.style.width = '100%'; - - for (let i = startIndex; i < endIndex; i++) { - const w = filteredWords[i]; - if (!w) continue; - - const realIndex = list.words.indexOf(w); - const container = this.createWordItem(w, realIndex, i, itemHeight); - spacer.appendChild(container); + if (filteredWords.length === 0) { + wordList.innerHTML = '
No words found
'; + const wordCount = document.getElementById('wordCount'); + if (wordCount) wordCount.textContent = '0'; + return; } - wordList.appendChild(spacer); + wordList.innerHTML = filteredWords.map(w => { + const realIndex = list.words.indexOf(w); + const isSelected = this.selectedCheckboxes.has(realIndex); + return this.createWordItemHTML(w, realIndex, isSelected); + }).join(''); const wordCount = document.getElementById('wordCount'); if (wordCount) { @@ -803,37 +897,29 @@ export class PopupController { } } - private createWordItem(word: HighlightWord, realIndex: number, displayIndex: number, itemHeight: number): HTMLDivElement { - const container = document.createElement('div'); - container.className = 'word-item'; - if (this.selectedCheckboxes.has(realIndex)) { - container.classList.add('selected'); - } - if (word.active === false) { - container.classList.add('disabled'); - } - container.style.cssText = ` - position: absolute; - top: ${displayIndex * (itemHeight + 4)}px; - `; - container.dataset.index = realIndex.toString(); - + private createWordItemHTML(word: HighlightWord, realIndex: number, isSelected: boolean): string { const list = this.lists[this.currentListIndex]; + const bgColor = word.background || list.background; + const fgColor = word.foreground || list.foreground; - container.innerHTML = ` - ${DOMUtils.escapeHtml(word.wordStr)} - -
- - - - + return ` +
+
+ ${DOMUtils.escapeHtml(word.wordStr)} + +
+ + + + +
`; - - return container; } private updateExceptionButton(): void { @@ -846,12 +932,12 @@ export class PopupController { if (isException) { btnText.textContent = chrome.i18n.getMessage('remove_exception') || 'Remove from Exceptions'; - toggleBtn.className = 'danger'; + toggleBtn.classList.add('danger'); const icon = toggleBtn.querySelector('i'); if (icon) icon.className = 'fa-solid fa-trash'; } else { btnText.textContent = chrome.i18n.getMessage('add_exception') || 'Add to Exceptions'; - toggleBtn.className = ''; + toggleBtn.classList.remove('danger'); const icon = toggleBtn.querySelector('i'); if (icon) icon.className = 'fa-solid fa-plus'; }