knso/ebaysnipeextension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: initialize project repository with core extension files

Browse Source 
- Add .gitignore to exclude node_modules, dist, logs, and system files
- Add comprehensive project documentation including README, deployment guide, and development setup
- Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management
- Add .kiro steering documents for product, structure, styling, and tech guidelines
- Add VSCode settings configuration for consistent development environment
- Add manifest.json and babel/vite configuration for extension build setup
- Add complete source code implementation including AppWrite integration, storage managers, UI components, and services
- Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules
- Add test HTML files for integration testing and validation
- Add coverage reports and build validation scripts
- Add AppWrite setup and repair documentation for database schema management
- Add migration guides and responsive accessibility implementation documentation
- Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
This commit is contained in:
Kenso Grimm
2026-01-12 17:46:42 +01:00
commit 216a972fef
180 changed files with 88019 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

440
test-enhanced-items-responsive.html Normal file
View File

@@ -0,0 +1,440 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Items - Responsive Test</title>
<link rel="stylesheet" href="src/EnhancedItemsPanel.css">
<style>
body {
margin: 0;
padding: 0;
background: #0a0a0a;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow-x: hidden;
}
/* Ensure full responsive behavior */
* {
box-sizing: border-box;
}
/* Test container to simulate the extension environment */
.test-container {
width: 100%;
min-height: 100vh;
background: #0a0a0a;
}
/* Breakpoint indicator */
.breakpoint-indicator {
position: fixed;
top: 10px;
right: 10px;
background: #ff9900;
color: #000;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: bold;
z-index: 10000;
font-size: 0.9rem;
}
</style>
</head>
<body>
<!-- Breakpoint Indicator -->
<div class="breakpoint-indicator" id="breakpoint-indicator">
Desktop (≥769px)
</div>
<div class="test-container">
<!-- Your Enhanced Items Content with the responsive design applied -->
<div class="amazon-ext-enhanced-items-content" role="main" id="main-content">
<!-- Header -->
<div class="enhanced-items-header">
<h2>Enhanced Items</h2>
</div>
<!-- Add Item Form -->
<div class="add-enhanced-item-form" role="search" aria-label="Add new enhanced item" style="position: relative;">
<input type="url"
class="enhanced-url-input"
placeholder="Amazon-URL eingeben für automatische Extraktion..."
aria-label="Amazon product URL"
aria-describedby="url-validation-feedback url-help-text"
aria-invalid="false"
tabindex="1">
<div class="url-validation-container">
<div class="validation-feedback" id="url-validation-feedback" role="status" aria-live="polite">
<div class="validation-icon"></div>
<div class="validation-message"></div>
</div>
<div class="input-guidance" id="url-help-text" style="display: none;">
<div class="guidance-content">
<div class="guidance-title">💡 Tipp</div>
<div class="guidance-text">Fügen Sie eine Amazon-Produktseite-URL ein</div>
<div class="guidance-examples">
<div class="example-title">Beispiele:</div>
<div class="example-url">amazon.de/dp/B08N5WRWNW</div>
<div class="example-url">amazon.com/gp/product/B08N5WRWNW</div>
</div>
</div>
</div>
</div>
<button class="extract-btn" type="button" aria-label="Field 2" tabindex="2" aria-describedby="extract-btn-help">
Extrahieren &amp; Hinzufügen
</button>
<button class="help-button"
aria-label="Hilfe für Amazon-URL eingeben"
type="button"
tabindex="3"
style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%);">
❓
</button>
<div id="extract-btn-help" class="sr-only">
Extract product data from the entered URL and generate AI title suggestions.
</div>
</div>
<!-- Progress Indicator (hidden by default) -->
<div class="extraction-progress" style="display: none;">
<div class="progress-header">
<h4>Verarbeitung läuft...</h4>
</div>
<div class="progress-steps">
<div class="progress-step" data-step="validate">
<span class="step-icon">🔍</span>
<span class="step-text">URL validieren...</span>
<span class="step-status"></span>
</div>
<div class="progress-step" data-step="extract">
<span class="step-icon">📦</span>
<span class="step-text">Produktdaten extrahieren...</span>
<span class="step-status"></span>
</div>
<div class="progress-step" data-step="ai">
<span class="step-icon">🤖</span>
<span class="step-text">KI-Titelvorschläge generieren...</span>
<span class="step-status"></span>
</div>
<div class="progress-step" data-step="select">
<span class="step-icon">✏️</span>
<span class="step-text">Titel auswählen...</span>
<span class="step-status"></span>
</div>
<div class="progress-step" data-step="save">
<span class="step-icon">💾</span>
<span class="step-text">Item speichern...</span>
<span class="step-status"></span>
</div>
</div>
</div>
<!-- Messages (hidden by default) -->
<div class="error-message" style="display: none;"></div>
<div class="success-message" style="display: none;"></div>
<!-- Enhanced Item List with your actual item -->
<div class="enhanced-item-list" role="region" aria-label="Enhanced items list">
<!-- Your ROCKBROS Item with full responsive design -->
<div class="enhanced-item"
data-item-id="B08WX56W96"
role="article"
aria-labelledby="item-title-1"
aria-describedby="item-desc-1"
tabindex="0">
<div class="item-main-content">
<div class="item-header">
<h3 class="item-custom-title" id="item-title-1">
ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS
</h3>
<div class="item-price-display">
<span class="price" aria-label="Preis: 12 Euro">12.00 EUR</span>
</div>
</div>
<div class="item-details">
<div class="item-url-section">
<a href="https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektierend-Atmungsaktiv-Einheitsgr%C3%B6%C3%9Fe/dp/B08WX56W96/ref=sr_1_7"
target="_blank"
class="item-url"
rel="noopener noreferrer"
aria-label="Produkt auf Amazon anzeigen (öffnet in neuem Tab)">
<span class="url-icon">🔗</span>
https://www.amazon.de/ROCKBROS-Outdoorsports-Reflektieren...
</a>
</div>
<div class="item-meta">
<span class="created-date" aria-label="Erstellt am 11. Januar 2026 um 16:14 Uhr">
Erstellt: 11.01.2026, 16:14
</span>
<span class="manual-badge" aria-label="Manuell erstellter Titel">Manuell</span>
</div>
<!-- Original Title Section (hidden by default) -->
<div class="original-title-section" style="display: none;">
<div class="original-title-label">Original-Titel:</div>
<div class="original-title-text">
ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS
</div>
</div>
</div>
</div>
<!-- Item Actions with responsive design -->
<div class="item-actions" role="group" aria-label="Item actions">
<button class="toggle-original-btn"
data-item-id="B08WX56W96"
type="button"
aria-pressed="false"
title="Original-Titel anzeigen/verbergen">
<span class="btn-icon">👁️</span>
<span class="btn-text">Original</span>
<span class="keyboard-shortcut">
<span class="kbd">O</span>
</span>
</button>
<button class="edit-item-btn"
data-item-id="B08WX56W96"
type="button"
title="Item bearbeiten">
<span class="btn-icon">✏️</span>
<span class="btn-text">Bearbeiten</span>
<span class="keyboard-shortcut">
<span class="kbd">E</span>
</span>
</button>
<button class="delete-item-btn"
data-item-id="B08WX56W96"
type="button"
title="Item löschen">
<span class="btn-icon">🗑️</span>
<span class="btn-text">Löschen</span>
<span class="keyboard-shortcut">
<span class="kbd">Del</span>
</span>
</button>
</div>
<!-- Screen Reader Description -->
<div id="item-desc-1" class="sr-only">
Produkt: ROCKBROS Sturmhaube Herbst/Winter Thermo Balaclava für Outdoorsports Radfahren Skifahren Snowboard Reflektierend Winddicht Anti-Staub Atmungsaktiv für Damen Herren 2 PCS.
Preis: 12.00 EUR.
Erstellt: 11.01.2026, 16:14.
Manueller Titel.
</div>
</div>
<!-- Add a second item for better testing -->
<div class="enhanced-item"
data-item-id="B08N5WRWNW"
role="article"
aria-labelledby="item-title-2"
aria-describedby="item-desc-2"
tabindex="0">
<div class="item-main-content">
<div class="item-header">
<h3 class="item-custom-title" id="item-title-2">
Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone
</h3>
<div class="item-price-display">
<span class="price" aria-label="Preis: 899 Euro und 99 Cent">€899.99</span>
</div>
</div>
<div class="item-details">
<div class="item-url-section">
<a href="https://amazon.de/dp/B08N5WRWNW"
target="_blank"
class="item-url"
rel="noopener noreferrer"
aria-label="Produkt auf Amazon anzeigen (öffnet in neuem Tab)">
<span class="url-icon">🔗</span>
amazon.de/dp/B08N5WRWNW
</a>
</div>
<div class="item-meta">
<span class="created-date" aria-label="Erstellt am 15. Januar 2026 um 13:58 Uhr">
Erstellt: 15.01.2026, 13:58
</span>
<span class="ai-badge" aria-label="KI-generierter Titel">KI-Titel</span>
</div>
</div>
</div>
<div class="item-actions" role="group" aria-label="Item actions">
<button class="toggle-original-btn"
data-item-id="B08N5WRWNW"
type="button"
aria-pressed="false">
<span class="btn-icon">👁️</span>
<span class="btn-text">Original</span>
</button>
<button class="edit-item-btn"
data-item-id="B08N5WRWNW"
type="button">
<span class="btn-icon">✏️</span>
<span class="btn-text">Bearbeiten</span>
</button>
<button class="delete-item-btn"
data-item-id="B08N5WRWNW"
type="button">
<span class="btn-icon">🗑️</span>
<span class="btn-text">Löschen</span>
</button>
</div>
<div id="item-desc-2" class="sr-only">
Produkt: Samsung Galaxy S21 Ultra - Premium 5G Flagship Smartphone.
Preis: €899.99.
Erstellt: 15.01.2026, 13:58.
KI-generierter Titel.
</div>
</div>
</div>
</div>
</div>
<script>
// Breakpoint Detection
function updateBreakpointIndicator() {
const indicator = document.getElementById('breakpoint-indicator');
const width = window.innerWidth;
if (width <= 480) {
indicator.textContent = 'Mobile (≤480px)';
indicator.style.background = '#dc3545';
indicator.style.color = '#fff';
} else if (width <= 768) {
indicator.textContent = 'Tablet (481px-768px)';
indicator.style.background = '#ffc107';
indicator.style.color = '#000';
} else {
indicator.textContent = 'Desktop (≥769px)';
indicator.style.background = '#28a745';
indicator.style.color = '#fff';
}
}
// Item Actions
function setupItemActions() {
// Toggle Original Title
document.querySelectorAll('.toggle-original-btn').forEach(btn => {
btn.addEventListener('click', () => {
const itemId = btn.dataset.itemId;
const item = document.querySelector(`[data-item-id="${itemId}"]`);
const originalSection = item.querySelector('.original-title-section');
const isPressed = btn.getAttribute('aria-pressed') === 'true';
btn.setAttribute('aria-pressed', !isPressed);
btn.querySelector('.btn-text').textContent = isPressed ? 'Original' : 'Verbergen';
if (originalSection) {
originalSection.style.display = isPressed ? 'none' : 'block';
}
});
});
// Edit Item
document.querySelectorAll('.edit-item-btn').forEach(btn => {
btn.addEventListener('click', () => {
alert('Bearbeiten-Dialog würde hier geöffnet werden');
});
});
// Delete Item
document.querySelectorAll('.delete-item-btn').forEach(btn => {
btn.addEventListener('click', () => {
if (confirm('Sind Sie sicher, dass Sie dieses Item löschen möchten?')) {
btn.closest('.enhanced-item').remove();
}
});
});
}
// Extract Button
function setupExtractButton() {
const extractBtn = document.querySelector('.extract-btn');
const progressContainer = document.querySelector('.extraction-progress');
if (extractBtn) {
extractBtn.addEventListener('click', () => {
extractBtn.disabled = true;
extractBtn.textContent = 'Extrahiere...';
progressContainer.style.display = 'block';
// Simulate progress
simulateProgress();
setTimeout(() => {
extractBtn.disabled = false;
extractBtn.textContent = 'Extrahieren & Hinzufügen';
progressContainer.style.display = 'none';
}, 5000);
});
}
}
// Simulate Progress Steps
function simulateProgress() {
const steps = document.querySelectorAll('.progress-step');
steps.forEach((step, index) => {
setTimeout(() => {
// Remove previous active states
steps.forEach(s => s.classList.remove('active', 'completed'));
// Add completed to previous steps
for (let i = 0; i < index; i++) {
steps[i].classList.add('completed');
steps[i].querySelector('.step-status').textContent = '✓';
}
// Add active to current step
step.classList.add('active');
step.querySelector('.step-status').textContent = '⏳';
// Complete last step
if (index === steps.length - 1) {
setTimeout(() => {
step.classList.remove('active');
step.classList.add('completed');
step.querySelector('.step-status').textContent = '✓';
}, 800);
}
}, index * 800);
});
}
// Help Button
document.querySelector('.help-button')?.addEventListener('click', () => {
const helpText = document.getElementById('url-help-text');
const isVisible = helpText.style.display !== 'none';
helpText.style.display = isVisible ? 'none' : 'block';
});
// Initialize
window.addEventListener('load', () => {
updateBreakpointIndicator();
setupItemActions();
setupExtractButton();
});
window.addEventListener('resize', updateBreakpointIndicator);
</script>
</body>
</html>