updater

settings/index.css

@@ -1150,3 +1150,183 @@ h2 {
   opacity: 1;
   transform: translateY(0);
 }
+
+.update-modal .modal-content {
+  max-width: 500px;
+}
+
+.update-version-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+  padding: 16px;
+  background: var(--button-secondaryFill);
+  border-radius: 12px;
+}
+
+.version-badge {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+}
+
+.version-badge.current {
+  text-align: left;
+}
+
+.version-badge.latest {
+  text-align: right;
+}
+
+.version-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.version-number {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-family: monospace;
+}
+
+.version-badge.latest .version-number {
+  color: var(--accent-accent);
+}
+
+.version-arrow {
+  color: var(--accent-accent);
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.update-changelog-section {
+  margin-top: 16px;
+}
+
+.update-changelog-section h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 12px 0;
+}
+
+.update-changelog {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 12px;
+  background: var(--button-secondaryFill);
+  border-radius: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+
+.update-changelog p {
+  margin: 0 0 8px 0;
+  color: var(--text-primary);
+}
+
+.update-changelog p:last-child {
+  margin-bottom: 0;
+}
+
+.update-changelog h1,
+.update-changelog h2,
+.update-changelog h3 {
+  color: var(--text-primary);
+  margin: 12px 0 8px 0;
+  font-weight: 600;
+}
+
+.update-changelog h1 {
+  font-size: 18px;
+}
+
+.update-changelog h2 {
+  font-size: 16px;
+}
+
+.update-changelog h3 {
+  font-size: 14px;
+}
+
+.update-changelog ul,
+.update-changelog ol {
+  margin: 8px 0;
+  padding-left: 24px;
+  color: var(--text-primary);
+}
+
+.update-changelog li {
+  margin: 4px 0;
+}
+
+.update-changelog code {
+  background: var(--accent-15);
+  color: var(--accent-accent);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+}
+
+.update-changelog pre {
+  background: var(--background);
+  color: var(--text-primary);
+  padding: 12px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 8px 0;
+}
+
+.update-changelog pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.update-changelog a {
+  color: var(--accent-accent);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.update-changelog a:hover {
+  text-decoration: underline;
+}
+
+.update-changelog blockquote {
+  border-left: 3px solid var(--accent-accent);
+  padding-left: 12px;
+  margin: 8px 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+.update-changelog strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.update-changelog em {
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.update-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  justify-content: center;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.update-button .material-icons-round {
+  font-size: 18px;
+}

settings/index.html

@@ -188,6 +188,43 @@
 
   </div>
 
+  <div class="modal-overlay" id="updateModal">
+    <div class="modal-content update-modal">
+      <div class="modal-header">
+        <h3 data-i18n="settings.update.title">Új verzió érhető el!</h3>
+        <button class="modal-close" id="closeUpdateModal">
+          <span class="material-icons-round">close</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="update-version-info">
+          <div class="version-badge current">
+            <span class="version-label" data-i18n="settings.update.current_version">Jelenlegi verzió:</span>
+            <span class="version-number" id="currentVersion">-</span>
+          </div>
+          <span class="material-icons-round version-arrow">arrow_forward</span>
+          <div class="version-badge latest">
+            <span class="version-label" data-i18n="settings.update.latest_version">Legújabb verzió:</span>
+            <span class="version-number" id="latestVersion">-</span>
+          </div>
+        </div>
+        <div class="update-changelog-section">
+          <h4 data-i18n="settings.update.whats_new">Újdonságok:</h4>
+          <div class="update-changelog" id="updateChangelog">
+            <p data-i18n="settings.update.loading">Betöltés...</p>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn-secondary" id="dismissUpdate" data-i18n="settings.update.dismiss">Bezárás</button>
+        <a class="btn-primary update-button" id="updateButton" href="#" target="_blank">
+          <span class="material-icons-round">download</span>
+          <span data-i18n="settings.update.download">Letöltés</span>
+        </a>
+      </div>
+    </div>
+  </div>
+
   <div class="modal-overlay" id="themeEditorModal">
     <div class="modal-content theme-editor-modal">
       <div class="modal-header">

settings/index.js

@@ -1048,6 +1048,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   await initTabs();
   await initErrorReporting();
+  await checkForUpdates();
 });
 
 async function initErrorReporting() {
@@ -1067,3 +1068,103 @@ async function initErrorReporting() {
     });
   });
 }
+
+async function checkForUpdates() {
+  try {
+    const manifest = chrome.runtime.getManifest();
+    const currentVersion = manifest.version;
+
+    const response = await fetch('https://api.github.com/repos/QwIT-Development/firka-extension/releases/latest');
+    if (!response.ok) {
+      console.error('Failed to fetch latest release');
+      return;
+    }
+
+    const latestRelease = await response.json();
+    const latestVersion = latestRelease.tag_name.replace(/^v/, '');
+
+    if (compareVersions(latestVersion, currentVersion) > 0) {
+      showUpdateModal(currentVersion, latestVersion, latestRelease);
+    }
+  } catch (error) {
+    console.error('Error checking for updates:', error);
+  }
+}
+
+function compareVersions(v1, v2) {
+  const parts1 = v1.split('.').map(Number);
+  const parts2 = v2.split('.').map(Number);
+
+  for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
+    const part1 = parts1[i] || 0;
+    const part2 = parts2[i] || 0;
+
+    if (part1 > part2) return 1;
+    if (part1 < part2) return -1;
+  }
+
+  return 0;
+}
+
+function parseMarkdown(markdown) {
+  let html = markdown;
+
+  html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
+  html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
+  html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
+
+  html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
+  html = html.replace(/_(.+?)_/g, '<em>$1</em>');
+
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  html = html.replace(/```([^```]+)```/g, '<pre><code>$1</code></pre>');
+
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
+
+  html = html.replace(/^> (.+)/gim, '<blockquote>$1</blockquote>');
+
+  html = html.replace(/^\* (.+)$/gim, '<li>$1</li>');
+  html = html.replace(/^- (.+)$/gim, '<li>$1</li>');
+  html = html.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
+
+  html = html.replace(/^\d+\. (.+)$/gim, '<li>$1</li>');
+
+  html = html.replace(/\n\n/g, '</p><p>');
+  html = html.replace(/^(?!<[hou]|<li|<pre|<blockquote)(.+)$/gim, '<p>$1</p>');
+
+  html = html.replace(/<p><\/p>/g, '');
+  html = html.replace(/<p>(<[hou])/g, '$1');
+  html = html.replace(/(<\/[hou]l?>)<\/p>/g, '$1');
+
+  return html;
+}
+
+function showUpdateModal(currentVersion, latestVersion, releaseData) {
+  const modal = document.getElementById('updateModal');
+  const currentVersionEl = document.getElementById('currentVersion');
+  const latestVersionEl = document.getElementById('latestVersion');
+  const changelogEl = document.getElementById('updateChangelog');
+  const updateButton = document.getElementById('updateButton');
+
+  currentVersionEl.textContent = `v${currentVersion}`;
+  latestVersionEl.textContent = `v${latestVersion}`;
+
+  const changelog = releaseData.body || 'Nincs elérhető változásnapló.';
+  changelogEl.innerHTML = parseMarkdown(changelog);
+
+  updateButton.href = releaseData.html_url;
+
+  modal.classList.add('active');
+
+  document.getElementById('closeUpdateModal').addEventListener('click', closeUpdateModal);
+  document.getElementById('dismissUpdate').addEventListener('click', closeUpdateModal);
+}
+
+function closeUpdateModal() {
+  const modal = document.getElementById('updateModal');
+  modal.classList.remove('active');
+}