Upgraded UI (example projects, tags, filtering, sorting)

README.md

@@ -223,6 +223,8 @@ Each extension is incased in `{}` brackets. Look below on how to copy it.
     documentation: "page-name", // This is the page name for the documentation you created.
 
     // These next ones are optional. You can choose not to include them.
+    tags: ["new", "graphics"], // Optional. A list of tags to add to your extension. You can put anything here, but it may be adjusted later.
+    example: "Username/extension.pmp", // Optional. An example project to show off how to use the extension.
     creatorAlias: "Joe", // Optional. This will not change the creator link, but change the name that links to it.
     notes: "Additional help by someguy", // Optional. Allows you to note anyone else who helped you or any small info.
     unstable: false, // Optional. Will add a warning message that your extension is unstable.

package.json

@@ -15,6 +15,7 @@
     },
     "type": "module",
     "dependencies": {
+        "localforage": "^1.10.0",
         "markdown-it": "^14.1.0"
     }
 }

src/app.html

@@ -21,7 +21,7 @@
 
 		<meta name="viewport" content="width=device-width" />
 		<style>
-			:root {
+			:root, button {
 				font-family: Arial, Helvetica, sans-serif;
 			}
 			.sb3-comment-label {

src/lib/Checkbox/Checkbox.svelte

@@ -0,0 +1,78 @@
+<script>
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+
+    import IconEnabled from './icon-enabled.svg';
+
+    let {
+        checked = $bindable(),
+        onclick,
+        onchange,
+        oninput,
+    } = $props();
+    const onClick = (event) => {
+        if (onclick) onclick(event);
+
+        // oninput comes first before checked change
+        if (oninput) oninput(checked);
+
+        // change the checked
+        checked = !checked;
+        // onchange goes after
+        if (onchange) onchange(checked);
+    };
+</script>
+
+<!-- TODO: Add this to svelteui -->
+<button
+    class="checkbox"
+    data-checked={checked}
+    data-penguinmodsvelteui-checkbox="true"
+    onclick={onClick}
+>
+    {#if checked}
+        <img src={IconEnabled} alt="√" />
+    {/if}
+</button>
+
+<style>
+    .checkbox {
+        position: relative;
+        display: block;
+        width: 20px;
+        height: 20px;
+        margin: 2px 0;
+
+        flex-shrink: 0;
+
+        background: transparent;
+        border: 1px solid rgba(0, 0, 0, 0.5);
+        border-radius: 3px;
+
+        cursor: pointer;
+    }
+    .checkbox img {
+        position: absolute;
+        width: calc(20px - 4px);
+        height: calc(20px - 4px);
+        left: 1px;
+        top: 1px;
+
+        filter: brightness(0.25);
+
+        pointer-events: none;
+    }
+    :global(body.dark-mode) .checkbox {
+        border-color: rgba(255, 255, 255, 0.5);
+    }
+    :global(body.dark-mode) .checkbox img {
+        filter: brightness(1);
+    }
+
+    .checkbox[data-checked="true"] {
+        background: dodgerblue;
+    }
+    .checkbox[data-checked="true"] img {
+        filter: brightness(1);
+    }
+</style>