Chore: Upgrade to Svelte5 [ and some minor visual changes :) ]

chore: update to svelte5
chore: fix theme for svelte5

package.json

@@ -10,15 +10,14 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@tsconfig/svelte": "^5.0.2",
-    "@types/dateformat": "^5.0.2",
     "sass": "^1.70.0",
-    "svelte": "^4.2.10",
-    "svelte-check": "^3.6.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.7"
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.2.7",
+    "svelte-check": "^4.1.0",
+    "tslib": "^2.8.1",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
   },
   "dependencies": {
     "@faker-js/faker": "^9.3.0",

src/App.svelte

@@ -13,7 +13,6 @@
     import AltManager from "./routes/menu/altmanager/AltManager.svelte";
     import Singleplayer from "./routes/menu/singleplayer/Singleplayer.svelte";
     import ProxyManager from "./routes/menu/proxymanager/ProxyManager.svelte";
-    import None from "./routes/none/None.svelte";
     import Disconnected from "./routes/menu/disconnected/Disconnected.svelte";
     import Browser from "./routes/browser/Browser.svelte";
 
@@ -27,7 +26,6 @@
         "/altmanager": AltManager,
         "/singleplayer": Singleplayer,
         "/proxymanager": ProxyManager,
-        "/none": None,
         "/disconnected": Disconnected,
         "/browser": Browser
     };

src/app.scss

@@ -1,4 +1,4 @@
-@import "colors.scss";
+@use "colors.scss" as *;
 
 @font-face {
     font-family: "Inter";

src/main.ts

@@ -1,8 +1,9 @@
 import "./app.scss";
 import App from "./App.svelte";
+import {mount} from "svelte";
 
-const app = new App({
-  target: document.getElementById("app") as HTMLElement,
-});
+const app = mount(App, {
+  target: document.getElementById("app")!}
+);
 
 export default app

src/routes/browser/Browser.svelte

@@ -56,7 +56,7 @@
 
 <style lang="scss">
 
-    @import "../../colors.scss";
+    @use "../../colors.scss" as *;
 
     .browser-controls {
         display: flex;

src/routes/clickgui/ClickGui.svelte

@@ -65,7 +65,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   $GRID_SIZE: 10px;
 

src/routes/clickgui/Description.svelte

@@ -21,7 +21,7 @@
 {/key}
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .description-wrapper {
     position: fixed;

src/routes/clickgui/Module.svelte

@@ -43,8 +43,8 @@
         }, 500);
     });
 
