Refactored frontend to work with the latest mooncore changes

MoonlightServers.Frontend.Runtime/MoonlightServers.Frontend.Runtime.csproj

@@ -7,9 +7,10 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.5"/>
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.5" PrivateAssets="all"/>
         <PackageReference Include="MoonCore.PluginFramework" Version="1.0.8" />
         <PackageReference Include="MoonCore.PluginFramework.Generator" Version="1.0.2" />
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.7" PrivateAssets="all"/>
     </ItemGroup>
 
     <ItemGroup>

MoonlightServers.Frontend.Runtime/Styles/extract-classes.js

@@ -0,0 +1,30 @@
+// extract-classes.js
+const fs = require('fs');
+
+module.exports = (opts = {}) => {
+    const classSet = new Set();
+
+    return {
+        postcssPlugin: 'extract-tailwind-classes',
+        Rule(rule) {
+            const selectorParser = require('postcss-selector-parser');
+            selectorParser(selectors => {
+                selectors.walkClasses(node => {
+                    classSet.add(node.value);
+                });
+            }).processSync(rule.selector);
+        },
+        OnceExit() {
+            const classArray = Array.from(classSet).sort();
+
+            if (!fs.existsSync("../../MoonlightServers.Frontend/Styles/mappings")){
+                fs.mkdirSync("../../MoonlightServers.Frontend/Styles/mappings");
+            }
+            
+            fs.writeFileSync('../../MoonlightServers.Frontend/mappings/classes.map', classArray.join('\n'));
+            console.log(`✅ Extracted ${classArray.length} Tailwind classes to tailwind-classes.txt`);
+        }
+    };
+};
+
+module.exports.postcss = true;

MoonlightServers.Frontend.Runtime/Styles/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "styles",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "tailwind": "npx postcss styles.css -o ../wwwroot/css/style.min.css --watch",
+    "tailwind-build": "npx postcss styles.css -o ../wwwroot/css/style.min.css",
+    "mappings": "EXTRACT_CLASSES=true npx postcss styles.css -o ../wwwroot/css/style.min.css "
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "flyonui": "^2.2.0",
+    "tailwindcss": "^4.1.11",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "postcss-selector-parser": "^7.1.0"
+  },
+  "devDependencies": {
+  }
+}

MoonlightServers.Frontend.Runtime/Styles/postcss.config.js

@@ -0,0 +1,11 @@
+const tailwindcss = require('@tailwindcss/postcss');
+const extractClasses = require('./extract-classes');
+
+module.exports = {
+    plugins: [
+        tailwindcss
+    ],
+};
+
+if(process.env.EXTRACT_CLASSES === "true")
+    module.exports.plugins.push(extractClasses);

MoonlightServers.Frontend.Runtime/Styles/styles.css

