From 5e7324bca9c2ba4ec480ae6640130416bc52ba32 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Tue, 17 Sep 2024 14:05:25 +0000
Subject: [PATCH 01/48] web/SettingsCategory: add copy link to settings header

---
 .../settings/SettingsCategory.svelte          | 56 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 2b9503df0..1e4757610 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
     import { t } from "$lib/i18n/translations";
+    import { copyURL as _copyURL } from "$lib/download";
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
 
     export let title: string;
     export let sectionId: string;
@@ -9,12 +11,23 @@
     export let beta = false;
 
     let focus = false;
+    let animate = false;
+    let copied = false;
+    let showCopy = false;
+
+    const copyURL = () => _copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
 
     $: hash = $page.url.hash.replace("#", "");
 
     $: if (hash === sectionId) {
         focus = true;
     }
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
 </script>
 
 <section
@@ -24,16 +37,55 @@
     class:disabled
     aria-hidden={disabled}
 >
-    <div class="settings-content-header">
+    <div
+        class="settings-content-header"
+        on:mouseenter={() => showCopy = true}
+        on:mouseleave={() => showCopy = false}
+        role="link"
+        tabindex="0"
+    >
         <h3 class="settings-content-title">{title}</h3>
         {#if beta}
             <div class="beta-label">{$t("general.beta")}</div>
         {/if}
+        {#if showCopy}
+            <button
+                class="settings-link-copy"
+                on:click={() => {
+                    copied = true;
+                    copyURL();
+                }}
+            >
+                <CopyIcon check={copied} />
+            </button>
+        {/if}
     </div>
     <slot></slot>
 </section>
 
 <style>
+    .settings-link-copy {
+        background: transparent;
+        padding: 0;
+        margin: 0;
+        box-shadow: none;
+    }
+
+    .settings-link-copy :global(.copy-animation) {
+        width: 16px;
+        height: 16px;
+        opacity: 0.7;
+    }
+
+    .settings-link-copy :global(.copy-animation *) {
+        width: 16px;
+        height: 16px;
+    }
+
+    .settings-link-copy :global(.copy-animation):hover {
+        opacity: 1;
+    }
+
     .settings-content {
         display: flex;
         flex-direction: column;
@@ -86,7 +138,7 @@
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: 8px;
+        gap: 6px;
     }
 
     .beta-label {

From 0cc18b488c8831eac3e44be88ef059db7448a06d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 17 Sep 2024 22:40:07 +0600
Subject: [PATCH 02/48] api/core: return public turnstile sitekey in server
 info

---
 api/src/config.js   | 5 +++++
 api/src/core/api.js | 5 +++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/api/src/config.js b/api/src/config.js
index fc1d5d29d..5f3e52cc8 100644
--- a/api/src/config.js
+++ b/api/src/config.js
@@ -34,10 +34,15 @@ const env = {
 
     externalProxy: process.env.API_EXTERNAL_PROXY,
 
+    turnstileSitekey: process.env.TURNSTILE_SITEKEY,
     turnstileSecret: process.env.TURNSTILE_SECRET,
     jwtSecret: process.env.JWT_SECRET,
     jwtLifetime: process.env.JWT_EXPIRY || 120,
 
+    sessionEnabled: process.env.TURNSTILE_SITEKEY
+                        && process.env.TURNSTILE_SECRET
+                        && process.env.JWT_SECRET,
+
     enabledServices,
 }
 
diff --git a/api/src/core/api.js b/api/src/core/api.js
index 51ec16974..32bd23ced 100644
--- a/api/src/core/api.js
+++ b/api/src/core/api.js
@@ -49,6 +49,7 @@ export const runAPI = (express, app, __dirname) => {
             url: env.apiURL,
             startTime: `${startTimestamp}`,
             durationLimit: env.durationLimit,
+            turnstileSitekey: env.sessionEnabled ? env.turnstileSitekey : undefined,
             services: [...env.enabledServices].map(e => {
                 return friendlyServiceName(e);
             }),
@@ -106,7 +107,7 @@ export const runAPI = (express, app, __dirname) => {
     app.use('/tunnel', apiLimiterStream);
 
     app.post('/', (req, res, next) => {
-        if (!env.turnstileSecret || !env.jwtSecret) {
+        if (!env.sessionEnabled) {
             return next();
         }
 
@@ -156,7 +157,7 @@ export const runAPI = (express, app, __dirname) => {
     });
 
     app.post("/session", async (req, res) => {
-        if (!env.turnstileSecret || !env.jwtSecret) {
+        if (!env.sessionEnabled) {
             return fail(res, "error.api.auth.not_configured")
         }
 

From fdd5feac9249e2fc7aa54b68ba4879f225eae545 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 00:24:54 +0600
Subject: [PATCH 03/48] web: use turnstile & session only when the processing
 instance has them

now also always fetching server info in the save tab
---
 web/src/components/misc/Turnstile.svelte |  6 +++---
 web/src/components/save/Omnibox.svelte   |  6 ++++--
 web/src/lib/api/api.ts                   | 12 +++++++-----
 web/src/lib/env.ts                       |  1 -
 web/src/lib/types/api.ts                 |  1 +
 web/src/routes/+layout.svelte            | 11 +++++++++--
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/web/src/components/misc/Turnstile.svelte b/web/src/components/misc/Turnstile.svelte
index 29914995e..f1c9b6255 100644
--- a/web/src/components/misc/Turnstile.svelte
+++ b/web/src/components/misc/Turnstile.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-    import env from "$lib/env";
     import { onMount } from "svelte";
 
+    import { cachedInfo } from "$lib/api/server-info";
     import { turnstileLoaded, turnstileCreated } from "$lib/state/turnstile";
 
     let turnstileElement: HTMLElement;
     let turnstileScript: HTMLElement;
 
     onMount(() => {
-        const sitekey = env.TURNSTILE_KEY;
+        const sitekey = $cachedInfo?.info?.cobalt?.turnstileSitekey;
         if (!sitekey) return;
 
         $turnstileCreated = true;
@@ -17,7 +17,7 @@
             window.turnstile?.render(turnstileElement, {
                 sitekey,
                 "error-callback": (error) => {
-                    console.log("turnstile error code:", error);
+                    console.log("error code from turnstile:", error);
                     return true;
                 },
                 callback: () => {
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index d73b94745..c641fc71d 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -4,12 +4,12 @@
     import { browser } from "$app/environment";
     import { SvelteComponent, tick } from "svelte";
 
-    import env from "$lib/env";
     import { t } from "$lib/i18n/translations";
 
     import dialogs from "$lib/dialogs";
 
     import { link } from "$lib/state/omnibox";
+    import { cachedInfo } from "$lib/api/server-info";
     import { updateSetting } from "$lib/state/settings";
     import { turnstileLoaded } from "$lib/state/turnstile";
 
@@ -57,7 +57,9 @@
         goto("/", { replaceState: true });
     }
 
-    $: if (env.TURNSTILE_KEY) {
+    // FIXME: figure out why regular processing spinner
+    // doesn't show up after turnstile loads
+    $: if ($cachedInfo?.info?.cobalt?.turnstileSitekey) {
         if ($turnstileLoaded) {
             isDisabled = false;
         } else {
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index 74993a908..69ed06915 100644
--- a/web/src/lib/api/api.ts
+++ b/web/src/lib/api/api.ts
@@ -1,12 +1,15 @@
 import { get } from "svelte/store";
 
 import settings from "$lib/state/settings";
+import lazySettingGetter from "$lib/settings/lazy-get";
+
 import { getSession } from "$lib/api/session";
 import { currentApiURL } from "$lib/api/api-url";
+import { cachedInfo } from "$lib/api/server-info";
 import { apiOverrideWarning } from "$lib/api/safety-warning";
+
 import type { Optional } from "$lib/types/generic";
 import type { CobaltAPIResponse, CobaltErrorResponse } from "$lib/types/api";
-import lazySettingGetter from "$lib/settings/lazy-get";
 
 const request = async (url: string) => {
     const getSetting = lazySettingGetter(get(settings));
@@ -34,11 +37,10 @@ const request = async (url: string) => {
 
     await apiOverrideWarning();
 
-    const usingCustomInstance = getSetting("processing", "enableCustomInstances")
-                                && getSetting("processing", "customInstanceURL");
     const api = currentApiURL();
-    // FIXME: rewrite this to allow custom instances to specify their own turnstile tokens
-    const session = usingCustomInstance ? undefined : await getSession();
+
+    const session = get(cachedInfo)?.info?.cobalt?.turnstileSitekey
+                    ? await getSession() : undefined;
 
     let extraHeaders = {}
 
diff --git a/web/src/lib/env.ts b/web/src/lib/env.ts
index 734f482d1..53b93a345 100644
--- a/web/src/lib/env.ts
+++ b/web/src/lib/env.ts
@@ -14,7 +14,6 @@ const variables = {
     PLAUSIBLE_HOST: getEnv('PLAUSIBLE_HOST'),
     PLAUSIBLE_ENABLED: getEnv('HOST') && getEnv('PLAUSIBLE_HOST'),
     DEFAULT_API: getEnv('DEFAULT_API'),
-    TURNSTILE_KEY: getEnv('TURNSTILE_KEY'),
 }
 
 const contacts = {
diff --git a/web/src/lib/types/api.ts b/web/src/lib/types/api.ts
index 4df054aa4..e7e4307d9 100644
--- a/web/src/lib/types/api.ts
+++ b/web/src/lib/types/api.ts
@@ -51,6 +51,7 @@ export type CobaltServerInfo = {
         url: string,
         startTime: string,
         durationLimit: number,
+        turnstileSitekey?: string,
         services: string[]
     },
     git: {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 5263ffa2f..340f456cc 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -7,6 +7,7 @@
     import { updated } from "$app/stores";
     import { browser } from "$app/environment";
     import { afterNavigate } from "$app/navigation";
+    import { getServerInfo, cachedInfo } from "$lib/api/server-info";
 
     import "$lib/polyfills";
     import env from "$lib/env";
@@ -31,10 +32,16 @@
         $settings.appearance.reduceTransparency ||
         device.prefers.reducedTransparency;
 
-    afterNavigate(() => {
+    $: spawnTurnstile = !!$cachedInfo?.info?.cobalt?.turnstileSitekey;
+
+    afterNavigate(async() => {
         const to_focus: HTMLElement | null =
             document.querySelector("[data-first-focus]");
         to_focus?.focus();
+
+        if ($page.url.pathname === "/") {
+            await getServerInfo();
+        }
     });
 </script>
 
@@ -77,7 +84,7 @@
         <DialogHolder />
         <Sidebar />
         <div id="content">
-            {#if (env.TURNSTILE_KEY && $page.url.pathname === "/") || $turnstileCreated}
+            {#if (spawnTurnstile && $page.url.pathname === "/") || $turnstileCreated}
                 <Turnstile />
             {/if}
             <slot></slot>

From a1361e846219eda90a3bd78b10cdc855302d4fdd Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Tue, 17 Sep 2024 18:54:28 +0000
Subject: [PATCH 04/48] web/about: convert pages to translatable markdown

---
 web/i18n/en/about/credits.md                  | 29 +++++++
 web/i18n/en/about/general.md                  | 63 ++++++++++++++
 web/i18n/en/about/privacy.md                  | 59 +++++++++++++
 web/i18n/en/about/terms.md                    | 32 +++++++
 .../components/misc/AboutPageWrapper.svelte   |  9 ++
 web/src/routes/about/[page]/+page.svelte      | 10 +++
 web/src/routes/about/credits/+page.svelte     | 41 ---------
 web/src/routes/about/general/+page.svelte     | 87 -------------------
 web/src/routes/about/privacy/+page.svelte     | 81 -----------------
 web/src/routes/about/terms/+page.svelte       | 37 --------
 web/svelte.config.js                          | 14 ++-
 11 files changed, 212 insertions(+), 250 deletions(-)
 create mode 100644 web/i18n/en/about/credits.md
 create mode 100644 web/i18n/en/about/general.md
 create mode 100644 web/i18n/en/about/privacy.md
 create mode 100644 web/i18n/en/about/terms.md
 create mode 100644 web/src/components/misc/AboutPageWrapper.svelte
 create mode 100644 web/src/routes/about/[page]/+page.svelte
 delete mode 100644 web/src/routes/about/credits/+page.svelte
 delete mode 100644 web/src/routes/about/general/+page.svelte
 delete mode 100644 web/src/routes/about/privacy/+page.svelte
 delete mode 100644 web/src/routes/about/terms/+page.svelte

diff --git a/web/i18n/en/about/credits.md b/web/i18n/en/about/credits.md
new file mode 100644
index 000000000..4002806a3
--- /dev/null
+++ b/web/i18n/en/about/credits.md
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { contacts, docs } from "$lib/env";
+</script>
+
+<section id="meowbalt">
+
+### meowbalt
+meowbalt is cobalt's speedy mascot. he is an extremely expressive cat that loves fast internet.
+
+all amazing drawings of meowbalt that you see in cobalt were made by [GlitchyPSI](https://glitchypsi.xyz/).
+he is also the original designer of the character.
+
+you cannot use or modify GlitchyPSI's artworks of meowbalt without his explicit permission.
+
+you cannot use or modify the meowbalt character design commercially or in any form that isn't fan art.
+
+</section>
+<section id="licenses">
+
+### cobalt licenses
+cobalt processing server is open source and licensed under [AGPL-3.0]({docs.apiLicense}).
+
+cobalt frontend is [source first](https://sourcefirst.com/) and licensed under [CC-BY-NC-SA 4.0]({docs.webLicense}).
+we decided to use this license to stop grifters from profiting off our work & from creating malicious clones that deceive people and hurt our public identity.
+
+we rely on many open source libraries, create & distribute our own.
+you can see the full list of dependencies on [github]({contacts.github}).
+
+</section>
diff --git a/web/i18n/en/about/general.md b/web/i18n/en/about/general.md
new file mode 100644
index 000000000..5bdea833b
--- /dev/null
+++ b/web/i18n/en/about/general.md
@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { partners, contacts, docs } from "$lib/env";
+</script>
+
+<section id="saving">
+
+### best way to save what you love
+cobalt lets you save anything from your favorite websites: video, audio, photos or gifs — cobalt can do it all!
+
+no ads, trackers, or paywalls, no nonsense. just a convenient web app that works everywhere.
+
+</section>
+
+<section id="privacy">
+
+### leading privacy
+all requests to backend are anonymous and all tunnels are encrypted.
+we have a strict zero log policy and don't track *anything* about individual people.
+
+to avoid caching or storing downloaded files, cobalt processes them on-the-fly, sending processed pieces directly to client.
+this technology is used when your request needs additional processing, such as when source service stores video & audio in separate files.
+
+for even higher level of protection, you can [ask cobalt to always tunnel everything](/settings/privacy#tunnel).
+when enabled, cobalt will proxy everything through itself. no one will know what you download, even your network provider/admin.
+all they'll see is that you're using cobalt.
+
+</section>
+
+<section id="speed">
+
+### blazing speed
+since we don't rely on any existing downloaders and develop our own from ground up,
+cobalt is extremely efficient and a processing server can run on basically any hardware.
+
+main processing instances are hosted on several dedicated servers in several countries,
+to reduce latency and distribute the traffic.
+
+we constantly improve our infrastructure along with our long-standing partner, [royalehosting.net]({partners.royalehosting})!
+you're in good hands, and will get what you need within seconds.
+
+</section>
+<section id="community">
+
+### open community
+cobalt is used by countless artists, educators, and content creators to do what they love.
+we're always on the line with our community and work together to create even more useful tools for them.
+feel free to [join the conversation](/about/community)!
+
+we believe that the future of the internet is open, which is why cobalt is [source first](https://sourcefirst.com/) and [easily self-hostable]({docs.instanceHosting}). you can [check the source code & contribute to cobalt]({contacts.github})
+at any time, we welcome all contributions and suggestions.
+
+you can use any processing instances hosted by the community, including your own.
+if your friend hosts one, just ask them for a domain and [add it in instance settings](/settings/instances#community).
+
+</section>
+<section id="local">
+
+### on-device processing
+new features, such as [remuxing](/remux), work on-device.
+on-device processing is efficient and never sends anything over the internet.
+it perfectly aligns with our future goal of moving as much processing as possible to client.
+
+</section>
diff --git a/web/i18n/en/about/privacy.md b/web/i18n/en/about/privacy.md
new file mode 100644
index 000000000..4a3d8b767
--- /dev/null
+++ b/web/i18n/en/about/privacy.md
@@ -0,0 +1,59 @@
+<script lang="ts">
+    import env from "$lib/env";
+</script>
+
+<section id="general">
+
+### general terms
+cobalt's privacy policy is simple: we don't collect or store anything about you. what you do is solely your business, not ours or anyone else's.
+
+these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
+
+</section>
+<section id="local">
+
+### on-device processing
+tools that use on-device processing work offline, locally, and never send any data anywhere. they are explicitly marked as such whenever applicable.
+
+</section>
+<section id="saving">
+
+### saving
+when using saving functionality, in some cases cobalt will encrypt & temporarily store information needed for tunneling. it's stored in processing server's RAM for 90 seconds and irreversibly purged afterwards. no one has access to it, even instance owners, as long as they don't modify the official cobalt image.
+
+processed/tunneled files are never cached anywhere. everything is tunneled live. cobalt's saving functionality is essentially a fancy proxy service.
+
+</section>
+<section id="encryption">
+
+### encryption
+temporarily stored tunnel data is encrypted using the AES-256 standard. decryption keys are only included in the access link and never logged/cached/stored anywhere. only the end user has access to the link & encryption keys. keys are generated uniquely for each requested tunnel.
+
+</section>
+
+{#if env.PLAUSIBLE_ENABLED}
+<section id="plausible">
+
+### anonymous traffic analytics
+for sake of privacy, we use [plausible's anonymous traffic analytics](https://plausible.io/) to get an approximate number of active cobalt users. no identifiable information about you or your requests is ever stored. all data is anonymized and aggregated. the plausible instance we use is hosted & managed by us.
+
+plausible doesn't use cookies and is fully compliant with GDPR, CCPA, and PECR.
+
+[learn more about plausible's dedication to privacy.](https://plausible.io/privacy-focused-web-analytics)
+
+if you wish to opt out of anonymous analytics, you can do it in <a href="/settings/privacy#analytics">privacy settings</a>.
+
+</section>
+
+{/if}
+
+<section id="cloudflare">
+
+### web privacy & security
+we use cloudflare services for ddos & bot protection. we also use cloudflare pages for deploying & hosting the static web app. all of these are required to provide the best experience for everyone. it's the most private & reliable provider that we know of.
+
+cloudflare is fully compliant with GDPR and HIPAA.
+
+[learn more about cloudflare's dedication to privacy.](https://www.cloudflare.com/trust-hub/privacy-and-data-protection/)
+
+</section>
diff --git a/web/i18n/en/about/terms.md b/web/i18n/en/about/terms.md
new file mode 100644
index 000000000..1c82124c8
--- /dev/null
+++ b/web/i18n/en/about/terms.md
@@ -0,0 +1,32 @@
+<section id="general">
+
+### general terms
+these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
+
+</section>
+
+<section id="saving">
+
+### saving
+saving functionality simplifies downloading content from the internet and takes zero liability for what the saved content is used for. processing servers work like advanced proxies and don't ever write any content to disk. everything is handled in RAM and permanently purged once the tunnel is done. we have no downloading logs and can't identify anyone.
+
+[you can read more about how tunnels work in our privacy policy.](/about/privacy)
+
+</section>
+
+<section id="responsibility">
+
+### responsibilities
+you (end user) are responsible for what you do with our tools, how you use and distribute resulting content. please be mindful when using content of others and always credit original creators. make sure you don't violate any terms or licenses.
+
+when used in educational purposes, always cite sources and credit original creators.
+
+fair use and credits benefit everyone.
+
+</section>
+<section id="abuse">
+
+### reporting abuse
+we have no way of detecting abusive behavior automatically, as cobalt is 100% anonymous. however, you can report such activities to us and we will do our best to comply manually: [safety@imput.net](mailto:safety@imput.net)
+
+</section>
diff --git a/web/src/components/misc/AboutPageWrapper.svelte b/web/src/components/misc/AboutPageWrapper.svelte
new file mode 100644
index 000000000..eb46647b1
--- /dev/null
+++ b/web/src/components/misc/AboutPageWrapper.svelte
@@ -0,0 +1,9 @@
+<!-- Workaround for https://github.com/pngwn/MDsveX/issues/116 -->
+<script lang="ts" context="module">
+    import a from "$components/misc/OuterLink.svelte";
+    export { a };
+</script>
+
+<div class="long-text-noto about">
+    <slot></slot>
+</div>
diff --git a/web/src/routes/about/[page]/+page.svelte b/web/src/routes/about/[page]/+page.svelte
new file mode 100644
index 000000000..01b94fe0b
--- /dev/null
+++ b/web/src/routes/about/[page]/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+    import locale from '$lib/i18n/locale';
+    import { page } from '$app/stores';
+
+    const component = import(`$i18n/${$locale}/about/${$page.params.page}.md`);
+</script>
+
+{#await component then component}
+    <svelte:component this={component.default} />
+{/await}
diff --git a/web/src/routes/about/credits/+page.svelte b/web/src/routes/about/credits/+page.svelte
deleted file mode 100644
index a91482753..000000000
--- a/web/src/routes/about/credits/+page.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-    import { contacts, docs } from "$lib/env";
-    import OuterLink from "$components/misc/OuterLink.svelte";
-</script>
-
-<div id="credits-body" class="long-text-noto about">
-    <section id="meowbalt">
-        <h3>meowbalt</h3>
-        <p>
-            meowbalt is cobalt's speedy mascot. he is an extremely expressive cat that loves fast internet.
-        </p>
-        <p>
-            all amazing drawings of meowbalt that you see in cobalt were made by
-            <OuterLink href="https://glitchypsi.xyz/">GlitchyPSI</OuterLink>.
-            he is also the original designer of the character.
-        </p>
-        <p>
-            you cannot use or modify GlitchyPSI's artworks of meowbalt without his explicit permission.
-        </p>
-        <p>
-            you cannot use or modify the meowbalt character design commercially or in any form that isn't fan art.
-        </p>
-    </section>
-    <section id="licenses">
-        <h3>cobalt licenses</h3>
-        <p>
-            cobalt processing server is open source and licensed under <OuterLink href={docs.apiLicense}>AGPL-3.0</OuterLink>.
-        </p>
-        <p>
-            cobalt frontend is
-            <OuterLink href="https://sourcefirst.com/">source first</OuterLink>
-            and licensed under
-            <OuterLink href={docs.webLicense}>CC-BY-NC-SA 4.0</OuterLink>.
-            we decided to use this license to stop grifters from profiting off our work & from creating malicious clones that deceive people and hurt our public identity.
-        </p>
-        <p>
-            we rely on many open source libraries, create & distribute our own.
-            you can see the full list of dependencies on <OuterLink href={contacts.github}>github</OuterLink>.
-        </p>
-    </section>
-</div>
diff --git a/web/src/routes/about/general/+page.svelte b/web/src/routes/about/general/+page.svelte
deleted file mode 100644
index a7ecacdfb..000000000
--- a/web/src/routes/about/general/+page.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-    import { partners, contacts, docs } from "$lib/env";
-    import OuterLink from "$components/misc/OuterLink.svelte";
-</script>
-
-<div id="privacy-body" class="long-text-noto about">
-    <section id="saving">
-        <h3>best way to save what you love</h3>
-        <p>
-            cobalt lets you save anything from your favorite websites: video, audio, photos or gifs — cobalt can do it all!
-        </p>
-        <p>
-            no ads, trackers, or paywalls, no nonsense. just a convenient web app that works everywhere.
-        </p>
-    </section>
-
-    <section id="privacy">
-        <h3>leading privacy</h3>
-        <p>
-            all requests to backend are anonymous and all tunnels are encrypted.
-            we have a strict zero log policy and don't track <i>anything</i> about individual people.
-        </p>
-        <p>
-            to avoid caching or storing downloaded files, cobalt processes them on-fly, sending processed pieces directly to client.
-            this technology is used when your request needs additional processing, such as when source service stores video & audio in separate files.
-        </p>
-        <p>
-            for even higher level of protection, you can <a href="/settings/privacy#tunnel">ask cobalt to always tunnel everything</a>.
-            when enabled, cobalt will proxy everything through itself. no one will know what you download, even your network provider/admin.
-            all they'll see is that you're using cobalt.
-        </p>
-    </section>
-
-    <section id="speed">
-        <h3>blazing speed</h3>
-        <p>
-            since we don't rely on any existing downloaders and develop our own from ground up,
-            cobalt is extremely efficient and a processing server can run on basically any hardware.
-        </p>
-        <p>
-            main processing instances are hosted on several dedicated servers in several countries,
-            to reduce latency and distribute the traffic.
-        </p>
-        <p>
-            we constantly improve our infrastructure along with our long-standing partner,
-            <OuterLink href="{partners.royalehosting}">royalehosting.net</OuterLink>!
-            you're in good hands, and will get what you need within seconds.
-        </p>
-    </section>
-
-    <section id="community">
-        <h3>open community</h3>
-        <p>
-            cobalt is used by countless artists, educators, and content creators to do what they love.
-            we're always on the line with our community and work together to create even more useful tools for them.
-            feel free to <a href="/about/community">join the conversation</a>!
-        </p>
-        <p>
-            we believe that the future of the internet is open,
-            which is why cobalt is
-            <OuterLink
-                href="https://sourcefirst.com/">
-                source first
-            </OuterLink>
-            and
-            <OuterLink href={docs.instanceHosting}>
-                easily self-hostable.
-            </OuterLink>
-
-            you can <OuterLink href="{contacts.github}">check the source code & contribute to cobalt</OuterLink>
-            at any time, we welcome all contributions and suggestions.
-        </p>
-        <p>
-            you can use any processing instances hosted by the community, including your own.
-            if your friend hosts one, just ask them for a domain and <a href="/settings/instances#community">add it in instance settings</a>.
-        </p>
-    </section>
-
-    <section id="local">
-        <h3>on-device processing</h3>
-        <p>
-            new features, such as <a href="/remux">remuxing</a>, work on-device.
-            on-device processing is efficient and never sends anything over the internet.
-            it perfectly aligns with our future goal of moving as much processing as possible to client.
-        </p>
-    </section>
-</div>
diff --git a/web/src/routes/about/privacy/+page.svelte b/web/src/routes/about/privacy/+page.svelte
deleted file mode 100644
index 28bdba59e..000000000
--- a/web/src/routes/about/privacy/+page.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-<script lang="ts">
-    import env from "$lib/env";
-    import { t } from "$lib/i18n/translations";
-    import OuterLink from "$components/misc/OuterLink.svelte";
-</script>
-
-<div id="privacy-body" class="long-text-noto about">
-    <section id="general">
-        <h3>general terms</h3>
-        <p>
-            cobalt's privacy policy is simple: we don't collect or store anything about you. what you do is solely your business, not ours or anyone else's.
-        </p>
-        <p>
-            these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-        </p>
-    </section>
-
-    <section id="local">
-        <h3>on-device processing</h3>
-        <p>
-            tools that use on-device processing work offline, locally, and never send any data anywhere. they are explicitly marked as such whenever applicable.
-        </p>
-    </section>
-
-    <section id="saving">
-        <h3>saving</h3>
-        <p>
-            when using saving functionality, in some cases cobalt will encrypt & temporarily store information needed for tunneling. it's stored in processing server's RAM for 90 seconds and irreversibly purged afterwards. no one has access to it, even instance owners, as long as they don't modify the official cobalt image.
-        </p>
-        <p>
-            processed/tunneled files are never cached anywhere. everything is tunneled live. cobalt's saving functionality is essentially a fancy proxy service.
-        </p>
-    </section>
-
-    <section id="encryption">
-        <h3>encryption</h3>
-        <p>
-            temporarily stored tunnel data is encrypted using the AES-256 standard. decryption keys are only included in the access link and never logged/cached/stored anywhere. only the end user has access to the link & encryption keys. keys are generated uniquely for each requested tunnel.
-        </p>
-    </section>
-
-    {#if env.PLAUSIBLE_ENABLED}
-        <section id="plausible">
-            <h3>anonymous traffic analytics</h3>
-            <p>
-                for sake of privacy, we use
-                <OuterLink href="https://plausible.io/"> plausible's anonymous traffic analytics</OuterLink>
-                to get an approximate number of active cobalt users. no identifiable information about you or your requests is ever stored. all data is anonymized and aggregated. the plausible instance we use is hosted & managed by us.
-            </p>
-
-            <p>
-            plausible doesn't use cookies and is fully compliant with GDPR, CCPA, and PECR.
-            </p>
-
-            <p>
-                <OuterLink href="https://plausible.io/privacy-focused-web-analytics">
-                    {$t("settings.privacy.analytics.learnmore")}
-                </OuterLink>
-            </p>
-
-            <p>
-                if you wish to opt out of anonymous analytics, you can do it in <a href="/settings/privacy#analytics">privacy settings</a>.
-            </p>
-        </section>
-    {/if}
-
-    <section id="cloudflare">
-        <h3>web privacy & security</h3>
-        <p>
-            we use cloudflare services for ddos & bot protection. we also use cloudflare pages for deploying & hosting the static web app. all of these are required to provide the best experience for everyone. it's the most private & reliable provider that we know of.
-        </p>
-        <p>
-            cloudflare is fully compliant with GDPR and HIPAA.
-         </p>
-        <p>
-            <OuterLink href="https://www.cloudflare.com/trust-hub/privacy-and-data-protection/">
-                learn more about cloudflare's dedication to privacy.
-            </OuterLink>
-        </p>
-    </section>
-</div>
diff --git a/web/src/routes/about/terms/+page.svelte b/web/src/routes/about/terms/+page.svelte
deleted file mode 100644
index 016e4539e..000000000
--- a/web/src/routes/about/terms/+page.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<div id="terms-body" class="long-text-noto about">
-    <section id="saving">
-        <section id="general">
-            <h3>general terms</h3>
-            <p>
-                these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-            </p>
-        </section>
-        <h3>saving</h3>
-        <p>
-            saving functionality simplifies downloading content from the internet and takes zero liability for what the saved content is used for. processing servers work like advanced proxies and don't ever write any content to disk. everything is handled in RAM and permanently purged once the tunnel is done. we have no downloading logs and can't identify anyone.
-        </p>
-        <p>
-            <a href="/about/privacy">you can read more about how tunnels work in our privacy policy.</a>
-        </p>
-    </section>
-
-    <section id="responsibiliy">
-        <h3>responsibilities</h3>
-        <p>
-            you (end user) are responsible for what you do with our tools, how you use and distribute resulting content. please be mindful when using content of others and always credit original creators. make sure you don't violate any terms or licenses.
-        </p>
-        <p>
-            when used in educational purposes, always cite sources and credit original creators.
-        </p>
-        <p>
-            fair use and credits benefit everyone.
-        </p>
-    </section>
-
-    <section id="abuse">
-        <h3>reporting abuse</h3>
-        <p>
-            we have no way of detecting abusive behavior automatically, as cobalt is 100% anonymous. however, you can report such activities to us and we will do our best to comply manually: <a href="mailto:safety@imput.net">safety@imput.net</a>
-        </p>
-    </section>
-</div>
diff --git a/web/svelte.config.js b/web/svelte.config.js
index b86956edd..522638711 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -24,10 +24,16 @@ const config = {
         sveltePreprocess(),
         mdsvex({
             extensions: ['.md'],
-            layout: join(
-                dirname(fileURLToPath(import.meta.url)),
-                '/src/components/changelog/ChangelogEntryWrapper.svelte'
-            )
+            layout: {
+                about: join(
+                    dirname(fileURLToPath(import.meta.url)),
+                    '/src/components/misc/AboutPageWrapper.svelte'
+                ),
+                changelogs: join(
+                    dirname(fileURLToPath(import.meta.url)),
+                    '/src/components/changelog/ChangelogEntryWrapper.svelte'
+                )
+            }
         })
     ],
     kit: {

From d2b1a6553b8e90e697c96cfc94b0cfd1bf24870f Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Tue, 17 Sep 2024 21:49:23 +0000
Subject: [PATCH 05/48] web/about: fix switching between pages

---
 web/src/routes/about/[page]/+page.svelte | 12 ++++------
 web/src/routes/about/[page]/+page.ts     | 29 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 web/src/routes/about/[page]/+page.ts

diff --git a/web/src/routes/about/[page]/+page.svelte b/web/src/routes/about/[page]/+page.svelte
index 01b94fe0b..68bad4262 100644
--- a/web/src/routes/about/[page]/+page.svelte
+++ b/web/src/routes/about/[page]/+page.svelte
@@ -1,10 +1,6 @@
-<script>
-    import locale from '$lib/i18n/locale';
-    import { page } from '$app/stores';
-
-    const component = import(`$i18n/${$locale}/about/${$page.params.page}.md`);
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
 </script>
 
-{#await component then component}
-    <svelte:component this={component.default} />
-{/await}
+<svelte:component this={data.component} />
diff --git a/web/src/routes/about/[page]/+page.ts b/web/src/routes/about/[page]/+page.ts
new file mode 100644
index 000000000..be5c7a335
--- /dev/null
+++ b/web/src/routes/about/[page]/+page.ts
@@ -0,0 +1,29 @@
+import type { ComponentType, SvelteComponent } from 'svelte';
+import { get } from 'svelte/store';
+import { error } from '@sveltejs/kit';
+
+import type { PageLoad } from './$types';
+
+import locale from '$lib/i18n/locale';
+import type { DefaultImport } from '$lib/types/generic';
+import { defaultLocale } from '$lib/i18n/translations';
+
+const pages = import.meta.glob('$i18n/*/about/*.md');
+
+export const load: PageLoad = async ({ params }) => {
+    const getPage = (locale: string) => Object.keys(pages).find(
+        file => file.endsWith(`${locale}/about/${params.page}.md`)
+    );
+
+    const componentPath = getPage(get(locale)) || getPage(defaultLocale);
+    if (componentPath) {
+        type Component = ComponentType<SvelteComponent>;
+        const componentImport = pages[componentPath] as DefaultImport<Component>;
+
+        return { component: (await componentImport()).default }
+    }
+
+	error(404, 'Not found');
+};
+
+export const prerender = true;

From 503514d98e7d1b664f9cea2f3a803e9f904dcde0 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Tue, 17 Sep 2024 21:53:46 +0000
Subject: [PATCH 06/48] web/vite: exclude .md files from i18n chunks

---
 web/vite.config.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/vite.config.ts b/web/vite.config.ts
index 37a77956f..5faa8c0f8 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -43,7 +43,6 @@ const exposeLibAV: PluginOption = (() => {
 
             for (const module of modules) {
                 const distFolder = join(IMPUT_MODULE_DIR, module, 'dist/');
-                console.log(distFolder);
                 await cp(distFolder, assets, { recursive: true });
             }
         }
@@ -72,7 +71,7 @@ export default defineConfig({
         rollupOptions: {
             output: {
                 manualChunks: (id) => {
-                    if (id.includes('/web/i18n')) {
+                    if (id.includes('/web/i18n') && id.endsWith('.json')) {
                         const lang = id.split('/web/i18n/')?.[1].split('/')?.[0];
                         if (lang) {
                             return `i18n_${lang}`;

From 1a845fcfc2a45bcd1dcebecba336b3fab5ff4b51 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 15:28:09 +0600
Subject: [PATCH 07/48] web/SectionHeading: reusable component for linkable
 section headings

---
 web/i18n/en/button.json                       |  1 +
 web/src/components/misc/SectionHeading.svelte | 95 +++++++++++++++++++
 .../settings/SettingsCategory.svelte          | 75 +--------------
 3 files changed, 99 insertions(+), 72 deletions(-)
 create mode 100644 web/src/components/misc/SectionHeading.svelte

diff --git a/web/i18n/en/button.json b/web/i18n/en/button.json
index 849ac98d6..1ea7fb41d 100644
--- a/web/i18n/en/button.json
+++ b/web/i18n/en/button.json
@@ -7,6 +7,7 @@
     "download": "download",
     "share": "share",
     "copy": "copy",
+    "copy.section": "copy the section link",
     "copied": "copied",
     "import": "import",
     "continue": "continue",
diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
new file mode 100644
index 000000000..1c87ae92b
--- /dev/null
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import { t } from "$lib/i18n/translations";
+    import { copyURL } from "$lib/download";
+
+    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    export let title: string;
+    export let sectionId: string;
+    export let beta = false;
+
+    let copied = false;
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
+</script>
+
+<div class="heading-container">
+    <h3 class="content-title">{title}</h3>
+    {#if beta}
+        <div class="beta-label">{$t("general.beta")}</div>
+    {/if}
+    <button
+        class="link-copy"
+        aria-label={copied ? $t("button.copied") : $t("button.copy.section")}
+        on:click={() => {
+            copied = true;
+            copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
+        }}
+    >
+        <CopyIcon check={copied} />
+    </button>
+</div>
+
+<style>
+    .heading-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 6px;
+        justify-content: start;
+        align-items: center;
+        box-shadow: none;
+    }
+
+    .link-copy {
+        background: transparent;
+        padding: 2px;
+        box-shadow: none;
+        border-radius: 5px;
+        transition: opacity 0.1s;
+    }
+
+    .link-copy :global(.copy-animation) {
+        width: 17px;
+        height: 17px;
+        opacity: 0.7;
+    }
+
+    .link-copy :global(.copy-animation *) {
+        width: 17px;
+        height: 17px;
+    }
+
+    .link-copy :global(.copy-animation):hover {
+        opacity: 1;
+    }
+
+    .beta-label {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+        padding: 0 5px;
+        background: var(--secondary);
+        color: var(--primary);
+        font-size: 11px;
+        font-weight: 500;
+        line-height: 2;
+        text-transform: uppercase;
+    }
+
+    @media (hover: hover) {
+        .link-copy:not(:focus-visible) {
+            opacity: 0;
+        }
+
+        .heading-container:hover .link-copy {
+            opacity: 1;
+        }
+    }
+</style>
diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 1e4757610..520be2dbe 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
-    import { t } from "$lib/i18n/translations";
     import { copyURL as _copyURL } from "$lib/download";
-    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
 
     export let title: string;
     export let sectionId: string;
@@ -11,11 +11,7 @@
     export let beta = false;
 
     let focus = false;
-    let animate = false;
     let copied = false;
-    let showCopy = false;
-
-    const copyURL = () => _copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
 
     $: hash = $page.url.hash.replace("#", "");
 
@@ -37,55 +33,11 @@
     class:disabled
     aria-hidden={disabled}
 >
-    <div
-        class="settings-content-header"
-        on:mouseenter={() => showCopy = true}
-        on:mouseleave={() => showCopy = false}
-        role="link"
-        tabindex="0"
-    >
-        <h3 class="settings-content-title">{title}</h3>
-        {#if beta}
-            <div class="beta-label">{$t("general.beta")}</div>
-        {/if}
-        {#if showCopy}
-            <button
-                class="settings-link-copy"
-                on:click={() => {
-                    copied = true;
-                    copyURL();
-                }}
-            >
-                <CopyIcon check={copied} />
-            </button>
-        {/if}
-    </div>
+    <SectionHeading {title} {sectionId} {beta} />
     <slot></slot>
 </section>
 
 <style>
-    .settings-link-copy {
-        background: transparent;
-        padding: 0;
-        margin: 0;
-        box-shadow: none;
-    }
-
-    .settings-link-copy :global(.copy-animation) {
-        width: 16px;
-        height: 16px;
-        opacity: 0.7;
-    }
-
-    .settings-link-copy :global(.copy-animation *) {
-        width: 16px;
-        height: 16px;
-    }
-
-    .settings-link-copy :global(.copy-animation):hover {
-        opacity: 1;
-    }
-
     .settings-content {
         display: flex;
         flex-direction: column;
@@ -134,27 +86,6 @@
         }
     }
 
-    .settings-content-header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 6px;
-    }
-
-    .beta-label {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 5px;
-        padding: 0 5px;
-        background: var(--secondary);
-        color: var(--primary);
-        font-size: 11px;
-        font-weight: 500;
-        line-height: 0;
-        text-transform: uppercase;
-    }
-
     @media screen and (max-width: 750px) {
         .settings-content {
             padding: var(--padding);

From c92cd6d21c9f8936b2af5958c2a5e3a2554dc74e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 15:46:07 +0600
Subject: [PATCH 08/48] web/SidebarTab: improve animations & adjust mobile
 style

---
 web/src/components/sidebar/SidebarTab.svelte | 34 +++++++++-----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 267d55f16..b7866fbaa 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -28,11 +28,6 @@
 
     $: if (isTabActive && tab) {
         showTab(tab);
-
-        tab.classList.add("animate");
-        setTimeout(() => {
-            tab.classList.remove("animate");
-        }, 250);
     }
 </script>
 
@@ -63,7 +58,7 @@
         padding: var(--padding) 5px;
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
-        opacity: 0.8;
+        opacity: 0.75;
         height: fit-content;
         border-radius: var(--border-radius);
         transition: transform 0.2s;
@@ -88,19 +83,15 @@
         color: var(--sidebar-bg);
         background: var(--sidebar-highlight);
         opacity: 1;
-        transition: none;
         transform: none;
+        animation: pressButton 0.3s;
     }
 
-    :global(.sidebar-tab.animate) {
-        animation: pressButton 0.2s;
-    }
-
-    .sidebar-tab:active:not(.active) {
+    .sidebar-tab:active {
         transform: scale(0.95);
     }
 
-    :global([data-reduce-motion="true"]) .sidebar-tab:active:not(.active) {
+    :global([data-reduce-motion="true"]) .sidebar-tab:active {
         transform: none;
     }
 
@@ -112,10 +103,10 @@
 
     @keyframes pressButton {
         0% {
-            transform: scale(0.95);
+            transform: scale(0.9);
         }
         50% {
-            transform: scale(1.02);
+            transform: scale(1.015);
         }
         100% {
             transform: scale(1);
@@ -127,6 +118,7 @@
             opacity: 1;
             background-color: var(--sidebar-hover);
         }
+
         .sidebar-tab:hover:not(.active) {
             opacity: 1;
             background-color: var(--sidebar-hover);
@@ -136,9 +128,15 @@
     @media screen and (max-width: 535px) {
         .sidebar-tab {
             padding: 5px var(--padding);
+            gap: 3px;
             min-width: calc(var(--sidebar-width) / 2);
         }
 
+        .sidebar-tab :global(svg) {
+            height: 22px;
+            width: 22px;
+        }
+
         .sidebar-tab.active {
             z-index: 2;
         }
@@ -149,10 +147,10 @@
 
         @keyframes pressButton {
             0% {
-                transform: scale(0.9);
+                transform: scale(0.8);
             }
-            60% {
-                transform: scale(1.015);
+            50% {
+                transform: scale(1.02);
             }
             100% {
                 transform: scale(1);

From 521eb4b64376f3dfe5e6c6469c8a0b624725270c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 15:58:32 +0600
Subject: [PATCH 09/48] web/Sidebar: remove fixed width for tabs container

---
 web/src/components/sidebar/Sidebar.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index df03e6eae..ca3a963eb 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -70,7 +70,6 @@
 
     #sidebar-tabs {
         height: 100%;
-        width: var(--sidebar-width);
         justify-content: space-between;
         padding: var(--sidebar-inner-padding);
         padding-bottom: var(--border-radius);
@@ -110,7 +109,6 @@
             overflow-x: scroll;
             padding-bottom: 0;
             padding: var(--sidebar-inner-padding) 0;
-            width: unset;
             height: fit-content;
         }
 

From 02267b4db42f752d2db45542205d88deb5e4cf7b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 16:17:22 +0600
Subject: [PATCH 10/48] web/i18n/about: use section heading component

---
 web/i18n/en/about/credits.md | 14 ++++++++----
 web/i18n/en/about/general.md | 32 ++++++++++++++++++++--------
 web/i18n/en/about/privacy.md | 41 ++++++++++++++++++++++++------------
 web/i18n/en/about/terms.md   | 32 ++++++++++++++++++++--------
 4 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/web/i18n/en/about/credits.md b/web/i18n/en/about/credits.md
index 4002806a3..442499e40 100644
--- a/web/i18n/en/about/credits.md
+++ b/web/i18n/en/about/credits.md
@@ -1,10 +1,14 @@
 <script lang="ts">
     import { contacts, docs } from "$lib/env";
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="meowbalt">
+<SectionHeading
+    title="meowbalt"
+    sectionId="meowbalt"
+/>
 
-### meowbalt
 meowbalt is cobalt's speedy mascot. he is an extremely expressive cat that loves fast internet.
 
 all amazing drawings of meowbalt that you see in cobalt were made by [GlitchyPSI](https://glitchypsi.xyz/).
@@ -13,11 +17,14 @@ he is also the original designer of the character.
 you cannot use or modify GlitchyPSI's artworks of meowbalt without his explicit permission.
 
 you cannot use or modify the meowbalt character design commercially or in any form that isn't fan art.
-
 </section>
+
 <section id="licenses">
+<SectionHeading
+    title="cobalt licenses"
+    sectionId="licenses"
+/>
 
-### cobalt licenses
 cobalt processing server is open source and licensed under [AGPL-3.0]({docs.apiLicense}).
 
 cobalt frontend is [source first](https://sourcefirst.com/) and licensed under [CC-BY-NC-SA 4.0]({docs.webLicense}).
@@ -25,5 +32,4 @@ we decided to use this license to stop grifters from profiting off our work & fr
 
 we rely on many open source libraries, create & distribute our own.
 you can see the full list of dependencies on [github]({contacts.github}).
-
 </section>
diff --git a/web/i18n/en/about/general.md b/web/i18n/en/about/general.md
index 5bdea833b..1b32e8150 100644
--- a/web/i18n/en/about/general.md
+++ b/web/i18n/en/about/general.md
@@ -1,19 +1,25 @@
 <script lang="ts">
     import { partners, contacts, docs } from "$lib/env";
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="saving">
+<SectionHeading
+    title="best way to save what you love"
+    sectionId="saving"
+/>
 
-### best way to save what you love
 cobalt lets you save anything from your favorite websites: video, audio, photos or gifs — cobalt can do it all!
 
 no ads, trackers, or paywalls, no nonsense. just a convenient web app that works everywhere.
-
 </section>
 
 <section id="privacy">
+<SectionHeading
+    title="leading privacy"
+    sectionId="privacy"
+/>
 
-### leading privacy
 all requests to backend are anonymous and all tunnels are encrypted.
 we have a strict zero log policy and don't track *anything* about individual people.
 
@@ -23,12 +29,14 @@ this technology is used when your request needs additional processing, such as w
 for even higher level of protection, you can [ask cobalt to always tunnel everything](/settings/privacy#tunnel).
 when enabled, cobalt will proxy everything through itself. no one will know what you download, even your network provider/admin.
 all they'll see is that you're using cobalt.
-
 </section>
 
 <section id="speed">
+<SectionHeading
+    title="blazing speed"
+    sectionId="speed"
+/>
 
-### blazing speed
 since we don't rely on any existing downloaders and develop our own from ground up,
 cobalt is extremely efficient and a processing server can run on basically any hardware.
 
@@ -37,11 +45,14 @@ to reduce latency and distribute the traffic.
 
 we constantly improve our infrastructure along with our long-standing partner, [royalehosting.net]({partners.royalehosting})!
 you're in good hands, and will get what you need within seconds.
-
 </section>
+
 <section id="community">
+<SectionHeading
+    title="open community"
+    sectionId="community"
+/>
 
-### open community
 cobalt is used by countless artists, educators, and content creators to do what they love.
 we're always on the line with our community and work together to create even more useful tools for them.
 feel free to [join the conversation](/about/community)!
@@ -51,11 +62,14 @@ at any time, we welcome all contributions and suggestions.
 
 you can use any processing instances hosted by the community, including your own.
 if your friend hosts one, just ask them for a domain and [add it in instance settings](/settings/instances#community).
-
 </section>
+
 <section id="local">
+<SectionHeading
+    title="on-device processing"
+    sectionId="local"
+/>
 
-### on-device processing
 new features, such as [remuxing](/remux), work on-device.
 on-device processing is efficient and never sends anything over the internet.
 it perfectly aligns with our future goal of moving as much processing as possible to client.
diff --git a/web/i18n/en/about/privacy.md b/web/i18n/en/about/privacy.md
index 4a3d8b767..c76fdd4ca 100644
--- a/web/i18n/en/about/privacy.md
+++ b/web/i18n/en/about/privacy.md
@@ -1,40 +1,55 @@
 <script lang="ts">
     import env from "$lib/env";
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="general">
+<SectionHeading
+    title="general terms"
+    sectionId="general"
+/>
 
-### general terms
 cobalt's privacy policy is simple: we don't collect or store anything about you. what you do is solely your business, not ours or anyone else's.
 
 these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-
 </section>
+
 <section id="local">
+<SectionHeading
+    title="on-device processing"
+    sectionId="local"
+/>
 
-### on-device processing
 tools that use on-device processing work offline, locally, and never send any data anywhere. they are explicitly marked as such whenever applicable.
-
 </section>
+
 <section id="saving">
+<SectionHeading
+    title="saving"
+    sectionId="saving"
+/>
 
-### saving
 when using saving functionality, in some cases cobalt will encrypt & temporarily store information needed for tunneling. it's stored in processing server's RAM for 90 seconds and irreversibly purged afterwards. no one has access to it, even instance owners, as long as they don't modify the official cobalt image.
 
 processed/tunneled files are never cached anywhere. everything is tunneled live. cobalt's saving functionality is essentially a fancy proxy service.
-
 </section>
+
 <section id="encryption">
+<SectionHeading
+    title="encryption"
+    sectionId="encryption"
+/>
 
-### encryption
 temporarily stored tunnel data is encrypted using the AES-256 standard. decryption keys are only included in the access link and never logged/cached/stored anywhere. only the end user has access to the link & encryption keys. keys are generated uniquely for each requested tunnel.
-
 </section>
 
 {#if env.PLAUSIBLE_ENABLED}
 <section id="plausible">
+<SectionHeading
+    title="anonymous traffic analytics"
+    sectionId="plausible"
+/>
 
-### anonymous traffic analytics
 for sake of privacy, we use [plausible's anonymous traffic analytics](https://plausible.io/) to get an approximate number of active cobalt users. no identifiable information about you or your requests is ever stored. all data is anonymized and aggregated. the plausible instance we use is hosted & managed by us.
 
 plausible doesn't use cookies and is fully compliant with GDPR, CCPA, and PECR.
@@ -42,18 +57,18 @@ plausible doesn't use cookies and is fully compliant with GDPR, CCPA, and PECR.
 [learn more about plausible's dedication to privacy.](https://plausible.io/privacy-focused-web-analytics)
 
 if you wish to opt out of anonymous analytics, you can do it in <a href="/settings/privacy#analytics">privacy settings</a>.
-
 </section>
-
 {/if}
 
 <section id="cloudflare">
+<SectionHeading
+    title="web privacy & security"
+    sectionId="cloudflare"
+/>
 
-### web privacy & security
 we use cloudflare services for ddos & bot protection. we also use cloudflare pages for deploying & hosting the static web app. all of these are required to provide the best experience for everyone. it's the most private & reliable provider that we know of.
 
 cloudflare is fully compliant with GDPR and HIPAA.
 
 [learn more about cloudflare's dedication to privacy.](https://www.cloudflare.com/trust-hub/privacy-and-data-protection/)
-
 </section>
diff --git a/web/i18n/en/about/terms.md b/web/i18n/en/about/terms.md
index 1c82124c8..cd0c10fd5 100644
--- a/web/i18n/en/about/terms.md
+++ b/web/i18n/en/about/terms.md
@@ -1,32 +1,46 @@
+<script lang="ts">
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
+</script>
+
 <section id="general">
+<SectionHeading
+    title="general terms"
+    sectionId="general"
+/>
 
-### general terms
 these terms are applicable only when using the official cobalt instance. in other cases, you may need to contact the hoster for accurate info.
-
 </section>
 
 <section id="saving">
+<SectionHeading
+    title="saving"
+    sectionId="saving"
+/>
 
-### saving
 saving functionality simplifies downloading content from the internet and takes zero liability for what the saved content is used for. processing servers work like advanced proxies and don't ever write any content to disk. everything is handled in RAM and permanently purged once the tunnel is done. we have no downloading logs and can't identify anyone.
 
 [you can read more about how tunnels work in our privacy policy.](/about/privacy)
-
 </section>
 
 <section id="responsibility">
+<SectionHeading
+    title="responsibilities"
+    sectionId="responsibility"
+/>
 
-### responsibilities
 you (end user) are responsible for what you do with our tools, how you use and distribute resulting content. please be mindful when using content of others and always credit original creators. make sure you don't violate any terms or licenses.
 
 when used in educational purposes, always cite sources and credit original creators.
 
 fair use and credits benefit everyone.
-
 </section>
-<section id="abuse">
 
-### reporting abuse
-we have no way of detecting abusive behavior automatically, as cobalt is 100% anonymous. however, you can report such activities to us and we will do our best to comply manually: [safety@imput.net](mailto:safety@imput.net)
+<section id="abuse">
+<SectionHeading
+    title="reporting abuse"
+    sectionId="abuse"
+/>
 
+we have no way of detecting abusive behavior automatically, as cobalt is 100% anonymous.
+however, you can report such activities to us and we will do our best to comply manually: [safety@imput.net](mailto:safety@imput.net)
 </section>

From d1686be58339d92629c3ccd7b952180fc251595e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 17:41:10 +0600
Subject: [PATCH 11/48] web/i18n/about: replace section titles with i18n
 strings

---
 web/i18n/en/about.json       | 16 +++++++++++++++-
 web/i18n/en/about/credits.md |  6 ++++--
 web/i18n/en/about/general.md | 12 +++++++-----
 web/i18n/en/about/privacy.md | 14 ++++++++------
 web/i18n/en/about/terms.md   |  9 +++++----
 5 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/web/i18n/en/about.json b/web/i18n/en/about.json
index e566faaaf..b441512e6 100644
--- a/web/i18n/en/about.json
+++ b/web/i18n/en/about.json
@@ -12,5 +12,19 @@
     "community.twitter": "news account on twitter",
     "community.github": "github repo",
     "community.email": "support email",
-    "community.telegram": "news channel on telegram"
+    "community.telegram": "news channel on telegram",
+
+    "heading.general": "general terms",
+    "heading.licenses": "licenses",
+    "heading.summary": "best way to save what you love",
+    "heading.privacy": "leading privacy",
+    "heading.speed": "blazing speed",
+    "heading.community": "open community",
+    "heading.local": "on-device processing",
+    "heading.saving": "saving",
+    "heading.encryption": "encryption",
+    "heading.plausible": "anonymous traffic analytics",
+    "heading.cloudflare": "web privacy & security",
+    "heading.responsibility": "user responsibilities",
+    "heading.abuse": "reporting abuse"
 }
diff --git a/web/i18n/en/about/credits.md b/web/i18n/en/about/credits.md
index 442499e40..27266ea41 100644
--- a/web/i18n/en/about/credits.md
+++ b/web/i18n/en/about/credits.md
@@ -1,11 +1,13 @@
 <script lang="ts">
     import { contacts, docs } from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
     import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="meowbalt">
 <SectionHeading
-    title="meowbalt"
+    title={$t("general.meowbalt")}
     sectionId="meowbalt"
 />
 
@@ -21,7 +23,7 @@ you cannot use or modify the meowbalt character design commercially or in any fo
 
 <section id="licenses">
 <SectionHeading
-    title="cobalt licenses"
+    title={$t("about.heading.licenses")}
     sectionId="licenses"
 />
 
diff --git a/web/i18n/en/about/general.md b/web/i18n/en/about/general.md
index 1b32e8150..333e119e7 100644
--- a/web/i18n/en/about/general.md
+++ b/web/i18n/en/about/general.md
@@ -1,11 +1,13 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
     import { partners, contacts, docs } from "$lib/env";
+
     import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="saving">
 <SectionHeading
-    title="best way to save what you love"
+    title={$t("about.heading.summary")}
     sectionId="saving"
 />
 
@@ -16,7 +18,7 @@ no ads, trackers, or paywalls, no nonsense. just a convenient web app that works
 
 <section id="privacy">
 <SectionHeading
-    title="leading privacy"
+    title={$t("about.heading.privacy")}
     sectionId="privacy"
 />
 
@@ -33,7 +35,7 @@ all they'll see is that you're using cobalt.
 
 <section id="speed">
 <SectionHeading
-    title="blazing speed"
+    title={$t("about.heading.speed")}
     sectionId="speed"
 />
 
@@ -49,7 +51,7 @@ you're in good hands, and will get what you need within seconds.
 
 <section id="community">
 <SectionHeading
-    title="open community"
+    title={$t("about.heading.community")}
     sectionId="community"
 />
 
@@ -66,7 +68,7 @@ if your friend hosts one, just ask them for a domain and [add it in instance set
 
 <section id="local">
 <SectionHeading
-    title="on-device processing"
+    title={$t("about.heading.local")}
     sectionId="local"
 />
 
diff --git a/web/i18n/en/about/privacy.md b/web/i18n/en/about/privacy.md
index c76fdd4ca..b19ca762b 100644
--- a/web/i18n/en/about/privacy.md
+++ b/web/i18n/en/about/privacy.md
@@ -1,11 +1,13 @@
 <script lang="ts">
     import env from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
     import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="general">
 <SectionHeading
-    title="general terms"
+    title={$t("about.heading.general")}
     sectionId="general"
 />
 
@@ -16,7 +18,7 @@ these terms are applicable only when using the official cobalt instance. in othe
 
 <section id="local">
 <SectionHeading
-    title="on-device processing"
+    title={$t("about.heading.local")}
     sectionId="local"
 />
 
@@ -25,7 +27,7 @@ tools that use on-device processing work offline, locally, and never send any da
 
 <section id="saving">
 <SectionHeading
-    title="saving"
+    title={$t("about.heading.saving")}
     sectionId="saving"
 />
 
@@ -36,7 +38,7 @@ processed/tunneled files are never cached anywhere. everything is tunneled live.
 
 <section id="encryption">
 <SectionHeading
-    title="encryption"
+    title={$t("about.heading.encryption")}
     sectionId="encryption"
 />
 
@@ -46,7 +48,7 @@ temporarily stored tunnel data is encrypted using the AES-256 standard. decrypti
 {#if env.PLAUSIBLE_ENABLED}
 <section id="plausible">
 <SectionHeading
-    title="anonymous traffic analytics"
+    title={$t("about.heading.plausible")}
     sectionId="plausible"
 />
 
@@ -62,7 +64,7 @@ if you wish to opt out of anonymous analytics, you can do it in <a href="/settin
 
 <section id="cloudflare">
 <SectionHeading
-    title="web privacy & security"
+    title={$t("about.heading.cloudflare")}
     sectionId="cloudflare"
 />
 
diff --git a/web/i18n/en/about/terms.md b/web/i18n/en/about/terms.md
index cd0c10fd5..453030cfb 100644
--- a/web/i18n/en/about/terms.md
+++ b/web/i18n/en/about/terms.md
@@ -1,10 +1,11 @@
 <script lang="ts">
+    import { t } from "$lib/i18n/translations";
     import SectionHeading from "$components/misc/SectionHeading.svelte";
 </script>
 
 <section id="general">
 <SectionHeading
-    title="general terms"
+    title={$t("about.heading.general")}
     sectionId="general"
 />
 
@@ -13,7 +14,7 @@ these terms are applicable only when using the official cobalt instance. in othe
 
 <section id="saving">
 <SectionHeading
-    title="saving"
+    title={$t("about.heading.saving")}
     sectionId="saving"
 />
 
@@ -24,7 +25,7 @@ saving functionality simplifies downloading content from the internet and takes
 
 <section id="responsibility">
 <SectionHeading
-    title="responsibilities"
+    title={$t("about.heading.responsibility")}
     sectionId="responsibility"
 />
 
@@ -37,7 +38,7 @@ fair use and credits benefit everyone.
 
 <section id="abuse">
 <SectionHeading
-    title="reporting abuse"
+    title={$t("about.heading.abuse")}
     sectionId="abuse"
 />
 

From 97977efabd92375f270d1818f38de3b0682c2f19 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 18:44:24 +0600
Subject: [PATCH 12/48] web: generate `_headers` & add
 `Content-Security-Policy` header

---
 web/src/routes/_headers/+server.ts | 28 ++++++++++++++++++++++++++++
 web/static/_headers                |  3 ---
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 web/src/routes/_headers/+server.ts
 delete mode 100644 web/static/_headers

diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
new file mode 100644
index 000000000..2cbf4e88a
--- /dev/null
+++ b/web/src/routes/_headers/+server.ts
@@ -0,0 +1,28 @@
+export async function GET() {
+    const CSP = [
+        "default-src 'none'",
+        "script-src 'self' challenges.cloudflare.com",
+        "frame-src challenges.cloudflare.com",
+    ]
+
+    const _headers = {
+        "/*": {
+            "Cross-Origin-Opener-Policy": "same-origin",
+            "Cross-Origin-Embedder-Policy": "require-corp",
+            "Content-Security-Policy": CSP.join("; "),
+        }
+    }
+
+    return new Response(
+        Object.entries(_headers).map(
+            ([path, headers]) => [
+                path,
+                Object.entries(headers).map(
+                    ([key, value]) => `    ${key}: ${value}`
+                )
+            ].flat().join("\n")
+        ).join("\n\n")
+    );
+}
+
+export const prerender = true;
diff --git a/web/static/_headers b/web/static/_headers
deleted file mode 100644
index cabbdca54..000000000
--- a/web/static/_headers
+++ /dev/null
@@ -1,3 +0,0 @@
-/*
-    Cross-Origin-Opener-Policy: same-origin
-    Cross-Origin-Embedder-Policy: require-corp

From 732199332e6d5669545a4970501a2a06a3497299 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 19:06:46 +0600
Subject: [PATCH 13/48] web/headers: fix CSP directives & refactor

---
 web/src/routes/_headers/+server.ts | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
index 2cbf4e88a..f8b3c81df 100644
--- a/web/src/routes/_headers/+server.ts
+++ b/web/src/routes/_headers/+server.ts
@@ -1,15 +1,32 @@
+import env from "$lib/env";
+
 export async function GET() {
-    const CSP = [
-        "default-src 'none'",
-        "script-src 'self' challenges.cloudflare.com",
-        "frame-src challenges.cloudflare.com",
-    ]
+    const CSP = {
+        "connect-src": ["*"],
+        "default-src": ["'none'"],
+
+        "font-src": ["'self'"],
+        "style-src": ["'self'"],
+        "img-src": ["'self'"],
+        "manifest-src": ["'self'"],
+        "worker-src": ["'self'"],
+
+        "script-src": [
+            "'self'",
+            "challenges.cloudflare.com",
+            env.PLAUSIBLE_HOST ? env.PLAUSIBLE_HOST : ""
+        ],
+        "frame-src": ["challenges.cloudflare.com"],
+    }
 
     const _headers = {
         "/*": {
             "Cross-Origin-Opener-Policy": "same-origin",
             "Cross-Origin-Embedder-Policy": "require-corp",
-            "Content-Security-Policy": CSP.join("; "),
+            "Content-Security-Policy":
+                Object.entries(CSP).map(
+                    ([directive, values]) => `${directive} ${values.join(' ')}`
+                ).flat().join("; "),
         }
     }
 

From 9024418aff0bab9cd07a54492ef19bd94ecef13b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 19:12:13 +0600
Subject: [PATCH 14/48] web/headers: add more stuff to CSP again

---
 web/src/routes/_headers/+server.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
index f8b3c81df..96e00a8c6 100644
--- a/web/src/routes/_headers/+server.ts
+++ b/web/src/routes/_headers/+server.ts
@@ -1,5 +1,11 @@
 import env from "$lib/env";
 
+const allowedScriptOrigins = [
+    "'self'",
+    "challenges.cloudflare.com",
+    env.PLAUSIBLE_HOST ? env.PLAUSIBLE_HOST : ""
+]
+
 export async function GET() {
     const CSP = {
         "connect-src": ["*"],
@@ -7,15 +13,14 @@ export async function GET() {
 
         "font-src": ["'self'"],
         "style-src": ["'self'"],
-        "img-src": ["'self'"],
+        "style-src-attr": ["'self'"],
+        "style-src-elem": ["'self'"],
+        "img-src": ["'self'", "data:"],
         "manifest-src": ["'self'"],
         "worker-src": ["'self'"],
 
-        "script-src": [
-            "'self'",
-            "challenges.cloudflare.com",
-            env.PLAUSIBLE_HOST ? env.PLAUSIBLE_HOST : ""
-        ],
+        "script-src": allowedScriptOrigins,
+        "script-src-attr": allowedScriptOrigins,
         "frame-src": ["challenges.cloudflare.com"],
     }
 

From 52599dd90035863726f7a28631305303eb061889 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 19:16:23 +0600
Subject: [PATCH 15/48] web/headers: update csp yet again

whatever dude
---
 web/src/routes/_headers/+server.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
index 96e00a8c6..708d69acb 100644
--- a/web/src/routes/_headers/+server.ts
+++ b/web/src/routes/_headers/+server.ts
@@ -9,15 +9,7 @@ const allowedScriptOrigins = [
 export async function GET() {
     const CSP = {
         "connect-src": ["*"],
-        "default-src": ["'none'"],
-
-        "font-src": ["'self'"],
-        "style-src": ["'self'"],
-        "style-src-attr": ["'self'"],
-        "style-src-elem": ["'self'"],
-        "img-src": ["'self'", "data:"],
-        "manifest-src": ["'self'"],
-        "worker-src": ["'self'"],
+        "default-src": ["'self'"],
 
         "script-src": allowedScriptOrigins,
         "script-src-attr": allowedScriptOrigins,

From 026cb634ecf9162dbec28e04f685f123821d199f Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:11:47 +0600
Subject: [PATCH 16/48] web: update & move csp to `svelte.config.js`

ough
---
 pnpm-lock.yaml                     |  3 +++
 web/package.json                   |  1 +
 web/src/routes/_headers/+server.ts | 21 ---------------
 web/svelte.config.js               | 43 ++++++++++++++++++++++++++----
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d3162777..90995fb6c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -140,6 +140,9 @@ importers:
       compare-versions:
         specifier: ^6.1.0
         version: 6.1.1
+      dotenv:
+        specifier: ^16.0.1
+        version: 16.4.5
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
diff --git a/web/package.json b/web/package.json
index 67c779bcc..2d4a3e61b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,7 @@
         "@types/fluent-ffmpeg": "^2.1.25",
         "@types/node": "^20.14.10",
         "compare-versions": "^6.1.0",
+        "dotenv": "^16.0.1",
         "eslint": "^8.57.0",
         "glob": "^10.4.5",
         "mdsvex": "^0.11.2",
diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
index 708d69acb..cdeb1f9ce 100644
--- a/web/src/routes/_headers/+server.ts
+++ b/web/src/routes/_headers/+server.ts
@@ -1,29 +1,8 @@
-import env from "$lib/env";
-
-const allowedScriptOrigins = [
-    "'self'",
-    "challenges.cloudflare.com",
-    env.PLAUSIBLE_HOST ? env.PLAUSIBLE_HOST : ""
-]
-
 export async function GET() {
-    const CSP = {
-        "connect-src": ["*"],
-        "default-src": ["'self'"],
-
-        "script-src": allowedScriptOrigins,
-        "script-src-attr": allowedScriptOrigins,
-        "frame-src": ["challenges.cloudflare.com"],
-    }
-
     const _headers = {
         "/*": {
             "Cross-Origin-Opener-Policy": "same-origin",
             "Cross-Origin-Embedder-Policy": "require-corp",
-            "Content-Security-Policy":
-                Object.entries(CSP).map(
-                    ([directive, values]) => `${directive} ${values.join(' ')}`
-                ).flat().join("; "),
         }
     }
 
diff --git a/web/svelte.config.js b/web/svelte.config.js
index 522638711..28602c1e6 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -1,8 +1,10 @@
-import adapter from '@sveltejs/adapter-static';
-import { mdsvex } from 'mdsvex';
-import { fileURLToPath } from 'node:url';
-import { dirname, join } from 'node:path';
-import { sveltePreprocess } from 'svelte-preprocess';
+import "dotenv/config";
+import adapter from "@sveltejs/adapter-static";
+
+import { mdsvex } from "mdsvex";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+import { sveltePreprocess } from "svelte-preprocess";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -46,6 +48,37 @@ const config = {
             precompress: false,
             strict: true
         }),
+        csp: {
+            mode: "hash",
+            directives: {
+                "connect-src": ["*"],
+                "default-src": ["none"],
+
+                "font-src": ["self"],
+                "style-src": ["self", "unsafe-inline"],
+                "img-src": ["self", "data:"],
+                "manifest-src": ["self"],
+                "worker-src": ["self"],
+
+                "object-src": ["none"],
+                "frame-src": [
+                    "self",
+                    "challenges.cloudflare.com"
+                ],
+
+                "script-src": [
+                    "self",
+                    "wasm-unsafe-eval",
+                    "challenges.cloudflare.com",
+
+                    // eslint-disable-next-line no-undef
+                    process.env.WEB_PLAUSIBLE_HOST ? process.env.WEB_PLAUSIBLE_HOST : "",
+
+                    // hash of the theme preloader in app.html
+                    "sha256-g67gIjM3G8yMbjbxyc3QUoVsKhdxgcQzCmSKXiZZo6s=",
+                ]
+            }
+        },
         env: {
             publicPrefix: 'WEB_'
         },

From b30b6957ce52fc3a0f5122cbcfe72473b0702784 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:15:56 +0600
Subject: [PATCH 17/48] web/package: move dependencies to devDependencies

---
 pnpm-lock.yaml   | 45 ++++++++++++++++++++++-----------------------
 web/package.json | 20 +++++++++-----------
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 90995fb6c..220a2cf33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,41 +84,25 @@ importers:
   packages/version-info: {}
 
   web:
-    dependencies:
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.5.0
+        version: 9.8.0
       '@fontsource-variable/noto-sans-mono':
         specifier: ^5.0.20
         version: 5.0.20
       '@fontsource/ibm-plex-mono':
         specifier: ^5.0.13
         version: 5.0.13
+      '@fontsource/redaction-10':
+        specifier: ^5.0.2
+        version: 5.0.2
       '@imput/libav.js-remux-cli':
         specifier: ^5.5.6
         version: 5.5.6
       '@imput/version-info':
         specifier: workspace:^
         version: link:../packages/version-info
-      '@tabler/icons-svelte':
-        specifier: 3.6.0
-        version: 3.6.0(svelte@4.2.18)
-      '@vitejs/plugin-basic-ssl':
-        specifier: ^1.1.0
-        version: 1.1.0(vite@5.3.5(@types/node@20.14.14))
-      mime:
-        specifier: ^4.0.4
-        version: 4.0.4
-      sveltekit-i18n:
-        specifier: ^2.4.2
-        version: 2.4.2(svelte@4.2.18)
-      ts-deepmerge:
-        specifier: ^7.0.0
-        version: 7.0.1
-    devDependencies:
-      '@eslint/js':
-        specifier: ^9.5.0
-        version: 9.8.0
-      '@fontsource/redaction-10':
-        specifier: ^5.0.2
-        version: 5.0.2
       '@sveltejs/adapter-static':
         specifier: ^3.0.2
         version: 3.0.2(@sveltejs/kit@2.5.19(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14)))
@@ -128,6 +112,9 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.0.0
         version: 3.1.1(svelte@4.2.18)(vite@5.3.5(@types/node@20.14.14))
+      '@tabler/icons-svelte':
+        specifier: 3.6.0
+        version: 3.6.0(svelte@4.2.18)
       '@types/eslint__js':
         specifier: ^8.42.3
         version: 8.42.3
@@ -137,6 +124,9 @@ importers:
       '@types/node':
         specifier: ^20.14.10
         version: 20.14.14
+      '@vitejs/plugin-basic-ssl':
+        specifier: ^1.1.0
+        version: 1.1.0(vite@5.3.5(@types/node@20.14.14))
       compare-versions:
         specifier: ^6.1.0
         version: 6.1.1
@@ -152,6 +142,9 @@ importers:
       mdsvex:
         specifier: ^0.11.2
         version: 0.11.2(svelte@4.2.18)
+      mime:
+        specifier: ^4.0.4
+        version: 4.0.4
       svelte:
         specifier: ^4.2.7
         version: 4.2.18
@@ -161,6 +154,12 @@ importers:
       svelte-preprocess:
         specifier: ^6.0.2
         version: 6.0.2(postcss@8.4.40)(svelte@4.2.18)(typescript@5.5.4)
+      sveltekit-i18n:
+        specifier: ^2.4.2
+        version: 2.4.2(svelte@4.2.18)
+      ts-deepmerge:
+        specifier: ^7.0.1
+        version: 7.0.1
       tslib:
         specifier: ^2.4.1
         version: 2.6.3
diff --git a/web/package.json b/web/package.json
index 2d4a3e61b..645b077db 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,36 +25,34 @@
     "homepage": "https://cobalt.tools/",
     "devDependencies": {
         "@eslint/js": "^9.5.0",
+        "@fontsource-variable/noto-sans-mono": "^5.0.20",
+        "@fontsource/ibm-plex-mono": "^5.0.13",
         "@fontsource/redaction-10": "^5.0.2",
+        "@imput/libav.js-remux-cli": "^5.5.6",
+        "@imput/version-info": "workspace:^",
         "@sveltejs/adapter-static": "^3.0.2",
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@tabler/icons-svelte": "3.6.0",
         "@types/eslint__js": "^8.42.3",
         "@types/fluent-ffmpeg": "^2.1.25",
         "@types/node": "^20.14.10",
+        "@vitejs/plugin-basic-ssl": "^1.1.0",
         "compare-versions": "^6.1.0",
         "dotenv": "^16.0.1",
         "eslint": "^8.57.0",
         "glob": "^10.4.5",
         "mdsvex": "^0.11.2",
+        "mime": "^4.0.4",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
         "svelte-preprocess": "^6.0.2",
+        "sveltekit-i18n": "^2.4.2",
+        "ts-deepmerge": "^7.0.1",
         "tslib": "^2.4.1",
         "turnstile-types": "^1.2.2",
         "typescript": "^5.4.5",
         "typescript-eslint": "^7.13.1",
         "vite": "^5.0.3"
-    },
-    "dependencies": {
-        "@fontsource-variable/noto-sans-mono": "^5.0.20",
-        "@fontsource/ibm-plex-mono": "^5.0.13",
-        "@imput/libav.js-remux-cli": "^5.5.6",
-        "@imput/version-info": "workspace:^",
-        "@tabler/icons-svelte": "3.6.0",
-        "@vitejs/plugin-basic-ssl": "^1.1.0",
-        "mime": "^4.0.4",
-        "sveltekit-i18n": "^2.4.2",
-        "ts-deepmerge": "^7.0.0"
     }
 }

From ce054e63fc0fbb2d11e3f52b43024952a9aaf361 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:23:29 +0600
Subject: [PATCH 18/48] web/settings: improve settings section ids

---
 web/src/routes/settings/audio/+page.svelte    | 5 ++---
 web/src/routes/settings/download/+page.svelte | 2 +-
 web/src/routes/settings/video/+page.svelte    | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/src/routes/settings/audio/+page.svelte b/web/src/routes/settings/audio/+page.svelte
index e2cda6f63..8ea9f34a2 100644
--- a/web/src/routes/settings/audio/+page.svelte
+++ b/web/src/routes/settings/audio/+page.svelte
@@ -9,7 +9,7 @@
     import SettingsToggle from "$components/buttons/SettingsToggle.svelte";
 </script>
 
-<SettingsCategory sectionId="audio-format" title={$t("settings.audio.format")}>
+<SettingsCategory sectionId="format" title={$t("settings.audio.format")}>
     <Switcher big={true} description={$t("settings.audio.format.description")}>
         {#each audioFormatOptions as value}
             <SettingsButton
@@ -23,8 +23,7 @@
     </Switcher>
 </SettingsCategory>
 
-
-<SettingsCategory sectionId="audio-bitrate" title={$t("settings.audio.bitrate")}>
+<SettingsCategory sectionId="bitrate" title={$t("settings.audio.bitrate")}>
     <Switcher big={true} description={$t("settings.audio.bitrate.description")}>
         {#each audioBitrateOptions as value}
             <SettingsButton
diff --git a/web/src/routes/settings/download/+page.svelte b/web/src/routes/settings/download/+page.svelte
index 91b750433..48a2b433d 100644
--- a/web/src/routes/settings/download/+page.svelte
+++ b/web/src/routes/settings/download/+page.svelte
@@ -45,7 +45,7 @@
 </SettingsCategory>
 
 <SettingsCategory
-    sectionId="disable-metadata"
+    sectionId="metadata"
     title={$t("settings.metadata.file")}
 >
     <SettingsToggle
diff --git a/web/src/routes/settings/video/+page.svelte b/web/src/routes/settings/video/+page.svelte
index 38ce0d8d6..c43016cbf 100644
--- a/web/src/routes/settings/video/+page.svelte
+++ b/web/src/routes/settings/video/+page.svelte
@@ -17,7 +17,7 @@
 </script>
 
 <SettingsCategory
-    sectionId="video-quality"
+    sectionId="quality"
     title={$t("settings.video.quality")}
 >
     <Switcher big={true} description={$t("settings.video.quality.description")}>
@@ -34,7 +34,7 @@
 </SettingsCategory>
 
 <SettingsCategory
-    sectionId="youtube-codec"
+    sectionId="codec"
     title={$t("settings.video.youtube.codec")}
 >
     <Switcher

From 9ea6b09e7e832dcaec4d416ec731732ebad80897 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:30:35 +0600
Subject: [PATCH 19/48] web/PageNav: add fade in animation for subtitle

---
 web/src/components/subnav/PageNav.svelte | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/subnav/PageNav.svelte b/web/src/components/subnav/PageNav.svelte
index c3255c78a..ccb2afa18 100644
--- a/web/src/components/subnav/PageNav.svelte
+++ b/web/src/components/subnav/PageNav.svelte
@@ -73,7 +73,10 @@
                 </h3>
             {:else}
                 {#if pageSubtitle}
-                    <div class="subtext subnav-subtitle">
+                    <div
+                        class="subtext subnav-subtitle"
+                        class:hidden={pageSubtitle === "\xa0"}
+                    >
                         {pageSubtitle}
                     </div>
                 {/if}
@@ -89,7 +92,10 @@
         >
             <slot name="navigation"></slot>
             {#if isMobile && isHome && pageSubtitle}
-                <div class="subtext subnav-subtitle center">
+                <div
+                    class="subtext subnav-subtitle center"
+                    class:hidden={pageSubtitle === "\xa0"}
+                >
                     {pageSubtitle}
                 </div>
             {/if}
@@ -170,6 +176,11 @@
 
     .subnav-subtitle {
         padding: 0;
+        transition: opacity 0.1s;
+    }
+
+    .subnav-subtitle.hidden {
+        opacity: 0;
     }
 
     .subnav-subtitle.center {

From 643e9775f56aa9ebe0210a0462da3e88d01b43d8 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 20:57:52 +0600
Subject: [PATCH 20/48] web/DonationOptionsCard: move href inside the option
 button

---
 web/src/components/donate/DonateBanner.svelte  |  2 --
 .../components/donate/DonateOptionsCard.svelte | 12 +++++++-----
 .../components/donate/DonationOption.svelte    | 18 ++++++++++++------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/web/src/components/donate/DonateBanner.svelte b/web/src/components/donate/DonateBanner.svelte
index b9b4a956b..91d24203d 100644
--- a/web/src/components/donate/DonateBanner.svelte
+++ b/web/src/components/donate/DonateBanner.svelte
@@ -5,8 +5,6 @@
 
     import Imput from "$components/icons/Imput.svelte";
     import Meowbalt from "$components/misc/Meowbalt.svelte";
-
-    import IconHeart from "@tabler/icons-svelte/IconHeart.svelte";
 </script>
 
 <header id="banner">
diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index 66bfe021a..4a1625195 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -107,11 +107,13 @@
     </div>
     <div id="donation-options">
         {#each Object.entries(PRESET_DONATION_AMOUNTS) as [ amount, component ]}
-            <OuterLink href={donationMethods[processor](+amount * 100)}>
-                <DonationOption price={+amount} desc={$t(`donate.card.option.${amount}`)}>
-                    <svelte:component this={component} />
-                </DonationOption>
-            </OuterLink>
+            <DonationOption
+                price={+amount}
+                desc={$t(`donate.card.option.${amount}`)}
+                href={donationMethods[processor](+amount * 100)}
+            >
+                <svelte:component this={component} />
+            </DonationOption>
         {/each}
     </div>
     <div id="donation-custom">
diff --git a/web/src/components/donate/DonationOption.svelte b/web/src/components/donate/DonationOption.svelte
index 91bcee7bb..7e5ca917c 100644
--- a/web/src/components/donate/DonationOption.svelte
+++ b/web/src/components/donate/DonationOption.svelte
@@ -1,18 +1,24 @@
 <script lang="ts">
     export let price: number;
     export let desc: string;
+    export let href: string;
 
-    const USD = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        minimumFractionDigits: 0
+    const USD = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 0,
     });
 </script>
 
-<button class="donation-option">
+<button
+    class="donation-option"
+    on:click={() => {
+        window.open(href, "_blank");
+    }}
+>
     <div class="donate-card-title">
         <slot></slot>
-        { USD.format(price) }
+        {USD.format(price)}
     </div>
     <div class="donate-card-subtitle">{desc}</div>
 </button>

From 2cb9735b28ddcd8f073999590c08f040b1f24d52 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 21:24:13 +0600
Subject: [PATCH 21/48] web/package: bump version to 10.1.0

---
 web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/package.json b/web/package.json
index 645b077db..69de03cab 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@imput/cobalt-web",
-    "version": "10.0.0",
+    "version": "10.1.0",
     "type": "module",
     "private": true,
     "scripts": {

From a6b940e6c9f0dcde568055e4e67bb5169f1e4dff Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 21:24:24 +0600
Subject: [PATCH 22/48] api/package: bump version to 10.1.0

---
 api/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/api/package.json b/api/package.json
index 8ebe4c7e0..e37c839dd 100644
--- a/api/package.json
+++ b/api/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@imput/cobalt-api",
     "description": "save what you love",
-    "version": "10.0.0",
+    "version": "10.1.0",
     "author": "imput",
     "exports": "./src/cobalt.js",
     "type": "module",

From 7ba56f85be9b6768d6d3060954fef01a141adaa6 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Wed, 18 Sep 2024 21:42:09 +0600
Subject: [PATCH 23/48] web/SectionHeading: fix line height of beta tag

---
 web/src/components/misc/SectionHeading.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
index 1c87ae92b..7d47f6b67 100644
--- a/web/src/components/misc/SectionHeading.svelte
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -79,7 +79,7 @@
         color: var(--primary);
         font-size: 11px;
         font-weight: 500;
-        line-height: 2;
+        line-height: 1.9;
         text-transform: uppercase;
     }
 

From 8162877a47e73ac12d2ad40df62bccfd1878c796 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Thu, 19 Sep 2024 17:04:04 +0600
Subject: [PATCH 24/48] web/i18n/settings: update preferred language
 description

---
 web/i18n/en/settings.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/i18n/en/settings.json b/web/i18n/en/settings.json
index 90b2e0f6e..fba788e26 100644
--- a/web/i18n/en/settings.json
+++ b/web/i18n/en/settings.json
@@ -91,7 +91,7 @@
     "language.auto.title": "automatic selection",
     "language.auto.description": "cobalt will use your browser's default language if translation is available. if not, english will be used instead.",
     "language.preferred.title": "preferred language",
-    "language.preferred.description": "this language will be used when automatic selection is disabled. any text that isn't translated will be displayed in english.",
+    "language.preferred.description": "this language will be used when automatic selection is disabled. any text that isn't translated will be displayed in english.\n\nwe use community-sourced translations for languages other than english, russian, and czech. they may be inaccurate or incomplete.",
 
     "privacy.analytics": "anonymous traffic analytics",
     "privacy.analytics.title": "don't contribute to analytics",

From c99240339dfb26b133d06b559c06ade095c2fec3 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 20 Sep 2024 15:20:25 +0600
Subject: [PATCH 25/48] web/Omnibox: allow input while antibot check is ongoing
 & fix spinner

---
 web/src/components/save/Omnibox.svelte        | 25 +++++++++++--------
 .../save/buttons/DownloadButton.svelte        |  2 ++
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index c641fc71d..c8ad692dc 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -36,6 +36,8 @@
 
     let isFocused = false;
     let isDisabled = false;
+    let isBotCheckOngoing = false;
+    let isLoading = false;
 
     const validLink = (url: string) => {
         try {
@@ -57,18 +59,18 @@
         goto("/", { replaceState: true });
     }
 
-    // FIXME: figure out why regular processing spinner
-    // doesn't show up after turnstile loads
     $: if ($cachedInfo?.info?.cobalt?.turnstileSitekey) {
         if ($turnstileLoaded) {
-            isDisabled = false;
+            isBotCheckOngoing = false;
         } else {
-            isDisabled = true;
+            isBotCheckOngoing = true;
         }
+    } else {
+        isBotCheckOngoing = false;
     }
 
     const pasteClipboard = () => {
-        if (isDisabled || $dialogs.length > 0) {
+        if ($dialogs.length > 0 || isDisabled || isLoading) {
             return;
         }
 
@@ -77,8 +79,10 @@
             if (matchLink) {
                 $link = matchLink[0];
 
-                await tick(); // wait for button to render
-                downloadButton.download($link);
+                if (!isBotCheckOngoing) {
+                    await tick(); // wait for button to render
+                    downloadButton.download($link);
+                }
             }
         });
     };
@@ -88,7 +92,7 @@
     };
 
     const handleKeydown = (e: KeyboardEvent) => {
-        if (!linkInput || $dialogs.length > 0 || isDisabled) {
+        if (!linkInput || $dialogs.length > 0 || isDisabled || isLoading) {
             return;
         }
 
@@ -135,8 +139,8 @@
         class:focused={isFocused}
         class:downloadable={validLink($link)}
     >
-        <div id="input-link-icon" class:loading={isDisabled}>
-            {#if isDisabled}
+        <div id="input-link-icon" class:loading={isLoading || isBotCheckOngoing}>
+            {#if isLoading || isBotCheckOngoing}
                 <IconLoader2 />
             {:else}
                 <IconLink />
@@ -168,6 +172,7 @@
                 url={$link}
                 bind:this={downloadButton}
                 bind:disabled={isDisabled}
+                bind:loading={isLoading}
             />
         {/if}
     </div>
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 08800e884..e8d24f0f3 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -10,6 +10,7 @@
 
     export let url: string;
     export let disabled = false;
+    export let loading = false;
 
     $: buttonText = ">>";
     $: buttonAltText = $t("a11y.save.download");
@@ -31,6 +32,7 @@
 
     const changeDownloadButton = (state: DownloadButtonState) => {
         disabled = state !== "idle";
+        loading = state === "think" || state === "check";
 
         buttonText = {
             idle: ">>",

From c0bb63748004f48b9becffc41998cf65f9a29691 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 20 Sep 2024 15:20:53 +0600
Subject: [PATCH 26/48] web/DownloadButton: show a message about ongoing
 antibot check

---
 web/i18n/en/error.json                               |  2 ++
 .../components/save/buttons/DownloadButton.svelte    | 12 ++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/web/i18n/en/error.json b/web/i18n/en/error.json
index 6a7300520..2b5e09c61 100644
--- a/web/i18n/en/error.json
+++ b/web/i18n/en/error.json
@@ -8,6 +8,8 @@
 
     "tunnel.probe": "couldn't verify whether you can download this file. try again in a few seconds!",
 
+    "captcha_ongoing": "still checking if you're not a bot. wait for the spinner to disappear and try again.\n\nif it takes too long, please let us know! we use cloudflare turnstile for bot protection and sometimes it blocks people for no reason.",
+
     "api.auth.jwt.missing": "couldn't confirm whether you're not a robot because the processing server didn't receive the human access token. try again in a few seconds or reload the page!",
     "api.auth.jwt.invalid": "couldn't confirm whether you're not a robot because your human access token expired and wasn't renewed. try again in a few seconds or reload the page!",
     "api.auth.turnstile.missing": "couldn't confirm whether you're not a robot because the processing server didn't receive the human access token. try again in a few seconds or reload the page!",
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index e8d24f0f3..22ae8ccb5 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -6,6 +6,9 @@
     import { createDialog } from "$lib/dialogs";
     import { downloadFile } from "$lib/download";
 
+    import { cachedInfo } from "$lib/api/server-info";
+    import { turnstileLoaded } from "$lib/state/turnstile";
+
     import type { DialogInfo } from "$lib/types/dialog";
 
     export let url: string;
@@ -63,6 +66,15 @@
     export const download = async (link: string) => {
         changeDownloadButton("think");
 
+        if ($cachedInfo?.info?.cobalt?.turnstileSitekey && !$turnstileLoaded) {
+            changeDownloadButton("error");
+
+            return createDialog({
+                ...defaultErrorPopup,
+                bodyText: $t("error.captcha_ongoing"),
+            });
+        }
+
         const response = await API.request(link);
 
         if (!response) {

From 92008d301236acb9571f06c4cb3d3d3a39e8fb85 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 20 Sep 2024 15:22:29 +0600
Subject: [PATCH 27/48] web/Omnibox: hide the clear button if request is
 processing

---
 web/src/components/save/Omnibox.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index c8ad692dc..dfbd560e8 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -35,9 +35,10 @@
     let downloadButton: SvelteComponent;
 
     let isFocused = false;
+
     let isDisabled = false;
-    let isBotCheckOngoing = false;
     let isLoading = false;
+    let isBotCheckOngoing = false;
 
     const validLink = (url: string) => {
         try {
@@ -164,7 +165,7 @@
             disabled={isDisabled}
         />
 
-        {#if $link}
+        {#if $link && !isLoading}
             <ClearButton click={() => ($link = "")} />
         {/if}
         {#if validLink($link)}

From 819c7a4fa09fd70b0f48caa28f8a5fb4d196345c Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Fri, 20 Sep 2024 18:28:35 +0600
Subject: [PATCH 28/48] web/DownloadButton: check server info before main
 request

---
 .../components/save/buttons/DownloadButton.svelte   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 22ae8ccb5..6437958e2 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -6,7 +6,7 @@
     import { createDialog } from "$lib/dialogs";
     import { downloadFile } from "$lib/download";
 
-    import { cachedInfo } from "$lib/api/server-info";
+    import { cachedInfo, getServerInfo } from "$lib/api/server-info";
     import { turnstileLoaded } from "$lib/state/turnstile";
 
     import type { DialogInfo } from "$lib/types/dialog";
@@ -66,6 +66,17 @@
     export const download = async (link: string) => {
         changeDownloadButton("think");
 
+        await getServerInfo();
+
+        if (!$cachedInfo) {
+            changeDownloadButton("error");
+
+            return createDialog({
+                ...defaultErrorPopup,
+                bodyText: $t("error.api.unreachable"),
+            });
+        }
+
         if ($cachedInfo?.info?.cobalt?.turnstileSitekey && !$turnstileLoaded) {
             changeDownloadButton("error");
 

From 5ba83f3d56dc898728e3e6429344ec171348ebc8 Mon Sep 17 00:00:00 2001
From: dumbmoron <log@riseup.net>
Date: Sat, 21 Sep 2024 09:08:45 +0000
Subject: [PATCH 29/48] web/polyfills: add polyfill for AbortSignal.timeout

---
 web/src/lib/polyfills.ts                     |  1 +
 web/src/lib/polyfills/abortsignal-timeout.ts | 10 ++++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 web/src/lib/polyfills/abortsignal-timeout.ts

diff --git a/web/src/lib/polyfills.ts b/web/src/lib/polyfills.ts
index b5917b5c6..621c9b2bb 100644
--- a/web/src/lib/polyfills.ts
+++ b/web/src/lib/polyfills.ts
@@ -1 +1,2 @@
 import "./polyfills/user-activation";
+import "./polyfills/abortsignal-timeout";
diff --git a/web/src/lib/polyfills/abortsignal-timeout.ts b/web/src/lib/polyfills/abortsignal-timeout.ts
new file mode 100644
index 000000000..8d9b3c667
--- /dev/null
+++ b/web/src/lib/polyfills/abortsignal-timeout.ts
@@ -0,0 +1,10 @@
+import { browser } from "$app/environment";
+
+if (browser && 'AbortSignal' in window && !window.AbortSignal.timeout) {
+    window.AbortSignal.timeout = (milliseconds: number) => {
+        const controller = new AbortController();
+        setTimeout(() => controller.abort("timed out"), milliseconds);
+
+        return controller.signal;
+    }
+}

From dfaef913c4da711b4c58d450808026470dab156e Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:05:40 +0600
Subject: [PATCH 30/48] web/DownloadButton: move server info cache checks to
 the api lib

---
 .../save/buttons/DownloadButton.svelte        | 23 ----------------
 web/src/lib/api/api.ts                        | 27 +++++++++++++++++--
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 6437958e2..e8d24f0f3 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -6,9 +6,6 @@
     import { createDialog } from "$lib/dialogs";
     import { downloadFile } from "$lib/download";
 
-    import { cachedInfo, getServerInfo } from "$lib/api/server-info";
-    import { turnstileLoaded } from "$lib/state/turnstile";
-
     import type { DialogInfo } from "$lib/types/dialog";
 
     export let url: string;
@@ -66,26 +63,6 @@
     export const download = async (link: string) => {
         changeDownloadButton("think");
 
-        await getServerInfo();
-
-        if (!$cachedInfo) {
-            changeDownloadButton("error");
-
-            return createDialog({
-                ...defaultErrorPopup,
-                bodyText: $t("error.api.unreachable"),
-            });
-        }
-
-        if ($cachedInfo?.info?.cobalt?.turnstileSitekey && !$turnstileLoaded) {
-            changeDownloadButton("error");
-
-            return createDialog({
-                ...defaultErrorPopup,
-                bodyText: $t("error.captcha_ongoing"),
-            });
-        }
-
         const response = await API.request(link);
 
         if (!response) {
diff --git a/web/src/lib/api/api.ts b/web/src/lib/api/api.ts
index 69ed06915..19f27c94a 100644
--- a/web/src/lib/api/api.ts
+++ b/web/src/lib/api/api.ts
@@ -5,8 +5,9 @@ import lazySettingGetter from "$lib/settings/lazy-get";
 
 import { getSession } from "$lib/api/session";
 import { currentApiURL } from "$lib/api/api-url";
-import { cachedInfo } from "$lib/api/server-info";
+import { turnstileLoaded } from "$lib/state/turnstile";
 import { apiOverrideWarning } from "$lib/api/safety-warning";
+import { cachedInfo, getServerInfo } from "$lib/api/server-info";
 
 import type { Optional } from "$lib/types/generic";
 import type { CobaltAPIResponse, CobaltErrorResponse } from "$lib/types/api";
@@ -37,9 +38,31 @@ const request = async (url: string) => {
 
     await apiOverrideWarning();
 
+    await getServerInfo();
+
+    const getCachedInfo = get(cachedInfo);
+
+    if (!getCachedInfo) {
+        return {
+            status: "error",
+            error: {
+                code: "error.api.unreachable"
+            }
+        } as CobaltErrorResponse;
+    }
+
+    if (getCachedInfo?.info?.cobalt?.turnstileSitekey && !get(turnstileLoaded)) {
+        return {
+            status: "error",
+            error: {
+                code: "error.captcha_ongoing"
+            }
+        } as CobaltErrorResponse;
+    }
+
     const api = currentApiURL();
 
-    const session = get(cachedInfo)?.info?.cobalt?.turnstileSitekey
+    const session = getCachedInfo?.info?.cobalt?.turnstileSitekey
                     ? await getSession() : undefined;
 
     let extraHeaders = {}

From a7b61dd24cc78e132f8713e9fdc3277880205f56 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:15:07 +0600
Subject: [PATCH 31/48] web/SidebarTab: fix double scale on press, hold,
 release

---
 web/src/components/sidebar/SidebarTab.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index b7866fbaa..73360005f 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -67,6 +67,8 @@
         text-decoration-line: none;
         position: relative;
         scroll-behavior: smooth;
+
+        cursor: pointer;
     }
 
     .sidebar-tab :global(svg) {
@@ -84,10 +86,12 @@
         background: var(--sidebar-highlight);
         opacity: 1;
         transform: none;
+        transition: none;
         animation: pressButton 0.3s;
+        cursor: default;
     }
 
-    .sidebar-tab:active {
+    .sidebar-tab:not(.active):active {
         transform: scale(0.95);
     }
 

From a5c704c5f020f8c55edbe16b8361af751db77a02 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:15:19 +0600
Subject: [PATCH 32/48] web/PageNavTab: fix cursor appearance

---
 web/src/components/subnav/PageNavTab.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/web/src/components/subnav/PageNavTab.svelte b/web/src/components/subnav/PageNavTab.svelte
index 380b9c03f..898174fda 100644
--- a/web/src/components/subnav/PageNavTab.svelte
+++ b/web/src/components/subnav/PageNavTab.svelte
@@ -47,6 +47,8 @@
 
         text-decoration: none;
         text-decoration-line: none;
+
+        cursor: pointer;
     }
 
     .subnav-tab-left {
@@ -93,6 +95,7 @@
     .subnav-tab.active {
         background: var(--secondary);
         color: var(--primary);
+        cursor: default;
     }
 
     .subnav-tab-text {

From 2bee3e896dfdf555eb4f87249f926c5e8f1d3b64 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:21:23 +0600
Subject: [PATCH 33/48] web/SectionHeading: fix weird wrapping

---
 web/src/components/misc/SectionHeading.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
index 7d47f6b67..31e270030 100644
--- a/web/src/components/misc/SectionHeading.svelte
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -39,7 +39,7 @@
     .heading-container {
         display: flex;
         flex-direction: row;
-        flex-wrap: wrap;
+        flex-wrap: wrap-reverse;
         gap: 6px;
         justify-content: start;
         align-items: center;

From 128a1ff69634108c81e7afa91295921710a07e56 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:28:03 +0600
Subject: [PATCH 34/48] web/ManageSettings: add wrapping (oops)

---
 web/src/components/settings/ManageSettings.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/settings/ManageSettings.svelte b/web/src/components/settings/ManageSettings.svelte
index 4b5804f81..4a28aa729 100644
--- a/web/src/components/settings/ManageSettings.svelte
+++ b/web/src/components/settings/ManageSettings.svelte
@@ -122,5 +122,6 @@
     .button-row {
         display: flex;
         gap: var(--padding);
+        flex-wrap: wrap;
     }
 </style>

From 1473f220cb0134b3d13b8ebf5d0eb568fdb2c037 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 15:42:25 +0600
Subject: [PATCH 35/48] web/SectionHeading: make the link button always visible

scaling and 40 letter german words will be the death of me
---
 web/src/components/misc/SectionHeading.svelte | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/web/src/components/misc/SectionHeading.svelte b/web/src/components/misc/SectionHeading.svelte
index 31e270030..4645f2d00 100644
--- a/web/src/components/misc/SectionHeading.svelte
+++ b/web/src/components/misc/SectionHeading.svelte
@@ -51,13 +51,17 @@
         padding: 2px;
         box-shadow: none;
         border-radius: 5px;
-        transition: opacity 0.1s;
+        transition: opacity 0.2s;
+        opacity: 0.7;
+    }
+
+    .link-copy:focus-visible {
+        opacity: 1;
     }
 
     .link-copy :global(.copy-animation) {
         width: 17px;
         height: 17px;
-        opacity: 0.7;
     }
 
     .link-copy :global(.copy-animation *) {
@@ -65,10 +69,6 @@
         height: 17px;
     }
 
-    .link-copy :global(.copy-animation):hover {
-        opacity: 1;
-    }
-
     .beta-label {
         display: flex;
         justify-content: center;
@@ -84,10 +84,6 @@
     }
 
     @media (hover: hover) {
-        .link-copy:not(:focus-visible) {
-            opacity: 0;
-        }
-
         .heading-container:hover .link-copy {
             opacity: 1;
         }

From 490bdb729e390e0b6dc6d2ecf7f306be17c09e25 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 16:22:18 +0600
Subject: [PATCH 36/48] web/Omnibox: add aria label for loading captcha state

---
 web/i18n/en/a11y/save.json             | 1 +
 web/src/components/save/Omnibox.svelte | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/i18n/en/a11y/save.json b/web/i18n/en/a11y/save.json
index 3a92de641..2dc85154b 100644
--- a/web/i18n/en/a11y/save.json
+++ b/web/i18n/en/a11y/save.json
@@ -1,5 +1,6 @@
 {
     "link_area": "link input area",
+    "link_area.turnstile": "link input area. checking if you're not a robot.",
     "clear_input": "clear input",
     "download": "download",
     "download.think": "processing the link...",
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index dfbd560e8..a900def74 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -140,7 +140,10 @@
         class:focused={isFocused}
         class:downloadable={validLink($link)}
     >
-        <div id="input-link-icon" class:loading={isLoading || isBotCheckOngoing}>
+        <div
+            id="input-link-icon"
+            class:loading={isLoading || isBotCheckOngoing}
+        >
             {#if isLoading || isBotCheckOngoing}
                 <IconLoader2 />
             {:else}
@@ -160,7 +163,9 @@
             autocapitalize="off"
             maxlength="512"
             placeholder={$t("save.input.placeholder")}
-            aria-label={$t("a11y.save.link_area")}
+            aria-label={isBotCheckOngoing
+                ? $t("a11y.save.link_area.turnstile")
+                : $t("a11y.save.link_area")}
             data-form-type="other"
             disabled={isDisabled}
         />

From af337cbfce7fea76935a0a95154ffe142a30946a Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 16:23:38 +0600
Subject: [PATCH 37/48] web/error: make youtube codec error easier to
 understand

---
 web/i18n/en/error.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/i18n/en/error.json b/web/i18n/en/error.json
index 2b5e09c61..b0431729b 100644
--- a/web/i18n/en/error.json
+++ b/web/i18n/en/error.json
@@ -47,7 +47,7 @@
     "api.content.post.private": "this post is from a private account, so i can't access it. have you pasted the right link?",
     "api.content.post.age": "this post is age-restricted, so i can't access it anonymously. have you pasted the right link?",
 
-    "api.youtube.codec": "youtube didn't return anything with your preferred codec & resolution. try another set of settings!",
+    "api.youtube.codec": "youtube didn't return anything with your preferred video codec. try another one in settings!",
     "api.youtube.decipher": "youtube updated its decipher algorithm and i couldn't extract the info about the video.\n\ntry again in a few seconds, but if issue sticks, contact us for support.",
     "api.youtube.login": "couldn't get this video because youtube labeled me as a bot. this is potentially caused by the processing instance not having any active account tokens. try again in a few seconds, but if it still doesn't work, tell the instance owner about this error!",
     "api.youtube.token_expired": "couldn't get this video because the youtube token expired and i couldn't refresh it. try again in a few seconds, but if it still doesn't work, tell the instance owner about this error!"

From 7160be65bd9d35e1bbbaaec1517b92fcdd6ac2eb Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 16:25:31 +0600
Subject: [PATCH 38/48] web/i18n/error: fix typo in live video error

---
 web/i18n/en/error.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/i18n/en/error.json b/web/i18n/en/error.json
index b0431729b..67dd911c7 100644
--- a/web/i18n/en/error.json
+++ b/web/i18n/en/error.json
@@ -38,7 +38,7 @@
     "api.content.too_long": "the media you requested is too long. current duration limit is {{ limit }} minutes. try something shorter instead!",
 
     "api.content.video.unavailable": "i can't access this video. it may be restricted on {{ service }}'s side. have you pasted the right link?",
-    "api.content.video.live": "this video is currently live, so i can't download it yet. wait for the livestream to finish, and then try again!",
+    "api.content.video.live": "this video is currently live, so i can't download it yet. wait for the live stream to finish, and then try again!",
     "api.content.video.private": "this video is private, so i cannot access it. change its visibility or try another one!",
     "api.content.video.age": "this video is age-restricted, so i can't access it anonymously. try another one!",
     "api.content.video.region": "this video is region locked, and the processing server is in a different location. try another one!",

From 44f470f19283ec87db089935eb6bc0e27b8b9fdb Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 20:55:53 +0600
Subject: [PATCH 39/48] web/PageNav: reduce the page width in wide mode

---
 web/src/components/subnav/PageNav.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/subnav/PageNav.svelte b/web/src/components/subnav/PageNav.svelte
index ccb2afa18..7fa46b0e9 100644
--- a/web/src/components/subnav/PageNav.svelte
+++ b/web/src/components/subnav/PageNav.svelte
@@ -138,7 +138,7 @@
     }
 
     .subnav-page-content.wide {
-        max-width: 800px;
+        max-width: 700px;
     }
 
     .subnav-page-content.padding {

From c9c1e5d298fe5eb9595b499cf6b39f497e147bba Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 21:03:50 +0600
Subject: [PATCH 40/48] web/layout: add padding to about heading

---
 web/src/routes/+layout.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 340f456cc..ed02b3456 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -492,6 +492,14 @@
         margin-block-start: 0.3em;
     }
 
+    :global(.long-text-noto.about .heading-container) {
+        padding-top: calc(var(--padding) / 2);
+    }
+
+    :global(.long-text-noto.about section:first-of-type .heading-container) {
+        padding-top: 0;
+    }
+
     @media screen and (max-width: 535px) {
         :global(.long-text-noto),
         :global(.long-text-noto *:not(h1, h2, h3, h4, h5, h6)) {

From d9f1134f7f220fc06323b4a2b819ca6dcd91c110 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 22 Sep 2024 21:41:21 +0600
Subject: [PATCH 41/48] web/SidebarTab: make the icon bigger and gap smaller

---
 web/src/components/sidebar/SidebarTab.svelte | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index 73360005f..9f3b51ef4 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -54,8 +54,8 @@
         flex-direction: column;
         align-items: center;
         text-align: center;
-        gap: 5px;
-        padding: var(--padding) 5px;
+        gap: 3px;
+        padding: var(--padding) 3px;
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
         opacity: 0.75;
@@ -73,8 +73,8 @@
 
     .sidebar-tab :global(svg) {
         stroke-width: 1.2px;
-        height: 21px;
-        width: 21px;
+        height: 22px;
+        width: 22px;
     }
 
     :global([data-iphone="true"] .sidebar-tab svg) {
@@ -132,15 +132,9 @@
     @media screen and (max-width: 535px) {
         .sidebar-tab {
             padding: 5px var(--padding);
-            gap: 3px;
             min-width: calc(var(--sidebar-width) / 2);
         }
 
-        .sidebar-tab :global(svg) {
-            height: 22px;
-            width: 22px;
-        }
-
         .sidebar-tab.active {
             z-index: 2;
         }

From 12f7ee874e24f62486f6fa30e2cd11108359d6d6 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:04:17 +0600
Subject: [PATCH 42/48] web/svelte.config: fix `img-src` csp

---
 web/svelte.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/svelte.config.js b/web/svelte.config.js
index 28602c1e6..9ff6f4ce9 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -56,7 +56,7 @@ const config = {
 
                 "font-src": ["self"],
                 "style-src": ["self", "unsafe-inline"],
-                "img-src": ["self", "data:"],
+                "img-src": ["*"],
                 "manifest-src": ["self"],
                 "worker-src": ["self"],
 

From ba93492c8dd125868579e9edbd1461fe8ecb30a1 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:06:57 +0600
Subject: [PATCH 43/48] web: prevent openURL action on ios devices if url is
 redirect

---
 web/src/components/dialog/SavingDialog.svelte |  6 +++-
 .../save/buttons/DownloadButton.svelte        |  1 +
 web/src/lib/download.ts                       | 29 +++++++++++++++----
 web/src/lib/types/api.ts                      |  8 +++--
 web/src/lib/types/dialog.ts                   |  2 ++
 5 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte
index f71e2b9f0..ec719aed9 100644
--- a/web/src/components/dialog/SavingDialog.svelte
+++ b/web/src/components/dialog/SavingDialog.svelte
@@ -10,6 +10,8 @@
         shareFile,
     } from "$lib/download";
 
+    import type { CobaltFileUrlType } from "$lib/types/api";
+
     import DialogContainer from "$components/dialog/DialogContainer.svelte";
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
@@ -22,12 +24,14 @@
     import IconFileDownload from "@tabler/icons-svelte/IconFileDownload.svelte";
 
     import CopyIcon from "$components/misc/CopyIcon.svelte";
+
     export let id: string;
     export let dismissable = true;
     export let bodyText: string = "";
 
     export let url: string = "";
     export let file: File | undefined = undefined;
+    export let urlType: CobaltFileUrlType | undefined = undefined;
 
     let close: () => void;
 
@@ -55,7 +59,7 @@
             </div>
 
             <div class="action-buttons">
-                {#if device.supports.directDownload}
+                {#if device.supports.directDownload && !(device.is.iOS && urlType === "redirect")}
                     <VerticalActionButton
                         id="save-download"
                         fill
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index e8d24f0f3..7dec3a36f 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -88,6 +88,7 @@
 
             return downloadFile({
                 url: response.url,
+                urlType: "redirect",
             });
         }
 
diff --git a/web/src/lib/download.ts b/web/src/lib/download.ts
index 78e465dee..827b33b1a 100644
--- a/web/src/lib/download.ts
+++ b/web/src/lib/download.ts
@@ -4,16 +4,31 @@ import settings from "$lib/state/settings";
 
 import { device } from "$lib/device";
 import { t } from "$lib/i18n/translations";
-
 import { createDialog } from "$lib/dialogs";
+
 import type { DialogInfo } from "$lib/types/dialog";
+import type { CobaltFileUrlType } from "$lib/types/api";
+
+type DownloadFileParams = {
+    url?: string,
+    file?: File,
+    urlType?: CobaltFileUrlType,
+}
 
-const openSavingDialog = ({ url, file, body }: { url?: string, file?: File, body?: string }) => {
+type SavingDialogParams = {
+    url?: string,
+    file?: File,
+    body?: string,
+    urlType?: CobaltFileUrlType,
+}
+
+const openSavingDialog = ({ url, file, body, urlType }: SavingDialogParams) => {
     const dialogData: DialogInfo = {
         type: "saving",
         id: "saving",
         file,
         url,
+        urlType,
     }
     if (body) dialogData.bodyText = body;
 
@@ -60,13 +75,13 @@ export const copyURL = async (url: string) => {
     return await navigator?.clipboard?.writeText(url);
 }
 
-export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
+export const downloadFile = ({ url, file, urlType }: DownloadFileParams) => {
     if (!url && !file) throw new Error("attempted to download void");
 
     const pref = get(settings).save.savingMethod;
 
     if (pref === "ask") {
-        return openSavingDialog({ url, file });
+        return openSavingDialog({ url, file, urlType });
     }
 
     /*
@@ -85,6 +100,7 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
             url,
             file,
             body: get(t)("dialog.saving.timeout"),
+            urlType
         });
     }
 
@@ -100,7 +116,8 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
         if (url) {
             if (pref === "share" && device.supports.share) {
                 return shareURL(url);
-            } else if (pref === "download" && device.supports.directDownload) {
+            } else if (pref === "download" && device.supports.directDownload
+                    && !(device.is.iOS && urlType === "redirect")) {
                 return openURL(url);
             } else if (pref === "copy" && !file) {
                 return copyURL(url);
@@ -108,5 +125,5 @@ export const downloadFile = ({ url, file }: { url?: string, file?: File }) => {
         }
     } catch { /* catch & ignore */ }
 
-    return openSavingDialog({ url, file });
+    return openSavingDialog({ url, file, urlType });
 }
diff --git a/web/src/lib/types/api.ts b/web/src/lib/types/api.ts
index e7e4307d9..201617752 100644
--- a/web/src/lib/types/api.ts
+++ b/web/src/lib/types/api.ts
@@ -40,6 +40,8 @@ type CobaltTunnelResponse = {
     status: CobaltResponseType.Tunnel,
 } & CobaltPartialURLResponse;
 
+export type CobaltFileUrlType = "redirect" | "tunnel";
+
 export type CobaltSession = {
     token: string,
     exp: number,
@@ -65,6 +67,6 @@ export type CobaltSessionResponse = CobaltSession | CobaltErrorResponse;
 export type CobaltServerInfoResponse = CobaltServerInfo | CobaltErrorResponse;
 
 export type CobaltAPIResponse = CobaltErrorResponse
-                            | CobaltPickerResponse
-                            | CobaltRedirectResponse
-                            | CobaltTunnelResponse;
+    | CobaltPickerResponse
+    | CobaltRedirectResponse
+    | CobaltTunnelResponse;
diff --git a/web/src/lib/types/dialog.ts b/web/src/lib/types/dialog.ts
index fa0df5fef..69e27b5da 100644
--- a/web/src/lib/types/dialog.ts
+++ b/web/src/lib/types/dialog.ts
@@ -1,3 +1,4 @@
+import type { CobaltFileUrlType } from "$lib/types/api";
 import type { MeowbaltEmotions } from "$lib/types/meowbalt";
 
 export type DialogButton = {
@@ -43,6 +44,7 @@ type SavingDialog = Dialog & {
     bodyText?: string,
     url?: string,
     file?: File,
+    urlType?: CobaltFileUrlType,
 };
 
 export type DialogInfo = SmallDialog | PickerDialog | SavingDialog;

From 402b4b6485b075cb89fedcaef30ad9aafcca5e71 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:11:58 +0600
Subject: [PATCH 44/48] web/types/api: fix formatting

---
 web/src/lib/types/api.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/types/api.ts b/web/src/lib/types/api.ts
index 201617752..b2e47a40e 100644
--- a/web/src/lib/types/api.ts
+++ b/web/src/lib/types/api.ts
@@ -67,6 +67,6 @@ export type CobaltSessionResponse = CobaltSession | CobaltErrorResponse;
 export type CobaltServerInfoResponse = CobaltServerInfo | CobaltErrorResponse;
 
 export type CobaltAPIResponse = CobaltErrorResponse
-    | CobaltPickerResponse
-    | CobaltRedirectResponse
-    | CobaltTunnelResponse;
+                              | CobaltPickerResponse
+                              | CobaltRedirectResponse
+                              | CobaltTunnelResponse;

From e0132ab92800331136a458ab89a376a3f220b52d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:18:20 +0600
Subject: [PATCH 45/48] web/PickerItem: add `urlType` to downloading params

---
 web/src/components/dialog/PickerItem.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index 7edf8c683..4a515a6e7 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -14,6 +14,7 @@
     export let number: number;
 
     let imageLoaded = false;
+    const isTunnel = new URL(item.url).pathname === "/tunnel";
 
     $: itemType = item.type ?? "photo";
 </script>
@@ -23,6 +24,7 @@
     on:click={() =>
         downloadFile({
             url: item.url,
+            urlType: isTunnel ? "tunnel" : "redirect",
         })}
 >
     <div class="picker-type">

From 1460ee0d533d557712ff4b9a974facbfb872b775 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:23:23 +0600
Subject: [PATCH 46/48] web/_headers: remove redundant async

---
 web/src/routes/_headers/+server.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/routes/_headers/+server.ts b/web/src/routes/_headers/+server.ts
index cdeb1f9ce..375c6bcd9 100644
--- a/web/src/routes/_headers/+server.ts
+++ b/web/src/routes/_headers/+server.ts
@@ -1,4 +1,4 @@
-export async function GET() {
+export function GET() {
     const _headers = {
         "/*": {
             "Cross-Origin-Opener-Policy": "same-origin",

From f8a6b533bea9a8348c45a37514477e37443a1bb3 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 15:30:31 +0600
Subject: [PATCH 47/48] web/svelte.config: update img-src csp again

---
 web/svelte.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/svelte.config.js b/web/svelte.config.js
index 9ff6f4ce9..b3216fe49 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -56,7 +56,7 @@ const config = {
 
                 "font-src": ["self"],
                 "style-src": ["self", "unsafe-inline"],
-                "img-src": ["*"],
+                "img-src": ["*", "data:"],
                 "manifest-src": ["self"],
                 "worker-src": ["self"],
 

From 416a9efdd105ccbdf7b9e0348f26d30c6ba6313b Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Mon, 23 Sep 2024 16:16:17 +0600
Subject: [PATCH 48/48] web/server-info: reload the page if turnstile sitekey
 changes

---
 web/src/lib/api/server-info.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/src/lib/api/server-info.ts b/web/src/lib/api/server-info.ts
index 51a3a90a9..8a3e1b60e 100644
--- a/web/src/lib/api/server-info.ts
+++ b/web/src/lib/api/server-info.ts
@@ -1,3 +1,5 @@
+import { browser } from "$app/environment";
+
 import { get, writable } from "svelte/store";
 import { currentApiURL } from "$lib/api/api-url";
 
@@ -50,6 +52,17 @@ export const getServerInfo = async () => {
             info: freshInfo,
             origin: currentApiURL(),
         });
+
+        /*
+            reload the page if turnstile sitekey changed.
+            there's no other proper way to do this, at least i couldn't find any :(
+        */
+        if (cache?.info?.cobalt?.turnstileSitekey && freshInfo?.cobalt?.turnstileSitekey) {
+            if (browser) {
+                window.location.reload();
+            }
+        }
+
         return true;
     }