-    highlightModuleName.subscribe(() => {
-        if (name !== $highlightModuleName) {
+    highlightModuleName.subscribe((m) => {
+        if (name !== m) {
             return;
         }
 
@@ -128,7 +128,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .module {
     position: relative;

src/routes/clickgui/Panel.svelte

@@ -145,9 +145,9 @@
         savePanelConfig();
     }
 
-    highlightModuleName.subscribe(() => {
+    highlightModuleName.subscribe((m) => {
         const highlightModule = modules.find(
-            (m) => m.name === $highlightModuleName,
+            (m) => m.name === m.name,
         );
         if (highlightModule) {
             panelConfig.zIndex = ++$maxPanelZIndex;
@@ -207,6 +207,7 @@
         />
         <span class="category">{category}</span>
 
+        <!-- svelte-ignore a11y_consider_explicit_label -->
         <button class="expand-toggle" on:click={toggleExpanded}>
             <div class="icon" class:expanded={panelConfig.expanded}></div>
         </button>
@@ -220,7 +221,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .panel {
     border-radius: 16px;

src/routes/clickgui/Search.svelte

@@ -170,7 +170,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../colors.scss";
+  @use "../../colors.scss" as *;
 
   .search {
     position: fixed;

src/routes/clickgui/setting/BindSetting.svelte

@@ -89,7 +89,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0px;

src/routes/clickgui/setting/ChoiceSetting.svelte

@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0px;

src/routes/clickgui/setting/ColorSetting.svelte

@@ -70,19 +70,22 @@
             bind:value={hex}
             on:input={handleValueInput}
         />
+        <!-- svelte-ignore a11y_consider_explicit_label -->
         <button
             class="color-pickr-button"
             on:click={() => (hidden = !hidden)}
             style="background-color: {hex};"
         ></button>
     </div>
+    <!-- svelte-ignore a11y_consider_explicit_label -->
     <div class="color-picker" class:hidden>
+        <!-- svelte-ignore element_invalid_self_closing_tag -->
         <button bind:this={colorPicker} />
     </div>
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         display: grid;

src/routes/clickgui/setting/ConfigurableSetting.svelte

@@ -50,7 +50,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;

src/routes/clickgui/setting/FloatRangeSetting.svelte

@@ -58,7 +58,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0 2px 0;

src/routes/clickgui/setting/FloatSetting.svelte

@@ -53,7 +53,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;

src/routes/clickgui/setting/IntRangeSetting.svelte

@@ -58,7 +58,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;

src/routes/clickgui/setting/IntSetting.svelte

@@ -53,7 +53,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0 2px 0;

src/routes/clickgui/setting/KeySetting.svelte

@@ -77,7 +77,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;

src/routes/clickgui/setting/TextArraySetting.svelte

@@ -45,7 +45,8 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "sass:color";
+  @use "../../../colors.scss" as *;
 
   .input-wrapper {
     display: grid;
@@ -91,7 +92,7 @@
     transition: ease background-color .2s;
 
     &:hover {
-      background-color: darken(desaturate($accent, 30%), 10%);
+      background-color: color.adjust(color.adjust($accent, $saturation: -30%), $lightness: -10%);
     }
   }
 

src/routes/clickgui/setting/TextSetting.svelte

@@ -23,7 +23,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0px;

src/routes/clickgui/setting/TogglableSetting.svelte

@@ -70,7 +70,7 @@
 </div>
 
 <style lang="scss">
-    @import "../../../colors.scss";
+    @use "../../../colors.scss" as *;
 
     .setting {
         padding: 7px 0px;

src/routes/clickgui/setting/VectorSetting.svelte

@@ -43,7 +43,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../colors.scss";
+  @use "../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;

src/routes/clickgui/setting/blocks/Block.svelte

@@ -26,7 +26,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .block {
     display: grid;

src/routes/clickgui/setting/blocks/BlocksSetting.svelte

@@ -10,14 +10,14 @@
 
     const cSetting = setting as BlocksSetting;
 
-    interface Block {
+    interface TBlock {
         name: string;
         identifier: string;
     }
 
     const dispatch = createEventDispatcher();
-    let blocks: Block[] = [];
-    let renderedBlocks: Block[] = blocks;
+    let blocks: TBlock[] = [];
+    let renderedBlocks: TBlock[] = blocks;
     let searchQuery = "";
 
     $: {
@@ -60,7 +60,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .setting {
     padding: 7px 0;

src/routes/clickgui/setting/common/Dropdown.svelte

@@ -51,7 +51,7 @@
 </div>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .dropdown {
     position: relative;

src/routes/clickgui/setting/common/ExpandArrow.svelte

@@ -11,6 +11,7 @@
     }
 </script>
 
+<!-- svelte-ignore a11y_consider_explicit_label -->
 <button class="arrow" class:expanded on:click={handleClick}
 ></button>
 

src/routes/clickgui/setting/common/Switch.svelte

@@ -17,20 +17,20 @@
 
 <style lang="scss">
   @use "sass:color";
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .switch-container {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    margin: none; /* Adjust margin for the smaller size */
+    margin: none;
     transition: all 0.3s ease;
   }
 
   .title {
     color: $text;
-    font-size: 11px; /* Reduced from 22px to 50% */
-    margin-left: 6px; /* Reduced from 12px */
+    font-size: 11px;
+    margin-left: 6px;
     font-weight: 500;
     transition: color 0.2s ease-in-out;
   }
@@ -45,8 +45,8 @@
   .checkbox {
     display: block;
     position: relative;
-    width: 16px; /* Reduced from 32px to 50% */
-    height: 16px; /* Reduced from 32px to 50% */
+    width: 16px;
+    height: 16px;
     background-color: rgba($crust, 0.8);
     border-radius: 4px;
     border: 2px solid rgba(white, 0.1);

src/routes/clickgui/setting/common/ValueInput.svelte

@@ -41,7 +41,7 @@
 <span contenteditable="true" class="value" bind:innerText={inputValue} on:input={handleInput} on:keydown={handleKeyDown} bind:this={inputElement}></span>
 
 <style lang="scss">
-  @import "../../../../colors.scss";
+  @use "../../../../colors.scss" as *;
 
   .value {
     font-family: monospace;

src/routes/clickgui/setting/nouislider.scss

@@ -1,4 +1,5 @@
-@import "../../../colors.scss";
+@use "sass:color";
+@use "../../../colors.scss" as *;
 
 .noUi-handle {
     background-color: $accent;
@@ -19,7 +20,7 @@
     margin: 10px 0;
     height: 2px;
     border: none;
-    background-color: darken($text, 80%);
+    background-color: color.adjust($text, $lightness: 80%);
     box-shadow: unset;
 }