plum-e2e 1.2.3 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +201 -0
- package/README.md +237 -90
- package/backend/_scaffold/utils/browser.ts +5 -2
- package/backend/app.js +9 -1
- package/backend/config/scripts/generate-report.js +34 -73
- package/backend/config/scripts/run-tests.js +7 -3
- package/backend/constants/triggers.js +67 -0
- package/backend/lib/reportFilename.js +37 -0
- package/backend/lib/testChunker.js +73 -0
- package/backend/middleware/auth.js +32 -0
- package/backend/package.json +4 -2
- package/backend/prisma/migrations/20260616000000_add_runners_and_browser/migration.sql +26 -0
- package/backend/prisma/migrations/20260616000001_cron_runner_ids/migration.sql +6 -0
- package/backend/prisma/migrations/20260617000000_cron_enabled/migration.sql +1 -0
- package/backend/prisma/migrations/20260617000001_report_content/migration.sql +8 -0
- package/backend/prisma/schema.prisma +21 -1
- package/backend/routes/cron.routes.js +28 -0
- package/backend/routes/node.routes.js +121 -0
- package/backend/routes/reports.routes.js +23 -20
- package/backend/routes/runners.routes.js +83 -0
- package/backend/scripts/add-local-runner.js +120 -0
- package/backend/scripts/create-test.js +148 -0
- package/backend/server.js +16 -7
- package/backend/services/backupService.js +3 -30
- package/backend/services/cronService.js +220 -36
- package/backend/services/reportService.js +227 -55
- package/backend/services/runnerService.js +179 -0
- package/backend/websockets/socketHandler.js +162 -21
- package/bin/plum.js +191 -47
- package/docker-compose.node.yml +59 -0
- package/docker-compose.yml +2 -0
- package/frontend/package.json +1 -4
- package/frontend/src/app.css +20 -254
- package/frontend/src/app.html +1 -1
- package/frontend/src/lib/api/reports.js +17 -36
- package/frontend/src/lib/api/runners.js +61 -0
- package/frontend/src/lib/api/schedules.js +34 -5
- package/frontend/src/lib/api/settings.js +5 -5
- package/frontend/src/lib/api/tests.js +2 -19
- package/frontend/src/lib/components/icons/BrowserIcon.svelte +75 -0
- package/frontend/src/lib/components/layout/Nav.svelte +42 -47
- package/frontend/src/lib/components/layout/RunnerPanel.svelte +913 -253
- package/frontend/src/lib/components/ui/Badge.svelte +6 -1
- package/frontend/src/lib/components/ui/ConfirmModal.svelte +98 -0
- package/frontend/{tailwind.config.js → src/lib/components/ui/EmptyState.svelte} +27 -8
- package/frontend/{postcss.config.js → src/lib/components/ui/Toast.svelte} +20 -7
- package/frontend/src/lib/constants.js +36 -0
- package/frontend/src/lib/stores/runner.js +23 -12
- package/frontend/src/lib/styles/global.css +176 -0
- package/frontend/src/lib/styles/reset.css +86 -0
- package/frontend/src/lib/styles/tokens.css +90 -0
- package/frontend/src/lib/utils/format.js +46 -0
- package/frontend/src/routes/+page.svelte +16 -35
- package/frontend/src/routes/reports/+page.svelte +84 -167
- package/frontend/src/routes/reports/{[slug] → [id]}/+page.svelte +304 -76
- package/frontend/src/routes/reports/live/+page.svelte +704 -0
- package/frontend/src/routes/scheduled-tests/+page.svelte +328 -88
- package/frontend/src/routes/settings/+page.svelte +774 -127
- package/frontend/static/favicon-32x32.png +0 -0
- package/frontend/static/favicon.ico +0 -0
- package/package.json +2 -2
- package/frontend/static/favicon.png +0 -0
package/frontend/src/app.html
CHANGED
|
@@ -18,7 +18,7 @@ along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
|
18
18
|
<html lang="en" data-theme="light">
|
|
19
19
|
<head>
|
|
20
20
|
<meta charset="utf-8" />
|
|
21
|
-
<link rel="icon" href="%sveltekit.assets%/favicon.
|
|
21
|
+
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
|
22
22
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
23
23
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
24
24
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
@@ -15,64 +15,45 @@
|
|
|
15
15
|
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
import { API_BASE } from '$lib/constants';
|
|
19
19
|
|
|
20
20
|
export async function fetchReports() {
|
|
21
|
-
const res = await fetch(`${
|
|
21
|
+
const res = await fetch(`${API_BASE}/reports`);
|
|
22
22
|
const { reports } = await res.json();
|
|
23
23
|
return reports.map((r) => ({ ...r, date: new Date(r.createdAt).toLocaleString() }));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
export async function
|
|
27
|
-
const res = await fetch(`${
|
|
28
|
-
const {
|
|
29
|
-
return
|
|
26
|
+
export async function fetchLatestReportId() {
|
|
27
|
+
const res = await fetch(`${API_BASE}/reports/latest`);
|
|
28
|
+
const { latestReportId } = await res.json();
|
|
29
|
+
return latestReportId;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
export function reportUrl(
|
|
33
|
-
return `/reports/${
|
|
32
|
+
export function reportUrl(id) {
|
|
33
|
+
return `/reports/${id}`;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
export function parseReport(fileName) {
|
|
39
|
-
const m = fileName.match(
|
|
40
|
-
/^(PASS|FAIL)_cucumber_report_(.+?)_(\([^)]+\))_runners_(\d+)_(\d{4}_\d{2}_\d{2}T[\d_]+Z)\.json$/
|
|
41
|
-
);
|
|
42
|
-
if (!m) return null;
|
|
43
|
-
const [, status, triggerType, tags, runners, tsRaw] = m;
|
|
44
|
-
const isoStr = tsRaw.replace(
|
|
45
|
-
/^(\d{4})_(\d{2})_(\d{2})T(\d{2})_(\d{2})_(\d{2})_(\d+)Z$/,
|
|
46
|
-
'$1-$2-$3T$4:$5:$6.$7Z'
|
|
47
|
-
);
|
|
48
|
-
return {
|
|
49
|
-
status,
|
|
50
|
-
triggerType,
|
|
51
|
-
tags,
|
|
52
|
-
runners: parseInt(runners, 10),
|
|
53
|
-
date: new Date(isoStr).toLocaleString()
|
|
54
|
-
};
|
|
36
|
+
export function screenshotUrl(filename) {
|
|
37
|
+
return `${API_BASE}/screenshots/${filename}`;
|
|
55
38
|
}
|
|
56
39
|
|
|
57
|
-
export async function fetchReportDetail(
|
|
58
|
-
const res = await fetch(`${
|
|
40
|
+
export async function fetchReportDetail(id) {
|
|
41
|
+
const res = await fetch(`${API_BASE}/reports/${id}`);
|
|
59
42
|
if (!res.ok) throw new Error('Report not found');
|
|
60
43
|
return res.json();
|
|
61
44
|
}
|
|
62
45
|
|
|
63
|
-
export async function deleteReport(
|
|
64
|
-
const res = await fetch(`${
|
|
65
|
-
method: 'DELETE'
|
|
66
|
-
});
|
|
46
|
+
export async function deleteReport(id) {
|
|
47
|
+
const res = await fetch(`${API_BASE}/reports/${id}`, { method: 'DELETE' });
|
|
67
48
|
if (!res.ok) throw new Error('Failed to delete report');
|
|
68
49
|
return res.json();
|
|
69
50
|
}
|
|
70
51
|
|
|
71
|
-
export async function deleteReports(
|
|
72
|
-
const res = await fetch(`${
|
|
52
|
+
export async function deleteReports(ids) {
|
|
53
|
+
const res = await fetch(`${API_BASE}/reports/bulk`, {
|
|
73
54
|
method: 'DELETE',
|
|
74
55
|
headers: { 'Content-Type': 'application/json' },
|
|
75
|
-
body: JSON.stringify({
|
|
56
|
+
body: JSON.stringify({ ids })
|
|
76
57
|
});
|
|
77
58
|
if (!res.ok) throw new Error('Failed to delete reports');
|
|
78
59
|
return res.json();
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* This file is part of Plum.
|
|
3
|
+
*
|
|
4
|
+
* Plum is free software: you can redistribute it and/or modify
|
|
5
|
+
* it under the terms of the GNU General Public License as published by
|
|
6
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
7
|
+
* (at your option) any later version.
|
|
8
|
+
*
|
|
9
|
+
* Plum is distributed in the hope that it will be useful,
|
|
10
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
11
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
12
|
+
* GNU General Public License for more details.
|
|
13
|
+
*
|
|
14
|
+
* You should have received a copy of the GNU General Public License
|
|
15
|
+
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
import { API_BASE } from '$lib/constants';
|
|
19
|
+
|
|
20
|
+
export async function fetchRunners() {
|
|
21
|
+
const res = await fetch(`${API_BASE}/runners`);
|
|
22
|
+
const { runners } = await res.json();
|
|
23
|
+
return runners;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export async function createRunner(data) {
|
|
27
|
+
const res = await fetch(`${API_BASE}/runners`, {
|
|
28
|
+
method: 'POST',
|
|
29
|
+
headers: { 'Content-Type': 'application/json' },
|
|
30
|
+
body: JSON.stringify(data)
|
|
31
|
+
});
|
|
32
|
+
return res.json();
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export async function deleteRunner(id) {
|
|
36
|
+
const res = await fetch(`${API_BASE}/runners/${id}`, { method: 'DELETE' });
|
|
37
|
+
return res.json();
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export async function updateRunner(id, data) {
|
|
41
|
+
const res = await fetch(`${API_BASE}/runners/${id}`, {
|
|
42
|
+
method: 'PUT',
|
|
43
|
+
headers: { 'Content-Type': 'application/json' },
|
|
44
|
+
body: JSON.stringify(data)
|
|
45
|
+
});
|
|
46
|
+
return res.json();
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export async function pingRunner(id) {
|
|
50
|
+
const res = await fetch(`${API_BASE}/runners/${id}/ping`, { method: 'POST' });
|
|
51
|
+
return res.json();
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export async function probeRunner(url, token) {
|
|
55
|
+
const res = await fetch(`${API_BASE}/runners/probe`, {
|
|
56
|
+
method: 'POST',
|
|
57
|
+
headers: { 'Content-Type': 'application/json' },
|
|
58
|
+
body: JSON.stringify({ url, token })
|
|
59
|
+
});
|
|
60
|
+
return res.json();
|
|
61
|
+
}
|
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
import { API_BASE } from '$lib/constants';
|
|
19
19
|
|
|
20
20
|
export async function fetchCronJobs() {
|
|
21
|
-
const res = await fetch(`${
|
|
21
|
+
const res = await fetch(`${API_BASE}/cron-jobs`);
|
|
22
22
|
const { cronJobs } = await res.json();
|
|
23
23
|
return cronJobs ?? [];
|
|
24
24
|
}
|
|
@@ -28,21 +28,50 @@ export async function saveCronJob({
|
|
|
28
28
|
cronExpression,
|
|
29
29
|
tags,
|
|
30
30
|
workers,
|
|
31
|
+
browser,
|
|
32
|
+
runnerIds,
|
|
31
33
|
isEditing,
|
|
32
34
|
editTaskName
|
|
33
35
|
}) {
|
|
34
36
|
const formattedTags = tags.replace(/\sOR\s/gi, (m) => m.toLowerCase());
|
|
35
|
-
const url = isEditing
|
|
37
|
+
const url = isEditing
|
|
38
|
+
? `${API_BASE}/cron-jobs/${encodeURIComponent(editTaskName)}`
|
|
39
|
+
: `${API_BASE}/cron-jobs`;
|
|
36
40
|
const method = isEditing ? 'PUT' : 'POST';
|
|
37
41
|
const res = await fetch(url, {
|
|
38
42
|
method,
|
|
39
43
|
headers: { 'Content-Type': 'application/json' },
|
|
40
|
-
body: JSON.stringify({
|
|
44
|
+
body: JSON.stringify({
|
|
45
|
+
cronExpression,
|
|
46
|
+
taskName,
|
|
47
|
+
tags: formattedTags,
|
|
48
|
+
workers,
|
|
49
|
+
browser,
|
|
50
|
+
runnerIds
|
|
51
|
+
})
|
|
52
|
+
});
|
|
53
|
+
return res.json();
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export async function toggleCronJob(taskName, enabled) {
|
|
57
|
+
const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}/toggle`, {
|
|
58
|
+
method: 'PATCH',
|
|
59
|
+
headers: { 'Content-Type': 'application/json' },
|
|
60
|
+
body: JSON.stringify({ enabled })
|
|
61
|
+
});
|
|
62
|
+
return res.json();
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export async function runCronJobNow(taskName) {
|
|
66
|
+
const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}/run`, {
|
|
67
|
+
method: 'POST'
|
|
41
68
|
});
|
|
42
69
|
return res.json();
|
|
43
70
|
}
|
|
44
71
|
|
|
45
72
|
export async function deleteCronJob(taskName) {
|
|
46
|
-
const res = await fetch(`${
|
|
73
|
+
const res = await fetch(`${API_BASE}/cron-jobs/${encodeURIComponent(taskName)}`, {
|
|
74
|
+
method: 'DELETE'
|
|
75
|
+
});
|
|
47
76
|
return res.json();
|
|
48
77
|
}
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
import { API_BASE } from '$lib/constants';
|
|
19
19
|
|
|
20
20
|
export async function fetchProject() {
|
|
21
|
-
const res = await fetch(`${
|
|
21
|
+
const res = await fetch(`${API_BASE}/settings/project`);
|
|
22
22
|
if (!res.ok) return { name: '', logoUrl: '' };
|
|
23
23
|
return res.json();
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export async function saveProject({ name, logoUrl }) {
|
|
27
|
-
const res = await fetch(`${
|
|
27
|
+
const res = await fetch(`${API_BASE}/settings/project`, {
|
|
28
28
|
method: 'POST',
|
|
29
29
|
headers: { 'Content-Type': 'application/json' },
|
|
30
30
|
body: JSON.stringify({ name, logoUrl })
|
|
@@ -33,13 +33,13 @@ export async function saveProject({ name, logoUrl }) {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
export async function exportBackup() {
|
|
36
|
-
const res = await fetch(`${
|
|
36
|
+
const res = await fetch(`${API_BASE}/backup/export`);
|
|
37
37
|
if (!res.ok) throw new Error('Export failed');
|
|
38
38
|
return res.json();
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
export async function importBackup(data) {
|
|
42
|
-
const res = await fetch(`${
|
|
42
|
+
const res = await fetch(`${API_BASE}/backup/import`, {
|
|
43
43
|
method: 'POST',
|
|
44
44
|
headers: { 'Content-Type': 'application/json' },
|
|
45
45
|
body: JSON.stringify(data)
|
|
@@ -15,27 +15,10 @@
|
|
|
15
15
|
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
|
|
19
|
-
This file is part of Plum.
|
|
20
|
-
|
|
21
|
-
Plum is free software: you can redistribute it and/or modify
|
|
22
|
-
it under the terms of the GNU General Public License as published by
|
|
23
|
-
the Free Software Foundation, either version 3 of the License, or
|
|
24
|
-
(at your option) any later version.
|
|
25
|
-
|
|
26
|
-
Plum is distributed in the hope that it will be useful,
|
|
27
|
-
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
28
|
-
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
29
|
-
GNU General Public License for more details.
|
|
30
|
-
|
|
31
|
-
You should have received a copy of the GNU General Public License
|
|
32
|
-
along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
33
|
-
*/
|
|
34
|
-
|
|
35
|
-
const BASE = 'http://localhost:3001';
|
|
18
|
+
import { API_BASE } from '$lib/constants';
|
|
36
19
|
|
|
37
20
|
export async function fetchSuites() {
|
|
38
|
-
const res = await fetch(`${
|
|
21
|
+
const res = await fetch(`${API_BASE}/tests`);
|
|
39
22
|
const { suites } = await res.json();
|
|
40
23
|
return suites.suites ?? [];
|
|
41
24
|
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
* This file is part of Plum.
|
|
3
|
+
*
|
|
4
|
+
* Plum is free software: you can redistribute it and/or modify
|
|
5
|
+
* it under the terms of the GNU General Public License as published by
|
|
6
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
7
|
+
* (at your option) any later version.
|
|
8
|
+
*
|
|
9
|
+
* Plum is distributed in the hope that it will be useful,
|
|
10
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
11
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
12
|
+
* GNU General Public License for more details.
|
|
13
|
+
*
|
|
14
|
+
* You should have received a copy of the GNU General Public License
|
|
15
|
+
* along with Plum. If not, see https://www.gnu.org/licenses/.
|
|
16
|
+
-->
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export let browser = 'chromium';
|
|
20
|
+
export let size = 11;
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
{#if browser === 'firefox'}
|
|
24
|
+
<svg
|
|
25
|
+
width={size}
|
|
26
|
+
height={size}
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
fill="none"
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
stroke-width="2"
|
|
31
|
+
stroke-linecap="round"
|
|
32
|
+
stroke-linejoin="round"
|
|
33
|
+
>
|
|
34
|
+
<path d="M12 2c0 4.5-5 7-5 12a5 5 0 0 0 10 0c0-5-5-7.5-5-12z" />
|
|
35
|
+
<path d="M12 9c0 2.5-2.5 4-2.5 7a2.5 2.5 0 0 0 5 0c0-3-2.5-4.5-2.5-7z" />
|
|
36
|
+
</svg>
|
|
37
|
+
{:else if browser === 'webkit'}
|
|
38
|
+
<svg
|
|
39
|
+
width={size}
|
|
40
|
+
height={size}
|
|
41
|
+
viewBox="0 0 24 24"
|
|
42
|
+
fill="none"
|
|
43
|
+
stroke="currentColor"
|
|
44
|
+
stroke-width="2"
|
|
45
|
+
stroke-linecap="round"
|
|
46
|
+
stroke-linejoin="round"
|
|
47
|
+
>
|
|
48
|
+
<circle cx="12" cy="12" r="10" />
|
|
49
|
+
<polygon points="12,5.5 14.5,12 12,10.5 9.5,12" fill="currentColor" stroke="none" />
|
|
50
|
+
<polygon
|
|
51
|
+
points="12,18.5 9.5,12 12,13.5 14.5,12"
|
|
52
|
+
fill="currentColor"
|
|
53
|
+
stroke="none"
|
|
54
|
+
opacity="0.35"
|
|
55
|
+
/>
|
|
56
|
+
</svg>
|
|
57
|
+
{:else}
|
|
58
|
+
<!-- chromium -->
|
|
59
|
+
<svg
|
|
60
|
+
width={size}
|
|
61
|
+
height={size}
|
|
62
|
+
viewBox="0 0 24 24"
|
|
63
|
+
fill="none"
|
|
64
|
+
stroke="currentColor"
|
|
65
|
+
stroke-width="2"
|
|
66
|
+
stroke-linecap="round"
|
|
67
|
+
stroke-linejoin="round"
|
|
68
|
+
>
|
|
69
|
+
<circle cx="12" cy="12" r="10" />
|
|
70
|
+
<circle cx="12" cy="12" r="4" />
|
|
71
|
+
<line x1="21.17" y1="8" x2="12" y2="8" />
|
|
72
|
+
<line x1="3.95" y1="6.06" x2="8.54" y2="14" />
|
|
73
|
+
<line x1="10.88" y1="21.94" x2="15.46" y2="14" />
|
|
74
|
+
</svg>
|
|
75
|
+
{/if}
|
|
@@ -17,7 +17,6 @@
|
|
|
17
17
|
|
|
18
18
|
<script>
|
|
19
19
|
import { page } from '$app/stores';
|
|
20
|
-
import { theme } from '$lib/stores/theme';
|
|
21
20
|
import { slide } from 'svelte/transition';
|
|
22
21
|
|
|
23
22
|
let menuOpen = false;
|
|
@@ -25,14 +24,9 @@
|
|
|
25
24
|
const links = [
|
|
26
25
|
{ href: '/', label: 'Run Tests' },
|
|
27
26
|
{ href: '/reports', label: 'Reports' },
|
|
28
|
-
{ href: '/scheduled-tests', label: 'Scheduled' }
|
|
29
|
-
{ href: '/settings', label: 'Settings' }
|
|
27
|
+
{ href: '/scheduled-tests', label: 'Scheduled' }
|
|
30
28
|
];
|
|
31
29
|
|
|
32
|
-
function toggleTheme() {
|
|
33
|
-
theme.update((t) => (t === 'light' ? 'dark' : 'light'));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
30
|
function closeMenu() {
|
|
37
31
|
menuOpen = false;
|
|
38
32
|
}
|
|
@@ -53,43 +47,29 @@
|
|
|
53
47
|
</div>
|
|
54
48
|
|
|
55
49
|
<div class="actions">
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
stroke-linejoin="round"
|
|
80
|
-
>
|
|
81
|
-
<circle cx="12" cy="12" r="5" />
|
|
82
|
-
<line x1="12" y1="1" x2="12" y2="3" />
|
|
83
|
-
<line x1="12" y1="21" x2="12" y2="23" />
|
|
84
|
-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
|
|
85
|
-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
|
|
86
|
-
<line x1="1" y1="12" x2="3" y2="12" />
|
|
87
|
-
<line x1="21" y1="12" x2="23" y2="12" />
|
|
88
|
-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
|
|
89
|
-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
|
|
90
|
-
</svg>
|
|
91
|
-
{/if}
|
|
92
|
-
</button>
|
|
50
|
+
<a
|
|
51
|
+
href="/settings"
|
|
52
|
+
class="settings-btn"
|
|
53
|
+
class:active={$page.url.pathname === '/settings'}
|
|
54
|
+
aria-label="Settings"
|
|
55
|
+
title="Settings"
|
|
56
|
+
>
|
|
57
|
+
<svg
|
|
58
|
+
width="16"
|
|
59
|
+
height="16"
|
|
60
|
+
viewBox="0 0 24 24"
|
|
61
|
+
fill="none"
|
|
62
|
+
stroke="currentColor"
|
|
63
|
+
stroke-width="2"
|
|
64
|
+
stroke-linecap="round"
|
|
65
|
+
stroke-linejoin="round"
|
|
66
|
+
>
|
|
67
|
+
<circle cx="12" cy="12" r="3" />
|
|
68
|
+
<path
|
|
69
|
+
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
|
|
70
|
+
/>
|
|
71
|
+
</svg>
|
|
72
|
+
</a>
|
|
93
73
|
|
|
94
74
|
<button
|
|
95
75
|
class="hamburger"
|
|
@@ -116,6 +96,14 @@
|
|
|
116
96
|
{link.label}
|
|
117
97
|
</a>
|
|
118
98
|
{/each}
|
|
99
|
+
<a
|
|
100
|
+
href="/settings"
|
|
101
|
+
class="mobile-link"
|
|
102
|
+
class:active={$page.url.pathname === '/settings'}
|
|
103
|
+
on:click={closeMenu}
|
|
104
|
+
>
|
|
105
|
+
Settings
|
|
106
|
+
</a>
|
|
119
107
|
</div>
|
|
120
108
|
{/if}
|
|
121
109
|
</nav>
|
|
@@ -199,7 +187,8 @@
|
|
|
199
187
|
margin-left: auto;
|
|
200
188
|
}
|
|
201
189
|
|
|
202
|
-
|
|
190
|
+
/* Settings gear icon */
|
|
191
|
+
.settings-btn {
|
|
203
192
|
display: flex;
|
|
204
193
|
align-items: center;
|
|
205
194
|
justify-content: center;
|
|
@@ -209,19 +198,25 @@
|
|
|
209
198
|
border: 1px solid var(--border);
|
|
210
199
|
background: transparent;
|
|
211
200
|
color: var(--text-muted);
|
|
212
|
-
|
|
201
|
+
text-decoration: none;
|
|
213
202
|
transition:
|
|
214
203
|
background var(--duration-fast),
|
|
215
204
|
color var(--duration-fast),
|
|
216
205
|
border-color var(--duration-fast);
|
|
217
206
|
}
|
|
218
207
|
|
|
219
|
-
.
|
|
208
|
+
.settings-btn:hover {
|
|
220
209
|
background: var(--bg-subtle);
|
|
221
210
|
color: var(--text);
|
|
222
211
|
border-color: var(--text-muted);
|
|
223
212
|
}
|
|
224
213
|
|
|
214
|
+
.settings-btn.active {
|
|
215
|
+
background: var(--accent-soft);
|
|
216
|
+
color: var(--accent);
|
|
217
|
+
border-color: var(--accent);
|
|
218
|
+
}
|
|
219
|
+
|
|
225
220
|
/* Hamburger */
|
|
226
221
|
.hamburger {
|
|
227
222
|
display: none;
|