Update bootloader.ts

2024-03-30 12:01:33 +00:00 · 2024-03-30 11:59:55 +00:00 · 2024-03-30 11:55:05 +00:00 · 2024-02-14 18:26:27 +00:00 · 2024-02-14 18:15:16 +00:00 · 2024-02-14 18:11:15 +00:00
36 changed files with 44505 additions and 41737 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -0,0 +1,49 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Build project
+        run: npx vite build --base="/FlowOS/"
+
+      - name: Upload production-ready build files
+        uses: actions/upload-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+  deploy:
+    name: Deploy
+    needs: build
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
+
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: production-files
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
--- a/index.html
+++ b/index.html
@ -5,6 +5,18 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlowOS</title>
    <link rel="shortcut icon" href="./src/assets/flow.png" type="image/png">
+
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9675905177363247" crossorigin="anonymous"></script>
+    
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X4XVQRWEVM"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-X4XVQRWEVM');
+    </script>
  </head>
  <body>
    <script src="./src/bootloader.ts" type="module"></script>
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "flowos",
-  "version": "2.0.0",
+  "version": "2.4.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "flowos",
-      "version": "2.0.0",
+      "version": "2.4.0",
      "license": "MIT",
      "dependencies": {
        "ansi-to-html": "^0.7.2",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "flowos",
-  "version": "2.0.0",
+  "version": "2.4.0",
  "description": "The most aesthetic webOS.",
  "main": "src/bootloader.ts",
  "scripts": {
--- a/public/privacy.html
+++ b/public/privacy.html
@ -0,0 +1,56 @@
+<h1>Privacy Policy for Flow Works</h1>
+
+<p>At FlowOS, accessible from https://flow-works.me, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by FlowOS and how we use it.</p>
+
+<p>If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.</p>
+
+<h2>Log Files</h2>
+
+<p>FlowOS follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information.</p>
+
+<h2>Cookies and Web Beacons</h2>
+
+<p>Like any other website, FlowOS uses "cookies". These cookies are used to store information including visitors' preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information.</p>
+
+<h2>Google DoubleClick DART Cookie</h2>
+
+<p>Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL – <a href="https://policies.google.com/technologies/ads">https://policies.google.com/technologies/ads</a></p>
+
+<h2>Our Advertising Partners</h2>
+
+<p>Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.</p>
+
+<ul>
+    <li>
+        <p>Google</p>
+        <p><a href="https://policies.google.com/technologies/ads">https://policies.google.com/technologies/ads</a></p>
+    </li>
+</ul>
+
+<h2>Privacy Policies</h2>
+
+<P>You may consult this list to find the Privacy Policy for each of the advertising partners of FlowOS.</p>
+
+<p>Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on FlowOS, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.</p>
+
+<p>Note that FlowOS has no access to or control over these cookies that are used by third-party advertisers.</p>
+
+<h2>Third Party Privacy Policies</h2>
+
+<p>FlowOS's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options. </p>
+
+<p>You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites.</p>
+
+<h2>Children's Information</h2>
+
+<p>Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.</p>
+
+<p>FlowOS does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.</p>
+
+<h2>Online Privacy Policy Only</h2>
+
+<p>This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in FlowOS. This policy is not applicable to any information collected offline or via channels other than this website.</p>
+
+<h2>Consent</h2>
+
+<p>By using our website, you hereby consent to our Privacy Policy and agree to its Terms and Conditions.</p>
--- a/public/uv-sw.js
+++ b/public/uv-sw.js
@ -1,9 +1,21 @@
-// @ts-nocheck
+/*global UVServiceWorker,__uv$config*/
+/*
+ * Stock service worker script.
+ * Users can provide their own sw.js if they need to extend the functionality of the service worker.
+ * Ideally, this will be registered under the scope in uv.config.js so it will not need to be modified.
+ * However, if a user changes the location of uv.bundle.js/uv.config.js or sw.js is not relative to them, they will need to modify this script locally.
+ */

-importScripts('/uv/uv.sw.js');
+
+importScripts(`uv.config.js`);

 const params = new URL(self.location.href).searchParams
 const serverURL = atob(params.get('url'));
-const sw = new UVServiceWorker(serverURL);
+self.__uv$config.bare = `${serverURL}/bare/`

-self.addEventListener('fetch', event => event.respondWith(sw.fetch(event)));
+importScripts('uv.bundle.js');
+importScripts(__uv$config.sw || 'uv.sw.js');
+
+const sw = new UVServiceWorker();
+
+self.addEventListener('fetch', (event) => event.respondWith(sw.fetch(event)));
--- a/public/uv.bundle.js
+++ b/public/uv.bundle.js
--- a/public/uv.bundle.js.map
+++ b/public/uv.bundle.js.map
--- a/public/uv.client.js
+++ b/public/uv.client.js
--- a/public/uv.client.js.map
+++ b/public/uv.client.js.map
--- a/public/uv.config.js
+++ b/public/uv.config.js
@ -0,0 +1,40 @@
+/*global Ultraviolet*/
+
+const xor = {
+    encode: (str) => encodeURIComponent(
+      str
+        .toString()
+        .split('')
+        .map((char, ind) => {
+          const indCheck = ind % 2 === 0 ? false : true
+
+          return indCheck ? String.fromCharCode(char.charCodeAt(0) ^ 2) : char
+        })
+        .join('')
+    ),
+    decode: (str) => {
+      const [input, ...search] = str.split('?')
+
+      return (
+        decodeURIComponent(input)
+          .split('')
+          .map((char, ind) => {
+            const indCheck = ind % 2 === 0 ? false : true
+
+            return indCheck ? String.fromCharCode(char.charCodeAt(0) ^ 2) : char
+          })
+          .join('') + ((search.length > 0) ? `?${search.join('?')}` : '')
+      )
+    }
+}
+
+self.__uv$config = {
+    prefix: '/service/',
+    encodeUrl: xor.encode,
+    decodeUrl: xor.decode,
+    handler: '/uv.handler.js',
+    client: '/uv.client.js',
+    bundle: '/uv.bundle.js',
+    config: '/uv.config.js',
+    sw: '/uv.sw.js',
+};
--- a/public/uv.handler.js
+++ b/public/uv.handler.js
--- a/public/uv.handler.js.map
+++ b/public/uv.handler.js.map
--- a/public/uv.sw.js
+++ b/public/uv.sw.js
@ -0,0 +1,368 @@
+(() => {
+  // src/uv.sw.js
+  var Ultraviolet = self.Ultraviolet;
+  var cspHeaders = [
+    "cross-origin-embedder-policy",
+    "cross-origin-opener-policy",
+    "cross-origin-resource-policy",
+    "content-security-policy",
+    "content-security-policy-report-only",
+    "expect-ct",
+    "feature-policy",
+    "origin-isolation",
+    "strict-transport-security",
+    "upgrade-insecure-requests",
+    "x-content-type-options",
+    "x-download-options",
+    "x-frame-options",
+    "x-permitted-cross-domain-policies",
+    "x-powered-by",
+    "x-xss-protection"
+  ];
+  var emptyMethods = ["GET", "HEAD"];
+  var UVServiceWorker = class extends Ultraviolet.EventEmitter {
+    constructor(config = __uv$config) {
+      super();
+      if (!config.bare)
+        config.bare = "/bare/";
+      if (!config.prefix)
+        config.prefix = "/service/";
+      this.config = config;
+      const addresses = (Array.isArray(config.bare) ? config.bare : [config.bare]).map((str) => new URL(str, location).toString());
+      this.address = addresses[~~(Math.random() * addresses.length)];
+      this.bareClient = new Ultraviolet.BareClient(this.address);
+    }
+    /**
+     *
+     * @param {Event & {request: Request}} param0
+     * @returns
+     */
+    async fetch({ request }) {
+      let fetchedURL;
+      try {
+        if (!request.url.startsWith(location.origin + this.config.prefix))
+          return await fetch(request);
+        const ultraviolet = new Ultraviolet(this.config, this.address);
+        if (typeof this.config.construct === "function") {
+          this.config.construct(ultraviolet, "service");
+        }
+        const db = await ultraviolet.cookie.db();
+        ultraviolet.meta.origin = location.origin;
+        ultraviolet.meta.base = ultraviolet.meta.url = new URL(
+          ultraviolet.sourceUrl(request.url)
+        );
+        const requestCtx = new RequestContext(
+          request,
+          this,
+          ultraviolet,
+          !emptyMethods.includes(request.method.toUpperCase()) ? await request.blob() : null
+        );
+        if (ultraviolet.meta.url.protocol === "blob:") {
+          requestCtx.blob = true;
+          requestCtx.base = requestCtx.url = new URL(
+            requestCtx.url.pathname
+          );
+        }
+        if (request.referrer && request.referrer.startsWith(location.origin)) {
+          const referer = new URL(
+            ultraviolet.sourceUrl(request.referrer)
+          );
+          if (requestCtx.headers.origin || ultraviolet.meta.url.origin !== referer.origin && request.mode === "cors") {
+            requestCtx.headers.origin = referer.origin;
+          }
+          requestCtx.headers.referer = referer.href;
+        }
+        const cookies = await ultraviolet.cookie.getCookies(db) || [];
+        const cookieStr = ultraviolet.cookie.serialize(
+          cookies,
+          ultraviolet.meta,
+          false
+        );
+        requestCtx.headers["user-agent"] = navigator.userAgent;
+        if (cookieStr)
+          requestCtx.headers.cookie = cookieStr;
+        const reqEvent = new HookEvent(requestCtx, null, null);
+        this.emit("request", reqEvent);
+        if (reqEvent.intercepted)
+          return reqEvent.returnValue;
+        fetchedURL = requestCtx.blob ? "blob:" + location.origin + requestCtx.url.pathname : requestCtx.url;
+        const response = await this.bareClient.fetch(fetchedURL, {
+          headers: requestCtx.headers,
+          method: requestCtx.method,
+          body: requestCtx.body,
+          credentials: requestCtx.credentials,
+          mode: location.origin !== requestCtx.address.origin ? "cors" : requestCtx.mode,
+          cache: requestCtx.cache,
+          redirect: requestCtx.redirect
+        });
+        const responseCtx = new ResponseContext(requestCtx, response);
+        const resEvent = new HookEvent(responseCtx, null, null);
+        this.emit("beforemod", resEvent);
+        if (resEvent.intercepted)
+          return resEvent.returnValue;
+        for (const name of cspHeaders) {
+          if (responseCtx.headers[name])
+            delete responseCtx.headers[name];
+        }
+        if (responseCtx.headers.location) {
+          responseCtx.headers.location = ultraviolet.rewriteUrl(
+            responseCtx.headers.location
+          );
+        }
+        if (request.destination === "document") {
+          const header = responseCtx.headers["content-disposition"];
+          if (!/\s*?((inline|attachment);\s*?)filename=/i.test(header)) {
+            const type = /^\s*?attachment/i.test(header) ? "attachment" : "inline";
+            const [filename] = new URL(response.finalURL).pathname.split("/").slice(-1);
+            responseCtx.headers["content-disposition"] = `${type}; filename=${JSON.stringify(filename)}`;
+          }
+        }
+        if (responseCtx.headers["set-cookie"]) {
+          Promise.resolve(
+            ultraviolet.cookie.setCookies(
+              responseCtx.headers["set-cookie"],
+              db,
+              ultraviolet.meta
+            )
+          ).then(() => {
+            self.clients.matchAll().then(function(clients) {
+              clients.forEach(function(client) {
+                client.postMessage({
+                  msg: "updateCookies",
+                  url: ultraviolet.meta.url.href
+                });
+              });
+            });
+          });
+          delete responseCtx.headers["set-cookie"];
+        }
+        if (responseCtx.body) {
+          switch (request.destination) {
+            case "script":
+            case "worker":
+              {
+                const scripts = [
+                  ultraviolet.bundleScript,
+                  ultraviolet.clientScript,
+                  ultraviolet.configScript,
+                  ultraviolet.handlerScript
+                ].map((script) => JSON.stringify(script)).join(",");
+                responseCtx.body = `if (!self.__uv && self.importScripts) { ${ultraviolet.createJsInject(
+                  this.address,
+                  this.bareClient.manifest,
+                  ultraviolet.cookie.serialize(
+                    cookies,
+                    ultraviolet.meta,
+                    true
+                  ),
+                  request.referrer
+                )} importScripts(${scripts}); }
+`;
+                responseCtx.body += ultraviolet.js.rewrite(
+                  await response.text()
+                );
+              }
+              break;
+            case "style":
+              responseCtx.body = ultraviolet.rewriteCSS(
+                await response.text()
+              );
+              break;
+            case "iframe":
+            case "document":
+              if (isHtml(
+                ultraviolet.meta.url,
+                responseCtx.headers["content-type"] || ""
+              )) {
+                responseCtx.body = ultraviolet.rewriteHtml(
+                  await response.text(),
+                  {
+                    document: true,
+                    injectHead: ultraviolet.createHtmlInject(
+                      ultraviolet.handlerScript,
+                      ultraviolet.bundleScript,
+                      ultraviolet.clientScript,
+                      ultraviolet.configScript,
+                      this.address,
+                      this.bareClient.manifest,
+                      ultraviolet.cookie.serialize(
+                        cookies,
+                        ultraviolet.meta,
+                        true
+                      ),
+                      request.referrer
+                    )
+                  }
+                );
+              }
+          }
+        }
+        if (requestCtx.headers.accept === "text/event-stream") {
+          responseCtx.headers["content-type"] = "text/event-stream";
+        }
+        if (crossOriginIsolated) {
+          responseCtx.headers["Cross-Origin-Embedder-Policy"] = "require-corp";
+        }
+        this.emit("response", resEvent);
+        if (resEvent.intercepted)
+          return resEvent.returnValue;
+        return new Response(responseCtx.body, {
+          headers: responseCtx.headers,
+          status: responseCtx.status,
+          statusText: responseCtx.statusText
+        });
+      } catch (err) {
+        if (!["document", "iframe"].includes(request.destination))
+          return new Response(void 0, { status: 500 });
+        console.error(err);
+        return renderError(err, fetchedURL, this.address);
+      }
+    }
+    static Ultraviolet = Ultraviolet;
+  };
+  self.UVServiceWorker = UVServiceWorker;
+  var ResponseContext = class {
+    /**
+     *
+     * @param {RequestContext} request
+     * @param {import("@tomphttp/bare-client").BareResponseFetch} response
+     */
+    constructor(request, response) {
+      this.request = request;
+      this.raw = response;
+      this.ultraviolet = request.ultraviolet;
+      this.headers = {};
+      for (const key in response.rawHeaders)
+        this.headers[key.toLowerCase()] = response.rawHeaders[key];
+      this.status = response.status;
+      this.statusText = response.statusText;
+      this.body = response.body;
+    }
+    get url() {
+      return this.request.url;
+    }
+    get base() {
+      return this.request.base;
+    }
+    set base(val) {
+      this.request.base = val;
+    }
+  };
+  var RequestContext = class {
+    /**
+     *
+     * @param {Request} request
+     * @param {UVServiceWorker} worker
+     * @param {Ultraviolet} ultraviolet
+     * @param {BodyInit} body
+     */
+    constructor(request, worker, ultraviolet, body = null) {
+      this.ultraviolet = ultraviolet;
+      this.request = request;
+      this.headers = Object.fromEntries(request.headers.entries());
+      this.method = request.method;
+      this.address = worker.address;
+      this.body = body || null;
+      this.cache = request.cache;
+      this.redirect = request.redirect;
+      this.credentials = "omit";
+      this.mode = request.mode === "cors" ? request.mode : "same-origin";
+      this.blob = false;
+    }
+    get url() {
+      return this.ultraviolet.meta.url;
+    }
+    set url(val) {
+      this.ultraviolet.meta.url = val;
+    }
+    get base() {
+      return this.ultraviolet.meta.base;
+    }
+    set base(val) {
+      this.ultraviolet.meta.base = val;
+    }
+  };
+  function isHtml(url, contentType = "") {
+    return (Ultraviolet.mime.contentType(contentType || url.pathname) || "text/html").split(";")[0] === "text/html";
+  }
+  var HookEvent = class {
+    #intercepted;
+    #returnValue;
+    constructor(data = {}, target = null, that = null) {
+      this.#intercepted = false;
+      this.#returnValue = null;
+      this.data = data;
+      this.target = target;
+      this.that = that;
+    }
+    get intercepted() {
+      return this.#intercepted;
+    }
+    get returnValue() {
+      return this.#returnValue;
+    }
+    respondWith(input) {
+      this.#returnValue = input;
+      this.#intercepted = true;
+    }
+  };
+  function hostnameErrorTemplate(fetchedURL, bareServer) {
+    const parsedFetchedURL = new URL(fetchedURL);
+    const script = `remoteHostname.textContent = ${JSON.stringify(
+      parsedFetchedURL.hostname
+    )};bareServer.href = ${JSON.stringify(bareServer)};uvHostname.textContent = ${JSON.stringify(location.hostname)};reload.addEventListener("click", () => location.reload());uvVersion.textContent = ${JSON.stringify(
+      "2.0.0"
+    )};`;
+    return `<!DOCTYPE html><html><head><meta charset='utf-8' /><title>Error</title></head><body><h1>This site can\u2019t be reached</h1><hr /><p><b id="remoteHostname"></b>\u2019s server IP address could not be found.</p><p>Try:</p><ul><li>Verifying you entered the correct address</li><li>Clearing the site data</li><li>Contacting <b id="uvHostname"></b>'s administrator</li><li>Verifying the <a id='bareServer' title='Bare server'>${config.bare}</a> isn't censored</li></ul><button id="reload">Reload</button><hr /><p><i>Ultraviolet v<span id="uvVersion"></span></i></p><script src="${"data:application/javascript," + encodeURIComponent(script)}"><\/script></body></html>`;
+  }
+  function errorTemplate(title, code, id, message, trace, fetchedURL, bareServer) {
+    if (message === "The specified host could not be resolved.")
+      return hostnameErrorTemplate(fetchedURL, bareServer);
+    const script = `errorTitle.textContent = ${JSON.stringify(title)};errorCode.textContent = ${JSON.stringify(code)};` + (id ? `errorId.textContent = ${JSON.stringify(id)};` : "") + `errorMessage.textContent =  ${JSON.stringify(message)};errorTrace.value = ${JSON.stringify(trace)};fetchedURL.textContent = ${JSON.stringify(fetchedURL)};bareServer.href = ${JSON.stringify(bareServer)};for (const node of document.querySelectorAll("#uvHostname")) node.textContent = ${JSON.stringify(
+      location.hostname
+    )};reload.addEventListener("click", () => location.reload());uvVersion.textContent = ${JSON.stringify(
+      "2.0.0"
+    )};`;
+    return `<!DOCTYPE html><html><head><meta charset='utf-8' /><title>Error</title></head><body><h1 id='errorTitle'></h1><hr /><p>Failed to load <b id="fetchedURL"></b></p><p id="errorMessage"></p><table><tbody><tr><td>Code:</td><td id="errorCode"></td></tr>` + (id ? '<tr><td>ID:</td><td id="errorId"></td></tr>' : "") + `</tbody></table><textarea id="errorTrace" cols="40" rows="10" readonly></textarea><p>Try:</p><ul><li>Checking your internet connection</li><li>Verifying you entered the correct address</li><li>Clearing the site data</li><li>Contacting <b id="uvHostname"></b>'s administrator</li><li>Verify the <a id='bareServer' title='Bare server'>${config.bare}</a> isn't censored</li></ul><p>If you're the administrator of <b id="uvHostname"></b>, try:</p><ul><li>Restarting your Bare server</li><li>Updating Ultraviolet</li><li>Troubleshooting the error on the <a href="https://github.com/titaniumnetwork-dev/Ultraviolet" target="_blank">GitHub repository</a></li></ul><button id="reload">Reload</button><hr /><p><i>Ultraviolet v<span id="uvVersion"></span></i></p><script src="${"data:application/javascript," + encodeURIComponent(script)}"><\/script></body></html>`;
+  }
+  function isBareError(err) {
+    return err instanceof Error && typeof err.body === "object";
+  }
+  function renderError(err, fetchedURL, bareServer) {
+    let status;
+    let title;
+    let code;
+    let id = "";
+    let message;
+    if (isBareError(err)) {
+      status = err.status;
+      title = "Error communicating with the Bare server";
+      message = err.body.message;
+      code = err.body.code;
+      id = err.body.id;
+    } else {
+      status = 500;
+      title = "Error processing your request";
+      message = "Internal Server Error";
+      code = err instanceof Error ? err.name : "UNKNOWN";
+    }
+    return new Response(
+      errorTemplate(
+        title,
+        code,
+        id,
+        message,
+        String(err),
+        fetchedURL,
+        bareServer
+      ),
+      {
+        status,
+        headers: {
+          "content-type": "text/html"
+        }
+      }
+    );
+  }
+})();
+//# sourceMappingURL=uv.sw.js.map
--- a/public/uv.sw.js.map
+++ b/public/uv.sw.js.map
--- a/public/uv/uv.bundle.js
+++ b/public/uv/uv.bundle.js
--- a/public/uv/uv.config.js
+++ b/public/uv/uv.config.js
@ -1,38 +0,0 @@
-self.xor = {
-  randomMax: 100,
-  randomMin: -100,
-
-  encode: (str) => {
-    if (!str) return str
-    return encodeURIComponent(
-      str
-        .toString()
-        .split('')
-        .map((char, ind) =>
-          ind % 2 ? String.fromCharCode(char.charCodeAt() ^ 2) : char
-        )
-        .join('')
-    )
-  },
-  decode: (str) => {
-    if (!str) return str
-    const [input, ...search] = str.split('?')
-
-    return (
-      decodeURIComponent(input)
-        .split('')
-        .map((char, ind) =>
-          ind % 2 ? String.fromCharCode(char.charCodeAt(0) ^ 2) : char
-        )
-        .join('') + (search.length ? '?' + search.join('?') : '')
-    )
-  }
-}
-self.__uv$config = {
-  prefix: '/service/',
-  encodeUrl: self.xor.encode,
-  decodeUrl: self.xor.decode,
-  handler: '/uv/uv.handler.js',
-  bundle: '/uv/uv.bundle.js',
-  config: '/uv/uv.config.js',
-}
--- a/public/uv/uv.handler.js
+++ b/public/uv/uv.handler.js
--- a/public/uv/uv.sw.js
+++ b/public/uv/uv.sw.js
@ -1,789 +0,0 @@
-importScripts('/uv/uv.bundle.js');
-importScripts('/uv/uv.config.js');
-
-class UVServiceWorker extends EventEmitter {     
-    constructor(serverURL, config = __uv$config) {
-        super();
-        config.bare = serverURL + '/bare/';
-        this.addresses = typeof config.bare === 'string' ? [ new URL(config.bare, location) ] : config.bare.map(str => new URL(str, location));
-        this.headers = {
-            csp: [
-                'cross-origin-embedder-policy',
-                'cross-origin-opener-policy',
-                'cross-origin-resource-policy',
-                'content-security-policy',
-                'content-security-policy-report-only',
-                'expect-ct',
-                'feature-policy',
-                'origin-isolation',
-                'strict-transport-security',
-                'upgrade-insecure-requests',
-                'x-content-type-options',
-                'x-download-options',
-                'x-frame-options',
-                'x-permitted-cross-domain-policies',
-                'x-powered-by',
-                'x-xss-protection',
-            ],
-            forward: [
-                'accept-encoding', 
-                'connection',
-                'content-length',
-            ],
-        };
-        this.method = {
-            empty: [
-                'GET',
-                'HEAD'
-            ]
-        };
-        this.statusCode = {
-            empty: [ 
-                204,
-                304,
-            ],
-        };  
-        this.config = config;
-        this.browser = Ultraviolet.Bowser.getParser(self.navigator.userAgent).getBrowserName();
-
-        if (this.browser === 'Firefox') {
-            this.headers.forward.push('user-agent');
-            this.headers.forward.push('content-type');
-        };
-    };
-    async fetch({ request }) {
-        if (!request.url.startsWith(location.origin + (this.config.prefix || '/service/'))) {
-            return fetch(request);
-        };
-        try {
-
-            const ultraviolet = new Ultraviolet(this.config);
-
-            if (typeof this.config.construct === 'function') {
-                this.config.construct(ultraviolet, 'service');
-            };
-
-            const db = await ultraviolet.cookie.db();
-
-            ultraviolet.meta.origin = location.origin;
-            ultraviolet.meta.base = ultraviolet.meta.url = new URL(ultraviolet.sourceUrl(request.url));
-
-            const requestCtx = new RequestContext(
-                request, 
-                this, 
-                ultraviolet, 
-                !this.method.empty.includes(request.method.toUpperCase()) ? await request.blob() : null
-            );
-
-            if (ultraviolet.meta.url.protocol === 'blob:') {
-                requestCtx.blob = true;
-                requestCtx.base = requestCtx.url = new URL(requestCtx.url.pathname);
-            };
-
-            if (request.referrer && request.referrer.startsWith(location.origin)) {
-                const referer = new URL(ultraviolet.sourceUrl(request.referrer));
-
-                if (requestCtx.headers.origin || ultraviolet.meta.url.origin !== referer.origin && request.mode === 'cors') {
-                    requestCtx.headers.origin = referer.origin;
-                };
-
-                requestCtx.headers.referer = referer.href;
-            };
-
-            const cookies = await ultraviolet.cookie.getCookies(db) || [];
-            const cookieStr = ultraviolet.cookie.serialize(cookies, ultraviolet.meta, false);
-
-            if (this.browser === 'Firefox' && !(request.destination === 'iframe' || request.destination === 'document')) {
-                requestCtx.forward.shift();
-            };
-
-            if (cookieStr) requestCtx.headers.cookie = cookieStr;
-            requestCtx.headers.Host = requestCtx.url.host;
-
-
-            const reqEvent = new HookEvent(requestCtx, null, null);
-            this.emit('request', reqEvent);
-
-            if (reqEvent.intercepted) return reqEvent.returnValue;
-
-            const response = await fetch(requestCtx.send);
-
-            if (response.status === 500) {
-                return Promise.reject('');
-            };
-
-            const responseCtx = new ResponseContext(requestCtx, response, this);
-            const resEvent = new HookEvent(responseCtx, null, null);
-
-            this.emit('beforemod', resEvent);
-            if (resEvent.intercepted) return resEvent.returnValue;
-
-            for (const name of this.headers.csp) {
-                if (responseCtx.headers[name]) delete responseCtx.headers[name];
-            }; 
-            
-            if (responseCtx.headers.location) {
-                responseCtx.headers.location = ultraviolet.rewriteUrl(responseCtx.headers.location);
-            };
-
-            if (responseCtx.headers['set-cookie']) {
-                Promise.resolve(ultraviolet.cookie.setCookies(responseCtx.headers['set-cookie'], db, ultraviolet.meta)).then(() => {
-                    self.clients.matchAll().then(function (clients){
-                        clients.forEach(function(client){
-                            client.postMessage({
-                                msg: 'updateCookies',
-                                url: ultraviolet.meta.url.href,
-                            });
-                        });
-                    });
-                });
-                delete responseCtx.headers['set-cookie'];
-            };
-
-            if (responseCtx.body) {
-                switch(request.destination) {
-                    case 'script':
-                    case 'worker':
-                        responseCtx.body = `if (!self.__uv && self.importScripts) importScripts('${__uv$config.bundle}', '${__uv$config.config}', '${__uv$config.handler}');\n`;
-                        responseCtx.body += ultraviolet.js.rewrite(
-                            await response.text()
-                        );
-                        break;
-                    case 'style':
-                        responseCtx.body = ultraviolet.rewriteCSS(
-                            await response.text()
-                        ); 
-                        break;
-                case 'iframe':
-                case 'document':
-                        if (isHtml(ultraviolet.meta.url, (responseCtx.headers['content-type'] || ''))) {
-                            responseCtx.body = ultraviolet.rewriteHtml(
-                                await response.text(), 
-                                { 
-                                    document: true ,
-                                    injectHead: ultraviolet.createHtmlInject(
-                                        this.config.handler, 
-                                        this.config.bundle, 
-                                        this.config.config,
-                                        ultraviolet.cookie.serialize(cookies, ultraviolet.meta, true), 
-                                        request.referrer
-                                    )
-                                }
-                            );      
-                        };
-                };
-            };
-
-            if (requestCtx.headers.accept === 'text/event-stream') {
-                responseCtx.headers['content-type'] = 'text/event-stream';
-            };
-
-            this.emit('response', resEvent);
-            if (resEvent.intercepted) return resEvent.returnValue;
-
-            return new Response(responseCtx.body, {
-                headers: responseCtx.headers,
-                status: responseCtx.status,
-                statusText: responseCtx.statusText,
-            });
-
-        } catch(err) {
-            return new Response(err.toString(), {
-                status: 500,
-            });
-        };
-    };
-    getBarerResponse(response) {
-        const headers = {};
-        const raw = JSON.parse(response.headers.get('x-bare-headers'));
-
-        for (const key in raw) {
-            headers[key.toLowerCase()] = raw[key];
-        };
-
-        return {
-            headers,
-            status: +response.headers.get('x-bare-status'),
-            statusText: response.headers.get('x-bare-status-text'),
-            body: !this.statusCode.empty.includes(+response.headers.get('x-bare-status')) ? response.body : null,
-        };
-    };
-    get address() {
-        return this.addresses[Math.floor(Math.random() * this.addresses.length)];
-    };
-    static Ultraviolet = Ultraviolet;
-};
-
-self.UVServiceWorker = UVServiceWorker;
-
-
-class ResponseContext {
-    constructor(request, response, worker) {
-        const { headers, status, statusText, body } = !request.blob ? worker.getBarerResponse(response) : {
-            status: response.status, 
-            statusText: response.statusText,
-            headers: Object.fromEntries([...response.headers.entries()]),
-            body: response.body,
-        };
-        this.request = request;
-        this.raw = response;
-        this.ultraviolet = request.ultraviolet;
-        this.headers = headers;
-        this.status = status;
-        this.statusText = statusText;
-        this.body = body;
-    };
-    get url() {
-        return this.request.url;
-    }
-    get base() {
-        return this.request.base;
-    };
-    set base(val) {
-        this.request.base = val;
-    };
-};
-
-class RequestContext {
-    constructor(request, worker, ultraviolet, body = null) {
-        this.ultraviolet = ultraviolet;
-        this.request = request;
-        this.headers = Object.fromEntries([...request.headers.entries()]);
-        this.method = request.method;
-        this.forward = [...worker.headers.forward];
-        this.address = worker.address;
-        this.body = body || null;
-        this.redirect = request.redirect;
-        this.credentials = 'omit';
-        this.mode = request.mode === 'cors' ? request.mode : 'same-origin';
-        this.blob = false;
-    };
-    get send() {
-        return new Request((!this.blob ? this.address.href + 'v1/' : 'blob:' + location.origin + this.url.pathname), {
-            method: this.method,
-            headers: {
-                'x-bare-protocol': this.url.protocol,
-                'x-bare-host': this.url.hostname,
-                'x-bare-path': this.url.pathname + this.url.search,
-                'x-bare-port': this.url.port || (this.url.protocol === 'https:' ? '443' : '80'),
-                'x-bare-headers': JSON.stringify(this.headers),
-                'x-bare-forward-headers': JSON.stringify(this.forward),
-            },
-            redirect: this.redirect,
-            credentials: this.credentials,
-            mode: location.origin !== this.address.origin ? 'cors' : this.mode,
-            body: this.body
-        });
-    };
-    get url() {
-        return this.ultraviolet.meta.url;
-    };
-    set url(val) {
-        this.ultraviolet.meta.url = val;
-    };
-    get base() {
-        return this.ultraviolet.meta.base;
-    };
-    set base(val) {
-        this.ultraviolet.meta.base = val;
-    };
-}
-
-function isHtml(url, contentType = '') {
-    return (Ultraviolet.mime.contentType((contentType  || url.pathname)) || 'text/html').split(';')[0] === 'text/html';
-};
-
-class HookEvent {
-    #intercepted;
-    #returnValue;
-    constructor(data = {}, target = null, that = null) {
-        this.#intercepted = false;
-        this.#returnValue = null;
-        this.data = data;
-        this.target = target;
-        this.that = that;
-    };
-    get intercepted() {
-        return this.#intercepted;
-    };
-    get returnValue() {
-        return this.#returnValue;
-    };
-    respondWith(input) {
-        this.#returnValue = input;
-        this.#intercepted = true;
-    };
-};  
-
-var R = typeof Reflect === 'object' ? Reflect : null
-var ReflectApply = R && typeof R.apply === 'function'
-  ? R.apply
-  : function ReflectApply(target, receiver, args) {
-    return Function.prototype.apply.call(target, receiver, args);
-  }
-
-var ReflectOwnKeys
-if (R && typeof R.ownKeys === 'function') {
-  ReflectOwnKeys = R.ownKeys
-} else if (Object.getOwnPropertySymbols) {
-  ReflectOwnKeys = function ReflectOwnKeys(target) {
-    return Object.getOwnPropertyNames(target)
-      .concat(Object.getOwnPropertySymbols(target));
-  };
-} else {
-  ReflectOwnKeys = function ReflectOwnKeys(target) {
-    return Object.getOwnPropertyNames(target);
-  };
-}
-
-function ProcessEmitWarning(warning) {
-  if (console && console.warn) console.warn(warning);
-}
-
-var NumberIsNaN = Number.isNaN || function NumberIsNaN(value) {
-  return value !== value;
-}
-
-function EventEmitter() {
-  EventEmitter.init.call(this);
-}
-
-// Backwards-compat with node 0.10.x
-EventEmitter.EventEmitter = EventEmitter;
-
-EventEmitter.prototype._events = undefined;
-EventEmitter.prototype._eventsCount = 0;
-EventEmitter.prototype._maxListeners = undefined;
-
-// By default EventEmitters will print a warning if more than 10 listeners are
-// added to it. This is a useful default which helps finding memory leaks.
-var defaultMaxListeners = 10;
-
-function checkListener(listener) {
-  if (typeof listener !== 'function') {
-    throw new TypeError('The "listener" argument must be of type Function. Received type ' + typeof listener);
-  }
-}
-
-Object.defineProperty(EventEmitter, 'defaultMaxListeners', {
-  enumerable: true,
-  get: function() {
-    return defaultMaxListeners;
-  },
-  set: function(arg) {
-    if (typeof arg !== 'number' || arg < 0 || NumberIsNaN(arg)) {
-      throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received ' + arg + '.');
-    }
-    defaultMaxListeners = arg;
-  }
-});
-
-EventEmitter.init = function() {
-
-  if (this._events === undefined ||
-      this._events === Object.getPrototypeOf(this)._events) {
-    this._events = Object.create(null);
-    this._eventsCount = 0;
-  }
-
-  this._maxListeners = this._maxListeners || undefined;
-};
-
-// Obviously not all Emitters should be limited to 10. This function allows
-// that to be increased. Set to zero for unlimited.
-EventEmitter.prototype.setMaxListeners = function setMaxListeners(n) {
-  if (typeof n !== 'number' || n < 0 || NumberIsNaN(n)) {
-    throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received ' + n + '.');
-  }
-  this._maxListeners = n;
-  return this;
-};
-
-function _getMaxListeners(that) {
-  if (that._maxListeners === undefined)
-    return EventEmitter.defaultMaxListeners;
-  return that._maxListeners;
-}
-
-EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
-  return _getMaxListeners(this);
-};
-
-EventEmitter.prototype.emit = function emit(type) {
-  var args = [];
-  for (var i = 1; i < arguments.length; i++) args.push(arguments[i]);
-  var doError = (type === 'error');
-
-  var events = this._events;
-  if (events !== undefined)
-    doError = (doError && events.error === undefined);
-  else if (!doError)
-    return false;
-
-  // If there is no 'error' event listener then throw.
-  if (doError) {
-    var er;
-    if (args.length > 0)
-      er = args[0];
-    if (er instanceof Error) {
-      // Note: The comments on the `throw` lines are intentional, they show
-      // up in Node's output if this results in an unhandled exception.
-      throw er; // Unhandled 'error' event
-    }
-    // At least give some kind of context to the user
-    var err = new Error('Unhandled error.' + (er ? ' (' + er.message + ')' : ''));
-    err.context = er;
-    throw err; // Unhandled 'error' event
-  }
-
-  var handler = events[type];
-
-  if (handler === undefined)
-    return false;
-
-  if (typeof handler === 'function') {
-    ReflectApply(handler, this, args);
-  } else {
-    var len = handler.length;
-    var listeners = arrayClone(handler, len);
-    for (var i = 0; i < len; ++i)
-      ReflectApply(listeners[i], this, args);
-  }
-
-  return true;
-};
-
-function _addListener(target, type, listener, prepend) {
-  var m;
-  var events;
-  var existing;
-
-  checkListener(listener);
-
-  events = target._events;
-  if (events === undefined) {
-    events = target._events = Object.create(null);
-    target._eventsCount = 0;
-  } else {
-    // To avoid recursion in the case that type === "newListener"! Before
-    // adding it to the listeners, first emit "newListener".
-    if (events.newListener !== undefined) {
-      target.emit('newListener', type,
-                  listener.listener ? listener.listener : listener);
-
-      // Re-assign `events` because a newListener handler could have caused the
-      // this._events to be assigned to a new object
-      events = target._events;
-    }
-    existing = events[type];
-  }
-
-  if (existing === undefined) {
-    // Optimize the case of one listener. Don't need the extra array object.
-    existing = events[type] = listener;
-    ++target._eventsCount;
-  } else {
-    if (typeof existing === 'function') {
-      // Adding the second element, need to change to array.
-      existing = events[type] =
-        prepend ? [listener, existing] : [existing, listener];
-      // If we've already got an array, just append.
-    } else if (prepend) {
-      existing.unshift(listener);
-    } else {
-      existing.push(listener);
-    }
-
-    // Check for listener leak
-    m = _getMaxListeners(target);
-    if (m > 0 && existing.length > m && !existing.warned) {
-      existing.warned = true;
-      // No error code for this since it is a Warning
-      // eslint-disable-next-line no-restricted-syntax
-      var w = new Error('Possible EventEmitter memory leak detected. ' +
-                          existing.length + ' ' + String(type) + ' listeners ' +
-                          'added. Use emitter.setMaxListeners() to ' +
-                          'increase limit');
-      w.name = 'MaxListenersExceededWarning';
-      w.emitter = target;
-      w.type = type;
-      w.count = existing.length;
-      ProcessEmitWarning(w);
-    }
-  }
-
-  return target;
-}
-
-EventEmitter.prototype.addListener = function addListener(type, listener) {
-  return _addListener(this, type, listener, false);
-};
-
-EventEmitter.prototype.on = EventEmitter.prototype.addListener;
-
-EventEmitter.prototype.prependListener =
-    function prependListener(type, listener) {
-      return _addListener(this, type, listener, true);
-    };
-
-function onceWrapper() {
-  if (!this.fired) {
-    this.target.removeListener(this.type, this.wrapFn);
-    this.fired = true;
-    if (arguments.length === 0)
-      return this.listener.call(this.target);
-    return this.listener.apply(this.target, arguments);
-  }
-}
-
-function _onceWrap(target, type, listener) {
-  var state = { fired: false, wrapFn: undefined, target: target, type: type, listener: listener };
-  var wrapped = onceWrapper.bind(state);
-  wrapped.listener = listener;
-  state.wrapFn = wrapped;
-  return wrapped;
-}
-
-EventEmitter.prototype.once = function once(type, listener) {
-  checkListener(listener);
-  this.on(type, _onceWrap(this, type, listener));
-  return this;
-};
-
-EventEmitter.prototype.prependOnceListener =
-    function prependOnceListener(type, listener) {
-      checkListener(listener);
-      this.prependListener(type, _onceWrap(this, type, listener));
-      return this;
-    };
-
-// Emits a 'removeListener' event if and only if the listener was removed.
-EventEmitter.prototype.removeListener =
-    function removeListener(type, listener) {
-      var list, events, position, i, originalListener;
-
-      checkListener(listener);
-
-      events = this._events;
-      if (events === undefined)
-        return this;
-
-      list = events[type];
-      if (list === undefined)
-        return this;
-
-      if (list === listener || list.listener === listener) {
-        if (--this._eventsCount === 0)
-          this._events = Object.create(null);
-        else {
-          delete events[type];
-          if (events.removeListener)
-            this.emit('removeListener', type, list.listener || listener);
-        }
-      } else if (typeof list !== 'function') {
-        position = -1;
-
-        for (i = list.length - 1; i >= 0; i--) {
-          if (list[i] === listener || list[i].listener === listener) {
-            originalListener = list[i].listener;
-            position = i;
-            break;
-          }
-        }
-
-        if (position < 0)
-          return this;
-
-        if (position === 0)
-          list.shift();
-        else {
-          spliceOne(list, position);
-        }
-
-        if (list.length === 1)
-          events[type] = list[0];
-
-        if (events.removeListener !== undefined)
-          this.emit('removeListener', type, originalListener || listener);
-      }
-
-      return this;
-    };
-
-EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
-
-EventEmitter.prototype.removeAllListeners =
-    function removeAllListeners(type) {
-      var listeners, events, i;
-
-      events = this._events;
-      if (events === undefined)
-        return this;
-
-      // not listening for removeListener, no need to emit
-      if (events.removeListener === undefined) {
-        if (arguments.length === 0) {
-          this._events = Object.create(null);
-          this._eventsCount = 0;
-        } else if (events[type] !== undefined) {
-          if (--this._eventsCount === 0)
-            this._events = Object.create(null);
-          else
-            delete events[type];
-        }
-        return this;
-      }
-
-      // emit removeListener for all listeners on all events
-      if (arguments.length === 0) {
-        var keys = Object.keys(events);
-        var key;
-        for (i = 0; i < keys.length; ++i) {
-          key = keys[i];
-          if (key === 'removeListener') continue;
-          this.removeAllListeners(key);
-        }
-        this.removeAllListeners('removeListener');
-        this._events = Object.create(null);
-        this._eventsCount = 0;
-        return this;
-      }
-
-      listeners = events[type];
-
-      if (typeof listeners === 'function') {
-        this.removeListener(type, listeners);
-      } else if (listeners !== undefined) {
-        // LIFO order
-        for (i = listeners.length - 1; i >= 0; i--) {
-          this.removeListener(type, listeners[i]);
-        }
-      }
-
-      return this;
-    };
-
-function _listeners(target, type, unwrap) {
-  var events = target._events;
-
-  if (events === undefined)
-    return [];
-
-  var evlistener = events[type];
-  if (evlistener === undefined)
-    return [];
-
-  if (typeof evlistener === 'function')
-    return unwrap ? [evlistener.listener || evlistener] : [evlistener];
-
-  return unwrap ?
-    unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
-}
-
-EventEmitter.prototype.listeners = function listeners(type) {
-  return _listeners(this, type, true);
-};
-
-EventEmitter.prototype.rawListeners = function rawListeners(type) {
-  return _listeners(this, type, false);
-};
-
-EventEmitter.listenerCount = function(emitter, type) {
-  if (typeof emitter.listenerCount === 'function') {
-    return emitter.listenerCount(type);
-  } else {
-    return listenerCount.call(emitter, type);
-  }
-};
-
-EventEmitter.prototype.listenerCount = listenerCount;
-function listenerCount(type) {
-  var events = this._events;
-
-  if (events !== undefined) {
-    var evlistener = events[type];
-
-    if (typeof evlistener === 'function') {
-      return 1;
-    } else if (evlistener !== undefined) {
-      return evlistener.length;
-    }
-  }
-
-  return 0;
-}
-
-EventEmitter.prototype.eventNames = function eventNames() {
-  return this._eventsCount > 0 ? ReflectOwnKeys(this._events) : [];
-};
-
-function arrayClone(arr, n) {
-  var copy = new Array(n);
-  for (var i = 0; i < n; ++i)
-    copy[i] = arr[i];
-  return copy;
-}
-
-function spliceOne(list, index) {
-  for (; index + 1 < list.length; index++)
-    list[index] = list[index + 1];
-  list.pop();
-}
-
-function unwrapListeners(arr) {
-  var ret = new Array(arr.length);
-  for (var i = 0; i < ret.length; ++i) {
-    ret[i] = arr[i].listener || arr[i];
-  }
-  return ret;
-}
-
-function once(emitter, name) {
-  return new Promise(function (resolve, reject) {
-    function errorListener(err) {
-      emitter.removeListener(name, resolver);
-      reject(err);
-    }
-
-    function resolver() {
-      if (typeof emitter.removeListener === 'function') {
-        emitter.removeListener('error', errorListener);
-      }
-      resolve([].slice.call(arguments));
-    };
-
-    eventTargetAgnosticAddListener(emitter, name, resolver, { once: true });
-    if (name !== 'error') {
-      addErrorHandlerIfEventEmitter(emitter, errorListener, { once: true });
-    }
-  });
-}
-
-function addErrorHandlerIfEventEmitter(emitter, handler, flags) {
-  if (typeof emitter.on === 'function') {
-    eventTargetAgnosticAddListener(emitter, 'error', handler, flags);
-  }
-}
-
-function eventTargetAgnosticAddListener(emitter, name, listener, flags) {
-  if (typeof emitter.on === 'function') {
-    if (flags.once) {
-      emitter.once(name, listener);
-    } else {
-      emitter.on(name, listener);
-    }
-  } else if (typeof emitter.addEventListener === 'function') {
-    // EventTarget does not have `error` event semantics like Node
-    // EventEmitters, we do not listen for `error` events here.
-    emitter.addEventListener(name, function wrapListener(arg) {
-      // IE does not have builtin `{ once: true }` support so we
-      // have to do it manually.
-      if (flags.once) {
-        emitter.removeEventListener(name, wrapListener);
-      }
-      listener(arg);
-    });
-  } else {
-    throw new TypeError('The "emitter" argument must be of type EventEmitter. Received type ' + typeof emitter);
-  }
-}
--- a/src/assets/style.less
+++ b/src/assets/style.less
@ -1,6 +1,7 @@
@import url(https://api.fontshare.com/v2/css?f[]=satoshi@1,2&display=swap);

 :root {
+  --primary: #89b4fa;
  --text: #cdd6f4;
  --surface-2: #585b70;
  --surface-1: #45475a;
@ -48,9 +49,6 @@ html {

  color: var(--text);
 }
-.bx {
-  font-size: 25px;
-}

 toolbar {
  width: 100%;
@ -59,12 +57,32 @@ toolbar {
  background: var(--mantle);
  margin: 0;
  padding: 10px;
+  border-radius: 20px 20px 0 0;
+  border: 1px solid var(--surface-0);
+  box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
+  user-select: none;
+  position: relvative;
+  z-index: 1001;

  & > div {
    &.outlined {
      padding: 10px;
      background: var(--base);
      border-radius: 10px;
+      border: 1px solid var(--surface-0);
+      box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.1), 0 0px 10px rgba(0, 0, 0, 0.1);
+      align-items: center;
+      justify-content: center;
+    }
+
+    &[data-toolbar-id="start"] {
+      cursor: pointer;
+      & * {
+        transition: color .1s ease-in-out;
+        &:hover {
+          color: var(--primary);
+        }
+      }
    }

    &[data-toolbar-id="controls"] {
@ -76,6 +94,7 @@ toolbar {

    &[data-toolbar-id="plugins"] {
      width: 24px;
+      cursor: pointer;
      padding: 10px 0;
    }

@ -115,7 +134,8 @@ window-area {
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid;
+    border-color: color-mix(in srgb, var(--text) 20%, transparent);
    background: var(--crust);
    transition: 0.2s opacity, 0.2s transform;

@ -147,103 +167,9 @@ window-area {
  }
 }

-launcher {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 99999999999999999999999;
-  width: calc(100vw + 20px);
-  height: calc(100vh + 20px);
-  gap: 20px;
-  transition: 0.2s opacity, 0.2s backdrop-filter;
-  margin: 0;
-  left: 0;
-
-  apps {
-    max-height: 70vh;
-    padding: 20px;
-    margin: 40px;
-    justify-content: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 40px;
-
-    app {
-      flex: 1 0 21%;
-      flex-grow: 0;
-      align-items: center;
-      justify-content: center;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      min-width: 125px;
-      max-width: 125px;
-      text-align: center;
-      overflow: hidden;
-
-      img {
-        width: 100%;
-        border-radius: var(--app-radius);
-        aspect-ratio: 1 / 1;
-      }
-
-      div {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: fit-content;
-        height: 100%;
-        white-space: nowrap;
-
-      }
-    }
-  }
-
-  input {
-    background: var(--mantle);
-    border: 2px solid var(--crust);
-    border-radius: 10px;
-    padding: 10px;
-    width: 300px;
-    max-width: 100vw;
-    text-align: center;
-    transition: border 0.2s;
-
-    &:focus {
-      outline: none;
-      border: 2px solid var(--text);
-    }
-  }
-}
-
-preloader {
-  position: absolute;
-  z-index: 9999999;
-  top: 0;
-  left: 0;
-  background: var(--crust);
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  transition: opacity 1s;
-
-  .status, .done {
-    text-align: center;
-  }
-
-  .done div {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-}
-
-flex {
-  flex: 1;
+.gradient-blur {
+  mask: linear-gradient(to bottom, transparent, black 5%), linear-gradient(to top, transparent, black 35%);
+  mask-size: 100% 50%;
+  mask-repeat: no-repeat;
+  mask-position: top, bottom;
 }
--- a/src/bootloader.ts
+++ b/src/bootloader.ts
@ -116,11 +116,18 @@ window.console.group = (...args: any) => {
 try {
  const args = new URLSearchParams(window.location.search)
  const kernel = new Kernel()
-  await kernel.boot(boot, progress, args)
+  writeln('/-----------------------------------------------\\')
+  writeln('| FlowOS is now discontinued. Starting in 10s...|')
+  writeln('\\-----------------------------------------------/')
+  setTimeout(() => {
+    kernel.boot(boot, progress, args).catch(e => console.error(e))
+  }, 10000)
 } catch (e) {
  writeln()
  writeln('An error occured while booting FlowOS.')
  writeln('Please report this error to Flow Works.')
  writeln()
  console.error(e.stack)
+  writeln()
+  terminal.html(terminal.getHTML() + '<a href="#" onclick="indexedDB.deleteDatabase(`virtualfs`);window.location.reload()">Would you like to reset the VirtualFS?</a>')
 }
--- a/src/kernel.ts
+++ b/src/kernel.ts
@ -57,6 +57,16 @@ export default class Kernel {
    this.version = pkg.version
  }

+  private async setTheme (themeName: string): Promise<void> {
+    if (this.fs === false) throw new Error('Filesystem hasn\'t been initiated.')
+    const file = await this.fs.readFile(`/etc/themes/${themeName}.theme`)
+    const { extras, colors } = JSON.parse(Buffer.from(file).toString())
+    for (const color in colors) {
+      document.documentElement.style.setProperty(`--${color}`, colors[color])
+    }
+    document.documentElement.style.setProperty('--primary', extras[parse(Buffer.from(await this.fs.readFile('/etc/flow')).toString()).THEME_PRIMARY as string])
+  }
+
  async boot (boot: HTML, progress: HTML, args: URLSearchParams): Promise<void> {
    progress.style({ width: '0%' })
    const bootArgs = args.toString().replace(/=($|&)/g, '=true ')
@ -79,6 +89,11 @@ export default class Kernel {
    })
    if (this.config === false) return
    else progress.style({ width: '40%' })
+    await this.setTheme(this.config.THEME)
+    document.addEventListener('theme_update', () => {
+      if (this.config === false) return
+      this.setTheme(this.config.THEME).catch(e => console.error(e))
+    })
    const tmp = await handle('mount', 'Temporary Directory (/tmp)', {
      init: async () => {
        if (this.fs === false) return false
--- a/src/system/BootLoader.ts
+++ b/src/system/BootLoader.ts
@ -1,171 +0,0 @@
-import HTML from '../HTML'
-import { AppClosedEvent, AppOpenedEvent, Process } from '../types'
-import { getTime } from '../utils'
-import nullIcon from '../assets/icons/application-default-icon.svg'
-import { parse } from 'js-ini'
-import { v4 as uuid } from 'uuid'
-
-const BootLoader: Process = {
-  config: {
-    name: 'Bootloader',
-    type: 'process',
-    targetVer: '1.0.0-indev.0'
-  },
-  run: async (process) => {
-    const splashScreen = await process.loadLibrary('lib/SplashScreen')
-    const splashElement = splashScreen.getElement()
-    splashElement.appendTo(document.body)
-
-    const { fs } = process
-    const wm = await process.loadLibrary('lib/WindowManager')
-    const launcher = await process.loadLibrary('lib/Launcher')
-
-    const config = Buffer.from(await fs.readFile('/etc/flow')).toString()
-    process.kernel.setConfig(parse(config))
-
-    if ('serviceWorker' in navigator) {
-      const registrations = await navigator.serviceWorker.getRegistrations()
-      for (const registration of registrations) {
-        await registration.unregister()
-      }
-
-      try {
-        await navigator.serviceWorker.register(`/uv-sw.js?url=${encodeURIComponent(btoa(process.kernel.config.SERVER))}&e=${uuid()}`, {
-          scope: '/service/'
-        })
-      } catch (e) {
-        console.error(e)
-      }
-    } else {
-      console.warn('Service workers are not supported.')
-    }
-
-    const input = new HTML('input').attr({
-      type: 'text',
-      placeholder: 'Search'
-    }).on('keyup', () => {
-      apps.elm.innerHTML = ''
-      renderApps().catch(e => console.error(e))
-    }).appendTo(launcher.element)
-    const apps = new HTML('apps').appendTo(launcher.element)
-
-    const renderApps = async (): Promise<void> => {
-      apps.html('')
-      const files = await fs.readdir('/home/Applications/')
-      files
-        .filter((x: string) => x.endsWith('.app') && ((input.elm as HTMLInputElement) !== null ? x.toLowerCase().includes((input.elm as HTMLInputElement).value.toLowerCase()) : true))
-        .forEach((file: string) => {
-          fs.readFile(`/home/Applications/${file}`).then(async (data: Uint8Array) => {
-            const path = Buffer.from(data).toString()
-            const executable = await process.kernel.getExecutable(path) as Process
-
-            const appElement = new HTML('app').on('click', () => {
-              process.launch(path).catch((e: any) => console.error(e))
-              launcher.toggle()
-            }).appendTo(apps)
-            new HTML('img').attr({
-              src: executable.config.icon ?? nullIcon,
-              alt: `${executable.config.name} icon`
-            }).appendTo(appElement)
-            new HTML('div').text(executable.config.name).appendTo(appElement)
-          }).catch((e: any) => console.error(e))
-        })
-    }
-
-    await renderApps()
-    document.addEventListener('fs_update', () => {
-      renderApps().catch(e => console.error(e))
-    })
-
-    launcher.element.on('click', (e: Event) => {
-      if (e.target !== e.currentTarget) return
-      launcher.toggle()
-    })
-
-    const statusBar = await process.loadLibrary('lib/StatusBar')
-
-    statusBar.element.html(`
-      <div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
-      
-      <div data-toolbar-id="apps"></div>
-      <flex></flex>
-      <div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
-      <div class="outlined" data-toolbar-id="controls">
-        <span class="material-symbols-rounded battery">battery_2_bar</span>
-        <span class="material-symbols-rounded signal">signal_cellular_4_bar</span>
-      </div>
-      <div class="outlined" data-toolbar-id="calendar"></div>
-      
-    `)
-
-    setInterval((): any => {
-      getTime().then((time) => {
-        statusBar.element.qs('div[data-toolbar-id="calendar"]')?.text(time)
-      }).catch(e => console.error)
-    }, 1000)
-
-    statusBar.element.qs('div[data-toolbar-id="start"]')?.on('click', () => {
-      launcher.toggle()
-    })
-
-    if ('getBattery' in navigator) {
-      (navigator as any).getBattery().then((battery: any) => {
-        statusBar.updateBatteryIcon(battery)
-
-        battery.addEventListener('levelchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-
-        battery.addEventListener('chargingchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-      })
-    } else {
-      const batteryDiv = document.querySelector('div[data-toolbar-id="controls"] > .battery')
-      if (batteryDiv != null) {
-        batteryDiv.innerHTML = 'battery_unknown'
-      }
-    }
-
-    async function ping (startTime: number): Promise<void> {
-      fetch(`${process.kernel.config.SERVER as string}/bare/`)
-        .then(() => {
-          const endTime = performance.now()
-          const pingTime = endTime - startTime
-          statusBar.updateIcon(pingTime)
-        })
-        .catch(() => {
-          (document.querySelector('div[data-toolbar-id="controls"] > .signal') as HTMLElement).innerHTML = 'signal_cellular_connected_no_internet_4_bar'
-        })
-    }
-
-    setInterval((): any => ping(performance.now()), 10_000)
-
-    document.addEventListener('app_opened', (e: AppOpenedEvent): void => {
-      new HTML('app').appendMany(
-        new HTML('img').attr({
-          alt: `${e.detail.proc.config.name} icon`,
-          'data-id': e.detail.token,
-          src: e.detail.proc.config.icon ?? nullIcon
-        }).on('click', () => {
-          e.detail.win.focus()
-          e.detail.win.toggleMin()
-        })
-      ).appendTo(statusBar.element.qs('div[data-toolbar-id="apps"]')?.elm as HTMLElement)
-    })
-
-    document.addEventListener('app_closed', (e: AppClosedEvent): void => {
-      statusBar.element.qs('div[data-toolbar-id="apps"]')?.qs(`img[data-id="${e.detail.token}"]`)?.elm.parentElement?.remove()
-    })
-
-    document.body.style.flexDirection = 'column-reverse'
-
-    await statusBar.element.appendTo(document.body)
-    await launcher.element.appendTo(document.body)
-    await wm.windowArea.appendTo(document.body)
-
-    splashElement.cleanup()
-  }
-}
-
-export default BootLoader
--- a/src/system/Desktop.ts
+++ b/src/system/Desktop.ts
@ -1,6 +1,5 @@
 import HTML from '../HTML'
-import { AppClosedEvent, AppOpenedEvent, Process } from '../types'
-import { getTime } from '../utils'
+import { Process } from '../types'
 import nullIcon from '../assets/icons/application-default-icon.svg'

 const BootLoader: Process = {
@ -17,15 +16,34 @@ const BootLoader: Process = {
    const { fs } = process
    const wm = await process.loadLibrary('lib/WindowManager')
    const launcher = await process.loadLibrary('lib/Launcher')
+    const { Input } = await process.loadLibrary('lib/Components')

-    const input = new HTML('input').attr({
+    const input = Input.new().attr({
      type: 'text',
      placeholder: 'Search'
+    }).style({
+      width: '100%',
+      'border-radius': '10px',
+      padding: '5px',
+      'margin-bottom': '10px',
+      position: 'sticky',
+      top: '0'
    }).on('keyup', () => {
      apps.elm.innerHTML = ''
      renderApps().catch(e => console.error(e))
    }).appendTo(launcher.element)
-    const apps = new HTML('apps').appendTo(launcher.element)
+
+    const apps = new HTML('div').style({
+      overflow: 'scroll',
+      height: 'max-content',
+      position: 'relative'
+    })
+
+    new HTML('div').style({
+      height: '100%',
+      overflow: 'scroll',
+      'padding-bottom': '30px'
+    }).append(apps).appendTo(launcher.element).class('gradient-blur')

    const renderApps = async (): Promise<void> => {
      apps.html('')
@ -37,13 +55,21 @@ const BootLoader: Process = {
            const path = Buffer.from(data).toString()
            const executable = await process.kernel.getExecutable(path) as Process

-            const appElement = new HTML('app').on('click', () => {
+            const appElement = new HTML('div').style({
+              display: 'flex',
+              'align-items': 'center',
+              padding: '5px',
+              cursor: 'pointer',
+              gap: '10px',
+              'border-bottom': '1px solid var(--surface-0)'
+            }).on('click', () => {
              process.launch(path).catch((e: any) => console.error(e))
              launcher.toggle()
            }).appendTo(apps)
            new HTML('img').attr({
              src: executable.config.icon ?? nullIcon,
-              alt: `${executable.config.name} icon`
+              alt: `${executable.config.name} icon`,
+              height: '40px'
            }).appendTo(appElement)
            new HTML('div').text(executable.config.name).appendTo(appElement)
          }).catch((e: any) => console.error(e))
@ -62,80 +88,10 @@ const BootLoader: Process = {

    const statusBar = await process.loadLibrary('lib/StatusBar')

-    statusBar.element.html(`
-      <div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
-      
-      <div data-toolbar-id="apps"></div>
-      <flex></flex>
-      <div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
-      <div class="outlined" data-toolbar-id="controls">
-        <span class="material-symbols-rounded battery">battery_2_bar</span>
-        <span class="material-symbols-rounded signal">signal_cellular_4_bar</span>
-      </div>
-      <div class="outlined" data-toolbar-id="calendar"></div>
-      
-    `)
-
-    setInterval((): any => {
-      getTime().then((time) => {
-        statusBar.element.qs('div[data-toolbar-id="calendar"]')?.text(time)
-      }).catch(e => console.error)
-    }, 1000)
-
    statusBar.element.qs('div[data-toolbar-id="start"]')?.on('click', () => {
      launcher.toggle()
    })

-    if ('getBattery' in navigator) {
-      (navigator as any).getBattery().then((battery: any) => {
-        statusBar.updateBatteryIcon(battery)
-
-        battery.addEventListener('levelchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-
-        battery.addEventListener('chargingchange', () => {
-          statusBar.updateBatteryIcon(battery)
-        })
-      })
-    } else {
-      const batteryDiv = document.querySelector('div[data-toolbar-id="controls"] > .battery')
-      if (batteryDiv != null) {
-        batteryDiv.innerHTML = 'battery_unknown'
-      }
-    }
-
-    async function ping (startTime: number): Promise<void> {
-      fetch(`${process.kernel.config.SERVER as string}/bare/`)
-        .then(() => {
-          const endTime = performance.now()
-          const pingTime = endTime - startTime
-          statusBar.updateIcon(pingTime)
-        })
-        .catch(() => {
-          (document.querySelector('div[data-toolbar-id="controls"] > .signal') as HTMLElement).innerHTML = 'signal_cellular_connected_no_internet_4_bar'
-        })
-    }
-
-    setInterval((): any => ping(performance.now()), 10_000)
-
-    document.addEventListener('app_opened', (e: AppOpenedEvent): void => {
-      new HTML('app').appendMany(
-        new HTML('img').attr({
-          alt: `${e.detail.proc.config.name} icon`,
-          'data-id': e.detail.token,
-          src: e.detail.proc.config.icon ?? nullIcon
-        }).on('click', () => {
-          e.detail.win.focus()
-          e.detail.win.toggleMin()
-        })
-      ).appendTo(statusBar.element.qs('div[data-toolbar-id="apps"]')?.elm as HTMLElement)
-    })
-
-    document.addEventListener('app_closed', (e: AppClosedEvent): void => {
-      statusBar.element.qs('div[data-toolbar-id="apps"]')?.qs(`img[data-id="${e.detail.token}"]`)?.elm.parentElement?.remove()
-    })
-
    document.body.style.flexDirection = 'column-reverse'

    await statusBar.element.appendTo(document.body)
@ -143,6 +99,19 @@ const BootLoader: Process = {
    await wm.windowArea.appendTo(document.body)

    splashElement.cleanup()
+
+    launcher.element.prepend(new HTML('div')
+      .html(`
+      <ins class="adsbygoogle"
+        style="display:block"
+        data-ad-format="fluid"
+        data-ad-layout-key="-if+5+1+2-3"
+        data-ad-client="ca-pub-9675905177363247"
+        data-ad-slot="2569234651"></ins>
+        <script>
+          (adsbygoogle = window.adsbygoogle || []).push({});
+        </script>
+      `))
  }
 }

--- a/src/system/UserAccessControl.ts
+++ b/src/system/UserAccessControl.ts
@ -32,7 +32,7 @@ const UserAccessControl: Process = {
          }
        }

-        wm.createModal('User Account Control', message, process)
+        wm.createModal('allow', 'User Account Control', message, process)
          .then(async ({ value, win }: {
            value: boolean
            win: FlowWindow
--- a/src/system/VirtualFS.ts
+++ b/src/system/VirtualFS.ts
@ -1,4 +1,7 @@
+import { parse, stringify } from 'js-ini'
 import { Directory, Errors, File, Permission, Stats } from '../types'
+import path from 'path'
+const p = path

 export const defaultFS: { root: Directory } = {
  root: {
@ -75,6 +78,12 @@ export const defaultFS: { root: Directory } = {
                deleteable: true,
                permission: Permission.USER,
                content: Buffer.from('apps/Settings')
+              },
+              'ThemeMaker.app': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from('apps/ThemeMaker')
              }
            }
          },
@ -95,47 +104,17 @@ export const defaultFS: { root: Directory } = {
                permission: Permission.USER,
                content: Buffer.from('/home/Applications/Info.app')
              },
-              'Manager.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Manager.app')
-              },
-              'Store.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Store.app')
-              },
-              'TaskManager.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/TaskManager.app')
-              },
              'Browser.lnk': {
                type: 'file',
                deleteable: true,
                permission: Permission.USER,
                content: Buffer.from('/home/Applications/Browser.app')
              },
-              'ImageViewer.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/ImageViewer.app')
-              },
              'Files.lnk': {
                type: 'file',
                deleteable: true,
                permission: Permission.USER,
                content: Buffer.from('/home/Applications/Files.app')
-              },
-              'Editor.lnk': {
-                type: 'file',
-                deleteable: true,
-                permission: Permission.USER,
-                content: Buffer.from('/home/Applications/Editor.app')
              }
            }
          },
@ -176,13 +155,229 @@ export const defaultFS: { root: Directory } = {
        deleteable: false,
        permission: Permission.SYSTEM,
        children: {
+          themes: {
+            type: 'directory',
+            deleteable: false,
+            permission: Permission.SYSTEM,
+            children: {
+              'Latte.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Catppuccin Latté',
+                  extras: {
+                    rosewater: '#dc8a78',
+                    flamingo: '#dd7878',
+                    pink: '#ea76cb',
+                    mauve: '#8839ef',
+                    red: '#d20f39',
+                    maroon: '#e64553',
+                    peach: '#fe640b',
+                    yellow: '#df8e1d',
+                    green: '#40a02b',
+                    teal: '#179299',
+                    sky: '#04a5e5',
+                    sapphire: '#209fb5',
+                    blue: '#1e66f5',
+                    lavender: '#7287fd'
+                  },
+                  colors: {
+                    text: '#4c4f69',
+                    'surface-2': '#acb0be',
+                    'surface-1': '#bcc0cc',
+                    'surface-0': '#ccd0da',
+                    base: '#eff1f5',
+                    mantle: '#e6e9ef',
+                    crust: '#dce0e8'
+                  }
+                }))
+              },
+              'Frappe.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Catppuccin Frappé',
+                  extras: {
+                    rosewater: '#f2d5cf',
+                    flamingo: '#eebebe',
+                    pink: '#f4b8e4',
+                    mauve: '#ca9ee6',
+                    red: '#e78284',
+                    maroon: '#ea999c',
+                    peach: '#ef9f76',
+                    yellow: '#e5c890',
+                    green: '#a6d189',
+                    teal: '#81c8be',
+                    sky: '#99d1db',
+                    sapphire: '#85c1dc',
+                    blue: '#8caaee',
+                    lavender: '#babbf1'
+                  },
+                  colors: {
+                    text: '#c6d0f5',
+                    'surface-2': '#626880',
+                    'surface-1': '#51576d',
+                    'surface-0': '#414559',
+                    base: '#303446',
+                    mantle: '#292c3c',
+                    crust: '#232634'
+                  }
+                }))
+              },
+              'Macchiato.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Catppuccin Macchiato',
+                  extras: {
+                    rosewater: '#f4dbd6',
+                    flamingo: '#f0c6c6',
+                    pink: '#f5bde6',
+                    mauve: '#c6a0f6',
+                    red: '#ed8796',
+                    maroon: '#ee99a0',
+                    peach: '#f5a97f',
+                    yellow: '#eed49f',
+                    green: '#a6da95',
+                    teal: '#8bd5ca',
+                    sky: '#91d7e3',
+                    sapphire: '#7dc4e4',
+                    blue: '#8aadf4',
+                    lavender: '#b7bdf8'
+                  },
+                  colors: {
+                    text: '#cad3f5',
+                    'surface-2': '#5b6078',
+                    'surface-1': '#494d64',
+                    'surface-0': '#363a4f',
+                    base: '#24273a',
+                    mantle: '#1e2030',
+                    crust: '#181926'
+                  }
+                }))
+              },
+              'Mocha.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Catpuccin Mocha',
+                  extras: {
+                    rosewater: '#f5e0dc',
+                    flamingo: '#f2cdcd',
+                    pink: '#f5c2e7',
+                    mauve: '#cba6f7',
+                    red: '#f38ba8',
+                    maroon: '#eba0ac',
+                    peach: '#fab387',
+                    yellow: '#f9e2af',
+                    green: '#a6e3a1',
+                    teal: '#94e2d5',
+                    sky: '#89dceb',
+                    sapphire: '#74c7ec',
+                    blue: '#89b4fa',
+                    lavender: '#b4befe'
+                  },
+                  colors: {
+                    text: '#cdd6f4',
+                    'surface-2': '#585b70',
+                    'surface-1': '#45475a',
+                    'surface-0': '#313244',
+                    base: '#1e1e2e',
+                    mantle: '#181825',
+                    crust: '#11111b'
+                  }
+                }))
+              },
+              'RosePine.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Rosé Pine',
+                  extras: {
+                    love: '#eb6f92',
+                    gold: '#f6c177',
+                    rose: '#ebbcba',
+                    pine: '#31748f',
+                    foam: '#9ccfd8',
+                    iris: '#c4a7e7'
+                  },
+                  colors: {
+                    text: '#e0def4',
+                    'surface-2': '#524f67',
+                    'surface-1': '#403d52',
+                    'surface-0': '#21202e',
+                    base: '#26233a',
+                    mantle: '#1f1d2e',
+                    crust: '#191724'
+                  }
+                }))
+              },
+              'RosePineMoon.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Rosé Pine Moon',
+                  extras: {
+                    love: '#eb6f92',
+                    gold: '#f6c177',
+                    rose: '#ebbcba',
+                    pine: '#31748f',
+                    foam: '#9ccfd8',
+                    iris: '#c4a7e7'
+                  },
+                  colors: {
+                    text: '#e0def4',
+                    'surface-2': '#2a283e',
+                    'surface-1': '#44415a',
+                    'surface-0': '#56526e',
+                    base: '#393552',
+                    mantle: '#2a273f',
+                    crust: '#232136'
+                  }
+                }))
+              },
+              'RosePineDawn.theme': {
+                type: 'file',
+                deleteable: true,
+                permission: Permission.USER,
+                content: Buffer.from(JSON.stringify({
+                  name: 'Rosé Pine Dawn',
+                  extras: {
+                    love: '#b4637a',
+                    gold: '#ea9d34',
+                    rose: '#d7827e',
+                    pine: '#286983',
+                    foam: '#56949f',
+                    iris: '#907aa9'
+                  },
+                  colors: {
+                    text: '#575279',
+                    'surface-2': '#cecacd',
+                    'surface-1': '#dfdad9',
+                    'surface-0': '#f4ede8',
+                    base: '#f2e9e1',
+                    mantle: '#fffaf3',
+                    crust: '#faf4ed'
+                  }
+                }))
+              }
+            }
+          },
          flow: {
            type: 'file',
            deleteable: false,
            permission: Permission.ELEVATED,
            content: Buffer.from([
              'SERVER=https://server.flow-works.me',
-              '24HOUR=FALSE'
+              '24_HOUR=false',
+              'THEME=Mocha',
+              'THEME_PRIMARY=blue'
            ].join('\n'))
          },
          hostname: {
@ -211,42 +406,88 @@ export const defaultFS: { root: Directory } = {
 }

 class VirtualFS {
-  private fileSystem: { root: Directory } = defaultFS
+  private fileSystem: { root: Directory }
  private db: IDBDatabase | null = null
-  async init (dbName = 'virtualfs'): Promise<VirtualFS> {
-    return await new Promise((resolve, reject) => {
-      indexedDB.deleteDatabase(dbName)
-      const request = indexedDB.open(dbName)
-      request.onerror = () => {
-        reject(new Error('Failed to open database'))
+
+  private async addMissingFiles (): Promise<void> {
+    const addDirectoryRecursive = async (directory: Directory, directoryPath: string): Promise<void> => {
+      for (const [key, value] of Object.entries(directory.children)) {
+        const path = p.join(directoryPath, key)
+        if (value.type === 'file' && path.startsWith('/etc/themes/')) {
+          await this.writeFile(path, Buffer.from(value.content).toString())
+          return
+        }
+        if (value.type === 'directory') {
+          if (!await this.exists(path)) {
+            await this.mkdir(path)
+          }
+          await addDirectoryRecursive(value, path)
+        } else if (value.type === 'file' && !await this.exists(path)) {
+          await this.writeFile(path, Buffer.from(value.content).toString())
+        }
      }
-      request.onsuccess = () => {
-        this.db = request.result
-        resolve(this)
+    }
+    await addDirectoryRecursive(defaultFS.root, '/')
+
+    await this.readFile('/etc/flow').then(async (data: Uint8Array) => {
+      const dataString = Buffer.from(data).toString()
+      const config = parse(dataString)
+
+      if (config.SERVER == null) {
+        config.SERVER = 'https://server.flow-works.me'
+        await this.writeFile('/etc/flow', stringify(config))
      }
-      request.onupgradeneeded = () => {
-        const db = request.result
-        db.createObjectStore('fs')
+      if (config['24_HOUR'] == null) {
+        config['24_HOUR'] = 'FALSE'
+        await this.writeFile('/etc/flow', stringify(config))
+      }
+      if (config.THEME == null) {
+        config.THEME = 'Mocha'
+        await this.writeFile('/etc/flow', stringify(config))
+      }
+      if (config.THEME_PRIMARY == null) {
+        config.THEME_PRIMARY = 'blue'
+        await this.writeFile('/etc/flow', stringify(config))
      }
    })
  }

-  private setFileSystem (fileSystemObject: { root: Directory }): void {
-    this.fileSystem = fileSystemObject
+  async init (dbName = 'virtualfs'): Promise<VirtualFS> {
+    return await new Promise((resolve, reject) => {
+      const request = indexedDB.open(dbName)
+      request.onupgradeneeded = (event) => {
+        const target = event.target as IDBRequest
+        const db = target.result
+        db.createObjectStore('fs')
+      }
+      request.onerror = () => {
+        reject(new Error('Failed to open database'))
+      }
+      request.onsuccess = async (event) => {
+        const target = event.target as IDBRequest
+        this.db = target.result
+        await navigator.storage.persist()
+        this.fileSystem = await this.read()
+        if (this.fileSystem == null) await this.write(defaultFS)
+        else await this.addMissingFiles()
+        resolve(this)
+      }
+    })
  }

-  private readonly read = async (): Promise<any> => {
-    const transaction = this.db?.transaction(['fs'], 'readonly')
-    const store = transaction?.objectStore('fs')
-    const getRequest = store?.get('fs')
+  private readonly read = async (): Promise<{ root: Directory }> => {
+    if (this.db == null) throw new Error('Database is null')
+    const transaction = this.db.transaction(['fs'], 'readonly')
+    const store = transaction.objectStore('fs')
+    const getRequest = store.get('fs')

    return await new Promise((resolve, reject) => {
-      if (getRequest == null) return
-      getRequest.onsuccess = () => {
-        resolve(getRequest.result)
+      getRequest.onsuccess = (event) => {
+        const target = event.target as IDBRequest
+        resolve(target.result)
      }

-      getRequest.onerror = () => {
+      getRequest.onerror = (event) => {
        reject(getRequest.error)
      }
    })
@ -258,12 +499,12 @@ class VirtualFS {
  }

  private readonly save = async (): Promise<void> => {
-    const transaction = this.db?.transaction(['fs'], 'readwrite')
-    const store = transaction?.objectStore('fs')
-    const putRequest = store?.put(this.fileSystem, 'fs')
+    if (this.db == null) throw new Error('Database is null')
+    const transaction = this.db.transaction(['fs'], 'readwrite')
+    const store = transaction.objectStore('fs')
+    const putRequest = store.put(this.fileSystem, 'fs')

    return await new Promise((resolve, reject) => {
-      if (putRequest == null) return
      putRequest.onsuccess = () => {
        document.dispatchEvent(new CustomEvent('fs_update', {}))
        resolve()
@ -371,8 +612,8 @@ class VirtualFS {
  rmdir = async (path: string): Promise<void> => {
    const { current, filename } = await this.navigatePathParent(path)

-    if (!current.deleteable) throw new Error(Errors.EPERM)
-    await this.handlePermissions(path)
+    if (!current.deleteable && path !== '/tmp') throw new Error(Errors.EPERM)
+    if (path !== '/tmp') await this.handlePermissions(path)

    if (current.children[filename].type !== 'directory') throw new Error(Errors.ENOTDIR)

--- a/src/system/apps/Editor.ts
+++ b/src/system/apps/Editor.ts
@ -12,26 +12,6 @@ interface EditorConfig {
  path: string
 }

-const fileLanguageMap: {
-  [key: string]: string
-} = {
-  c: 'clike',
-  cpp: 'clike',
-  java: 'clike',
-  cs: 'clike',
-  ts: 'typescript',
-  js: 'javascript',
-  mjs: 'javascript',
-  cjs: 'javascript',
-  jsx: 'jsx',
-  tsx: 'tsx',
-  html: 'html',
-  md: 'markdown',
-  css: 'css',
-  xml: 'xml',
-  py: 'python'
-}
-
 const Editor: Process = {
  config: {
    name: 'Editor',
@ -40,6 +20,8 @@ const Editor: Process = {
    targetVer: '1.0.0-indev.0'
  },
  run: async (process) => {
+    const MIMETypes = await process.loadLibrary('lib/MIMETypes')
+
    if (Object.keys(process.data).length > 0) {
      const win = await process.loadLibrary('lib/WindowManager').then((wm: any) => {
        return wm.createWindow({
@ -153,8 +135,44 @@ const Editor: Process = {
            }
          })

-          const fileExtension = data.path.split('.').pop()?.toLowerCase() as string
-          const language = fileLanguageMap[fileExtension] ?? 'text'
+          const fileExtension = (data.path.split('.').pop() as string).toLowerCase()
+          console.log('owo ' + fileExtension, MIMETypes)
+          const mime = fileExtension in MIMETypes ? MIMETypes[fileExtension].type : 'text/plain'
+          let language = 'text'
+
+          switch (mime) {
+            case 'text/markdown':
+              language = 'markdown'
+              break
+            case 'text/css':
+              language = 'css'
+              break
+            case 'text/html':
+              language = 'html'
+              break
+            case 'text/javascript':
+              language = 'javascript'
+              break
+            case 'text/jsx':
+              language = 'jsx'
+              break
+            case 'application/x-flow-theme':
+            case 'application/json':
+              language = 'clike'
+              break
+            case 'text/typescript':
+              language = 'typescript'
+              break
+            case 'text/tsx':
+              language = 'tsx'
+              break
+            case 'application/python':
+              language = 'python'
+              break
+            default:
+              language = 'text'
+              break
+          }

          const value = Buffer.from(await fs.readFile(data.path)).toString()
          const editor = fullEditor(
@ -169,6 +187,7 @@ const Editor: Process = {
          const style = document.createElement('style')
          style.textContent = `
      .prism-code-editor {
+        color: var(--text);
        border-radius: 10px 10px 0 0;
        caret-color: var(--text);
        font-weight: 400;
@ -208,6 +227,9 @@ const Editor: Process = {
        document.addEventListener('fs_update', () => {
          render().catch(e => console.error(e))
        })
+        document.addEventListener('theme_update', () => {
+          render().catch(e => console.error(e))
+        })
      }
      return
    }
--- a/src/system/apps/Files.ts
+++ b/src/system/apps/Files.ts
@ -74,6 +74,7 @@ const Files: Process = {
        element.innerHTML += `${icon} <span style="flex:1;">${file}</span><span class="material-symbols-rounded delete">delete_forever</span><span class="material-symbols-rounded rename">edit</span>`;
        (element.querySelector('.rename') as HTMLElement).onclick = async () => {
          const value = prompt('Rename')
+          console.log(value)
          if (value != null) {
            await fs.rename(dir + seperator + file, dir + seperator + value)
          }
--- a/src/system/apps/Settings.ts
+++ b/src/system/apps/Settings.ts
@ -7,7 +7,7 @@ const Settings: Process = {
    name: 'Settings',
    type: 'process',
    icon,
-    targetVer: '1.0.0-indev.0'
+    targetVer: '2.0.0'
  },
  run: async process => {
    const win = await process
@ -27,14 +27,30 @@ const Settings: Process = {
    const { fs } = process
    const HTML = await process.loadLibrary('lib/HTML')

-    const { Input, Button } = await process.loadLibrary('lib/Components')
+    const { Input, Button, Dropdown } = await process.loadLibrary('lib/Components')

    const render = async (config: any): Promise<void> => {
      win.content.innerHTML = ''
      for (const item in config) {
-        const input = Input.new().attr({
-          value: config[item]
-        })
+        let input = Input.new()
+
+        if (item === 'THEME_PRIMARY') {
+          const { extras } = JSON.parse(Buffer.from(await fs.readFile(`/etc/themes/${config.THEME as string}.theme`)).toString())
+          input = Dropdown.new(Object.keys(extras))
+        } else if (item === 'THEME') {
+          input = Dropdown.new((await fs.readdir('/etc/themes')).map((theme: string) => theme.replace('.theme', '')))
+        }
+
+        if (item === 'THEME_PRIMARY' || item === 'THEME') {
+          (input.elm as HTMLSelectElement).value = config[item]
+        } else {
+          input.attr({
+            value: config[item]
+          })
+        }
+
+        console.log(input.getValue())
+
        new HTML('div')
          .appendMany(
            new HTML('label')
@ -52,7 +68,6 @@ const Settings: Process = {
                input,
                Button.new().text('Save').on('click', () => {
                  config[item] = input.getValue()
-                  process.kernel.setConfig(config)
                  fs.writeFile('/etc/flow', stringify(config))
                    .then(() => {
                      document.dispatchEvent(
@ -62,6 +77,9 @@ const Settings: Process = {
                          }
                        })
                      )
+                      if (item === 'THEME' || item === 'THEME_PRIMARY') {
+                        document.dispatchEvent(new CustomEvent('theme_update', {}))
+                      }
                    })
                    .catch(e => console.error(e))
                })
--- a/src/system/apps/ThemeMaker.ts
+++ b/src/system/apps/ThemeMaker.ts
@ -0,0 +1,77 @@
+import { Process } from '../../types'
+import icon from '../../assets/icons/theme-config.svg'
+
+const ThemeConfig: Process = {
+  config: {
+    name: 'Theme Maker',
+    type: 'process',
+    icon,
+    targetVer: '2.0.0'
+  },
+  run: async (process) => {
+    const wm = await process.loadLibrary('lib/WindowManager')
+    const HTML = await process.loadLibrary('lib/HTML')
+    const { Input, Button } = await process.loadLibrary('lib/Components')
+
+    const win = wm.createWindow({
+      title: 'Theme Maker',
+      icon,
+      width: 600,
+      height: 200
+    }, process)
+
+    const content = new HTML(win.content)
+
+    const items = [
+      'crust',
+      'mantle',
+      'base',
+      'surface-0',
+      'surface-1',
+      'surface-2',
+      'text'
+    ]
+
+    const name = Input.new().attr({
+      value: 'My Theme'
+    })
+
+    content.appendMany(
+      new HTML('div')
+        .appendMany(
+          new HTML('label').text('Name: '),
+          name
+        ),
+      ...items.map((item) => {
+        return new HTML('div')
+          .appendMany(
+            new HTML('label').text(`${item[0].toUpperCase() + item.slice(1)}: `),
+            Input.new().attr({
+              type: 'color',
+              id: item,
+              value: '#000000'
+            })
+          )
+      }),
+      Button.new().text('Create').on('click', () => {
+        const theme: {
+          [key: string]: any
+        } = {
+          name: name.getValue(),
+          colors: {}
+        }
+        items.forEach((item) => {
+          theme.colors[item] = content.qs(`#${item}`)?.getValue()
+        })
+        process.fs.writeFile(`/etc/themes/${theme.name.replace(/\s/g, '') as string}.theme`, JSON.stringify(theme))
+          .then(() => {
+            wm.createModal('ok', 'Theme Manager', 'Theme created successfully.', process)
+              .catch(e => console.error(e))
+          })
+          .catch(e => console.error(e))
+      })
+    )
+  }
+}
+
+export default ThemeConfig
--- a/src/system/lib/Components.ts
+++ b/src/system/lib/Components.ts
@ -26,15 +26,35 @@ const Components: Library = {
      }
    },
    Button: {
-      new: () => {
+      new: (type: 'normal' | 'primary' = 'normal') => {
+        function shiftColor (col: string, amt: number): string {
+          const num = parseInt(col, 16)
+          const r = (num >> 16) + amt
+          const b = ((num >> 8) & 0x00_FF) + amt
+          const g = (num & 0x00_00_FF) + amt
+          const newColor = g | (b << 8) | (r << 16)
+          return newColor.toString(16)
+        }
+
        const { HTML } = library
        const button = new HTML('button')
        button.style({
          'border-radius': '5px',
          padding: '2.5px 5px',
          background: 'var(--base)',
-          border: '1px solid var(--surface-1)'
+          border: '1px solid var(--surface-0)'
        })
+        if (type === 'normal') {
+          button.style({
+            background: 'var(--base)'
+          })
+        } else if (type === 'primary') {
+          button.style({
+            background: 'var(--primary)',
+            color: 'var(--base)',
+            border: `1px solid #${shiftColor(document.documentElement.style.getPropertyValue('--primary').replace('#', ''), -40)}`
+          })
+        }
        return button
      }
    },
@ -48,6 +68,21 @@ const Components: Library = {
            'font-size': size
          })
      }
+    },
+    Dropdown: {
+      new: (options: string[]) => {
+        const { HTML } = library
+        const dropdown = new HTML('select')
+        dropdown.style({
+          'border-radius': '5px',
+          padding: '2.5px',
+          background: 'var(--base)',
+          border: '1px solid var(--surface-1)'
+        }).appendMany(
+          ...options.map((option) => new HTML('option').text(option))
+        )
+        return dropdown
+      }
    }
  }
 }
--- a/src/system/lib/Launcher.ts
+++ b/src/system/lib/Launcher.ts
@ -9,25 +9,34 @@ const Launcher: Library = {
    targetVer: '1.0.0-indev.0'
  },
  init: (l, k) => {
-    Launcher.data.element = new l.HTML('launcher').style({
-      opacity: '0',
-      'backdrop-filter': 'blur(0px)',
-      'pointer-events': 'none'
+    Launcher.data.element = new l.HTML('div').style({
+      background: `${document.documentElement.style.getPropertyValue('--mantle')}E0`,
+      width: '350px',
+      height: '500px',
+      margin: '20px',
+      padding: '10px',
+      overflow: 'hidden',
+      'border-radius': '20px',
+      border: '1px solid var(--surface-0)',
+      position: 'fixed',
+      bottom: '-500px',
+      left: '0',
+      transition: 'bottom 0.5s cubic-bezier(1,0,0,1)',
+      'z-index': '1000',
+      'box-shadow': '0 0 10px 0 rgba(0,0,0,0.5)',
+      'user-select': 'none',
+      'backdrop-filter': 'blur(10px)'
    })
  },
  data: {
    toggle: () => {
      if (isLauncherOpen) {
        Launcher.data.element.style({
-          opacity: '0',
-          'backdrop-filter': 'blur(0px)',
-          'pointer-events': 'none'
+          bottom: '-500px'
        })
      } else {
        Launcher.data.element.style({
-          opacity: '1',
-          'backdrop-filter': 'blur(20px)',
-          'pointer-events': 'all'
+          bottom: '68px'
        })
      }

--- a/src/system/lib/MIMETypes.ts
+++ b/src/system/lib/MIMETypes.ts
@ -44,6 +44,30 @@ const MIMETypes: Library = {
      opensWith: ['apps/ImageViewer'],
      icon: 'image'
    },
+    cjs: {
+      type: 'application/javascript',
+      description: 'CommonJS Module',
+      opensWith: ['apps/Editor'],
+      icon: 'code'
+    },
+    htm: {
+      type: 'text/html',
+      description: 'HTML Document',
+      opensWith: ['apps/Editor'],
+      icon: 'code'
+    },
+    html: {
+      type: 'text/html',
+      description: 'HTML Document',
+      opensWith: ['apps/Editor'],
+      icon: 'code'
+    },
+    js: {
+      type: 'text/javascript',
+      description: 'JavaScript File',
+      opensWith: ['apps/Editor'],
+      icon: 'code'
+    },
    lnk: {
      type: 'application/x-ms-shortcut',
      description: 'Windows Shortcut',
@ -56,6 +80,12 @@ const MIMETypes: Library = {
      opensWith: ['apps/Editor'],
      icon: 'markdown'
    },
+    mjs: {
+      type: 'text/javascript',
+      description: 'JavaScript Module',
+      opensWith: ['apps/Editor'],
+      icon: 'code'
+    },
    mp4: {
      type: 'video/mp4',
      description: 'MP4 Video',
@ -74,6 +104,12 @@ const MIMETypes: Library = {
      opensWith: ['apps/ImageViewer'],
      icon: 'image'
    },
+    theme: {
+      type: 'application/x-flow-theme',
+      description: 'FlowOS Theme',
+      opensWith: ['apps/Editor'],
+      icon: 'palette'
+    },
    txt: {
      type: 'text/plain',
      description: 'Text Document',
--- a/src/system/lib/StatusBar.ts
+++ b/src/system/lib/StatusBar.ts
@ -1,4 +1,6 @@
-import { Library } from '../../types'
+import { AppClosedEvent, AppOpenedEvent, Library } from '../../types'
+import nullIcon from '../../assets/icons/application-default-icon.svg'
+import { getTime } from '../../utils'

 const StatusBar: Library = {
  config: {
@ -8,6 +10,75 @@ const StatusBar: Library = {
  },
  init: (l, k, p) => {
    StatusBar.data.element = new l.HTML('toolbar')
+    StatusBar.data.element.html(`
+      <div class="outlined" data-toolbar-id="start"><span class="material-symbols-rounded">space_dashboard</span></div>
+      
+      <div data-toolbar-id="apps"></div>
+      <div style="flex:1;"></div>
+      <div class="outlined" data-toolbar-id="plugins"><span class="material-symbols-rounded">expand_less</span></div>
+      <div class="outlined" data-toolbar-id="controls">
+        <span class="material-symbols-rounded battery">battery_2_bar</span>
+        <span class="material-symbols-rounded signal">signal_cellular_4_bar</span>
+      </div>
+      <div class="outlined" data-toolbar-id="calendar"></div>
+      
+    `)
+
+    setInterval((): any => {
+      getTime().then((time) => {
+        StatusBar.data.element.qs('div[data-toolbar-id="calendar"]')?.text(time)
+      }).catch(e => console.error)
+    }, 1000)
+
+    if ('getBattery' in navigator) {
+      (navigator as any).getBattery().then((battery: any) => {
+        StatusBar.data.updateBatteryIcon(battery)
+
+        battery.addEventListener('levelchange', () => {
+          StatusBar.data.updateBatteryIcon(battery)
+        })
+
+        battery.addEventListener('chargingchange', () => {
+          StatusBar.data.updateBatteryIcon(battery)
+        })
+      })
+    } else {
+      const batteryDiv = document.querySelector('div[data-toolbar-id="controls"] > .battery')
+      if (batteryDiv != null) {
+        batteryDiv.innerHTML = 'battery_unknown'
+      }
+    }
+
+    async function ping (startTime: number): Promise<void> {
+      fetch(`${(k.config as any).SERVER as string}/bare/`)
+        .then(() => {
+          const endTime = performance.now()
+          const pingTime = endTime - startTime
+          StatusBar.data.updateIcon(pingTime)
+        })
+        .catch(() => {
+          (document.querySelector('div[data-toolbar-id="controls"] > .signal') as HTMLElement).innerHTML = 'signal_cellular_connected_no_internet_4_bar'
+        })
+    }
+
+    setInterval((): any => ping(performance.now()), 10_000)
+
+    document.addEventListener('app_opened', (e: AppOpenedEvent): void => {
+      new l.HTML('app').appendMany(
+        new l.HTML('img').attr({
+          alt: `${e.detail.proc.config.name} icon`,
+          'data-id': e.detail.token,
+          src: e.detail.proc.config.icon ?? nullIcon
+        }).on('click', () => {
+          e.detail.win.focus()
+          e.detail.win.toggleMin()
+        })
+      ).appendTo(StatusBar.data.element.qs('div[data-toolbar-id="apps"]')?.elm as HTMLElement)
+    })
+
+    document.addEventListener('app_closed', (e: AppClosedEvent): void => {
+      StatusBar.data.element.qs('div[data-toolbar-id="apps"]')?.qs(`img[data-id="${e.detail.token}"]`)?.elm.parentElement?.remove()
+    })
  },
  data: {
    updateBatteryIcon (battery: any) {
--- a/src/system/lib/WindowManager.ts
+++ b/src/system/lib/WindowManager.ts
@ -2,6 +2,7 @@ import HTML from '../../HTML'
 import FlowWindow from '../../structures/FlowWindow'
 import ProcessLib from '../../structures/ProcessLib'
 import { FlowWindowConfig, Library } from '../../types'
+import nullIcon from '../../assets/icons/application-default-icon.svg'

 const WindowManager: Library = {
  config: {
@ -46,12 +47,12 @@ const WindowManager: Library = {
      WindowManager.data.windowArea.elm.appendChild(win.element)
      return win
    },
-    createModal: async (title: string, text: string, process: ProcessLib) => {
+    createModal: async (type: 'allow' | 'ok', title: string, text: string, process: ProcessLib) => {
      const win = new FlowWindow(process, WindowManager.data, {
        title,
        icon: '',
-        width: 300,
-        height: 200,
+        width: 350,
+        height: 150,
        canResize: false
      })
      const appOpenedEvent = {
@ -61,22 +62,59 @@ const WindowManager: Library = {
          win
        }
      }
-      document.dispatchEvent(new CustomEvent('app_opened', appOpenedEvent))

      const { Button } = await process.loadLibrary('lib/Components')

      return {
        value: await new Promise((resolve) => {
-          new HTML('h3').text(title).appendTo(win.content)
-          new HTML('p').text(text).appendTo(win.content)
-          Button.new().text('Allow').appendTo(win.content).on('click', () => {
-            resolve(true)
-            win.close()
-          })
-          Button.new().text('Deny').appendTo(win.content).on('click', () => {
-            resolve(false)
-            win.close()
-          })
+          win.content.style.padding = '10px'
+          win.content.style.display = 'flex'
+          win.content.style.flexDirection = 'column'
+          win.content.style.gap = '10px'
+
+          const container = new HTML('div').style({
+            display: 'flex',
+            gap: '10px',
+            justifyContent: 'center',
+            height: 'max-content'
+          }).appendTo(win.content)
+
+          new HTML('img').attr({ src: process.process.config.icon ?? nullIcon }).style({
+            height: '100%',
+            'aspect-ratio': '1 / 1',
+            borderRadius: '50%',
+            alignSelf: 'center'
+          }).appendTo(container)
+
+          const space = new HTML('div').style({
+            display: 'flex',
+            gap: '10px',
+            'flex-direction': 'column',
+            'justify-content': 'center',
+            height: 'max-content'
+          }).appendTo(container)
+
+          new HTML('h3').text(title).style({ margin: '0' }).appendTo(space)
+          new HTML('p').text(text).style({ margin: '0' }).appendTo(space)
+          const div = new HTML('div').style({ display: 'flex', gap: '10px', alignItems: 'right' }).appendTo(space)
+
+          if (type === 'allow') document.dispatchEvent(new CustomEvent('app_opened', appOpenedEvent))
+
+          if (type === 'allow') {
+            Button.new('primary').text('Allow').appendTo(div).on('click', () => {
+              resolve(true)
+              win.close()
+            })
+            Button.new().text('Deny').appendTo(div).on('click', () => {
+              resolve(false)
+              win.close()
+            })
+          } else if (type === 'ok') {
+            Button.new('primary').text('OK').appendTo(div).on('click', () => {
+              win.close()
+              resolve(true)
+            })
+          }

          WindowManager.data.windows.push(win)
          WindowManager.data.windowArea.elm.appendChild(win.element)
--- a/src/types.ts
+++ b/src/types.ts
@ -153,7 +153,7 @@ export interface WindowManager {
  windows: FlowWindow[]
  getHighestZIndex: () => number
  createWindow: (config: FlowWindowConfig, process: ProcessLib) => FlowWindow
-  createModal: (title: string, text: string, process: ProcessLib) => Promise<ModalData>
+  createModal: (type: 'allow' | 'ok', title: string, text: string, process: ProcessLib) => Promise<ModalData>
 }

 export interface Launcher {
Author	SHA1	Message	Date
ThinLiquid	fa9876cb21	Update bootloader.ts	2024-03-30 12:01:33 +00:00
ThinLiquid	76d60330ea	Update bootloader.ts	2024-03-30 11:59:55 +00:00
ThinLiquid	6bc0694776	Update bootloader.ts	2024-03-30 11:55:05 +00:00
ThinLiquid	a80ba8d598	Update deploy.yml	2024-02-14 18:26:27 +00:00
ThinLiquid	c1bcfe6023	Update deploy.yml	2024-02-14 18:15:16 +00:00
ThinLiquid	c43f16c5a3	Update and rename main.yml to deploy.yml	2024-02-14 18:11:15 +00:00
ThinLiquid	65c7db6793	Rename deploy.yml to main.yml	2024-02-14 18:09:36 +00:00
ThinLiquid	c9cff82d2d	Create deploy.yml	2024-02-14 18:08:24 +00:00
ThinLiquid	2779bac5da	Merge pull request #187 from Flow-Works/revert-167-master Revert "[➕] (#166) Gambling added"	2024-02-07 18:18:59 +00:00
ThinLiquid	b44034c114	Revert "[➕] (#166 ) Gambling added"	2024-02-07 18:18:47 +00:00
ThinLiquid	8ee0f166ae	Merge pull request #167 from cloudirector/master [➕] (#166) Gambling added	2024-02-07 18:18:37 +00:00
cloudirector	cca0087220	Update package-lock.json i think idk	2024-02-07 09:17:55 -06:00
cloudirector	93559fc358	Update version from 1.0.0 💀	2024-02-07 09:10:42 -06:00
semantic-release-bot	f06db1db91	chore(release): 1.0.0 [skip ci] # 1.0.0 (2024-02-07) ### Bug Fixes * actually stopped boot overflowing ([`4bd8f9b`](`4bd8f9b058`)) * added missing error handling for `fs.exists` ([`77c0d57`](`77c0d57770`)) * another strange problem ([`12cd47a`](`12cd47a4b6`)) * fixed dropdown styling ([`470a1fa`](`470a1fa1e0`)) * fixed input border ([`3a64f58`](`3a64f5801a`)) * fixed Theme Maker title and created popup ([`e630ae6`](`e630ae664c`)), closes [#157](https://github.com/cloudirector/FlowOS/issues/157) * FlowOS refusing to load thme ([`1aad68f`](`1aad68f3f4`)) * made `flowos-docs` build ([`aff12d0`](`aff12d0ee1`)) * made code follow ts-standard ([`cf8f1b8`](`cf8f1b844a`)) * made editor use theme colors ([`0c2ffbb`](`0c2ffbbb9f`)) * made UAC follow ts-standard ([`3ca1e24`](`3ca1e247b4`)) * make tests pass again ([`0cf9209`](`0cf920970f`)) * remove duplicate 'overflow' property ([`d9ab009`](`d9ab009afd`)) * stop boot div from overflowing ([`a08b8d9`](`a08b8d938f`)) * stopped filesystem from breaking at build ([`54a92c5`](`54a92c5d79`)) * theme not setting ([`568e2f3`](`568e2f3100`)) * upgrade material-symbols from 0.14.1 to 0.14.3 ([`3e8fe0b`](`3e8fe0b024`)) * upgrade prism-code-editor from 2.0.1 to 2.1.0 ([`026a08b`](`026a08bd43`)) * upgrade prism-code-editor from 2.1.0 to 2.2.0 ([`3955b28`](`3955b2869b`)) * upgrade prism-code-editor from 2.2.0 to 2.2.1 ([`b3101c8`](`b3101c8b53`)) * upgrade prism-code-editor from 2.2.1 to 2.2.2 ([`c00a0f3`](`c00a0f3f58`)) * upgrade prism-code-editor from 2.2.2 to 2.2.4 ([`41421d4`](`41421d4931`)) * upgrade prism-code-editor from 2.2.4 to 2.3.0 ([`862743e`](`862743e01a`)) * weird error stopping build ([`2e208c9`](`2e208c91e1`)) ### Features * add progress indicator to boot sequence ([`48294da`](`48294da1ea`)) * added `prependMany` function ([`acdba11`](`acdba11691`)) * added a `prepend` function ([`f106776`](`f106776bee`)) * added a button component ([`8d3b629`](`8d3b629185`)) * added support for new `/apps/list` endpoint ([`423dd46`](`423dd46da0`)) * added support for theming ([`11540b9`](`11540b945a`)), closes [#155](https://github.com/cloudirector/FlowOS/issues/155) * added theme maker application ([`4e4615e`](`4e4615ecb1`)) * created an actual kernel and bootloader ([`04ccdf1`](`04ccdf1442`)), closes [#151](https://github.com/cloudirector/FlowOS/issues/151) * created start menu ([`aa5fb9e`](`aa5fb9e290`)), closes [#183](https://github.com/cloudirector/FlowOS/issues/183) * made editor use MIME types ([`cc3583b`](`cc3583bfdc`)) * made reset filesystem reload [skip ci] ([`f207101`](`f207101c6a`)) * make reset filesystem button look better [skip ci] ([`10c0dbe`](`10c0dbe48a`)) * minor styling changes ([`2dd5b5f`](`2dd5b5f887`)) * overrall ui overhaul ([`934d6e8`](`934d6e80a0`)) * use UV version 1.0.11 ([`ad38f19`](`ad38f19f29`)) ### BREAKING CHANGES * `process.kernel.loadLibrary('lib/VirtualFS')` replaced by `process.fs`	2024-02-07 14:50:42 +00:00
cloudirector	abbb05f02d	death	2024-02-07 14:25:47 +00:00
cloudirector	a1df530743	fix bad code	2024-02-07 14:19:50 +00:00
cloudirector	031f11c456	Merge branch 'master' into master	2024-02-07 07:50:41 -06:00
ThinLiquid	f675f7d8cc	chore: added privacy policy [skip ci]	2024-02-02 04:27:19 +00:00
ThinLiquid	6ccfab84ac	chore: test out ads [skip ci]	2024-02-02 04:26:30 +00:00
semantic-release-bot	ae6866118b	chore(release): 2.4.0 [skip ci] # [2.4.0](https://github.com/Flow-Works/FlowOS/compare/v2.3.0...v2.4.0) (2024-02-02) ### Bug Fixes * fixed dropdown styling ([`470a1fa`](`470a1fa1e0`)) * fixed input border ([`3a64f58`](`3a64f5801a`)) ### Features * created start menu ([`aa5fb9e`](`aa5fb9e290`)), closes [#183](https://github.com/Flow-Works/FlowOS/issues/183)	2024-02-02 04:04:23 +00:00
ThinLiquid	46f56682f1	Merge pull request #185 from Flow-Works/dev [🪢] Merge `dev` into `master`	2024-02-02 04:03:51 +00:00
ThinLiquid	5c8eafce99	Merge pull request #184 from Flow-Works/feat/create-a-windows-style-start-menu Feat/create-a-windows-style-start-menu	2024-02-02 04:03:12 +00:00
ThinLiquid	aa5fb9e290	feat: created start menu re #183	2024-02-02 04:02:09 +00:00
ThinLiquid	470a1fa1e0	fix: fixed dropdown styling	2024-02-02 03:34:18 +00:00
ThinLiquid	3a64f5801a	fix: fixed input border	2024-02-02 02:35:04 +00:00
ThinLiquid	bc3d82fd56	chore: add google adsense [skip ci]	2024-02-02 02:02:31 +00:00
ThinLiquid	d561cce786	chore: add gtag [skip ci]	2024-02-02 01:57:27 +00:00
cloudirector	3e92a445ec	Merge branch 'master' into master	2024-01-30 09:39:53 -06:00
semantic-release-bot	d84c1c4232	chore(release): 2.3.0 [skip ci] # [2.3.0](https://github.com/Flow-Works/FlowOS/compare/v2.2.0...v2.3.0) (2024-01-29) ### Features * use UV version 1.0.11 ([`ad38f19`](`ad38f19f29`))	2024-01-29 09:56:00 +00:00
ThinLiquid	608a2733f9	Merge pull request #172 from Flow-Works/dev [🪢] Merge `dev` into `master`	2024-01-29 09:55:25 +00:00
ThinLiquid	c4018528a8	Merge pull request #171 from Flow-Works/feat/switch-uv-to-version-1011 [➕] (#168) use UV version 1.0.11	2024-01-29 09:54:40 +00:00
ThinLiquid	ad38f19f29	feat: use UV version 1.0.11	2024-01-29 09:53:13 +00:00
cloudirector	011142dc1a	gam·ble : /ˈɡambəl/ : verb gerund or present participle: gambling 1. play games of chance for money; bet. "she was fond of gambling on cards and horses" Similar: bet, wager place a bet : lay a bet : stake money on something : back the horses : try one's luck on the horses : play the ponies : punt : chance one's arm : have a flutter : game 2. take risky action in the hope of a desired result. "the British could only gamble that something would turn up"	2024-01-28 00:48:42 -06:00
semantic-release-bot	159787bb72	chore(release): 2.2.0 [skip ci] # [2.2.0](https://github.com/Flow-Works/FlowOS/compare/v2.1.1...v2.2.0) (2024-01-26) ### Bug Fixes * another strange problem ([`12cd47a`](`12cd47a4b6`)) * FlowOS refusing to load thme ([`1aad68f`](`1aad68f3f4`)) * weird error stopping build ([`2e208c9`](`2e208c91e1`)) ### Features * made reset filesystem reload [skip ci] ([`f207101`](`f207101c6a`)) * make reset filesystem button look better [skip ci] ([`10c0dbe`](`10c0dbe48a`)) * overrall ui overhaul ([`934d6e8`](`934d6e80a0`))	2024-01-26 09:49:31 +00:00
ThinLiquid	a16057f606	Merge pull request #163 from Flow-Works/dev [🐛] FlowOS refusing to load thme	2024-01-26 09:48:59 +00:00
ThinLiquid	ff9630c082	Merge pull request #165 from Flow-Works/feat/add-more-themes [➕] overrall ui overhaul	2024-01-26 09:27:41 +00:00
ThinLiquid	12cd47a4b6	fix: another strange problem	2024-01-26 09:27:54 +00:00
ThinLiquid	876793c520	Merge branch 'feat/add-more-themes' of https://github.com/Flow-Works/FlowOS into feat/add-more-themes	2024-01-26 09:27:32 +00:00
ThinLiquid	2e208c91e1	fix: weird error stopping build	2024-01-26 09:27:29 +00:00
ThinLiquid	cd525b6a93	Merge branch 'dev' into feat/add-more-themes	2024-01-26 09:24:36 +00:00
ThinLiquid	934d6e80a0	feat: overrall ui overhaul	2024-01-26 09:20:44 +00:00
ThinLiquid	f207101c6a	feat: made reset filesystem reload [skip ci]	2024-01-25 10:05:00 +00:00
ThinLiquid	10c0dbe48a	feat: make reset filesystem button look better [skip ci]	2024-01-25 10:03:52 +00:00
semantic-release-bot	2352c53881	chore(release): 2.1.1 [skip ci] ## [2.1.1](https://github.com/Flow-Works/FlowOS/compare/v2.1.0...v2.1.1) (2024-01-25) ### Bug Fixes * theme not setting ([`568e2f3`](`568e2f3100`))	2024-01-25 10:01:04 +00:00
ThinLiquid	568e2f3100	fix: theme not setting	2024-01-25 10:00:23 +00:00
ThinLiquid	1aad68f3f4	fix: FlowOS refusing to load thme	2024-01-25 09:57:39 +00:00
semantic-release-bot	c0eacb7034	chore(release): 2.1.0 [skip ci] # [2.1.0](https://github.com/Flow-Works/FlowOS/compare/v2.0.0...v2.1.0) (2024-01-25) ### Bug Fixes * fixed Theme Maker title and created popup ([`e630ae6`](`e630ae664c`)), closes [#157](https://github.com/Flow-Works/FlowOS/issues/157) * made editor use theme colors ([`0c2ffbb`](`0c2ffbbb9f`)) * stopped filesystem from breaking at build ([`54a92c5`](`54a92c5d79`)) ### Features * added support for theming ([`11540b9`](`11540b945a`)), closes [#155](https://github.com/Flow-Works/FlowOS/issues/155) * added theme maker application ([`4e4615e`](`4e4615ecb1`)) * made editor use MIME types ([`cc3583b`](`cc3583bfdc`))	2024-01-25 09:20:52 +00:00
ThinLiquid	971bf1ca9a	Merge pull request #162 from Flow-Works/dev [🪢] Merge `dev` into `master`	2024-01-25 09:20:14 +00:00
ThinLiquid	7f7e565102	Merge pull request #161 from Flow-Works/fix/editor-does-not-use-themes-correctly [🐛] (#160) Editor now uses theming correctly	2024-01-25 09:18:51 +00:00
ThinLiquid	cc3583bfdc	feat: made editor use MIME types	2024-01-25 08:30:59 +00:00
ThinLiquid	0c2ffbbb9f	fix: made editor use theme colors	2024-01-24 13:56:54 +00:00
ThinLiquid	688d8db713	Merge pull request #159 from Flow-Works/fix/theme-maker-window-is-titled-as-task-manager [🐛] (#157) Theme Maker title changed, and popup fixed	2024-01-24 11:11:21 +00:00
ThinLiquid	e630ae664c	fix: fixed Theme Maker title and created popup fix #157	2024-01-24 11:07:35 +00:00
ThinLiquid	54a92c5d79	fix: stopped filesystem from breaking at build	2024-01-23 14:33:24 +00:00
ThinLiquid	c08dec6743	Merge pull request #156 from Flow-Works/feat/themes [➕] (#155) Support for themes added	2024-01-23 13:05:53 +00:00
ThinLiquid	4e4615ecb1	feat: added theme maker application	2024-01-23 13:02:48 +00:00
ThinLiquid	11540b945a	feat: added support for theming re #155	2024-01-23 03:48:34 +00:00