Frontend + backend opinionated changes

.prettierrc

@@ -9,7 +9,13 @@
   "trailingComma": "all",
   "singleQuote": true,
   "semi": true,
-  "importOrder": ["^@core/(.*)$", "^@ui/(.*)$", "@assets/(.*)$", "^[./]"],
+  "importOrder": [
+    "^@core/(.*)$",
+    "^@assets/(.*)$",
+    "^@components/(.*)$",
+    "^@views/(.*)$",
+    "^[./]"
+  ],
   "importOrderSeparation": true,
   "importOrderSortSpecifiers": true
 }

index.html

@@ -4,11 +4,17 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
-      html {
-        background-color: black;
+      button#decorum-tb-minimize,
+      button#decorum-tb-maximize,
+      button#decorum-tb-close {
+        color: white;
+      }
+
+      html,
+      body {
+        overscroll-behavior: none;
       }
     </style>
-    <link href="/src/main.css" rel="stylesheet" />
     <title>Codename Launcher</title>
   </head>
 

src-tauri/src/engines.rs

@@ -33,6 +33,7 @@ use tauri::State;
 /// ```
 ///
 #[derive(Serialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
 pub struct EngineContext {
     pub folder_path: String,
     pub exe_path: String,
@@ -461,6 +462,7 @@ impl EngineImageInfo for FPSPlusDetector {
 }
 
 #[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
 /// This is what we send to the frontend, it flattens the EngineContext fields and adds display info for the ui
 pub struct EngineCanonInfo {
     #[serde(flatten)]

src-tauri/src/instances.rs

@@ -48,6 +48,7 @@ use crate::{
 /// });
 /// ```
 #[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
 pub struct Instance {
     pub folder_path: String,
     pub edited_info: Option<EditableInstanceInfo>,
@@ -56,6 +57,7 @@ pub struct Instance {
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, Default)]
+#[serde(rename_all = "camelCase")]
 /// The editable info for an instance
 pub struct EditableInstanceInfo {
     pub display_name: Option<String>,
@@ -70,6 +72,7 @@ pub struct EditableInstanceInfo {
 }
 
 #[derive(Serialize, Deserialize, Debug, Clone, Default)]
+#[serde(rename_all = "camelCase")]
 /// HashMap for ease of use, use order for displaying
 pub struct InstanceList {
     pub instances: HashMap<String, Instance>,

src-tauri/src/mods.rs

@@ -7,6 +7,7 @@ use std::{cell::RefCell, collections::HashMap, path::Path, sync::Mutex};
 use tauri::State;
 
 #[derive(Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
 pub struct ModContext {
     pub folder_path: String,
     pub mod_kind: ModKind,
@@ -417,6 +418,7 @@ impl ModImageInfo for VSliceModDetector {
 }
 
 #[derive(serde::Serialize)]
+#[serde(rename_all = "camelCase")]
 pub struct ModCanonInfo {
     #[serde(flatten)]
     pub context: ModContext,

src-tauri/tauri.conf.json

@@ -16,21 +16,18 @@
         "minWidth": 1000,
         "minHeight": 600,
         "visible": false,
-        "backgroundColor": "#2d1e32",
+        "backgroundColor": "#2c242e",
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
         "trafficLightPosition": {
           "x": 22,
           "y": 24
-        }
+        },
+        "devtools": true
       }
     ],
     "security": {
-      "csp": {
-        "default-src": [
-          "'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost"
-        ]
-      },
+      "csp": null,
       "assetProtocol": {
         "enable": true,
         "scope": ["**"]

src/Root.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
+// This takes a while to load because expensive operations are running in component setup.
+// Next goal is to make Root and the first view draw as soon as possible.
+// Data loading should always be asynchronous if possible.
+// TODO: make Root draw as soon as possible.
+import { platform } from '@tauri-apps/plugin-os';
+import { computed, ref } from 'vue';
+
 import Background from '@components/Background.vue';
 import Categories from '@components/Categories.vue';
 import Titlebar from '@components/Titlebar.vue';
-import { invoke } from '@tauri-apps/api/core';
-import { platform } from '@tauri-apps/plugin-os';
+
 import Browse from '@views/Browse.vue';
 import Library from '@views/Library.vue';
 import Queue from '@views/Queue.vue';
 import Settings from '@views/Settings.vue';
-import { computed, onMounted, ref } from 'vue';
 
 import { Category } from './core/ui.ts';
 
 const curCategory = ref<Category>(Category.Library);
 
-onMounted(() => {
-  invoke('show_main_window');
-});
-
 const categoryComponents = {
   [Category.Library]: Library,
   [Category.Browse]: Browse,
@@ -31,7 +32,7 @@ const curCategoryComponent = computed(() => {
 </script>
 
 <template>
-  <div :data-tauri-drag-region="platform() === 'macos'" id="main">
+  <div id="main" :data-tauri-drag-region="platform() === 'macos'">
     <Background />
 
     <!-- Linux title bar removal is temporary until decorum plugin is fixed -->
@@ -47,17 +48,17 @@ const curCategoryComponent = computed(() => {
 </template>
 
 <style lang="css">
-@reference "./main.css";
+@reference "@main.css";
 
 #main {
-  @apply relative isolate pl-2 py-4 flex flex-col space-y-2 bg-modfriend-900 overflow-hidden;
+  @apply relative isolate flex flex-col gap-2.5 bg-modfriend-900 overflow-hidden;
 
   > :not(.background-layers) {
     @apply relative z-10;
   }
 
   > .content {
-    @apply grow;
+    @apply grow px-2;
   }
 }
 </style>

src/components/Background.vue

@@ -60,7 +60,7 @@ watch(
 </template>
 
 <style lang="css">
-@reference "../main.css";
+@reference "@main.css";
 
 .background-layers {
   @apply absolute inset-0 z-0 pointer-events-none;

src/components/Categories.vue

@@ -16,8 +16,8 @@ const emit = defineEmits<{
   <div id="categories">
     <div
       :data-tauri-drag-region="platform() === 'macos'"
-      class="header flex gap-4 pb-2"
-      :class="platform() === 'macos' ? 'pl-22' : 'pl-4'"
+      class="flex gap-4 pr-4"
+      :class="platform() === 'macos' ? 'pl-22 pt-4' : 'pl-4'"
     >
       <button
         class="library-btn underline-selected uppercase font-display font-extrabold"
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 </template>
 
 <style scoped lang="css">
-@reference maincss;
+@reference "@main.css";
 
 .library-btn {
   @apply flex items-center justify-center cursor-pointer;

src/components/Titlebar.vue

@@ -1,14 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const height = computed(() => {
+  const decorumEl = document.querySelectorAll<HTMLElement>(
+    '[data-tauri-decorum-tb]',
+  );
+
+  if (decorumEl.length > 0 && decorumEl[0] != undefined) {
+    return `${decorumEl[0].offsetHeight}px`;
+  }
+
+  return 32;
+});
+</script>
+
 <template>
-  <div id="titlebar">
-    <div class="system-text pl-2 -mt-2">Modfriend</div>
+  <div id="titlebar" :style="{ height: height }">
+    <div class="system-text">Modfriend</div>
   </div>
 </template>
 
 <style scoped lang="css">
+@reference "@main.css";
+
+#titlebar {
+  @apply px-3 py-2 box-border;
+}
+
 .system-text {
   @apply select-none;
-  font-size: 12px;
+
+  font-size: 14px;
   font-family: system-ui;
 }
 </style>
-

src/components/library/InstanceSettingsPopover.vue

@@ -35,7 +35,7 @@ async function handleBannerSelect() {
   });
   if (selected) {
     console.log('Selected banner:', selected);
-    editDraft.value.banner_path = selected;
+    editDraft.value.bannerPath = selected;
   }
 }
 
@@ -52,24 +52,33 @@ defineProps<{
     >
       <img src="@assets/images/icon/wrench.png?url" />
     </PopoverTrigger>
+
     <PopoverPortal>
-      <PopoverContent align="end" :side-offset="8" class="instance-settings">
+      <PopoverContent
+        class="instance-settings"
+        prioritize-position
+        align="end"
+        :side-flip="false"
+        :side-offset="8"
+      >
         <legend>Instance Settings</legend>
+
         <div class="instance-setttings-content">
           <fieldset>
-            <label for="display-name"> Display Name </label>
+            <label for="display-name">Display Name</label>
+
             <input
               id="display-name"
               type="text"
-              v-model="editDraft.display_name"
+              v-model="editDraft.displayName"
             />
           </fieldset>
           <fieldset>
-            <label for="author"> Author </label>
+            <label for="author">Author</label>
             <input id="author" type="text" v-model="editDraft.author" />
           </fieldset>
           <fieldset>
-            <label for="version"> Version </label>
+            <label for="version">Version</label>
             <input
               id="version"
               type="text"
@@ -78,17 +87,17 @@ defineProps<{
             />
           </fieldset>
           <fieldset>
-            <label for="color"> Color </label>
-            <input id="color" type="color" v-model="editDraft.color_hex" />
+            <label for="color">Color</label>
+            <input id="color" type="color" v-model="editDraft.colorHex" />
           </fieldset>
           <fieldset class="col-span-2">
-            <label for="banner"> Banner Path </label>
+            <label for="banner">Banner Path</label>
             <div class="flex gap-1">
               <input
                 id="banner"
-                class="flex-grow"
+                class="grow"
                 type="text"
-                v-model="editDraft.banner_path"
+                v-model="editDraft.bannerPath"
               />
               <button
                 class="btn-simple w-8 rounded-full shrink-0 p-1"
@@ -99,7 +108,7 @@ defineProps<{
             </div>
           </fieldset>
           <fieldset class="col-span-2">
-            <label for="description"> Description </label>
+            <label for="description">Description</label>
             <textarea
               id="description"
               class="h-24"
@@ -121,19 +130,19 @@ defineProps<{
             </CollapsibleTrigger>
             <CollapsibleContent class="py-2 gap-2 flex flex-col">
               <fieldset>
-                <label for="launch-command"> Launch Command </label>
+                <label for="launch-command">Launch Command</label>
                 <input
                   id="launch-command"
                   type="text"
-                  v-model="editDraft.launch_command"
+                  v-model="editDraft.launchCommand"
                 />
               </fieldset>
               <fieldset>
-                <label for="launch-args"> Launch Arguments </label>
+                <label for="launch-args">Launch Arguments</label>
                 <input
                   id="launch-args"
                   type="text"
-                  v-model="editDraft.launch_args"
+                  v-model="editDraft.launchArgs"
                 />
               </fieldset>
             </CollapsibleContent>
@@ -151,7 +160,7 @@ defineProps<{
 </template>
 
 <style scoped lang="css">
-@reference "maincss";
+@reference "@main.css";
 
 :deep(.instance-settings) {
   @apply bg-modfriend-800 p-2 rounded-xl border border-modfriend-700 flex flex-col gap-4 mb-2 shadow-lg shadow-black/25;