feat: add Google Calendar timetable sync via accounts OAuth

OAuth flows through accounts.betterseqta.org with token exchange server-side. Sync runs in the content script to avoid MV3 service worker timeouts. Adds Svelte calendar sync UI on the timetable page, extension asset URL helper, and excludes calendar tokens from cloud sync. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-28 17:21:05 +00:00 · 2026-06-27 11:51:48 +09:30
parent bd13042fe4
commit e6b8be6821
29 changed files with 1984 additions and 17 deletions
@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { fade } from "svelte/transition";
+
+  let {
+    open = false,
+    busy = false,
+    onConfirm,
+    onCancel,
+  } = $props<{
+    open?: boolean;
+    busy?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onCancel: () => void;
+  }>();
+</script>
+
+{#if open}
+  <div
+    class="bsplus-cal-modal-backdrop"
+    onclick={(e) => {
+      if (e.target === e.currentTarget && !busy) onCancel();
+    }}
+    onkeydown={(e) => {
+      if (e.key === "Escape" && !busy) onCancel();
+    }}
+    role="presentation"
+    transition:fade={{ duration: 150 }}
+  >
+    <div
+      class="bsplus-cal-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="bsplus-cal-disconnect-title"
+      transition:fade={{ duration: 180 }}
+    >
+      <h2 id="bsplus-cal-disconnect-title" class="bsplus-cal-modal-title">
+        Disconnect Google Calendar?
+      </h2>
+      <p class="bsplus-cal-modal-body">
+        Your synced timetable events will stay in Google Calendar, but BetterSEQTA+ will stop
+        updating them until you connect again.
+      </p>
+      <div class="bsplus-cal-modal-actions">
+        <button
+          type="button"
+          class="bsplus-cal-btn bsplus-cal-btn--ghost"
+          disabled={busy}
+          onclick={onCancel}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="bsplus-cal-btn bsplus-cal-btn--danger"
+          disabled={busy}
+          onclick={() => void onConfirm()}
+        >
+          {busy ? "Disconnecting…" : "Disconnect"}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .bsplus-cal-modal-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 2147483647;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+  .bsplus-cal-modal {
+    width: min(100%, 400px);
+    padding: 20px;
+    border-radius: 16px;
+    background: var(--bsplus-cal-surface, #fff);
+    color: var(--bsplus-cal-text, #111);
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
+    border: 1px solid color-mix(in srgb, var(--bsplus-cal-text, #111) 12%, transparent);
+  }
+
+  .bsplus-cal-modal-title {
+    margin: 0 0 8px;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.3;
+  }
+
+  .bsplus-cal-modal-body {
+    margin: 0 0 20px;
+    font-size: 14px;
+    line-height: 1.5;
+    color: color-mix(in srgb, var(--bsplus-cal-text, #111) 72%, transparent);
+  }
+
+  .bsplus-cal-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+
+  .bsplus-cal-btn {
+    padding: 8px 14px;
+    border: none;
+    border-radius: 10px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .bsplus-cal-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .bsplus-cal-btn--ghost {
+    background: color-mix(in srgb, var(--bsplus-cal-text, #111) 8%, transparent);
+    color: var(--bsplus-cal-text, #111);
+  }
+
+  .bsplus-cal-btn--ghost:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--bsplus-cal-text, #111) 14%, transparent);
+  }
+
+  .bsplus-cal-btn--danger {
+    background: #dc2626;
+    color: #fff;
+  }
+
+  .bsplus-cal-btn--danger:hover:not(:disabled) {
+    background: #b91c1c;
+  }
+</style>