Merge branch 'main' into main

.gitignore

@@ -13,6 +13,7 @@ build
 .env.*
 !.env.example
 cookies.json
+keys.json
 
 # docker
 docker-compose.yml

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",
@@ -29,18 +29,18 @@
         "cors": "^2.8.5",
         "dotenv": "^16.0.1",
         "esbuild": "^0.14.51",
-        "express": "^4.18.1",
+        "express": "^4.21.0",
         "express-rate-limit": "^6.3.0",
         "ffmpeg-static": "^5.1.0",
         "hls-parser": "^0.10.7",
-        "ipaddr.js": "2.1.0",
+        "ipaddr.js": "2.2.0",
         "nanoid": "^4.0.2",
         "node-cache": "^5.1.2",
         "psl": "1.9.0",
         "set-cookie-parser": "2.6.0",
         "undici": "^5.19.1",
         "url-pattern": "1.0.3",
-        "youtubei.js": "^10.3.0",
+        "youtubei.js": "^10.5.0",
         "zod": "^3.23.8"
     },
     "optionalDependencies": {

api/src/config.js

@@ -26,7 +26,7 @@ const env = {
     rateLimitMax: (process.env.RATELIMIT_MAX && parseInt(process.env.RATELIMIT_MAX)) || 20,
 
     durationLimit: (process.env.DURATION_LIMIT && parseInt(process.env.DURATION_LIMIT)) || 10800,
-    streamLifespan: 90,
+    streamLifespan: (process.env.TUNNEL_LIFESPAN && parseInt(process.env.TUNNEL_LIFESPAN)) || 90,
 
     processingPriority: process.platform !== 'win32'
         && process.env.PROCESSING_PRIORITY
@@ -34,10 +34,20 @@ 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,
+
+    apiKeyURL: process.env.API_KEY_URL && new URL(process.env.API_KEY_URL),
+    authRequired: process.env.API_AUTH_REQUIRED === '1',
+
+    keyReloadInterval: 900,
+
     enabledServices,
 }
 

api/src/core/api.js

@@ -17,6 +17,7 @@ import { verifyTurnstileToken } from "../security/turnstile.js";
 import { friendlyServiceName } from "../processing/service-alias.js";
 import { verifyStream, getInternalStream } from "../stream/manage.js";
 import { createResponse, normalizeRequest, getIP } from "../processing/request.js";
+import * as APIKeys from "../security/api-keys.js";
 
 const git = {
     branch: await getBranch(),
@@ -49,6 +50,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);
             }),
@@ -56,34 +58,40 @@ export const runAPI = (express, app, __dirname) => {
         git,
     })
 
