schoolbox web extension :)
style: fix prettier config and format
+59
-55
-6
.prettierrc
-6
.prettierrc
+7
.prettierrc.json
+7
.prettierrc.json
···
1
+
{
2
+
"printWidth": 120,
3
+
"bracketSameLine": true,
4
+
"plugins": ["prettier-plugin-svelte", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"],
5
+
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
6
+
"tailwindStylesheet": "./src/entrypoints/app.css"
7
+
}
+3
bun.lock
+3
bun.lock
···
20
20
"pino": "^9.7.0",
21
21
"postcss": "^8.5.3",
22
22
"prettier": "^3.5.3",
23
+
"prettier-plugin-organize-imports": "^4.2.0",
23
24
"prettier-plugin-svelte": "^3.4.0",
24
25
"prettier-plugin-tailwindcss": "^0.6.11",
25
26
"semver": "^7.7.2",
···
887
888
"prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
888
889
889
890
"prettier": ["prettier@3.5.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw=="],
891
+
892
+
"prettier-plugin-organize-imports": ["prettier-plugin-organize-imports@4.2.0", "", { "peerDependencies": { "prettier": ">=2.0", "typescript": ">=2.9", "vue-tsc": "^2.1.0 || 3" }, "optionalPeers": ["vue-tsc"] }, "sha512-Zdy27UhlmyvATZi67BTnLcKTo8fm6Oik59Sz6H64PgZJVs6NJpPD1mT240mmJn62c98/QaL+r3kx9Q3gRpDajg=="],
890
893
891
894
"prettier-plugin-svelte": ["prettier-plugin-svelte@3.4.0", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0" } }, "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ=="],
892
895
+3
-4
eslint.config.js
+3
-4
eslint.config.js
···
1
+
import { includeIgnoreFile } from "@eslint/compat";
1
2
import js from "@eslint/js";
2
-
import ts from "typescript-eslint";
3
3
import svelte from "eslint-plugin-svelte";
4
-
import wxtAutoImports from "./.wxt/eslint-auto-imports.mjs";
5
-
6
4
import globals from "globals";
7
-
import { includeIgnoreFile } from "@eslint/compat";
8
5
import path from "node:path";
6
+
import ts from "typescript-eslint";
7
+
import wxtAutoImports from "./.wxt/eslint-auto-imports.mjs";
9
8
10
9
const gitignorePath = path.resolve(import.meta.dirname, ".gitignore");
11
10
+1
package.json
+1
package.json
+5
-5
src/entrypoints/plugins.content.ts
+5
-5
src/entrypoints/plugins.content.ts
···
1
-
import subheader from "./plugins/subheader";
2
-
import scrollSegments from "./plugins/scrollSegments";
3
-
import scrollPeriod from "./plugins/scrollPeriod";
4
-
import progressBar from "./plugins/progressBar";
1
+
import homepageSwitcher from "./plugins/homepageSwitcher";
5
2
import modernIcons from "./plugins/modernIcons";
3
+
import progressBar from "./plugins/progressBar";
4
+
import scrollPeriod from "./plugins/scrollPeriod";
5
+
import scrollSegments from "./plugins/scrollSegments";
6
+
import subheader from "./plugins/subheader";
6
7
import tabTitle from "./plugins/tabTitle";
7
-
import homepageSwitcher from "./plugins/homepageSwitcher";
8
8
9
9
export default defineContentScript({
10
10
matches: ["<all_urls>"],
+2
-2
src/entrypoints/popup/App.svelte
+2
-2
src/entrypoints/popup/App.svelte
···
45
45
</script>
46
46
47
47
<main
48
-
class="flex flex-col items-center bg-ctp-base p-6 {globalSettings.state.themeFlavour}"
48
+
class="bg-ctp-base flex flex-col items-center p-6 {globalSettings.state.themeFlavour}"
49
49
style="--ctp-accent: {accentRgb}">
50
-
<nav class="mb-4 flex rounded-xl px-4 py-2 text-ctp-text" id="navbar">
50
+
<nav class="text-ctp-text mb-4 flex rounded-xl px-4 py-2" id="navbar">
51
51
<a href="#/" class="navbutton-left" use:active={{ className: "active" }}>Settings</a>
52
52
<a href="#/plugins" class="navbutton-center" use:active={{ className: "active" }}>Plugins</a>
53
53
<a href="#/themes" class="navbutton-center" use:active={{ className: "active" }}>Themes</a>
+7
-7
src/entrypoints/popup/app.css
+7
-7
src/entrypoints/popup/app.css
···
27
27
mask: var(--icon) no-repeat;
28
28
mask-size: 100% 100%;
29
29
background-color: currentColor;
30
-
@apply h-16 w-20 text-(--ctp-accent);
30
+
@apply text-(--ctp-accent) h-16 w-20;
31
31
}
32
32
33
33
.slider {
34
-
@apply bg-ctp-surface1 after:bg-ctp-text peer-checked:after:bg-ctp-mantle ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg p-1 duration-500 ease-in-out peer-checked:bg-(--ctp-accent) after:rounded-lg after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6;
34
+
@apply bg-ctp-surface1 after:bg-ctp-text peer-checked:after:bg-ctp-mantle peer-checked:bg-(--ctp-accent) ml-4 flex h-5 w-11 flex-shrink-0 items-center rounded-lg p-1 duration-500 ease-in-out after:rounded-lg after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:after:translate-x-6;
35
35
}
36
36
37
37
.slider.big {
···
59
59
}
60
60
61
61
#card {
62
-
@apply bg-ctp-mantle flex w-full flex-col items-center justify-center rounded-3xl bg-linear-to-b p-6 shadow-xl outline-2 outline-(--ctp-accent) outline-solid;
62
+
@apply bg-ctp-mantle bg-linear-to-b outline-(--ctp-accent) outline-solid flex w-full flex-col items-center justify-center rounded-3xl p-6 shadow-xl outline-2;
63
63
}
64
64
65
65
#card h1 {
···
79
79
}
80
80
81
81
#card h2 {
82
-
@apply text-4xl font-semibold text-(--ctp-accent);
82
+
@apply text-(--ctp-accent) text-4xl font-semibold;
83
83
}
84
84
85
85
#card h3 {
···
123
123
}
124
124
125
125
.navbutton-left {
126
-
@apply outline-ctp-overlay2/10 rounded-l-xl py-2 pr-2 pl-4 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
126
+
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-l-xl py-2 pl-4 pr-2 outline-1;
127
127
}
128
128
129
129
.navbutton-center {
130
-
@apply outline-ctp-overlay2/10 p-2 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
130
+
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 p-2 outline-1;
131
131
}
132
132
133
133
.navbutton-right {
134
-
@apply outline-ctp-overlay2/10 rounded-r-xl py-2 pr-4 pl-2 outline-1 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80;
134
+
@apply outline-ctp-overlay2/10 outline-solid hover:bg-(--ctp-accent)/50 active:bg-(--ctp-accent)/80 rounded-r-xl py-2 pl-2 pr-4 outline-1;
135
135
}
136
136
137
137
div[title] {
+1
-1
src/entrypoints/popup/components/Banner.svelte
+1
-1
src/entrypoints/popup/components/Banner.svelte
···
4
4
5
5
{#if visible}
6
6
<button
7
-
class="banner cursor-pointer flex gap-2 items-center justify-center bg-ctp-blue text-ctp-crust rounded-lg mb-4 p-4 w-full"
7
+
class="banner bg-ctp-blue text-ctp-crust mb-4 flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg p-4"
8
8
{onclick}>
9
9
{@render children()}
10
10
<p>{message}</p>
+2
-2
src/entrypoints/popup/components/Modal.svelte
+2
-2
src/entrypoints/popup/components/Modal.svelte
···
15
15
onclick={(e) => {
16
16
if (e.target === dialog) dialog.close();
17
17
}}
18
-
class="bg-ctp-base text-ctp-text relative m-auto open:animate-zoom-in backdrop:backdrop-blur-md rounded-lg">
18
+
class="bg-ctp-base text-ctp-text open:animate-zoom-in relative m-auto rounded-lg backdrop:backdrop-blur-md">
19
19
<!-- svelte-ignore a11y_autofocus -->
20
-
<button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute top-0 right-0 m-2"
20
+
<button autofocus onclick={() => dialog?.close()} class="small bg-ctp-surface1 absolute right-0 top-0 m-2"
21
21
><X /></button>
22
22
23
23
<div class="p-4">
+1
-1
src/entrypoints/popup/components/Title.svelte
+1
-1
src/entrypoints/popup/components/Title.svelte
···
10
10
let { update, title = "", checked }: Props = $props();
11
11
</script>
12
12
13
-
<label for="theme-toggle" class="relative flex justify-between items-center group p-2 text-xl text-ctp-text">
13
+
<label for="theme-toggle" class="text-ctp-text group relative flex items-center justify-between p-2 text-xl">
14
14
<h2>{title}</h2>
15
15
<Toggle id="theme-toggle" size="big" {checked} {update} />
16
16
</label>
+1
-1
src/entrypoints/popup/components/inputs/Button.svelte
+1
-1
src/entrypoints/popup/components/inputs/Button.svelte
···
12
12
let { children, title, id, onclick, classList = "text-ctp-text hover:bg-ctp-surface1" }: Props = $props();
13
13
</script>
14
14
15
-
<button {title} {id} class="flex gap-3 items-center cursor-pointer h-8 bg-ctp-surface0 small {classList}" {onclick}>
15
+
<button {title} {id} class="bg-ctp-surface0 small flex h-8 cursor-pointer items-center gap-3 {classList}" {onclick}>
16
16
{@render children()}
17
17
</button>
+3
-3
src/entrypoints/popup/components/inputs/Slider.svelte
+3
-3
src/entrypoints/popup/components/inputs/Slider.svelte
···
13
13
let currentValue = $state(value);
14
14
</script>
15
15
16
-
<div class="space-y-2 mt-4">
16
+
<div class="mt-4 space-y-2">
17
17
{#if name}
18
-
<label for={id} class="block text-ctp-text">{name}</label>
18
+
<label for={id} class="text-ctp-text block">{name}</label>
19
19
{/if}
20
20
<div class="flex items-center gap-4">
21
21
<input
···
34
34
{max}
35
35
{value}
36
36
class="styled-slider slider-progress" />
37
-
<span id={id + "-value"} class="text-sm font-medium text-ctp-text">{currentValue}</span>
37
+
<span id={id + "-value"} class="text-ctp-text text-sm font-medium">{currentValue}</span>
38
38
</div>
39
39
{#if description}
40
40
<p class="text-ctp-overlay1">{description}</p>
+3
-3
src/entrypoints/popup/components/inputs/TextInput.svelte
+3
-3
src/entrypoints/popup/components/inputs/TextInput.svelte
···
10
10
let { onclick, id, placeholder, value = $bindable(), label }: Props = $props();
11
11
</script>
12
12
13
-
<div class="flex justify-center items-center w-full">
14
-
<input {id} class="w-full p-2 rounded-l-xl bg-ctp-surface0 text-ctp-text" bind:value {placeholder} type="text" />
15
-
<button class="p-2 rounded-r-xl bg-(--ctp-accent) text-ctp-crust" type="submit" {onclick}>{label}</button>
13
+
<div class="flex w-full items-center justify-center">
14
+
<input {id} class="bg-ctp-surface0 text-ctp-text w-full rounded-l-xl p-2" bind:value {placeholder} type="text" />
15
+
<button class="bg-(--ctp-accent) text-ctp-crust rounded-r-xl p-2" type="submit" {onclick}>{label}</button>
16
16
</div>
+2
-2
src/entrypoints/popup/components/inputs/Toggle.svelte
+2
-2
src/entrypoints/popup/components/inputs/Toggle.svelte
···
14
14
let { update, checked, id, size = "big", text = "", description = "", children }: Props = $props();
15
15
</script>
16
16
17
-
<label class="group text-ctp-text relative flex items-center justify-between py-2 cursor-pointer">
17
+
<label class="text-ctp-text group relative flex cursor-pointer items-center justify-between py-2">
18
18
<h4 class="text-ctp-text">{text}</h4>
19
19
<input
20
20
{id}
···
29
29
</label>
30
30
31
31
<div
32
-
class="flex items-center text-ctp-overlay1 group-hover:text-ctp-subtext0 transition-colors duration-500 ease-in-out justify-between">
32
+
class="text-ctp-overlay1 group-hover:text-ctp-subtext0 flex items-center justify-between transition-colors duration-500 ease-in-out">
33
33
<div>{description}</div>
34
34
<div>{@render children?.()}</div>
35
35
</div>
+1
-1
src/entrypoints/popup/main.ts
+1
-1
src/entrypoints/popup/main.ts
+1
-1
src/entrypoints/popup/routes/Home.svelte
+1
-1
src/entrypoints/popup/routes/Home.svelte
···
12
12
<Motd />
13
13
14
14
<button
15
-
class="hover:opacity-75 bg-(--ctp-accent) {globalSettings.state.global ? '' : 'opacity-60'}"
15
+
class="bg-(--ctp-accent) hover:opacity-75 {globalSettings.state.global ? '' : 'opacity-60'}"
16
16
id="toggle"
17
17
onclick={() => {
18
18
globalSettings.set({ global: !globalSettings.get().global });
+1
-1
src/entrypoints/popup/routes/Plugins.svelte
+1
-1
src/entrypoints/popup/routes/Plugins.svelte
+2
-2
src/entrypoints/popup/routes/Snippets.svelte
+2
-2
src/entrypoints/popup/routes/Snippets.svelte
···
44
44
45
45
<div class="snippets-container w-full">
46
46
{#each Object.entries(snippets) as [id, snippet] (id)}
47
-
<div class="my-4 group w-full">
47
+
<div class="group my-4 w-full">
48
48
<Toggle
49
49
{id}
50
50
checked={snippet.toggle.state.toggle}
···
73
73
74
74
<div class="user-snippets-container w-full">
75
75
{#each Object.entries(globalSettings.state.userSnippets as Record<string, UserSnippet>) as [id, snippet] (id)}
76
-
<div class="my-4 group w-full">
76
+
<div class="group my-4 w-full">
77
77
<Toggle
78
78
{id}
79
79
checked={snippet.toggle}
+4
-4
src/entrypoints/popup/routes/Themes.svelte
+4
-4
src/entrypoints/popup/routes/Themes.svelte
···
44
44
globalSettings.set({ themeLogo: logoId as LogoId });
45
45
}}
46
46
class:highlight={globalSettings.state.themeLogo === logoId}
47
-
class="border border-(--ctp-accent) p-2 flex flex-col rounded-lg">
47
+
class="border-(--ctp-accent) flex flex-col rounded-lg border p-2">
48
48
<span>{logo.name}</span>
49
49
{#if logo.disable !== true}
50
-
<div class="flex items-center justify-center w-full h-full">
50
+
<div class="flex h-full w-full items-center justify-center">
51
51
{#if logo.adaptive}
52
52
<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
53
53
<span class="logo-picker" style="--icon: url({browser.runtime.getURL(logo.url as any)})"></span>
54
54
{:else}
55
-
<img src={logo.url} alt="Logo" class="w-16 mt-2" />
55
+
<img src={logo.url} alt="Logo" class="mt-2 w-16" />
56
56
{/if}
57
57
</div>
58
58
{/if}
···
80
80
globalSettings.set({ themes: toggled });
81
81
}} />
82
82
83
-
<div id="flavours" class="flex my-6 py-2 rounded-xl text-ctp-text">
83
+
<div id="flavours" class="text-ctp-text my-6 flex rounded-xl py-2">
84
84
{#each flavours as flavour (flavour)}
85
85
<button
86
86
class:active={globalSettings.state.themeFlavour === flavour}
+2
-2
src/entrypoints/snippets.content.ts
+2
-2
src/entrypoints/snippets.content.ts
···
1
-
import roundedCorners from "./snippets/roundedCorners.css?inline";
1
+
import censor from "./snippets/censor.css?inline";
2
2
import hidePfp from "./snippets/hidePfp/styles.css?inline";
3
3
import hidePwaPrompt from "./snippets/hidePwaPrompt.css?inline";
4
-
import censor from "./snippets/censor.css?inline";
4
+
import roundedCorners from "./snippets/roundedCorners.css?inline";
5
5
6
6
export default defineContentScript({
7
7
matches: ["<all_urls>"],
+1
-1
src/utils/storage.ts
+1
-1
src/utils/storage.ts