BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-08-28 17:21:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into various-bugfixes

Browse Source
This commit is contained in:
StroepWafel
2026-06-27 15:42:51 +09:30
committed by GitHub
parent 6518999ac5 01223c466e
commit 6c9bec4a99
54 changed files with 5073 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/plugins/built-in/timetable/CalendarDeleteEventsModal.svelte
+142
View File
@@ -0,0 +1,142 @@
<script lang="ts">
import { fade } from "svelte/transition";
let {
open = false,
busy = false,
providerLabel = "Google",
onConfirm,
onCancel,
} = $props<{
open?: boolean;
busy?: boolean;
providerLabel?: string;
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-delete-title"
transition:fade={{ duration: 180 }}
>
<h2 id="bsplus-cal-delete-title" class="bsplus-cal-modal-title">
Remove synced events?
</h2>
<p class="bsplus-cal-modal-body">
This removes all BetterSEQTA+ timetable events from your {providerLabel} Calendar for this school.
Your connection stays active — you can sync again later.
</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 ? "Removing…" : "Remove from calendar"}
</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>
src/plugins/built-in/timetable/CalendarDisconnectModal.svelte
+142
View File
@@ -0,0 +1,142 @@
<script lang="ts">
import { fade } from "svelte/transition";
let {
open = false,
busy = false,
providerLabel = "Google",
onConfirm,
onCancel,
} = $props<{
open?: boolean;
busy?: boolean;
providerLabel?: string;
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 {providerLabel} Calendar?
</h2>
<p class="bsplus-cal-modal-body">
Your synced timetable events will stay in {providerLabel} 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>
src/plugins/built-in/timetable/CalendarSyncControl.svelte
+946
View File
@@ -0,0 +1,946 @@
<script lang="ts">
import { onMount } from "svelte";
import { fade, fly } from "svelte/transition";
import browser from "webextension-polyfill";
import {
GOOGLE_CALENDAR_SYNC_WEEKS_MAX,
GOOGLE_CALENDAR_SYNC_WEEKS_MIN,
} from "@/config/googleCalendar";
import { maybeRunDueWeeklySync } from "@/seqta/utils/googleCalendar/calendarSyncListener";
import { deleteSyncedEventsFromGoogleCalendar } from "@/seqta/utils/googleCalendar/syncEngine";
import {
formatOutlookSyncResultMessage,
runOutlookCalendarSync,
} from "@/seqta/utils/outlookCalendar/syncRunner";
import {
formatSyncResultMessage,
runGoogleCalendarSync,
} from "@/seqta/utils/googleCalendar/syncRunner";
import type {
GoogleCalendarStatus,
GoogleCalendarSyncProgress,
GoogleCalendarSyncResult,
} from "@/seqta/utils/googleCalendar/types";
import type { OutlookCalendarStatus } from "@/seqta/utils/outlookCalendar/types";
import { deleteSyncedEventsFromOutlookCalendar } from "@/seqta/utils/outlookCalendar/syncEngine";
import CalendarDeleteEventsModal from "./CalendarDeleteEventsModal.svelte";
import CalendarDisconnectModal from "./CalendarDisconnectModal.svelte";
import CalendarSyncProgress from "./CalendarSyncProgress.svelte";
import OutlookCalendarIcon from "./OutlookCalendarIcon.svelte";
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
import { syncCalendarSyncTheme } from "./calendarSyncTheme";
type CalendarProvider = "google" | "outlook";
type BusyPhase = "connect" | "sync" | "delete" | "disconnect" | null;
type BusyState = { provider: CalendarProvider; phase: BusyPhase } | null;
let googleStatus = $state<GoogleCalendarStatus>({ configured: true, connected: false });
let outlookStatus = $state<OutlookCalendarStatus>({ configured: true, connected: false });
let busy = $state<BusyState>(null);
let menuOpen = $state(false);
let modalProvider = $state<CalendarProvider | null>(null);
let showDisconnect = $state(false);
let showDeleteEvents = $state(false);
let toast = $state<{ message: string; error: boolean } | null>(null);
let syncProgress = $state<GoogleCalendarSyncProgress | null>(null);
let syncWeeksAhead = $state(12);
let autoSyncWeekly = $state(true);
let rootEl = $state<HTMLDivElement | null>(null);
let triggerEl = $state<HTMLButtonElement | null>(null);
let menuEl = $state<HTMLDivElement | null>(null);
let menuStyle = $state("");
let toastTimer: ReturnType<typeof setTimeout> | null = null;
const isBusy = $derived(busy !== null);
const anyConnected = $derived(googleStatus.connected || outlookStatus.connected);
const accent = "var(--bsplus-cal-accent, var(--better-main, #3b82f6))";
function isProviderBusy(provider: CalendarProvider): boolean {
return busy?.provider === provider;
}
function providerPhase(provider: CalendarProvider): BusyPhase {
return busy?.provider === provider ? busy.phase : null;
}
function showToastMessage(message: string, isError = false) {
toast = { message, error: isError };
if (toastTimer) clearTimeout(toastTimer);
toastTimer = setTimeout(() => {
toast = null;
}, 4500);
}
async function refreshStatus() {
const [google, outlook] = await Promise.all([
browser.runtime.sendMessage({ type: "googleCalendarStatus" }) as Promise<GoogleCalendarStatus>,
browser.runtime.sendMessage({ type: "outlookCalendarStatus" }) as Promise<OutlookCalendarStatus>,
]);
googleStatus = google;
outlookStatus = outlook;
syncWeeksAhead = google.syncWeeksAhead ?? 12;
autoSyncWeekly = google.autoSyncWeekly !== false;
}
async function getAccessToken(provider: CalendarProvider): Promise<string> {
const messageType =
provider === "google" ? "googleCalendarGetAccessToken" : "outlookCalendarGetAccessToken";
const res = (await browser.runtime.sendMessage({ type: messageType })) as {
success?: boolean;
accessToken?: string;
error?: string;
};
if (!res?.success || !res.accessToken) {
throw new Error(res?.error ?? "Could not get calendar access token.");
}
return res.accessToken;
}
function handleSyncProgress(progress: GoogleCalendarSyncProgress) {
syncProgress = progress;
}
async function saveSyncSettings(patch: {
syncWeeksAhead?: number;
autoSyncWeekly?: boolean;
}) {
const result = (await browser.runtime.sendMessage({
type: "googleCalendarUpdateSyncSettings",
...patch,
})) as GoogleCalendarStatus & { success?: boolean };
if (result.syncWeeksAhead != null) syncWeeksAhead = result.syncWeeksAhead;
if (result.autoSyncWeekly != null) autoSyncWeekly = result.autoSyncWeekly;
googleStatus = { ...googleStatus, ...result };
}
async function performSync(
provider: CalendarProvider,
mode: "full" | "incremental" = "full",
): Promise<boolean> {
const run = provider === "google" ? runGoogleCalendarSync : runOutlookCalendarSync;
const format = provider === "google" ? formatSyncResultMessage : formatOutlookSyncResultMessage;
const result = await run({ mode, onProgress: handleSyncProgress });
syncProgress = null;
if (!result.success) {
showToastMessage(result.error ?? "Calendar sync failed.", true);
return false;
}
if (provider === "google") {
googleStatus = {
...googleStatus,
connected: true,
lastSyncAt: result.lastSyncAt ?? googleStatus.lastSyncAt,
};
} else {
outlookStatus = {
...outlookStatus,
connected: true,
lastSyncAt: result.lastSyncAt ?? outlookStatus.lastSyncAt,
};
}
showToastMessage(format(result));
return true;
}
async function connectProvider(provider: CalendarProvider) {
const status = provider === "google" ? googleStatus : outlookStatus;
if (!status.configured || isBusy) return;
menuOpen = true;
busy = { provider, phase: "connect" };
const connectType =
provider === "google" ? "googleCalendarConnect" : "outlookCalendarConnect";
try {
const result = (await browser.runtime.sendMessage({
type: connectType,
})) as GoogleCalendarSyncResult;
if (!result.success) {
const label = provider === "google" ? "Google" : "Outlook";
showToastMessage(result.error ?? `Could not connect to ${label} Calendar.`, true);
return;
}
if (provider === "google") {
googleStatus = { ...googleStatus, connected: true };
} else {
outlookStatus = { ...outlookStatus, connected: true };
}
busy = { provider, phase: "sync" };
await performSync(provider);
} catch (err) {
showToastMessage(err instanceof Error ? err.message : "Could not connect.", true);
} finally {
syncProgress = null;
busy = null;
}
}
async function syncProvider(provider: CalendarProvider) {
const status = provider === "google" ? googleStatus : outlookStatus;
if (!status.configured || isBusy) return;
if (!status.connected) {
await connectProvider(provider);
return;
}
busy = { provider, phase: "sync" };
try {
await performSync(provider);
} catch (err) {
showToastMessage(err instanceof Error ? err.message : "Calendar sync failed.", true);
} finally {
syncProgress = null;
busy = null;
}
}
async function confirmDeleteEvents() {
if (isBusy || !modalProvider) return;
const provider = modalProvider;
busy = { provider, phase: "delete" };
syncProgress = {
phase: "preparing",
current: 0,
total: 1,
message: "Preparing removal…",
};
try {
const deleteFn =
provider === "google"
? deleteSyncedEventsFromGoogleCalendar
: deleteSyncedEventsFromOutlookCalendar;
const result = await deleteFn(location.origin, () => getAccessToken(provider), {
onProgress: handleSyncProgress,
});
if (!result.success) {
showToastMessage(result.error ?? "Could not remove calendar events.", true);
return;
}
const removed = result.deleted ?? 0;
showDeleteEvents = false;
menuOpen = false;
modalProvider = null;
if (removed === 0) {
showToastMessage("No synced events to remove.");
} else {
showToastMessage(`Removed ${removed} event${removed === 1 ? "" : "s"} from Google Calendar.`);
}
} catch (err) {
showToastMessage(err instanceof Error ? err.message : "Remove failed.", true);
} finally {
syncProgress = null;
busy = null;
}
}
async function onWeeksAheadChange(event: Event) {
const value = Number((event.currentTarget as HTMLInputElement).value);
if (!Number.isFinite(value)) return;
await saveSyncSettings({ syncWeeksAhead: value });
}
async function onAutoSyncToggle(event: Event) {
const checked = (event.currentTarget as HTMLInputElement).checked;
autoSyncWeekly = checked;
await saveSyncSettings({ autoSyncWeekly: checked });
}
async function confirmDisconnect() {
if (isBusy || !modalProvider) return;
const provider = modalProvider;
busy = { provider, phase: "disconnect" };
const disconnectType =
provider === "google" ? "googleCalendarDisconnect" : "outlookCalendarDisconnect";
const label = provider === "google" ? "Google" : "Outlook";
try {
const result = (await browser.runtime.sendMessage({
type: disconnectType,
})) as { success?: boolean };
if (!result?.success) {
showToastMessage(`Could not disconnect ${label} Calendar.`, true);
return;
}
if (provider === "google") {
googleStatus = { ...googleStatus, connected: false, lastSyncAt: undefined };
} else {
outlookStatus = { ...outlookStatus, connected: false, lastSyncAt: undefined };
}
showDisconnect = false;
menuOpen = false;
modalProvider = null;
showToastMessage(`Disconnected from ${label} Calendar.`);
} catch (err) {
showToastMessage(err instanceof Error ? err.message : "Disconnect failed.", true);
} finally {
busy = null;
}
}
function toggleMenu() {
if (isBusy) return;
menuOpen = !menuOpen;
if (menuOpen) {
queueMicrotask(() => syncMenuTheme());
}
}
function formatLastSync(ts?: number): string | null {
if (!ts) return null;
const diff = Date.now() - ts;
if (diff < 60_000) return "Synced just now";
if (diff < 3_600_000) return `Synced ${Math.floor(diff / 60_000)}m ago`;
if (diff < 86_400_000) return `Synced ${Math.floor(diff / 3_600_000)}h ago`;
return `Synced ${new Date(ts).toLocaleDateString()}`;
}
function updateMenuPosition() {
if (!triggerEl) return;
const rect = triggerEl.getBoundingClientRect();
menuStyle = `top:${rect.bottom + 8}px;right:${window.innerWidth - rect.right}px;`;
syncMenuTheme();
}
function syncMenuTheme() {
if (!menuEl) return;
syncCalendarSyncTheme(menuEl);
}
function syncMountedTheme() {
const themeHost = rootEl?.closest(".bsplus-calendar-sync-mount") as HTMLElement | null;
if (themeHost) syncCalendarSyncTheme(themeHost);
if (menuOpen) syncMenuTheme();
}
function portalMenu(node: HTMLElement) {
document.body.appendChild(node);
return {
destroy() {
node.remove();
},
};
}
$effect(() => {
const host = rootEl?.closest(".timetable-calendar-controls");
host?.classList.toggle("bsplus-cal-menu-open", menuOpen);
return () => host?.classList.remove("bsplus-cal-menu-open");
});
$effect(() => {
if (!menuOpen || !menuEl) return;
syncMenuTheme();
updateMenuPosition();
const onLayout = () => updateMenuPosition();
window.addEventListener("resize", onLayout);
window.addEventListener("scroll", onLayout, true);
return () => {
window.removeEventListener("resize", onLayout);
window.removeEventListener("scroll", onLayout, true);
};
});
onMount(() => {
void refreshStatus().then(() => {
void maybeRunDueWeeklySync((message, isError) => {
showToastMessage(message, isError);
void refreshStatus();
});
});
const themeKeys = [
"selectedColor",
"selectedFont",
"DarkMode",
"adaptiveThemeColour",
"adaptiveThemeGradient",
"selectedTheme",
] as const;
const onThemeChange = () => syncMountedTheme();
for (const key of themeKeys) {
settingsState.register(key, onThemeChange);
}
const themeObserver = new MutationObserver(onThemeChange);
themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ["style", "class"],
});
const onDocPointer = (event: PointerEvent) => {
if (!menuOpen) return;
const target = event.target as Node;
if (rootEl?.contains(target)) return;
if (menuEl?.contains(target)) return;
menuOpen = false;
};
document.addEventListener("pointerdown", onDocPointer);
return () => {
document.removeEventListener("pointerdown", onDocPointer);
for (const key of themeKeys) {
settingsState.unregister(key, onThemeChange);
}
themeObserver.disconnect();
if (toastTimer) clearTimeout(toastTimer);
};
});
</script>
<div class="bsplus-cal-sync" bind:this={rootEl}>
<button
type="button"
class="uiButton bsplus-cal-trigger"
bind:this={triggerEl}
class:bsplus-cal-trigger--open={menuOpen}
class:bsplus-cal-trigger--connected={anyConnected}
class:bsplus-cal-trigger--busy={isBusy}
aria-haspopup="menu"
aria-expanded={menuOpen}
aria-busy={isBusy}
aria-label={anyConnected ? "Calendar sync options" : "Sync with Calendar"}
onclick={() => {
if (!isBusy) toggleMenu();
}}
>
<span class="bsplus-cal-trigger-icon iconFamily" aria-hidden="true">&#xe9cd;</span>
<span class="bsplus-cal-trigger-text">Sync with Calendar</span>
{#if anyConnected}
<span class="bsplus-cal-status-dot" aria-hidden="true"></span>
{/if}
</button>
{#if menuOpen}
<div
class="bsplus-cal-menu"
role="menu"
bind:this={menuEl}
style={menuStyle}
use:portalMenu
transition:fly={{ y: -6, duration: 160 }}
>
<div class="bsplus-cal-menu-header">
<span class="bsplus-cal-menu-title">Calendar sync</span>
<span class="bsplus-cal-menu-sub">Connect providers to sync your timetable</span>
</div>
<div class="bsplus-cal-provider" role="none">
<div class="bsplus-cal-provider-row">
<span class="bsplus-cal-provider-icon" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path
fill="#4285F4"
d="M22 12c0-.96-.08-1.88-.24-2.76H12v5.22h5.68c-.24 1.28-.96 2.44-2.04 3.18v2.64h3.3c1.92-1.76 3.06-4.36 3.06-7.28z"
/>
<path
fill="#34A853"
d="M12 22c2.76 0 5.08-.92 6.78-2.5l-3.3-2.64c-.92.62-2.1.98-3.48.98-2.68 0-4.96-1.8-5.78-4.22H2.18v2.72A10 10 0 0 0 12 22z"
/>
<path
fill="#FBBC05"
d="M6.22 13.62A5.98 5.98 0 0 1 5.82 12c0-.56.1-1.1.28-1.62V7.66H2.18A10 10 0 0 0 2 12c0 1.62.38 3.16 1.06 4.52l3.16-2.9z"
/>
<path
fill="#EA4335"
d="M12 5.38c1.5 0 2.84.52 3.9 1.54l2.92-2.92C17.08 2.34 14.76 1.2 12 1.2 7.54 1.2 3.72 3.94 2.18 7.66l4.04 3.14c.82-2.42 3.1-4.22 5.78-4.22z"
/>
</svg>
</span>
<div class="bsplus-cal-provider-copy">
<span class="bsplus-cal-provider-name">
<span class="bsplus-google-word bsplus-google-word--sm">
<span class="bsplus-google-g">G</span><span class="bsplus-google-o1">o</span><span class="bsplus-google-o2">o</span><span class="bsplus-google-g2">g</span><span class="bsplus-google-l">l</span><span class="bsplus-google-e">e</span>
</span>
<span> Calendar</span>
</span>
<span class="bsplus-cal-provider-status">
{#if !googleStatus.configured}
Not available in this build
{:else if googleStatus.connected}
Connected{formatLastSync(googleStatus.lastSyncAt) ? ` · ${formatLastSync(googleStatus.lastSyncAt)}` : ""}
{:else}
Not connected
{/if}
</span>
</div>
</div>
<div class="bsplus-cal-provider-actions">
{#if !googleStatus.connected}
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--primary"
style:--bsplus-cal-accent={accent}
role="menuitem"
disabled={!googleStatus.configured || isBusy}
onclick={() => void connectProvider("google")}
>
{providerPhase("google") === "connect" ? "Connecting…" : "Connect"}
</button>
{:else}
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--primary"
style:--bsplus-cal-accent={accent}
role="menuitem"
disabled={isBusy}
onclick={() => void syncProvider("google")}
>
{providerPhase("google") === "sync" ? "Syncing…" : "Sync now"}
</button>
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--ghost"
role="menuitem"
disabled={isBusy}
onclick={() => {
modalProvider = "google";
showDeleteEvents = true;
}}
>
{providerPhase("google") === "delete" ? "Removing…" : "Remove from calendar"}
</button>
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--ghost"
role="menuitem"
disabled={isBusy}
onclick={() => {
modalProvider = "google";
showDisconnect = true;
}}
>
Disconnect
</button>
{/if}
</div>
</div>
<div class="bsplus-cal-provider" role="none">
<div class="bsplus-cal-provider-row">
<span class="bsplus-cal-provider-icon" aria-hidden="true">
<OutlookCalendarIcon />
</span>
<div class="bsplus-cal-provider-copy">
<span class="bsplus-cal-provider-name">Outlook Calendar</span>
<span class="bsplus-cal-provider-status">
{#if !outlookStatus.configured}
Set OUTLOOK_OAUTH_CLIENT_ID to enable
{:else if outlookStatus.connected}
Connected{formatLastSync(outlookStatus.lastSyncAt) ? ` · ${formatLastSync(outlookStatus.lastSyncAt)}` : ""}
{:else}
Not connected
{/if}
</span>
</div>
</div>
<div class="bsplus-cal-provider-actions">
{#if !outlookStatus.connected}
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--primary"
style:--bsplus-cal-accent={accent}
role="menuitem"
disabled={!outlookStatus.configured || isBusy}
onclick={() => void connectProvider("outlook")}
>
{providerPhase("outlook") === "connect" ? "Connecting…" : "Connect"}
</button>
{:else}
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--primary"
style:--bsplus-cal-accent={accent}
role="menuitem"
disabled={isBusy}
onclick={() => void syncProvider("outlook")}
>
{providerPhase("outlook") === "sync" ? "Syncing…" : "Sync now"}
</button>
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--ghost"
role="menuitem"
disabled={isBusy}
onclick={() => {
modalProvider = "outlook";
showDeleteEvents = true;
}}
>
{providerPhase("outlook") === "delete" ? "Removing…" : "Remove from calendar"}
</button>
<button
type="button"
class="bsplus-cal-action bsplus-cal-action--ghost"
role="menuitem"
disabled={isBusy}
onclick={() => {
modalProvider = "outlook";
showDisconnect = true;
}}
>
Disconnect
</button>
{/if}
</div>
</div>
{#if anyConnected}
<div class="bsplus-cal-settings" role="group" aria-label="Sync settings">
<label class="bsplus-cal-setting">
<span class="bsplus-cal-setting-label">Weeks ahead</span>
<input
type="number"
class="bsplus-cal-setting-input"
min={GOOGLE_CALENDAR_SYNC_WEEKS_MIN}
max={GOOGLE_CALENDAR_SYNC_WEEKS_MAX}
value={syncWeeksAhead}
disabled={isBusy}
onchange={(e) => void onWeeksAheadChange(e)}
/>
</label>
<label class="bsplus-cal-setting bsplus-cal-setting--toggle">
<span class="bsplus-cal-setting-label">Auto-sync weekly</span>
<input
type="checkbox"
class="bsplus-cal-setting-checkbox"
checked={autoSyncWeekly}
disabled={isBusy}
onchange={(e) => void onAutoSyncToggle(e)}
/>
</label>
<p class="bsplus-cal-setting-hint">
Syncs {syncWeeksAhead} weeks ahead on connect and manual sync. Weekly auto-sync adds each new week forward.
</p>
</div>
{/if}
<CalendarSyncProgress progress={syncProgress} />
</div>
{/if}
<CalendarDeleteEventsModal
open={showDeleteEvents}
busy={busy?.phase === "delete"}
providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
onCancel={() => {
if (busy?.phase !== "delete") showDeleteEvents = false;
}}
onConfirm={confirmDeleteEvents}
/>
<CalendarDisconnectModal
open={showDisconnect}
busy={busy?.phase === "disconnect"}
providerLabel={modalProvider === "outlook" ? "Outlook" : "Google"}
onCancel={() => {
if (busy?.phase !== "disconnect") showDisconnect = false;
}}
onConfirm={confirmDisconnect}
/>
{#if toast}
<div
class="bsplus-cal-toast"
class:bsplus-cal-toast--error={toast.error}
role="status"
transition:fade={{ duration: 150 }}
>
{toast.message}
</div>
{/if}
</div>
<style>
.bsplus-cal-sync {
position: relative;
display: inline-flex;
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
color: var(--bsplus-cal-text, var(--text-primary, #111));
}
.bsplus-cal-trigger {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: auto;
height: auto;
padding: 0 10px;
margin-left: 4px;
border-radius: 16px !important;
font-family: inherit;
transition: all 0.2s ease;
}
.bsplus-cal-trigger-icon {
font-family: "IconFamily" !important;
font-size: 16px;
line-height: 1;
opacity: 0.9;
}
.bsplus-cal-trigger-text {
font-family: inherit;
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
.bsplus-google-word {
display: inline-flex;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.02em;
}
.bsplus-google-word--sm {
font-size: 13px;
}
.bsplus-google-g,
.bsplus-google-g2 {
color: #4285f4;
}
.bsplus-google-o1,
.bsplus-google-e {
color: #ea4335;
}
.bsplus-google-o2 {
color: #fbbc05;
}
.bsplus-google-l {
color: #34a853;
}
.bsplus-cal-trigger:hover:not(.bsplus-cal-trigger--busy) {
transform: scale(1.03);
}
.bsplus-cal-trigger:active:not(.bsplus-cal-trigger--busy) {
transform: scale(0.97);
}
.bsplus-cal-trigger--open {
background: color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 14%, transparent) !important;
}
.bsplus-cal-trigger--connected .bsplus-cal-status-dot {
display: block;
}
.bsplus-cal-trigger--busy {
opacity: 0.85;
cursor: wait;
}
.bsplus-cal-status-dot {
position: absolute;
top: 4px;
right: 4px;
width: 7px;
height: 7px;
border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 2px var(--bsplus-cal-surface, #fff);
display: none;
}
.bsplus-cal-settings {
margin: 8px 0 10px;
padding: 10px;
border-radius: 10px;
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent));
background: color-mix(in srgb, var(--bsplus-cal-surface, #fff) 92%, transparent);
display: grid;
gap: 8px;
}
.bsplus-cal-setting {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
}
.bsplus-cal-setting-label {
font-weight: 600;
color: var(--bsplus-cal-text, var(--text-primary, #111));
}
.bsplus-cal-setting-input {
width: 64px;
padding: 6px 8px;
border-radius: 10px;
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 18%, transparent));
background: var(--bsplus-cal-surface, #fff);
color: var(--bsplus-cal-text, var(--text-primary, #111));
font-size: 12px;
text-align: center;
}
.bsplus-cal-setting-checkbox {
width: 16px;
height: 16px;
accent-color: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
}
.bsplus-cal-setting-hint {
margin: 0;
font-size: 10px;
line-height: 1.4;
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 58%, transparent);
}
.bsplus-cal-menu {
position: fixed;
z-index: 2147483647;
width: min(320px, calc(100vw - 24px));
padding: 10px;
border-radius: 14px;
background: var(--bsplus-cal-surface, #fff);
color: var(--bsplus-cal-text, #18181b);
border: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent));
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
}
.bsplus-cal-menu.dark {
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.bsplus-cal-menu-header {
padding: 6px 8px 10px;
border-bottom: 1px solid var(--bsplus-cal-border, color-mix(in srgb, var(--bsplus-cal-text) 10%, transparent));
margin-bottom: 8px;
}
.bsplus-cal-menu-title {
display: block;
font-size: 13px;
font-weight: 700;
}
.bsplus-cal-menu-sub {
display: block;
margin-top: 2px;
font-size: 11px;
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
}
.bsplus-cal-provider {
padding: 8px;
border-radius: 10px;
background: var(--bsplus-cal-surface-muted, color-mix(in srgb, var(--bsplus-cal-text) 4%, transparent));
margin-bottom: 8px;
}
.bsplus-cal-provider-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.bsplus-cal-provider-icon {
display: flex;
flex: 0 0 auto;
width: 28px;
height: 28px;
}
.bsplus-cal-provider-icon svg {
width: 100%;
height: 100%;
}
.bsplus-cal-provider-copy {
min-width: 0;
}
.bsplus-cal-provider-name {
display: block;
font-size: 13px;
font-weight: 600;
}
.bsplus-cal-provider-status {
display: block;
margin-top: 1px;
font-size: 11px;
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
}
.bsplus-cal-provider-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bsplus-cal-action {
flex: 1 1 auto;
min-width: 0;
padding: 7px 10px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.bsplus-cal-action:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.bsplus-cal-action--primary {
background: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
color: #fff;
}
.bsplus-cal-action--primary:hover:not(:disabled) {
filter: brightness(1.06);
transform: scale(1.02);
}
.bsplus-cal-action--ghost {
background: var(--bsplus-cal-surface-muted, color-mix(in srgb, var(--bsplus-cal-text) 8%, transparent));
color: var(--bsplus-cal-text, #18181b);
}
.bsplus-cal-action--ghost:hover:not(:disabled) {
background: color-mix(in srgb, var(--bsplus-cal-text) 14%, var(--bsplus-cal-surface));
}
.bsplus-cal-toast {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 100000;
max-width: min(360px, calc(100vw - 32px));
padding: 12px 14px;
border-radius: 12px;
background: rgba(20, 20, 20, 0.92);
color: #fff;
font-size: 13px;
line-height: 1.4;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
pointer-events: none;
}
.bsplus-cal-toast--error {
background: rgba(120, 24, 24, 0.95);
}
</style>
src/plugins/built-in/timetable/CalendarSyncProgress.svelte
+67
View File
@@ -0,0 +1,67 @@
<script lang="ts">
import type { GoogleCalendarSyncProgress } from "@/seqta/utils/googleCalendar/types";
let {
progress = null,
} = $props<{
progress?: GoogleCalendarSyncProgress | null;
}>();
const percent = $derived(
progress && progress.total > 0
? Math.min(100, Math.round((progress.current / progress.total) * 100))
: progress?.phase === "preparing"
? 8
: 0,
);
</script>
{#if progress && progress.phase !== "done"}
<div class="bsplus-cal-progress" role="status" aria-live="polite" aria-busy="true">
<div class="bsplus-cal-progress-label">{progress.message}</div>
<div class="bsplus-cal-progress-track" aria-hidden="true">
<div class="bsplus-cal-progress-bar" style:width={`${percent}%`}></div>
</div>
{#if progress.total > 0}
<div class="bsplus-cal-progress-meta">{progress.current} / {progress.total}</div>
{/if}
</div>
{/if}
<style>
.bsplus-cal-progress {
margin-top: 8px;
padding: 10px;
border-radius: 10px;
background: color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--bsplus-cal-accent, var(--better-main, #3b82f6)) 22%, transparent);
}
.bsplus-cal-progress-label {
font-size: 11px;
font-weight: 600;
color: var(--bsplus-cal-text, var(--text-primary, #111));
margin-bottom: 8px;
}
.bsplus-cal-progress-track {
height: 8px;
border-radius: 999px;
overflow: hidden;
background: color-mix(in srgb, var(--bsplus-cal-text, #111) 10%, transparent);
}
.bsplus-cal-progress-bar {
height: 100%;
border-radius: 999px;
background: var(--bsplus-cal-accent, var(--better-main, #3b82f6));
transition: width 0.25s ease;
}
.bsplus-cal-progress-meta {
margin-top: 6px;
font-size: 10px;
color: color-mix(in srgb, var(--bsplus-cal-text, #111) 62%, transparent);
text-align: right;
}
</style>
src/plugins/built-in/timetable/OutlookCalendarIcon.svelte
+231
View File
@@ -0,0 +1,231 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="60 90.4 570.02 539.67" aria-hidden="true">
<defs>
<linearGradient
id="bsplus-outlook-linear0"
gradientUnits="userSpaceOnUse"
x1="9.98908"
y1="22.364901"
x2="30.932199"
y2="9.37495"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0" style="stop-color:rgb(12.54902%,65.490196%,98.039216%);stop-opacity:1;" />
<stop offset="0.4" style="stop-color:rgb(23.137255%,83.529412%,100%);stop-opacity:1;" />
<stop offset="1" style="stop-color:rgb(76.862745%,69.019608%,100%);stop-opacity:1;" />
</linearGradient>
<linearGradient
id="bsplus-outlook-linear1"
gradientUnits="userSpaceOnUse"
x1="17.197201"
y1="26.7945"
x2="28.856199"
y2="8.12575"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0" style="stop-color:rgb(8.627451%,35.294118%,85.098039%);stop-opacity:1;" />
<stop offset="0.5008" style="stop-color:rgb(9.411765%,50.196078%,89.803922%);stop-opacity:1;" />
<stop offset="1" style="stop-color:rgb(52.156863%,52.941176%,100%);stop-opacity:1;" />
</linearGradient>
<linearGradient
id="bsplus-outlook-linear2"
gradientUnits="userSpaceOnUse"
x1="25.7005"
y1="27.048401"
x2="12.7563"
y2="16.501301"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0.236946" style="stop-color:rgb(26.666667%,54.117647%,100%);stop-opacity:0;" />
<stop offset="0.792113" style="stop-color:rgb(0%,19.607843%,69.411765%);stop-opacity:0.2;" />
</linearGradient>
<linearGradient
id="bsplus-outlook-linear3"
gradientUnits="userSpaceOnUse"
x1="24.0534"
y1="31.1099"
x2="44.509998"
y2="18.0177"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0" style="stop-color:rgb(10.196078%,26.27451%,65.098039%);stop-opacity:1;" />
<stop offset="0.492267" style="stop-color:rgb(12.54902%,32.156863%,79.607843%);stop-opacity:1;" />
<stop offset="1" style="stop-color:rgb(37.254902%,12.54902%,79.607843%);stop-opacity:1;" />
</linearGradient>
<linearGradient
id="bsplus-outlook-linear4"
gradientUnits="userSpaceOnUse"
x1="29.8281"
y1="30.327299"
x2="17.397499"
y2="19.570801"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0" style="stop-color:rgb(0%,27.058824%,72.54902%);stop-opacity:0;" />
<stop offset="0.669859" style="stop-color:rgb(5.098039%,12.156863%,41.176471%);stop-opacity:0.2;" />
</linearGradient>
<radialGradient
id="bsplus-outlook-radial0"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(0.000000000000024802,-405.040512,438.393002,0.000000000000026844,360.027008,102.268202)"
>
<stop offset="0.568182" style="stop-color:rgb(15.294118%,37.254902%,94.117647%);stop-opacity:0;" />
<stop offset="0.992424" style="stop-color:rgb(0%,12.941176%,46.666667%);stop-opacity:1;" />
</radialGradient>
<linearGradient
id="bsplus-outlook-linear5"
gradientUnits="userSpaceOnUse"
x1="41.998001"
y1="29.9431"
x2="23.8517"
y2="29.9431"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0" style="stop-color:rgb(30.196078%,76.862745%,100%);stop-opacity:1;" />
<stop offset="0.196145" style="stop-color:rgb(5.882353%,68.627451%,100%);stop-opacity:1;" />
</linearGradient>
<radialGradient
id="bsplus-outlook-radial1"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(122.73959,-122.73959,122.73959,122.73959,421.392002,568.675518)"
>
<stop offset="0.259477" style="stop-color:rgb(0%,37.647059%,81.960784%);stop-opacity:0.4;" />
<stop offset="0.908166" style="stop-color:rgb(1.176471%,51.372549%,94.509804%);stop-opacity:0;" />
</radialGradient>
<radialGradient
id="bsplus-outlook-radial2"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(357.407022,-468.445926,423.594568,323.187085,159.471002,697.080002)"
>
<stop offset="0.732317" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0;" />
<stop offset="1" style="stop-color:rgb(95.686275%,65.490196%,96.862745%);stop-opacity:0.501961;" />
</radialGradient>
<radialGradient
id="bsplus-outlook-radial3"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(-170.860868,259.725406,-674.018133,-443.404152,278.562012,412.978506)"
>
<stop offset="0" style="stop-color:rgb(28.627451%,87.058824%,100%);stop-opacity:1;" />
<stop offset="0.724349" style="stop-color:rgb(16.078431%,76.470588%,100%);stop-opacity:1;" />
</radialGradient>
<linearGradient
id="bsplus-outlook-linear6"
gradientUnits="userSpaceOnUse"
x1="3.45756"
y1="37.872299"
x2="20.9291"
y2="37.859699"
gradientTransform="matrix(15,0,0,15,0,0)"
>
<stop offset="0.205882" style="stop-color:rgb(42.352941%,87.843137%,100%);stop-opacity:1;" />
<stop offset="0.535" style="stop-color:rgb(31.372549%,83.529412%,100%);stop-opacity:0;" />
</linearGradient>
<radialGradient
id="bsplus-outlook-radial4"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(215.76719,230.769125,-230.769125,215.76719,59.143649,354.231005)"
>
<stop offset="0.038877" style="stop-color:rgb(0%,56.862745%,100%);stop-opacity:1;" />
<stop offset="0.919119" style="stop-color:rgb(9.411765%,23.921569%,67.843137%);stop-opacity:1;" />
</radialGradient>
<radialGradient
id="bsplus-outlook-radial5"
gradientUnits="userSpaceOnUse"
cx="0"
cy="0"
fx="0"
fy="0"
r="1"
gradientTransform="matrix(0.000000000000010287,167.999997,-193.782005,0.000000000000011866,180,491.158504)"
>
<stop offset="0.557796" style="stop-color:rgb(5.882353%,64.705882%,96.862745%);stop-opacity:0;" />
<stop offset="1" style="stop-color:rgb(45.490196%,77.647059%,100%);stop-opacity:0.501961;" />
</radialGradient>
</defs>
<g>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear0);"
d="M 463.984375 140.144531 L 119.636719 358.414062 L 90.023438 311.695312 L 90.023438 271.4375 C 90.023438 256.78125 97.445312 243.121094 109.742188 235.144531 L 309.910156 105.257812 C 340.40625 85.46875 379.6875 85.464844 410.1875 105.25 Z M 463.984375 140.144531 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear1);"
d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear2);"
d="M 407.101562 103.339844 C 408.136719 103.953125 409.164062 104.59375 410.183594 105.253906 L 566.398438 206.585938 L 179.0625 452.105469 L 119.625 358.335938 L 403.894531 177.800781 C 430.820312 160.699219 432 122.230469 407.101562 103.339844 Z M 407.101562 103.339844 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear3);"
d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear4);"
d="M 333.601562 498.988281 L 179.066406 452.109375 L 507.628906 243.835938 C 535.300781 226.296875 535.230469 185.898438 507.496094 168.457031 L 506.015625 167.527344 L 510.277344 170.175781 L 610.273438 235.042969 C 622.574219 243.019531 629.996094 256.683594 629.996094 271.34375 L 629.996094 310.304688 Z M 333.601562 498.988281 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial0);"
d="M 410.1875 105.25 C 379.6875 85.464844 340.40625 85.46875 309.90625 105.257812 L 109.742188 235.144531 C 97.445312 243.121094 90.023438 256.78125 90.023438 271.4375 L 90.023438 273.40625 C 90.507812 288.121094 98.25 301.679688 110.757812 309.566406 L 359.644531 466.476562 L 609.160156 309.804688 C 622.121094 301.667969 629.984375 287.441406 629.984375 272.140625 L 629.984375 310.308594 L 629.992188 271.34375 C 629.992188 256.683594 622.566406 243.023438 610.269531 235.042969 Z M 410.1875 105.25 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear5);"
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial1);"
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial2);"
d="M 315.769531 630.050781 L 536.21875 630.050781 C 587.996094 630.050781 629.96875 588.078125 629.96875 536.300781 L 629.96875 272.140625 C 629.96875 287.441406 622.105469 301.667969 609.148438 309.804688 L 281.242188 515.695312 C 263.554688 526.804688 252.820312 546.222656 252.820312 567.109375 C 252.824219 601.871094 281.003906 630.050781 315.769531 630.050781 Z M 315.769531 630.050781 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial3);"
d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-linear6);"
d="M 405.402344 630.035156 L 183.738281 630.035156 C 131.960938 630.035156 89.988281 588.0625 89.988281 536.285156 L 89.988281 271.945312 C 89.988281 287.21875 97.824219 301.421875 110.742188 309.566406 L 438.324219 516.085938 C 456.257812 527.390625 467.132812 547.113281 467.132812 568.3125 C 467.128906 602.402344 439.492188 630.035156 405.402344 630.035156 Z M 405.402344 630.035156 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial4);"
d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:url(#bsplus-outlook-radial5);"
d="M 108.75 345 L 251.25 345 C 278.175781 345 300 366.824219 300 393.75 L 300 536.25 C 300 563.175781 278.175781 585 251.25 585 L 108.75 585 C 81.824219 585 60 563.175781 60 536.25 L 60 393.75 C 60 366.824219 81.824219 345 108.75 345 Z M 108.75 345 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
d="M 179.386719 534 C 159.539062 534 143.25 527.789062 130.511719 515.375 C 117.773438 502.960938 111.402344 486.757812 111.402344 466.769531 C 111.402344 445.660156 117.867188 428.589844 130.796875 415.550781 C 143.730469 402.515625 160.660156 396 181.59375 396 C 201.375 396 217.472656 402.238281 229.890625 414.714844 C 242.375 427.191406 248.617188 443.644531 248.617188 464.066406 C 248.617188 485.050781 242.148438 501.964844 229.21875 514.816406 C 216.351562 527.605469 199.742188 534 179.386719 534 Z M 179.960938 507.648438 C 190.777344 507.648438 199.484375 503.953125 206.078125 496.566406 C 212.671875 489.179688 215.96875 478.902344 215.96875 465.742188 C 215.96875 452.023438 212.765625 441.347656 206.367188 433.710938 C 199.964844 426.074219 191.417969 422.257812 180.730469 422.257812 C 169.71875 422.257812 160.851562 426.199219 154.132812 434.082031 C 147.410156 441.90625 144.050781 452.273438 144.050781 465.183594 C 144.050781 478.285156 147.410156 488.652344 154.132812 496.285156 C 160.851562 503.859375 169.460938 507.648438 179.960938 507.648438 Z M 179.960938 507.648438 "
/>
<path
style="stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;"
d="M 179.332031 535.847656 C 159.5625 535.847656 143.332031 529.472656 130.640625 516.71875 C 117.953125 503.964844 111.605469 487.320312 111.605469 466.789062 C 111.605469 445.105469 118.046875 427.570312 130.929688 414.179688 C 143.8125 400.785156 160.679688 394.089844 181.53125 394.089844 C 201.234375 394.089844 217.273438 400.5 229.644531 413.316406 C 242.082031 426.136719 248.296875 443.035156 248.296875 464.015625 C 248.296875 485.566406 241.855469 502.945312 228.976562 516.144531 C 216.15625 529.28125 199.609375 535.847656 179.332031 535.847656 Z M 179.902344 508.78125 C 190.679688 508.78125 199.355469 504.984375 205.921875 497.398438 C 212.492188 489.808594 215.773438 479.253906 215.773438 465.734375 C 215.773438 451.640625 212.585938 440.675781 206.210938 432.832031 C 199.832031 424.988281 191.320312 421.066406 180.671875 421.066406 C 169.699219 421.066406 160.867188 425.113281 154.171875 433.214844 C 147.476562 441.246094 144.128906 451.898438 144.128906 465.160156 C 144.128906 478.617188 147.476562 489.265625 154.171875 497.109375 C 160.867188 504.890625 169.445312 508.78125 179.902344 508.78125 Z M 179.902344 508.78125 "
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

src/plugins/built-in/timetable/calendarSyncHost.css
+24
View File
@@ -0,0 +1,24 @@
.timetablepage #toolbar {
position: relative;
z-index: 100;
}
.timetable-calendar-controls {
position: relative;
z-index: 100001;
display: inline-flex;
align-items: center;
}
.timetable-calendar-controls.bsplus-cal-menu-open {
z-index: 2147483646;
}
.timetablepage #toolbar:has(.bsplus-cal-menu-open) {
z-index: 2147483646 !important;
}
.bsplus-calendar-sync-mount {
display: inline-flex;
font-family: var(--bsplus-cal-font-family, var(--betterseqta-font-family, Rubik), sans-serif);
}
src/plugins/built-in/timetable/calendarSyncTheme.ts
+88
View File
@@ -0,0 +1,88 @@
import { settingsState } from "@/seqta/utils/listeners/SettingsState";
import { extractSolidColor } from "@/seqta/ui/colors/parseCssColor";
import { ensureFontLoaded } from "@/seqta/ui/fonts/Manager";
import { getFontPreset } from "@/seqta/ui/fonts/presets";
export const CALENDAR_THEME_CSS_VARS = [
"--better-main",
"--better-pale",
"--better-light",
"--text-color",
"--background-primary",
"--background-secondary",
"--text-primary",
"--theme-offset-bg",
"--better-sub",
] as const;
const ACCENT_CSS_VARS = [
"--better-main",
"--accent-color-value",
"--accentColor",
"--colour-betterseqta-blue",
] as const;
export function isCalendarDarkMode(): boolean {
return !!settingsState.DarkMode || document.documentElement.classList.contains("dark");
}
function resolvePageAccentColor(): string {
const computed = getComputedStyle(document.documentElement);
for (const name of ACCENT_CSS_VARS) {
const solid = extractSolidColor(computed.getPropertyValue(name));
if (solid) return solid;
}
const fromSettings = settingsState.selectedColor?.trim();
if (fromSettings) {
const solid = extractSolidColor(fromSettings);
if (solid) return solid;
}
return "#3b82f6";
}
/** Sync extension theme (including dark mode) onto a calendar UI host or portaled menu. */
export function syncCalendarSyncTheme(target: HTMLElement): void {
const computed = getComputedStyle(document.documentElement);
const dark = isCalendarDarkMode();
const fontPreset = getFontPreset(settingsState.selectedFont);
ensureFontLoaded(fontPreset);
target.style.setProperty("--bsplus-cal-font-family", fontPreset.stack);
for (const name of CALENDAR_THEME_CSS_VARS) {
const value =
document.documentElement.style.getPropertyValue(name).trim() ||
computed.getPropertyValue(name).trim();
if (value) target.style.setProperty(name, value);
}
const accent = resolvePageAccentColor();
target.style.setProperty("--bsplus-cal-accent", accent);
target.style.setProperty("--better-main", accent);
target.classList.toggle("dark", dark);
const textPrimary =
computed.getPropertyValue("--text-primary").trim() ||
computed.getPropertyValue("--text-color").trim();
const bgPrimary =
computed.getPropertyValue("--background-primary").trim() ||
computed.getPropertyValue("--background-secondary").trim() ||
computed.getPropertyValue("--theme-offset-bg").trim();
target.style.setProperty(
"--bsplus-cal-text",
textPrimary || (dark ? "#f4f4f5" : "#18181b"),
);
target.style.setProperty(
"--bsplus-cal-surface",
bgPrimary || (dark ? "#27272a" : "#ffffff"),
);
target.style.setProperty(
"--bsplus-cal-surface-muted",
dark ? "#3f3f46" : "color-mix(in srgb, var(--bsplus-cal-text) 5%, var(--bsplus-cal-surface))",
);
target.style.setProperty(
"--bsplus-cal-border",
dark ? "color-mix(in srgb, #ffffff 14%, transparent)" : "color-mix(in srgb, var(--bsplus-cal-text) 12%, transparent)",
);
}
src/plugins/built-in/timetable/calendarSyncUi.ts
+55
View File
@@ -0,0 +1,55 @@
import { mount, unmount } from "svelte";
import CalendarSyncControl from "./CalendarSyncControl.svelte";
import { syncCalendarSyncTheme } from "./calendarSyncTheme";
import { registerCalendarContentHandlers } from "@/seqta/utils/googleCalendar/calendarSyncListener";
import hostStyles from "./calendarSyncHost.css?inline";
const CONTROLS_CLASS = "timetable-calendar-controls";
const HOST_STYLE_ID = "bsplus-calendar-sync-host-styles";
let currentApp: ReturnType<typeof mount> | null = null;
let mountRoot: HTMLElement | null = null;
function ensureHostStyles() {
if (document.getElementById(HOST_STYLE_ID)) return;
const style = document.createElement("style");
style.id = HOST_STYLE_ID;
style.textContent = hostStyles;
document.head.appendChild(style);
}
function teardown() {
if (currentApp) {
unmount(currentApp);
currentApp = null;
}
mountRoot = null;
document.querySelector(`.${CONTROLS_CLASS}`)?.remove();
document.getElementById(HOST_STYLE_ID)?.remove();
}
export async function mountGoogleCalendarButton(): Promise<void> {
if (document.querySelector(`.${CONTROLS_CLASS}`)) return;
const toolbar = document.getElementById("toolbar");
if (!toolbar) return;
ensureHostStyles();
registerCalendarContentHandlers();
const controls = document.createElement("div");
controls.className = `${CONTROLS_CLASS} bsplus-timetable-control`;
toolbar.appendChild(controls);
mountRoot = document.createElement("div");
mountRoot.className = "bsplus-calendar-sync-mount";
syncCalendarSyncTheme(mountRoot);
controls.appendChild(mountRoot);
currentApp = mount(CalendarSyncControl, { target: mountRoot });
}
export function unmountGoogleCalendarButton(): void {
teardown();
}
src/plugins/built-in/timetable/index.ts
+3
View File
@@ -4,6 +4,7 @@ import { attachTimetableColorisRecovery } from "@/seqta/utils/timetableColoris";
import { convertTo12HourFormat } from "@/seqta/utils/convertTo12HourFormat";
import { waitForElm } from "@/seqta/utils/waitForElm";
import { verboseLog } from "@/utils/verboseLog";
import { mountGoogleCalendarButton, unmountGoogleCalendarButton } from "./calendarSyncUi";
const timetablePlugin: Plugin<{}, {}> = {
id: "timetable",
@@ -28,6 +29,7 @@ const timetablePlugin: Plugin<{}, {}> = {
const hideControls = document.querySelector(".timetable-hide-controls");
if (hideControls) hideControls.remove();
unmountGoogleCalendarButton();
resetTimetableStyles();
}
};
@@ -85,6 +87,7 @@ async function handleTimetable(): Promise<void> {
handleTimetableZoom();
handleTimetableAssessmentHide();
void mountGoogleCalendarButton();
}
function handleTimetableZoom(): void {