-    const apiLimiter = rateLimit({
-        windowMs: env.rateLimitWindow * 1000,
-        max: env.rateLimitMax,
-        standardHeaders: true,
-        legacyHeaders: false,
-        keyGenerator: req => {
-            if (req.authorized) {
-                return generateHmac(req.header("Authorization"), ipSalt);
+    const handleRateExceeded = (_, res) => {
+        const { status, body } = createResponse("error", {
+            code: "error.api.rate_exceeded",
+            context: {
+                limit: env.rateLimitWindow
             }
-            return generateHmac(getIP(req), ipSalt);
-        },
-        handler: (req, res) => {
-            const { status, body } = createResponse("error", {
-                code: "error.api.rate_exceeded",
-                context: {
-                    limit: env.rateLimitWindow
-                }
-            });
-            return res.status(status).json(body);
-        }
-    })
+        });
+        return res.status(status).json(body);
+    };
 
-    const apiLimiterStream = rateLimit({
-        windowMs: env.rateLimitWindow * 1000,
-        max: env.rateLimitMax,
+    const sessionLimiter = rateLimit({
+        windowMs: 60000,
+        max: 10,
         standardHeaders: true,
         legacyHeaders: false,
         keyGenerator: req => generateHmac(getIP(req), ipSalt),
+        handler: handleRateExceeded
+    });
+
+    const apiLimiter = rateLimit({
+        windowMs: env.rateLimitWindow * 1000,
+        max: (req) => req.rateLimitMax || env.rateLimitMax,
+        standardHeaders: true,
+        legacyHeaders: false,
+        keyGenerator: req => req.rateLimitKey || generateHmac(getIP(req), ipSalt),
+        handler: handleRateExceeded
+    })
+
+    const apiTunnelLimiter = rateLimit({
+        windowMs: env.rateLimitWindow * 1000,
+        max: (req) => req.rateLimitMax || env.rateLimitMax,
+        standardHeaders: true,
+        legacyHeaders: false,
+        keyGenerator: req => req.rateLimitKey || generateHmac(getIP(req), ipSalt),
         handler: (req, res) => {
             return res.sendStatus(429)
         }
@@ -102,23 +110,45 @@ export const runAPI = (express, app, __dirname) => {
         ...corsConfig,
     }));
 
-    app.post('/', apiLimiter);
-    app.use('/tunnel', apiLimiterStream);
-
     app.post('/', (req, res, next) => {
         if (!acceptRegex.test(req.header('Accept'))) {
             return fail(res, "error.api.header.accept");
         }
-
         if (!acceptRegex.test(req.header('Content-Type'))) {
             return fail(res, "error.api.header.content_type");
         }
-
         next();
     });
 
     app.post('/', (req, res, next) => {
-        if (!env.turnstileSecret || !env.jwtSecret) {
+        if (!env.apiKeyURL) {
+            return next();
+        }
+
+        const { success, error } = APIKeys.validateAuthorization(req);
+        if (!success) {
+            // We call next() here if either if:
+            // a) we have user sessions enabled, meaning the request
+            //    will still need a Bearer token to not be rejected, or
+            // b) we do not require the user to be authenticated, and
+            //    so they can just make the request with the regular
+            //    rate limit configuration;
+            // otherwise, we reject the request.
+            if (
+                (env.sessionEnabled || !env.authRequired)
+                && ['missing', 'not_api_key'].includes(error)
+            ) {
+                return next();
+            }
+
+            return fail(res, `error.api.auth.key.${error}`);
+        }
+
+        return next();
+    });
+
+    app.post('/', (req, res, next) => {
+        if (!env.sessionEnabled || req.rateLimitKey) {
             return next();
         }
 
@@ -140,14 +170,16 @@ export const runAPI = (express, app, __dirname) => {
                 return fail(res, "error.api.auth.jwt.invalid");
             }
 
-            req.authorized = true;
+            req.rateLimitKey = generateHmac(req.header("Authorization"), ipSalt);
         } catch {
             return fail(res, "error.api.generic");
         }
         next();
     });
 
+    app.post('/', apiLimiter);
     app.use('/', express.json({ limit: 1024 }));
+
     app.use('/', (err, _, res, next) => {
         if (err) {
             const { status, body } = createResponse("error", {
@@ -159,8 +191,8 @@ export const runAPI = (express, app, __dirname) => {
         next();
     });
 
-    app.post("/session", async (req, res) => {
-        if (!env.turnstileSecret || !env.jwtSecret) {
+    app.post("/session", sessionLimiter, async (req, res) => {
+        if (!env.sessionEnabled) {
             return fail(res, "error.api.auth.not_configured")
         }
 
@@ -229,7 +261,7 @@ export const runAPI = (express, app, __dirname) => {
         }
     })
 
-    app.get('/tunnel', (req, res) => {
+    app.get('/tunnel', apiTunnelLimiter, (req, res) => {
         const id = String(req.query.id);
         const exp = String(req.query.exp);
         const sig = String(req.query.sig);
@@ -311,6 +343,10 @@ export const runAPI = (express, app, __dirname) => {
         setGlobalDispatcher(new ProxyAgent(env.externalProxy))
     }
 
+    if (env.apiKeyURL) {
+        APIKeys.setup(env.apiKeyURL);
+    }
+
     app.listen(env.apiPort, env.listenAddress, () => {
         console.log(`\n` +
             Bright(Cyan("cobalt ")) + Bright("API ^ω⁠^") + "\n" +

api/src/misc/console-text.js

@@ -5,12 +5,19 @@ function t(color, tt) {
 export function Bright(tt) {
     return t("\x1b[1m", tt)
 }
+
 export function Red(tt) {
     return t("\x1b[31m", tt)
 }
+
 export function Green(tt) {
     return t("\x1b[32m", tt)
 }
+
 export function Cyan(tt) {
     return t("\x1b[36m", tt)
 }
+
+export function Yellow(tt) {
+    return t("\x1b[93m", tt)
+}

api/src/processing/match-action.js

@@ -137,6 +137,7 @@ export default function({ r, host, audioFormat, isAudioOnly, isAudioMuted, disab
                     }
                     break;
 
+                case "ok":
                 case "vk":
                 case "tiktok":
                     params = { type: "proxy" };

api/src/processing/service-config.js

@@ -137,7 +137,8 @@ export const services = {
             ":user/status/:id/video/:index",
             ":user/status/:id/photo/:index",
             ":user/status/:id/mediaviewer",
-            ":user/status/:id/mediaViewer"
+            ":user/status/:id/mediaViewer",
+            "i/bookmarks?post_id=:id"
         ],
         subdomains: ["mobile"],
         altDomains: ["x.com", "vxtwitter.com", "fixvx.com"],

api/src/processing/services/youtube.js

@@ -243,11 +243,13 @@ export default async function(o) {
     }
 
     if (basicInfo?.short_description?.startsWith("Provided to YouTube by")) {
-        let descItems = basicInfo.short_description.split("\n\n");
-        fileMetadata.album = descItems[2];
-        fileMetadata.copyright = descItems[3];
-        if (descItems[4].startsWith("Released on:")) {
-            fileMetadata.date = descItems[4].replace("Released on: ", '').trim()
+        let descItems = basicInfo.short_description.split("\n\n", 5);
+        if (descItems.length === 5) {
+            fileMetadata.album = descItems[2];
+            fileMetadata.copyright = descItems[3];
+            if (descItems[4].startsWith("Released on:")) {
+                fileMetadata.date = descItems[4].replace("Released on: ", '').trim();
+            }
         }
     }
 

api/src/processing/url.js

@@ -120,6 +120,11 @@ function cleanURL(url) {
                 limitQuery('p')
             }
             break;
+        case "twitter":
+            if (url.searchParams.get('post_id')) {
+                limitQuery('post_id')
+            }
+            break;
     }
 
     if (stripQuery) {

api/src/security/api-keys.js

@@ -0,0 +1,205 @@
+import { env } from "../config.js";
+import { readFile } from "node:fs/promises";
+import { Yellow } from "../misc/console-text.js";
+import ip from "ipaddr.js";
+
+// this function is a modified variation of code
+// from https://stackoverflow.com/a/32402438/14855621
+const generateWildcardRegex = rule => {
+    var escapeRegex = (str) => str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
+    return new RegExp("^" + rule.split("*").map(escapeRegex).join(".*") + "$");
+}
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+
+let keys = {};
+
+const ALLOWED_KEYS = new Set(['name', 'ips', 'userAgents', 'limit']);
+
+/* Expected format pseudotype:
+** type KeyFileContents = Record<
+**    UUIDv4String,
+**    {
+**        name?: string,
+**        limit?: number | "unlimited",
+**        ips?: CIDRString[],
+**        userAgents?: string[]
+**    }
+** >;
+*/
+
+const validateKeys = (input) => {
+    if (typeof input !== 'object' || input === null) {
+        throw "input is not an object";
+    }
+
+    if (Object.keys(input).some(x => !UUID_REGEX.test(x))) {
+        throw "key file contains invalid key(s)";
+    }
+
+    Object.values(input).forEach(details => {
+        if (typeof details !== 'object' || details === null) {
+            throw "some key(s) are incorrectly configured";
+        }
+
+        const unexpected_key = Object.keys(details).find(k => !ALLOWED_KEYS.has(k));
+        if (unexpected_key) {
+            throw "detail object contains unexpected key: " + unexpected_key;
+        }
+
+        if (details.limit && details.limit !== 'unlimited') {
+            if (typeof details.limit !== 'number')
+                throw "detail object contains invalid limit (not a number)";
+            else if (details.limit < 1)
+                throw "detail object contains invalid limit (not a positive number)";
+        }
+
+        if (details.ips) {
+            if (!Array.isArray(details.ips))
+                throw "details object contains value for `ips` which is not an array";
+
+            const invalid_ip = details.ips.find(
+                addr => typeof addr !== 'string' || (!ip.isValidCIDR(addr) && !ip.isValid(addr))
+            );
+
+            if (invalid_ip) {
+                throw "`ips` in details contains an invalid IP or CIDR range: " + invalid_ip;
+            }
+        }
+
+        if (details.userAgents) {
+            if (!Array.isArray(details.userAgents))
+                throw "details object contains value for `userAgents` which is not an array";
+
+            const invalid_ua = details.userAgents.find(ua => typeof ua !== 'string');
+            if (invalid_ua) {
+                throw "`userAgents` in details contains an invalid user agent: " + invalid_ua;
+            }
+        }
+    });
+}
+
+const formatKeys = (keyData) => {
+    const formatted = {};
+
+    for (let key in keyData) {
+        const data = keyData[key];
+        key = key.toLowerCase();
+
+        formatted[key] = {};
+
+        if (data.limit) {
+            if (data.limit === "unlimited") {
+                data.limit = Infinity;
+            }
+
+            formatted[key].limit = data.limit;
+        }
+
+        if (data.ips) {
+            formatted[key].ips = data.ips.map(addr => {
+                if (ip.isValid(addr)) {
+                    return [ ip.parse(addr), 32 ];
+                }
+
+                return ip.parseCIDR(addr);
+            });
+        }
+
+        if (data.userAgents) {
+            formatted[key].userAgents = data.userAgents.map(generateWildcardRegex);
+        }
+    }
+
+    return formatted;
+}
+
+const loadKeys = async (source) => {
+    let updated;
+    if (source.protocol === 'file:') {
+        const pathname = source.pathname === '/' ? '' : source.pathname;
+        updated = JSON.parse(
+            await readFile(
+                decodeURIComponent(source.host + pathname),
+                'utf8'
+            )
+        );
+    } else {
+        updated = await fetch(source).then(a => a.json());
+    }
+
+    validateKeys(updated);
+    keys = formatKeys(updated);
+}
+
+const wrapLoad = (url) => {
+    loadKeys(url)
+    .then(() => {})
+    .catch((e) => {
+        console.error(`${Yellow('[!]')} Failed loading API keys at ${new Date().toISOString()}.`);
+        console.error('Error:', e);
+    })
+}
+
+const err = (reason) => ({ success: false, error: reason });
+
+export const validateAuthorization = (req) => {
+    const authHeader = req.get('Authorization');
+
+    if (typeof authHeader !== 'string') {
+        return err("missing");
+    }
+
+    const [ authType, keyString ] = authHeader.split(' ', 2);
+    if (authType.toLowerCase() !== 'api-key') {
+        return err("not_api_key");
+    }
+
+    if (!UUID_REGEX.test(keyString) || `${authType} ${keyString}` !== authHeader) {
+        return err("invalid");
+    }
+
+    const matchingKey = keys[keyString.toLowerCase()];
+    if (!matchingKey) {
+        return err("not_found");
+    }
+
+    if (matchingKey.ips) {
+        let addr;
+        try {
+            addr = ip.parse(req.ip);
+        } catch {
+            return err("invalid_ip");
+        }
+
+        const ip_allowed = matchingKey.ips.some(
+            ([ allowed, size ]) => {
+                return addr.kind() === allowed.kind()
+                        && addr.match(allowed, size);
+            }
+        );
+
+        if (!ip_allowed) {
+            return err("ip_not_allowed");
+        }
+    }
+
+    if (matchingKey.userAgents) {
+        const userAgent = req.get('User-Agent');
+        if (!matchingKey.userAgents.some(regex => regex.test(userAgent))) {
+            return err("ua_not_allowed");
+        }
+    }
+
+    req.rateLimitKey = keyString.toLowerCase();
+    req.rateLimitMax = matchingKey.limit;
+
+    return { success: true };
+}
+
+export const setup = (url) => {
+    wrapLoad(url);
+    if (env.keyReloadInterval > 0) {
+        setInterval(() => wrapLoad(url), env.keyReloadInterval * 1000);
+    }
+}

api/src/util/setup.js

@@ -19,7 +19,7 @@ let final = () => {
     }
     console.log(Bright("\nAwesome! I've created a fresh .env file for you."));
     console.log(`${Bright("Now I'll run")} ${Cyan("npm install")} ${Bright("to install all dependencies. It shouldn't take long.\n\n")}`);
-    execSync('npm install', { stdio: [0, 1, 2] });
+    execSync('pnpm install', { stdio: [0, 1, 2] });
     console.log(`\n\n${Cyan("All done!\n")}`);
     console.log(Bright("You can re-run this script at any time to update the configuration."));
     console.log(Bright("\nYou're now ready to start cobalt. Simply run ") + Cyan("npm start") + Bright('!\nHave fun :)'));

api/src/util/tests.json

@@ -192,6 +192,24 @@
                 "code": 400,
                 "status": "error"
             }
+        },
+        {
+            "name": "bookmarked video",
+            "url": "https://twitter.com/i/bookmarks?post_id=1828099210220294314",
+            "params": {},
+            "expected": {
+                "code": 200,
+                "status": "redirect"
+            }
+        },
+        {
+            "name": "bookmarked photo",
+            "url": "https://twitter.com/i/bookmarks?post_id=1837430141179289876",
+            "params": {},
+            "expected": {
+                "code": 200,
+                "status": "redirect"
+            }
         }
     ],
     "soundcloud": [

docs/run-an-instance.md

@@ -71,6 +71,9 @@ sudo service nscd start
 | `RATELIMIT_WINDOW`    | `60`      | `120`                   | rate limit time window in **seconds**. |
 | `RATELIMIT_MAX`       | `20`      | `30`                    | max requests per time window. requests above this amount will be blocked for the rate limit window duration. |
 | `DURATION_LIMIT`      | `10800`   | `18000`                 | max allowed video duration in **seconds**. |
+| `TUNNEL_LIFESPAN`     | `90`      | `120`                   | the duration for which tunnel info is stored in ram, **in seconds**. |
+| `API_KEY_URL`         | ➖        | `file://keys.json`      | the location of the api key database. for loading API keys, cobalt supports HTTP(S) urls, or local files by specifying a local path using the `file://` protocol. see the "api key file format" below for more details.  |
+| `API_AUTH_REQUIRED`   | ➖        | `1`                     | when set to `1`, the user always needs to be authenticated in some way before they can access the API (either via an api key or via turnstile, if enabled). |
 
 \* the higher the nice value, the lower the priority. [read more here](https://en.wikipedia.org/wiki/Nice_(Unix)).
 
@@ -79,3 +82,55 @@ setting a `FREEBIND_CIDR` allows cobalt to pick a random IP for every download a
 requests it makes for that particular download. to use freebind in cobalt, you need to follow its [setup instructions](https://github.com/imputnet/freebind.js?tab=readme-ov-file#setup) first. if you configure this option while running cobalt
 in a docker container, you also need to set the `API_LISTEN_ADDRESS` env to `127.0.0.1`, and set
 `network_mode` for the container to `host`.
+
+#### api key file format
+the file is a JSON-serialized object with the following structure:
+```typescript
+
+type KeyFileContents = Record<
+    UUIDv4String,
+    {
+        name?: string,
+        limit?: number | "unlimited",
+        ips?: (CIDRString | IPString)[],
+        userAgents?: string[]
+    }
+>;
+```
+
+where *`UUIDv4String`* is a stringified version of a UUIDv4 identifier.
+- **name** is a field for your own reference, it is not used by cobalt anywhere.
+
+- **`limit`** specifies how many requests the API key can make during the window specified in the `RATELIMIT_WINDOW` env.
+    - when omitted, the limit specified in `RATELIMIT_MAX` will be used.
+    - it can be also set to `"unlimited"`, in which case the API key bypasses all rate limits.
+
+- **`ips`** contains an array of allowlisted IP ranges, which can be specified both as individual ips or CIDR ranges (e.g. *`["192.168.42.69", "2001:db8::48", "10.0.0.0/8", "fe80::/10"]`*).
+    - when specified, only requests from these ip ranges can use the specified api key.
+    - when omitted, any IP can be used to make requests with that API key.
+
+- **`userAgents`** contains an array of allowed user agents, with support for wildcards (e.g. *`["cobaltbot/1.0", "Mozilla/5.0 * Chrome/*"]`*).
+    - when specified, requests with a `user-agent` that does not appear in this array will be rejected.
+    - when omitted, any user agent can be specified to make requests with that API key.
+
+- if both `ips` and `userAgents` are set, the tokens will be limited by both parameters.
+- if cobalt detects any problem with your key file, it will be ignored and a warning will be printed to the console.
+
+an example key file could look like this:
+```json
+{
+    "b5c7160a-b655-4c7a-b500-de839f094550": {
+        "limit": 10,
+        "ips": ["10.0.0.0/8", "192.168.42.42"],
+        "userAgents": ["*Chrome*"]
+    },
+    "b00b1234-a3e5-99b1-c6d1-dba4512ae190": {
+        "limit": "unlimited",
+        "ips": ["192.168.1.2"],
+        "userAgents": ["cobaltbot/1.0"]
+    }
+}
+```
+
+if you are configuring a key file, **do not use the UUID from the example** but instead generate your own. you can do this by running the following command if you have node.js installed:
+`node -e "console.log(crypto.randomUUID())"`

packages/api-client/package.json

@@ -9,7 +9,7 @@
     "license": "MIT",
     "devDependencies": {
         "prettier": "3.3.3",
-        "tsup": "^8.2.4",
+        "tsup": "^8.3.0",
         "typescript": "^5.4.5"
     }
 }

web/README.md

@@ -15,7 +15,6 @@ them, you must specify them when building the frontend (or running a vite server
 | `WEB_HOST`           | `cobalt.tools`              | domain on which the frontend will be running. used for meta tags and configuring plausible.              |
 | `WEB_PLAUSIBLE_HOST` | `plausible.io`*             | enables plausible analytics with provided hostname as receiver backend.                                  |
 | `WEB_DEFAULT_API`    | `https://api.cobalt.tools/` | changes url which is used for api requests by frontend clients.                                          |
-| `WEB_TURNSTILE_KEY`  | `1x00000000000000000000AA`  | [cloudflare turnstile](https://www.cloudflare.com/products/turnstile/) public key for antibot protection |
 
 \* don't use plausible.io as receiver backend unless you paid for their cloud service.
    use your own domain when hosting community edition of plausible. refer to their [docs](https://plausible.io/docs) when needed.

web/changelogs/10.0.md

@@ -2,8 +2,8 @@
 title: "cobalt, reborn"
 date: "9 Sept, 2024"
 banner:
-    file: "cobalt10.png"
-    alt: "image of meowbalt smiling and loafing in front of a wall of text."
+    file: "cobalt10.webp"
+    alt: "meowth plush staring into a screen with cobalt 10 ui shown."
 ---
 
 everything is new! this update marks the start of the latest chapter for cobalt. we spent the entire summer working hard to deliver the best experience ever, and we really hope you enjoy the rebirth of cobalt.

web/changelogs/10.1.md

@@ -0,0 +1,55 @@
+---
+title: "squashing bugs, improving security and ux"
+date: "1 Oct, 2024"
+banner:
+    file: "meowth101hammer.webp"
+    alt: "meowth plush getting squished with a hammer."
+---
+
+this update enhances the cobalt experience all around, here's everything that we added or changed since 10.0:
+
+### saving improvements:
+- youtube videos encoded in av1 are now downloaded in the webm container. they also include opus audio for the best quality all around.
+- fixed various bugs related to the download process on older devices/browsers. cobalt should work everywhere within sane limits.
+- fixed downloading of twitch clips.
+- fixed a bug where cobalt wouldn't download bluesky videos that are in a post with a quote.
+- fixed a bug that caused some youtube music videos to fail to download due to differently formatted metadata.
+- cobalt will no longer unexpectedly open video files on iOS. instead, a dialog with other options will be shown. this had to be done due to missing "download" button in safari's video player. you can override this by enabling [forced tunneling](/settings/privacy#tunnel).
+- fixed a bug in filename generation where certain information was added to the filename even if cobalt didn't have it (such as youtube video format).
+
+### general ui/ux improvements:
+- added a button to quickly copy a link to the section in settings or about page.
+- added `(remux)` to filenames of remuxed videos to distinguish them from the original file.
+- improved the look & behavior of the sidebar.
+- fixed cursor appearance to update correctly when using the sidebar or subpage navigation.
+- added a stepped scroller to the donation options card [on the donate page](/donate).
+- tweaked the [donate page](/donate) layout to be cleaner and more flexible.
+- fixed tab navigation for donation option buttons.
+- updated the [10.0 changelog banner](/updates#10.0) to be less boring.
+- fixed a bug that caused some changelog dates to be displayed a day later than intended.
+- changelog banner can now be saved with a right click.
+- cobalt version now gently fades in on the [settings page](/settings).
+- fixed the position of the notch easter egg on iPhone XR, 11, 16 Pro, and 16 Pro Max.
+- cobalt will let you paste the link even if the anti-bot check isn't completed yet. if anything goes wrong regarding anti-bot checks, cobalt will let you know.
+- fixed a bunch of typos and minor grammatical errors.
+- other minor changes.
+
+### about page improvements:
+- added motivation section to the [general about page](/about/general).
+- added a list of beta testers to the [credits page](/about/credits).
+- rephrased some about sections to improve clarity and readability.
+- made about page body narrower to be easier to read.
+- added extra padding between sections on about page to increase readability.
+
+### internal improvements:
+- cobalt now preloads server info for quicker access to supported services & loading turnstile on demand.
+- converted all elements and the about page to be translatable in preparations for community-sourced translations *(coming soon!)*.
+- added `content-security-policy` header to restrict and better prevent XSS attacks.
+- moved the turnstile bot check key to the server, making it load the script on the client only if necessary.
+- fixed a bug in the api that allowed for making requests without a valid `Accept` header if authentication wasn't enabled on an instance.
+
+you can also check [all commits since the 10.0 release on github](https://github.com/imputnet/cobalt/compare/08bc5022...f461b02f).
+
+we hope you enjoy this stable update and have a wonderful day!
+
+\~ your friends at imput ❤️

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...",

web/i18n/en/about.json

@@ -12,5 +12,20 @@
     "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.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",
+    "heading.motivation": "motivation",
+    "heading.testers": "beta testers"
 }

web/i18n/en/about/credits.md

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { contacts, docs } from "$lib/env";
+    import { t } from "$lib/i18n/translations";
+
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
+    import BetaTesters from "$components/misc/BetaTesters.svelte";
+</script>
+
+<section id="testers">
+<SectionHeading
+    title={$t("about.heading.testers")}
+    sectionId="testers"
+/>
+
+huge shoutout to our thing breakers for testing updates early and making sure they're stable.
+they also helped us ship cobalt 10!
+<BetaTesters />
+
+all links are external and lead to their personal websites or social media.
+</section>
+
+<section id="meowbalt">
+<SectionHeading
+    title={$t("general.meowbalt")}
+    sectionId="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">
+<SectionHeading
+    title={$t("about.heading.licenses")}
+    sectionId="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>

web/i18n/en/about/general.md

@@ -0,0 +1,78 @@
+<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="summary">
+<SectionHeading
+    title={$t("about.heading.summary")}
+    sectionId="summary"
+/>
+
+cobalt helps you save anything from your favorite websites: video, audio, photos or gifs. just paste the link and you're ready to rock!
+
+no ads, trackers, paywalls, or other nonsense. just a convenient web app that works anywhere, whenever you need it.
+</section>
+
+<section id="motivation">
+<SectionHeading
+    title={$t("about.heading.motivation")}
+    sectionId="motivation"
+/>
+
+cobalt was created for public benefit, to protect people from ads and malware pushed by its alternatives.
+we believe that the best software is safe, open, and accessible.
+
+it's possible to keep the main instances up thanks to our long-standing infrastructure partner, [royalehosting.net]({partners.royalehosting})!
+</section>
+
+<section id="privacy">
+<SectionHeading
+    title={$t("about.heading.privacy")}
+    sectionId="privacy"
+/>
+
+all requests to the backend are anonymous and all information about tunnels is encrypted.
+we have a strict zero log policy and don't track *anything* about individual people.
+
+when a request needs additional processing, cobalt processes files on-the-fly.
+it's done by tunneling processed parts directly to the client, without ever saving anything to disk.
+for example, this method is used when the source service provides video and audio channels as separate files.
+
+additionally, you can [enable forced tunneling](/settings/privacy#tunnel) to protect your privacy.
+when enabled, cobalt will tunnel all downloaded files.
+no one will know where you download something from, even your network provider.
+all they'll see is that you're using a cobalt instance.
+</section>
+
+<section id="community">
+<SectionHeading
+    title={$t("about.heading.community")}
+    sectionId="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 make cobalt even more useful.
+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}).
+
+if your friend hosts a processing instance, just ask them for a domain and [add it in instance settings](/settings/instances#community).
+
+you can check the source code and contribute [on github]({contacts.github}) at any time.
+we welcome all contributions and suggestions!
+</section>
+
+<section id="local">
+<SectionHeading
+    title={$t("about.heading.local")}
+    sectionId="local"
+/>
+
+newest features, such as [remuxing](/remux), work locally on your 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 the client.
+</section>

web/i18n/en/about/privacy.md

@@ -0,0 +1,76 @@
+<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={$t("about.heading.general")}
+    sectionId="general"
+/>
+
+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={$t("about.heading.local")}
+    sectionId="local"
+/>
+
+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={$t("about.heading.saving")}
+    sectionId="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={$t("about.heading.encryption")}
+    sectionId="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={$t("about.heading.plausible")}
+    sectionId="plausible"
+/>
+
+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">
+<SectionHeading
+    title={$t("about.heading.cloudflare")}
+    sectionId="cloudflare"
+/>
+
+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>

web/i18n/en/about/terms.md

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
+</script>
+
+<section id="general">
+<SectionHeading
+    title={$t("about.heading.general")}
+    sectionId="general"
+/>
+
+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={$t("about.heading.saving")}
+    sectionId="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={$t("about.heading.responsibility")}
+    sectionId="responsibility"
+/>
+
+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">
+<SectionHeading
+    title={$t("about.heading.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)
+
+please note that this email is not intended for user support.
+if you're experiencing issues, contact us via any preferred method on [the support page](/about/community).
+</section>

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",

web/i18n/en/donate.json

@@ -2,14 +2,15 @@
     "banner.title": "Support a safe\nand open Internet",
     "banner.subtitle": "donate to imput or share the\njoy of cobalt with a friend",
 
-    "body.motivation": "cobalt helps thousands of producers, educators, and other creative people to do what they love. we created cobalt because we believe that internet doesn’t have to be scary. greed and ads have ruined the internet — we fight back with friendly and open tools that are made with love, not for profit.",
-    "body.keep_going": "you can help us stay motivated & keep creating safe alternatives to abusive tools by sharing cobalt with a friend or donating.",
+    "body.motivation": "cobalt helps producers, educators, video makers, and many others to do what they love. it's a different kind of service that is made with love, not for profit.",
+    "body.no_bullshit": "we believe that the internet doesn't have to be scary, which is why cobalt will never have ads or other kinds of malicious content. it's a promise that we firmly stand by. everything we do is built with privacy, accessibility, and ease of use in mind, making cobalt available for everyone.",
+    "body.keep_going": "if you found cobalt useful, please consider supporting our work! you can help us by making a donation or sharing cobalt with a friend. every donation is highly appreciated and helps us keep working on cobalt and other projects.",
 
     "card.once": "one-time donation",
-    "card.monthly": "monthly donation",
+    "card.recurring": "recurring donation",
     "card.custom": "custom amount (from $2)",
 
-    "card.processor": "processed by {{value}}",
+    "card.processor": "via {{value}}",
 
     "card.option.5": "cup of coffee",
     "card.option.10": "full size pizza",

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!",
@@ -36,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!",
@@ -45,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!"

web/i18n/en/settings.json

@@ -50,7 +50,7 @@
 
     "audio.bitrate": "audio bitrate",
     "audio.bitrate.kbps": "kb/s",
-    "audio.bitrate.description": "bitrate applies only to audio conversion. cobalt can't improve the source audio quality, so choosing a bitrate over 128kbps may inflate the file size with no audible difference. perceived quality may vary by format.",
+    "audio.bitrate.description": "bitrate is applied only when converting audio to a lossy format. cobalt can't improve the source audio quality, so choosing a bitrate over 128kbps may inflate the file size with no audible difference. perceived quality may vary by format.",
 
     "audio.youtube.dub": "youtube",
     "audio.youtube.dub.title": "use browser language for dubbed videos",
@@ -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",

web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imput/cobalt-web",
-    "version": "10.0.0",
+    "version": "10.1.0",
     "type": "module",
     "private": true,
     "scripts": {
@@ -25,35 +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",
-        "svelte": "^4.2.7",
+        "mime": "^4.0.4",
+        "svelte": "^4.2.19",
         "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"
+        "typescript-eslint": "^8.8.0",
+        "vite": "^5.3.6"
     }
 }

web/src/components/changelog/ChangelogEntry.svelte

@@ -146,6 +146,7 @@
         width: 100%;
         aspect-ratio: 16/9;
         border-radius: var(--padding);
+        pointer-events: all;
     }
 
     .changelog-banner.loading {

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">

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

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">
@@ -116,7 +114,7 @@
         flex-direction: column;
         justify-content: center;
         color: white;
-        padding: 48px;
+        padding: 47px;
         padding-right: 0;
         gap: 14px;
         white-space: pre-wrap;

web/src/components/donate/DonateCardContainer.svelte

@@ -9,7 +9,7 @@
 
 <style>
     :global(.donate-card) {
-        --donate-card-main-padding: 18px;
+        --donate-card-main-padding: 16px;
         --donate-card-padding: 12px;
 
         display: flex;
@@ -37,7 +37,7 @@
         text-align: left;
         border-radius: var(--donate-card-padding);
         background: rgba(255, 255, 255, 0.05);
-        padding: 14px 18px;
+        padding: 12px 16px;
         color: var(--white);
         gap: 0;
         letter-spacing: -0.3px;
@@ -79,10 +79,4 @@
         gap: 4px;
         font-weight: 500;
     }
-
-    @media screen and (max-width: 760px) {
-        :global(.donate-card) {
-            --donate-card-main-padding: 16px;
-        }
-    }
 </style>

web/src/components/donate/DonateOptionsCard.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+    import settings from "$lib/state/settings";
+
     import { donate } from "$lib/env";
+    import { device } from "$lib/device";
     import { t } from "$lib/i18n/translations";
 
     import DonateCardContainer from "$components/donate/DonateCardContainer.svelte";
@@ -11,7 +14,6 @@
     import IconPizza from "@tabler/icons-svelte/IconPizza.svelte";
     import IconToolsKitchen2 from "@tabler/icons-svelte/IconToolsKitchen2.svelte";
     import IconPaperBag from "@tabler/icons-svelte/IconPaperBag.svelte";
-    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
     import IconSoup from "@tabler/icons-svelte/IconSoup.svelte";
     import IconFridge from "@tabler/icons-svelte/IconFridge.svelte";
     import IconArmchair from "@tabler/icons-svelte/IconArmchair.svelte";
@@ -20,7 +22,11 @@
     import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
     import IconWorldWww from "@tabler/icons-svelte/IconWorldWww.svelte";
     import IconBath from "@tabler/icons-svelte/IconBath.svelte";
-    import OuterLink from "$components/misc/OuterLink.svelte";
+
+    import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
+    import IconArrowRight from "@tabler/icons-svelte/IconArrowRight.svelte";
+
+    let donateList: HTMLElement;
 
     let customInput: HTMLInputElement;
     let customInputValue: number | null;
@@ -39,7 +45,7 @@
         4900: IconApple,
         7398: IconDeviceLaptop,
         8629: IconPhoto,
-        9433: IconBath
+        9433: IconBath,
     };
 
     type Processor = "stripe" | "liberapay";
@@ -66,7 +72,30 @@
         }
 
         const amount = Math.floor(Number(customInputValue) * 100);
-        return window.open(donationMethods[processor](amount), '_blank');
+        return window.open(donationMethods[processor](amount), "_blank");
+    };
+
+    const scrollBehavior = $settings.appearance.reduceMotion
+        ? "instant"
+        : "smooth";
+
+    $: showLeftScroll = false;
+    $: showRightScroll = true;
+
+    const scroll = (direction: "left" | "right") => {
+        const currentPos = donateList.scrollLeft;
+        const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width;
+        const newPos = direction === "left" ? currentPos - 150 : currentPos + 150;
+
+        donateList.scroll({
+            left: newPos,
+            behavior: scrollBehavior,
+        });
+
+        setTimeout(() => {
+            showLeftScroll = newPos > 0;
+            showRightScroll = newPos < maxPos && newPos !== maxPos;
+        }, 150)
     };
 </script>
 
@@ -84,12 +113,13 @@
             <div class="donation-type-text">
                 <div class="donate-card-title">{$t("donate.card.once")}</div>
                 <div class="donate-card-subtitle">
-                    {$t("donate.card.processor", { value: 'stripe' })}
+                    {$t("donate.card.processor", { value: "stripe" })}
                 </div>
             </div>
         </button>
+
         <button
-            id="donation-type-monthly"
+            id="donation-type-recurring"
             class="donation-type"
             on:click={() => (processor = "liberapay")}
             class:selected={processor === "liberapay"}
@@ -98,27 +128,72 @@
         >
             <div class="donation-type-icon"><IconCalendarRepeat /></div>
             <div class="donation-type-text">
-                <div class="donate-card-title">{$t("donate.card.monthly")}</div>
+                <div class="donate-card-title">{$t("donate.card.recurring")}</div>
                 <div class="donate-card-subtitle">
-                    {$t("donate.card.processor", { value: 'liberapay' })}
+                    {$t("donate.card.processor", { value: "liberapay" })}
                 </div>
             </div>
         </button>
     </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}`)}>
+
+    <div
+        id="donation-options-container"
+        aria-hidden="true"
+        class:mask-both={!device.is.mobile && showLeftScroll && showRightScroll}
+        class:mask-left={!device.is.mobile && showLeftScroll && !showRightScroll}
+        class:mask-right={!device.is.mobile && showRightScroll && !showLeftScroll}
+    >
+        {#if !device.is.mobile}
+            <div id="donation-options-scroll">
+                <button
+                    class="scroll-button left"
+                    class:hidden={!showLeftScroll}
+                    on:click={() => {
+                        scroll("left");
+                    }}
+                >
+                    <IconArrowLeft />
+                </button>
+                <button
+                    class="scroll-button right"
+                    class:hidden={!showRightScroll}
+                    on:click={() => {
+                        scroll("right");
+                    }}
+                >
+                    <IconArrowRight />
+                </button>
+            </div>
+        {/if}
+
+        <div
+            id="donation-options"
+            bind:this={donateList}
+            on:wheel={() => {
+                const currentPos = donateList.scrollLeft;
+                const maxPos = donateList.scrollWidth - donateList.getBoundingClientRect().width - 5;
+                showLeftScroll = currentPos > 0;
+                showRightScroll = currentPos < maxPos && currentPos !== maxPos;
+            }}
+        >
+            {#each Object.entries(PRESET_DONATION_AMOUNTS) as [amount, component]}
+                <DonationOption
+                    price={+amount}
+                    desc={$t(`donate.card.option.${amount}`)}
+                    href={donationMethods[processor](+amount * 100)}
+                >
                     <svelte:component this={component} />
                 </DonationOption>
-            </OuterLink>
-        {/each}
+            {/each}
+        </div>
     </div>
+
     <div id="donation-custom">
         <div id="input-container" class:focused={customFocused}>
             {#if customInputValue || customInput?.validity.badInput}
                 <span id="input-dollar-sign">$</span>
             {/if}
+
             <input
                 id="donation-custom-input"
                 type="number"
@@ -135,6 +210,7 @@
                 on:keydown={(e) => e.key === "Enter" && sendCustom()}
             />
         </div>
+
         <button
             id="donation-custom-submit"
             on:click={sendCustom}
@@ -144,9 +220,6 @@
             <IconArrowRight />
         </button>
     </div>
-    <div class="donate-card-subtitle processor-mobile">
-        {$t("donate.card.processor", { value: processor })}
-    </div>
 </DonateCardContainer>
 
 <style>
@@ -164,7 +237,7 @@
     #donation-types {
         display: flex;
         flex-direction: row;
-        gap: var(--donate-card-padding);
+        gap: calc(var(--donate-card-main-padding) / 2);
         overflow: scroll;
     }
 
@@ -196,9 +269,9 @@
         mask-image: linear-gradient(
             90deg,
             rgba(0, 0, 0, 0) 0%,
-            rgba(0, 0, 0, 1) 4%,
+            rgba(0, 0, 0, 1) 3%,
             rgba(0, 0, 0, 1) 50%,
-            rgba(0, 0, 0, 1) 96%,
+            rgba(0, 0, 0, 1) 97%,
             rgba(0, 0, 0, 0) 100%
         );
     }
@@ -281,13 +354,82 @@
         margin: 0;
     }
 
-    .processor-mobile {
-        display: none;
-        text-align: center;
+    #donation-options-container {
+        display: flex;
+        flex-direction: column;
+        gap: calc(var(--donate-card-main-padding) / 2);
+        position: relative;
+    }
+
+    #donation-options-scroll {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        pointer-events: none;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+        overflow: hidden;
+        opacity: 0;
+        transition: opacity 0.2s;
+    }
+
+    .scroll-button {
+        pointer-events: all;
+        color: white;
+        padding: 0 16px;
+        background-color: transparent;
+        height: 100%;
+        transition: opacity 0.2s;
+    }
+
+    #donation-options-container:hover #donation-options-scroll {
+        opacity: 1;
+    }
+
+    .scroll-button.hidden {
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    #donation-options-container.mask-both:hover #donation-options {
+        mask-image: linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 20%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    #donation-options-container.mask-left:hover #donation-options {
+        mask-image: linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 20%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 97%,
+            rgba(0, 0, 0, 0) 100%
+        );
+    }
+
+    #donation-options-container.mask-right:hover #donation-options {
+        mask-image: linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 3%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 80%,
+            rgba(0, 0, 0, 0) 100%
+        );
     }
 
     @media screen and (max-width: 550px) {
         :global(#donation-box) {
+            --donate-card-main-padding: 14px;
             min-width: unset;
         }
 
@@ -303,17 +445,5 @@
             width: 26px;
             height: 26px;
         }
-
-        .donation-type .donate-card-subtitle {
-            display: none;
-        }
-
-        .processor-mobile {
-            display: block;
-        }
-    }
-
-    #donation-options > :global(a) {
-        text-decoration: none;
     }
 </style>

web/src/components/donate/DonateShareCard.svelte

@@ -111,8 +111,9 @@
 <style>
     :global(#share-box) {
         padding: var(--donate-card-main-padding);
-        min-width: 300px;
+        min-width: 320px;
         width: fit-content;
+        transition: box-shadow 0.15s;
     }
 
     #share-card-header {
@@ -139,7 +140,6 @@
         display: flex;
         flex-direction: row;
         gap: 12px;
-        max-height: 140px;
     }
 
     #share-qr {
@@ -152,8 +152,8 @@
     }
 
     #share-qr :global(svg) {
-        width: 140px;
-        height: 140px;
+        width: 132px;
+        height: 132px;
         border-radius: 12px;
         box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity));
     }
@@ -198,8 +198,7 @@
         z-index: 1;
         box-shadow:
             0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity)) inset,
-            0 0 10px 2px rgba(0, 0, 0, 0.5);
-        transition: box-shadow 0.15s;
+            0 0 20px 3px rgba(0, 0, 0, 0.5);
     }
 
     :global(#share-box.expanded #share-qr svg) {

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>

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>

web/src/components/misc/BetaTesters.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import OuterLink from "./OuterLink.svelte";
+
+    type Tester = { name: string, url?: string };
+    const credits: Tester[] = [
+        { name: "codfish246" },
+        { name: "damir", url: "https://otomir23.me/" },
+        { name: "Hunter" },
+        { name: "hyperdefined", url: "https://hyper.lol/" },
+        { name: "KwiatekMiki", url: "https://kwiatekmiki.com/" },
+        { name: "Lao", url: "https://lao.ooo/" },
+        { name: "lostdusty", url: "https://lostdusty.dev.br/" },
+        { name: "noblereign", url: "https://fursona.directory/@frost" },
+        { name: "Spax", url: "https://spax.zone/" },
+        { name: "synzr", url: "https://synzr.space/" },
+        { name: "vimae", url: "https://mae.wtf/" }
+    ];
+</script>
+
+<ul>
+    {#each credits as { name, url }}
+        <li>
+            {#if url}
+                <OuterLink href={url}>
+                    {name}
+                </OuterLink>
+            {:else}
+                {name}
+            {/if}
+        </li>
+    {/each}
+</ul>

web/src/components/misc/NotchSticker.svelte

@@ -11,9 +11,12 @@
     $: state = "hidden"; // "notch", "island", "notch x"
 
     const islandValues = [
+        53, // 16 pro max: larger text
         59, // regular & plus: default
         48, // regular: larger text
+        49, // 16: larger text
         51, // plus only: larger text
+        62, // 16: regular
     ];
 
     const xNotch = [44];
@@ -49,6 +52,11 @@
         if (safeAreaTop === 48 && safeAreaBottom === 34) {
             state = "notch";
         }
+
+        // exception for iPhone 16 Pro Max
+        if (safeAreaTop === 53 && safeAreaBottom === 29) {
+            state = "notch sixteen-pro-max";
+        }
     }
 </script>
 
@@ -77,6 +85,10 @@
         padding-top: 2px;
     }
 
+    #cobalt-notch-sticker.sixteen-pro-max {
+        padding-top: 12px;
+    }
+
     #cobalt-notch-sticker.notch.x :global(svg) {
         height: 28px;
     }

web/src/components/misc/SectionHeading.svelte

@@ -0,0 +1,91 @@
+<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-reverse;
+        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.2s;
+        opacity: 0.7;
+    }
+
+    .link-copy:focus-visible {
+        opacity: 1;
+    }
+
+    .link-copy :global(.copy-animation) {
+        width: 17px;
+        height: 17px;
+    }
+
+    .link-copy :global(.copy-animation *) {
+        width: 17px;
+        height: 17px;
+    }
+
+    .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: 1.9;
+        text-transform: uppercase;
+    }
+
+    @media (hover: hover) {
+        .heading-container:hover .link-copy {
+            opacity: 1;
+        }
+    }
+</style>

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: () => {

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";
 
@@ -35,7 +35,10 @@
     let downloadButton: SvelteComponent;
 
     let isFocused = false;
+
     let isDisabled = false;
+    let isLoading = false;
+    let isBotCheckOngoing = false;
 
     const validLink = (url: string) => {
         try {
@@ -57,16 +60,18 @@
         goto("/", { replaceState: true });
     }
 
-    $: if (env.TURNSTILE_KEY) {
+    $: 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;
         }
 
@@ -75,8 +80,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);
+                }
             }
         });
     };
@@ -86,7 +93,7 @@
     };
 
     const handleKeydown = (e: KeyboardEvent) => {
-        if (!linkInput || $dialogs.length > 0 || isDisabled) {
+        if (!linkInput || $dialogs.length > 0 || isDisabled || isLoading) {
             return;
         }
 
@@ -133,8 +140,11 @@
         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 />
@@ -153,12 +163,14 @@
             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}
         />
 
-        {#if $link}
+        {#if $link && !isLoading}
             <ClearButton click={() => ($link = "")} />
         {/if}
         {#if validLink($link)}
@@ -166,6 +178,7 @@
                 url={$link}
                 bind:this={downloadButton}
                 bind:disabled={isDisabled}
+                bind:loading={isLoading}
             />
         {/if}
     </div>

web/src/components/save/SupportedServices.svelte

@@ -162,6 +162,14 @@
 
     #services-disclaimer {
         padding: 0;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .expanded #services-disclaimer {
+        padding: 0;
+        user-select: text;
+        -webkit-user-select: text;
     }
 
     @media screen and (max-width: 535px) {

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: ">>",
@@ -86,6 +88,7 @@
 
             return downloadFile({
                 url: response.url,
+                urlType: "redirect",
             });
         }
 

web/src/components/settings/ManageSettings.svelte

@@ -122,5 +122,6 @@
     .button-row {
         display: flex;
         gap: var(--padding);
+        flex-wrap: wrap;
     }
 </style>

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 SectionHeading from "$components/misc/SectionHeading.svelte";
 
     export let title: string;
     export let sectionId: string;
@@ -9,12 +11,19 @@
     export let beta = false;
 
     let focus = false;
+    let copied = false;
 
     $: hash = $page.url.hash.replace("#", "");
 
     $: if (hash === sectionId) {
         focus = true;
     }
+
+    $: if (copied) {
+        setTimeout(() => {
+            copied = false;
+        }, 1500);
+    }
 </script>
 
 <section
@@ -24,12 +33,7 @@
     class:disabled
     aria-hidden={disabled}
 >
-    <div class="settings-content-header">
-        <h3 class="settings-content-title">{title}</h3>
-        {#if beta}
-            <div class="beta-label">{$t("general.beta")}</div>
-        {/if}
-    </div>
+    <SectionHeading {title} {sectionId} {beta} />
     <slot></slot>
 </section>
 
@@ -45,6 +49,7 @@
 
     .settings-content.disabled {
         opacity: 0.5;
+        pointer-events: none;
     }
 
     .settings-content.focus {
@@ -82,27 +87,6 @@
         }
     }
 
-    .settings-content-header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 8px;
-    }
-
-    .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);

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;
         }
 

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>
 
@@ -59,11 +54,11 @@
         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.8;
+        opacity: 0.75;
         height: fit-content;
         border-radius: var(--border-radius);
         transition: transform 0.2s;
@@ -72,12 +67,14 @@
         text-decoration-line: none;
         position: relative;
         scroll-behavior: smooth;
+
+        cursor: pointer;
     }
 
     .sidebar-tab :global(svg) {
         stroke-width: 1.2px;
-        height: 21px;
-        width: 21px;
+        height: 22px;
+        width: 22px;
     }
 
     :global([data-iphone="true"] .sidebar-tab svg) {
@@ -88,19 +85,17 @@
         color: var(--sidebar-bg);
         background: var(--sidebar-highlight);
         opacity: 1;
-        transition: none;
         transform: none;
+        transition: none;
+        animation: pressButton 0.3s;
+        cursor: default;
     }
 
-    :global(.sidebar-tab.animate) {
-        animation: pressButton 0.2s;
-    }
-
-    .sidebar-tab:active:not(.active) {
+    .sidebar-tab:not(.active):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 +107,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 +122,7 @@
             opacity: 1;
             background-color: var(--sidebar-hover);
         }
+
         .sidebar-tab:hover:not(.active) {
             opacity: 1;
             background-color: var(--sidebar-hover);
@@ -149,10 +145,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);

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}
@@ -132,7 +138,7 @@
     }
 
     .subnav-page-content.wide {
-        max-width: 800px;
+        max-width: 700px;
     }
 
     .subnav-page-content.padding {
@@ -170,6 +176,11 @@
 
     .subnav-subtitle {
         padding: 0;
+        transition: opacity 0.1s;
+    }
+
+    .subnav-subtitle.hidden {
+        opacity: 0;
     }
 
     .subnav-subtitle.center {

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 {

web/src/lib/api/api.ts

@@ -1,12 +1,16 @@
 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 { 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";
-import lazySettingGetter from "$lib/settings/lazy-get";
 
 const request = async (url: string) => {
     const getSetting = lazySettingGetter(get(settings));
@@ -34,11 +38,32 @@ const request = async (url: string) => {
 
     await apiOverrideWarning();
 
-    const usingCustomInstance = getSetting("processing", "enableCustomInstances")
-                                && getSetting("processing", "customInstanceURL");
+    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();
-    // FIXME: rewrite this to allow custom instances to specify their own turnstile tokens
-    const session = usingCustomInstance ? undefined : await getSession();
+
+    const session = getCachedInfo?.info?.cobalt?.turnstileSitekey
+                    ? await getSession() : undefined;
 
     let extraHeaders = {}
 

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;
     }
 

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";
 
-const openSavingDialog = ({ url, file, body }: { url?: string, file?: File, body?: string }) => {
+import type { DialogInfo } from "$lib/types/dialog";
+import type { CobaltFileUrlType } from "$lib/types/api";
+
+type DownloadFileParams = {
+    url?: string,
+    file?: File,
+    urlType?: CobaltFileUrlType,
+}
+
+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 });
 }

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 = {

web/src/lib/polyfills.ts

@@ -1 +1,2 @@
 import "./polyfills/user-activation";
+import "./polyfills/abortsignal-timeout";

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;
+    }
+}

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,
@@ -51,6 +53,7 @@ export type CobaltServerInfo = {
         url: string,
         startTime: string,
         durationLimit: number,
+        turnstileSitekey?: string,
         services: string[]
     },
     git: {
@@ -64,6 +67,6 @@ export type CobaltSessionResponse = CobaltSession | CobaltErrorResponse;
 export type CobaltServerInfoResponse = CobaltServerInfo | CobaltErrorResponse;
 
 export type CobaltAPIResponse = CobaltErrorResponse
-                            | CobaltPickerResponse
-                            | CobaltRedirectResponse
-                            | CobaltTunnelResponse;
+                              | CobaltPickerResponse
+                              | CobaltRedirectResponse
+                              | CobaltTunnelResponse;

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;

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>
@@ -196,7 +203,7 @@
         --input-border: #383838;
 
         --toggle-bg: var(--input-border);
-        --toggle-bg-enabled: #777777;
+        --toggle-bg-enabled: #8a8a8a;
 
         --sidebar-mobile-gradient: linear-gradient(
             90deg,
@@ -252,7 +259,7 @@
     }
 
     /* add padding for notch / dynamic island in landscape */
-    @media screen and (orientation: landscape) {
+    @media screen and (orientation: landscape) and (min-width: 535px) {
         #cobalt[data-iphone="true"] {
             grid-template-columns:
                 calc(
@@ -471,6 +478,7 @@
 
     :global(.long-text-noto ul) {
         padding-inline-start: 30px;
+        margin-block-start: 9px;
     }
 
     :global(.long-text-noto li) {
@@ -485,6 +493,19 @@
         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;
+    }
+
+    :global(::selection) {
+        color: var(--primary);
+        background: var(--secondary);
+    }
+
     @media screen and (max-width: 535px) {
         :global(.long-text-noto),
         :global(.long-text-noto *:not(h1, h2, h3, h4, h5, h6)) {

web/src/routes/_headers/+server.ts

@@ -0,0 +1,21 @@
+export function GET() {
+    const _headers = {
+        "/*": {
+            "Cross-Origin-Opener-Policy": "same-origin",
+            "Cross-Origin-Embedder-Policy": "require-corp",
+        }
+    }
+
+    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;

web/src/routes/about/[page]/+page.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	export let data: PageData;
+</script>
+
+<svelte:component this={data.component} />

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;

web/src/routes/about/credits/+page.svelte

@@ -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>

web/src/routes/about/general/+page.svelte

@@ -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>

web/src/routes/about/privacy/+page.svelte

@@ -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>

web/src/routes/about/terms/+page.svelte

@@ -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>

web/src/routes/donate/+page.svelte

@@ -33,6 +33,7 @@
 
         <section id="motivation" class="long-text-noto">
             <p>{$t("donate.body.motivation")}</p>
+            <p>{$t("donate.body.no_bullshit")}</p>
             <p>{$t("donate.body.keep_going")}</p>
         </section>
 
@@ -119,6 +120,10 @@
         gap: 10px;
     }
 
+    #motivation p:first-child {
+        margin-block-start: 10px;
+    }
+
     @media screen and (max-width: 760px) {
         #support-options {
             flex-direction: column;

web/src/routes/settings/audio/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import settings from "$lib/state/settings";
     import { t } from "$lib/i18n/translations";
 
     import { audioFormatOptions, audioBitrateOptions } from "$lib/types/settings";
@@ -9,7 +10,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 +24,11 @@
     </Switcher>
 </SettingsCategory>
 
-
-<SettingsCategory sectionId="audio-bitrate" title={$t("settings.audio.bitrate")}>
+<SettingsCategory 
+    sectionId="bitrate" 
+    title={$t("settings.audio.bitrate")}
+    disabled={["wav", "best"].includes($settings.save.audioFormat)}
+>
     <Switcher big={true} description={$t("settings.audio.bitrate.description")}>
         {#each audioBitrateOptions as value}
             <SettingsButton

web/src/routes/settings/download/+page.svelte

@@ -45,7 +45,7 @@
 </SettingsCategory>
 
 <SettingsCategory
-    sectionId="disable-metadata"
+    sectionId="metadata"
     title={$t("settings.metadata.file")}
 >
     <SettingsToggle

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

web/static/_headers

@@ -1,3 +0,0 @@
-/*
-    Cross-Origin-Opener-Policy: same-origin
-    Cross-Origin-Embedder-Policy: require-corp

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 = {
@@ -24,10 +26,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: {
@@ -40,6 +48,39 @@ 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": ["*", "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=",
+                ],
+
+                "frame-ancestors": ["none"]
+            }
+        },
         env: {
             publicPrefix: 'WEB_'
         },

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}`;