@@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer(base);
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer(base);
+@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer(base);
+
+@import "tailwindcss";
+@import "./node_modules/flyonui/variants.css";
+@import "./theme.css";
+
+@theme {
+    --font-inter: "Inter", var(--font-sans);
+    --font-scp: "Source Code Pro", var(--font-mono);
+    
+    --color-background: var(--mooncore-color-background);
+    --color-base-150: var(--mooncore-color-base-150);
+    --color-base-250: var(--mooncore-color-base-250);
+}
+
+@plugin "flyonui" {
+    themes: mooncore --default;
+}
+
+@source "./node_modules/flyonui/dist/index.js";
+
+@source "../**/*.razor";
+@source "../**/*.cs";
+@source "../**/*.html";
+@source "./mappings/*.map";
+
+@source "../../MoonlightServers.Frontend/**/*.cs";
+@source "../../MoonlightServers.Frontend/**/*.html";
+@source "../../MoonlightServers.Frontend/**/*.razor";
+@source "../../MoonlightServers.Frontend/Styles/**/*.map";
+
+@source "../../MoonlightServers.ApiServer/**/*.razor";
+
+#blazor-error-ui {
+    display: none;
+}
+
+#blazor-loader-label:after {
+    content: var(--blazor-load-percentage-text, "Loading");
+}
+
+#blazor-loader-progress {
+    width: var(--blazor-load-percentage, 0%);
+}
+
+@plugin "flyonui/theme" {
+    name: "mooncore";
+    default: true;
+    prefersdark: true;
+    color-scheme: "dark";
+    --color-base-100: var(--mooncore-color-base-100);
+    --color-base-200: var(--mooncore-color-base-200);
+    --color-base-300: var(--mooncore-color-base-300);
+    --color-base-content: var(--mooncore-color-base-content);
+    --color-primary: var(--mooncore-color-primary);
+    --color-primary-content: var(--mooncore-color-primary-content);
+    --color-secondary: var(--mooncore-color-secondary);
+    --color-secondary-content: var(--mooncore-color-secondary-content);
+    --color-accent: var(--mooncore-color-accent);
+    --color-accent-content: var(--mooncore-color-accent-content);
+    --color-neutral: var(--mooncore-color-neutral);
+    --color-neutral-content: var(--mooncore-color-neutral-content);
+    --color-info: var(--mooncore-color-info);
+    --color-info-content: var(--mooncore-color-info-content);
+    --color-success: var(--mooncore-color-success);
+    --color-success-content: var(--mooncore-color-success-content);
+    --color-warning: var(--mooncore-color-warning);
+    --color-warning-content: var(--mooncore-color-warning-content);
+    --color-error: var(--mooncore-color-error);
+    --color-error-content: var(--mooncore-color-error-content);
+    --radius-selector: var(--mooncore-radius-selector);
+    --radius-field: var(--mooncore-radius-field);
+    --radius-box: var(--mooncore-radius-box);
+    --size-selector: var(--mooncore-size-selector);
+    --size-field: var(--mooncore-size-field);
+    --border: var(--mooncore-border);
+    --depth: var(--mooncore-depth);
+    --noise: var(--mooncore-noise);
+}
+
+@layer utilities {
+    .btn {
+        @apply text-sm font-medium inline-flex items-center justify-center;
+    }
+    
+    .checkbox {
+        @apply border-base-content/30 bg-base-100;
+    }
+    
+    .input {
+        @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50;
+    }
+    
+    .advance-select-toggle {
+        @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50;
+    }
+    
+    .table {
+        :where(th, td) {
+            @apply py-1.5;
+        }
+    }
+    
+    .dropdown-item {
+        @apply px-2.5 py-1.5 text-sm;
+    }
+    
+    .dropdown-menu {
+        @apply bg-base-150;
+    }
+}

MoonlightServers.Frontend.Runtime/Styles/theme.css

@@ -0,0 +1,33 @@
+@theme {
+    --mooncore-color-background: #0c0f18;
+    --mooncore-color-base-100: #1e2b47;
+    --mooncore-color-base-150: #1a2640;
+    --mooncore-color-base-200: #101a2e;
+    --mooncore-color-base-250: #0f1729;
+    --mooncore-color-base-300: #0c1221;
+    --mooncore-color-base-content: #dde5f5;
+    --mooncore-color-primary: oklch(.511 .262 276.966);
+    --mooncore-color-primary-content: #dde5f5;
+    --mooncore-color-secondary: oklch(37% 0.034 259.733);
+    --mooncore-color-secondary-content: #dde5f5;
+    --mooncore-color-accent: oklch(.627 .265 303.9);
+    --mooncore-color-accent-content: #dde5f5;
+    --mooncore-color-neutral: #dde5f5;
+    --mooncore-color-neutral-content: oklch(14% 0.005 285.823);
+    --mooncore-color-info: oklch(.546 .245 262.881);
+    --mooncore-color-info-content: #dde5f5;
+    --mooncore-color-success: oklch(.627 .194 149.214);
+    --mooncore-color-success-content: #dde5f5;
+    --mooncore-color-warning: oklch(.828 .189 84.429);
+    --mooncore-color-warning-content: #dde5f5;
+    --mooncore-color-error: oklch(.586 .253 17.585);
+    --mooncore-color-error-content: #dde5f5;
+    --mooncore-radius-selector: 0.25rem;
+    --mooncore-radius-field: 0.5rem;
+    --mooncore-radius-box: 0.5rem;
+    --mooncore-size-selector: 0.25rem;
+    --mooncore-size-field: 0.25rem;
+    --mooncore-border: 1px;
+    --mooncore-depth: 0;
+    --mooncore-noise: 0;
+}