chore: styling and missing unit tests (#265)

* chore: removed unused docker cleanup file
* chore:  Replaced the DaisyUI spinner with <Spinner size="small" />
* chore:  added missing css, centralized classes
* chore: missing a11y added
* chore: prettierrc added
* chore: formatting for frontend code
* chore: added unit tests for editor toolbar and script actions
* chore: detected issues

Author: HardMax71

.github/workflows/frontend-ci.yml

@@ -39,6 +39,14 @@ jobs:
         working-directory: frontend
         run: npm run stylelint
 
+      - name: Check formatting (Prettier)
+        working-directory: frontend
+        run: npm run format:check
+
       - name: Run svelte-check
         working-directory: frontend
         run: npm run check
+
+      - name: Verify production build
+        working-directory: frontend
+        run: npm run build

.pre-commit-config.yaml

@@ -46,10 +46,18 @@ repos:
         files: ^frontend/src/.*\.css$
         pass_filenames: false
 
+      # Prettier - matches CI: cd frontend && npx prettier --check
+      - id: prettier-frontend
+        name: prettier (frontend)
+        entry: bash -c 'cd frontend && npx prettier --check "src/**/*.{ts,svelte,json}"'
+        language: system
+        files: ^frontend/src/.*\.(ts|svelte|json)$
+        pass_filenames: false
+
       # Svelte Check - matches CI: cd frontend && npx svelte-check
       - id: svelte-check-frontend
         name: svelte-check (frontend)
-        entry: bash -c 'cd frontend && npx svelte-check --tsconfig ./tsconfig.json'
+        entry: bash -c 'cd frontend && npx svelte-check --tsconfig ./tsconfig.json --fail-on-warnings'
         language: system
         files: ^frontend/src/.*\.(ts|svelte)$
         pass_filenames: false

frontend/.prettierignore

@@ -0,0 +1,8 @@
+node_modules/
+public/build/
+dist/
+coverage/
+test-results/
+playwright-report/
+src/lib/api/
+*.css

frontend/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "singleQuote": true,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "trailingComma": "all",
+    "plugins": ["prettier-plugin-svelte"],
+    "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

frontend/eslint.config.js

@@ -64,7 +64,7 @@ export default [
     },
     rules: {
       ...svelte.configs.recommended.rules,
-      'svelte/button-has-type': 'warn',
+      'svelte/button-has-type': 'error',
       'no-unused-vars': 'off',
       'no-undef': 'off',
     },

frontend/package-lock.json

@@ -9,13 +9,15 @@
     "start": "sirv public --single --no-clear --dev --host",
     "generate:api": "openapi-ts",
     "lint": "eslint src --ext .ts,.svelte",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
-    "stylelint": "stylelint \"src/**/*.css\""
+    "stylelint": "stylelint \"src/**/*.css\"",
+    "format": "prettier --write \"src/**/*.{ts,svelte,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,svelte,json}\""
   },
   "dependencies": {
     "@codemirror/autocomplete": "^6.17.0",
@@ -69,20 +71,22 @@
     "eslint-plugin-svelte": "^3.15.0",
     "express": "^5.2.1",
     "globals": "^17.3.0",
-    "jsdom": "^28.1.0",
     "http-proxy": "^1.18.1",
+    "jsdom": "^28.1.0",
     "monocart-reporter": "^2.10.0",
     "postcss": "^8.4.47",
     "postcss-lightningcss": "^1.0.2",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
     "rollup": "^4.59.0",
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-svelte": "^7.2.2",
+    "sirv-cli": "^3.0.1",
     "stylelint": "^17.0.0",
     "stylelint-config-standard": "^40.0.0",
-    "sirv-cli": "^3.0.1",
     "svelte-check": "^4.3.6",
     "svelte-eslint-parser": "^1.4.1",
     "svelte-preprocess": "^6.0.3",

frontend/package.json

@@ -1,11 +1,11 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { Router, goto } from "@mateothegreat/svelte5-router";
+    import { Router, goto } from '@mateothegreat/svelte5-router';
     import { Toaster } from 'svelte-sonner';
-    import Header from "$components/Header.svelte";
-    import Footer from "$components/Footer.svelte";
-    import Spinner from "$components/Spinner.svelte";
-    import ErrorDisplay from "$components/ErrorDisplay.svelte";
+    import Header from '$components/Header.svelte';
+    import Footer from '$components/Footer.svelte';
+    import Spinner from '$components/Spinner.svelte';
+    import ErrorDisplay from '$components/ErrorDisplay.svelte';
     import { themeStore } from '$stores/theme.svelte';
     import { appError } from '$stores/errorStore.svelte';
     import { authStore } from '$stores/auth.svelte';
@@ -14,18 +14,18 @@
     const log = logger.withTag('App');
 
     // Page components
-    import Home from "$routes/Home.svelte";
-    import Login from "$routes/Login.svelte";
-    import Register from "$routes/Register.svelte";
-    import Privacy from "$routes/Privacy.svelte";
-    import Editor from "$routes/Editor.svelte";
-    import Settings from "$routes/Settings.svelte";
-    import Notifications from "$routes/Notifications.svelte";
-    import AdminEvents from "$routes/admin/AdminEvents.svelte";
-    import AdminExecutions from "$routes/admin/AdminExecutions.svelte";
-    import AdminSagas from "$routes/admin/AdminSagas.svelte";
-    import AdminUsers from "$routes/admin/AdminUsers.svelte";
-    import AdminSettings from "$routes/admin/AdminSettings.svelte";
+    import Home from '$routes/Home.svelte';
+    import Login from '$routes/Login.svelte';
+    import Register from '$routes/Register.svelte';
+    import Privacy from '$routes/Privacy.svelte';
+    import Editor from '$routes/Editor.svelte';
+    import Settings from '$routes/Settings.svelte';
+    import Notifications from '$routes/Notifications.svelte';
+    import AdminEvents from '$routes/admin/AdminEvents.svelte';
+    import AdminExecutions from '$routes/admin/AdminExecutions.svelte';
+    import AdminSagas from '$routes/admin/AdminSagas.svelte';
+    import AdminUsers from '$routes/admin/AdminUsers.svelte';
+    import AdminSettings from '$routes/admin/AdminSettings.svelte';
 
     let authInitialized = $state(false);
 
@@ -61,20 +61,20 @@
     // Routes configuration
     const routes = [
         // Public routes
-        { path: "/", component: Home },
-        { path: "/login", component: Login },
-        { path: "/register", component: Register },
-        { path: "/privacy", component: Privacy },
+        { path: '/', component: Home },
+        { path: '/login', component: Login },
+        { path: '/register', component: Register },
+        { path: '/privacy', component: Privacy },
         // Protected routes
-        { path: "/editor", component: Editor, hooks: { pre: requireAuth } },
-        { path: "/settings", component: Settings, hooks: { pre: requireAuth } },
-        { path: "/notifications", component: Notifications, hooks: { pre: requireAuth } },
-        { path: "/admin/events", component: AdminEvents, hooks: { pre: requireAuth } },
-        { path: "/admin/executions", component: AdminExecutions, hooks: { pre: requireAuth } },
-        { path: "/admin/sagas", component: AdminSagas, hooks: { pre: requireAuth } },
-        { path: "/admin/users", component: AdminUsers, hooks: { pre: requireAuth } },
-        { path: "/admin/settings", component: AdminSettings, hooks: { pre: requireAuth } },
-        { path: "^/admin$", component: AdminEvents, hooks: { pre: requireAuth } },
+        { path: '/editor', component: Editor, hooks: { pre: requireAuth } },
+        { path: '/settings', component: Settings, hooks: { pre: requireAuth } },
+        { path: '/notifications', component: Notifications, hooks: { pre: requireAuth } },
+        { path: '/admin/events', component: AdminEvents, hooks: { pre: requireAuth } },
+        { path: '/admin/executions', component: AdminExecutions, hooks: { pre: requireAuth } },
+        { path: '/admin/sagas', component: AdminSagas, hooks: { pre: requireAuth } },
+        { path: '/admin/users', component: AdminUsers, hooks: { pre: requireAuth } },
+        { path: '/admin/settings', component: AdminSettings, hooks: { pre: requireAuth } },
+        { path: '^/admin$', component: AdminEvents, hooks: { pre: requireAuth } },
     ];
     // --8<-- [end:routes]
 </script>
@@ -83,7 +83,7 @@
     <ErrorDisplay error={appError.current.error} title={appError.current.title} />
 {:else}
     <div class="flex flex-col min-h-screen bg-bg-default dark:bg-dark-bg-default pt-16">
-        <Header/>
+        <Header />
         <Toaster richColors position="top-right" />
         <main class="flex-grow">
             {#if !authInitialized}
@@ -94,6 +94,6 @@
                 <Router base="/" {routes} />
             {/if}
         </main>
-        <Footer/>
+        <Footer />
     </div>
 {/if}