WIP: Add frontend web app player & editor in Vue 3 + Vite

TODO:
- implement viewing & editing.
- Add links to deployment, and CHANGELOG.

style.css

package.json

vite config

.vscode

eslint use --cache

.vscode

add vite-css-modules

editorconfig

tsconfig and updated vue-tsc (fixes most of the type checking bugs)

fix last type errors

audiowaveform

gitignore ESLint

ESLint: ignore autogenerated JSON

lint:fix tsconfig and vite config

migrate icon generating script to TS

eslint src/lib/

eslint stores

eslint src/*.ts

eslint audio

pnpm update

update icon

eslint ahh

import new tracks json

instructions on jq codenames

codenames.json

fix styles broken by import order

eslint audio

app

error screen

footer

copyright year

global header

loading screen

transition

search field

preview

track info

inspector

control

controls

controls range

controls impl

controls index

eslint no-console off

AudioTrack view inspector

cards and sliders

more controls

master volume slider

playhead

library page

player page

timeline markers

timeline markers

header tick

timestamp

timeline clip index

clip empty

clip lyrics

clip palette

clip fadeout

clip default

import order

timeline

timeline panel

timeline track header

timeline trackview

clip view

clip audio

audio waveform

scrollsync

easy lints

eslint store

eslint no mutating props off

pnpm catalog off

add unhead dep

use head

eslint inspector

eslint easy minor stuff

eslint audiowaveform

easy fix

eslint use :key with v-for

fix audio waveforms

inspector makes more sense

season

remove debug

inspector

Merge codenames into main json

bump pnpm

pnpm in particular

enabled

monospace Game Over

Move JSON to assets to avoid caching issues

.editorconfig

@@ -0,0 +1,15 @@
+[*.cs]
+
+# IDE0290: Use primary constructor
+# Primary constructors are far from perfect: they can't have readonly fields, while fields can be used anywhere in the class body.
+csharp_style_prefer_primary_constructors = false
+
+# IDE0305: Simplify collection initialization
+dotnet_style_prefer_collection_expression = never
+
+# IDE0031: Use null propagation
+# Unity overrides equality operator, so gameObject == null also accounts for internal state of the backing C++ object
+# Read more:
+# - https://blog.lslabs.dev/posts/null_check_equality_unity
+# - https://blog.lslabs.dev/posts/unity_script_duality
+dotnet_style_null_propagation = false

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "vitest.explorer",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,103 @@
+{
+    // https://github.com/tailwindlabs/tailwindcss/discussions/5258#discussioncomment-1979394
+    "css.customData": [
+        ".vscode/tailwind.json"
+    ],
+    // Disable the default formatter, use eslint instead
+    "prettier.enable": false,
+    "editor.formatOnSave": false,
+    // Auto fix
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "never"
+    },
+    // Silent the stylistic rules in your IDE, but still auto fix them
+    "eslint.rules.customizations": [
+        {
+            "rule": "style/*",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "format/*",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-indent",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-spacing",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-spaces",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-order",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-dangle",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*-newline",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*quotes",
+            "severity": "off",
+            "fixable": true
+        },
+        {
+            "rule": "*semi",
+            "severity": "off",
+            "fixable": true
+        }
+    ],
+    // Enable eslint for all supported languages
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "vue",
+        "html",
+        "markdown",
+        "json",
+        "jsonc",
+        "yaml",
+        "toml",
+        "xml",
+        "gql",
+        "graphql",
+        "astro",
+        "svelte",
+        "css",
+        "less",
+        "scss",
+        "pcss",
+        "postcss"
+    ],
+    "workspaceKeybindings.manimPreviewTask.enabled": true,
+    "typescript.format.enable": false,
+    "typescript.tsdk": "./Frontend/node_modules/typescript/lib",
+    "[vue]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    },
+    "[javascript]": {
+        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    }
+}

.vscode/tailwind.json

@@ -0,0 +1,95 @@
+{
+  "version": 4.0,
+  "atDirectives": [
+    {
+      "name": "@theme",
+      "description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
+        }
+      ]
+    },
+    {
+      "name": "@source",
+      "description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
+        }
+      ]
+    },
+    {
+      "name": "@utility",
+      "description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
+        }
+      ]
+    },
+    {
+      "name": "@variant",
+      "description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
+        }
+      ]
+    },
+    {
+      "name": "@custom-variant",
+      "description": "Use the `@custom-variant` directive to add a custom variant in your project.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
+        }
+      ]
+    },
+    {
+      "name": "@reference",
+      "description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.\n\nTo do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
+        }
+      ]
+    },
+    {
+      "name": "@config",
+      "description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
+        }
+      ]
+    },
+    {
+      "name": "@plugin",
+      "description": "Use the `@plugin` directive to load a legacy JavaScript-based plugin.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
+        }
+      ]
+    }
+  ]
+}

AGENTS.md

@@ -0,0 +1,69 @@
+# Muzika Gromche — AI Agent Guide
+
+## Overview
+
+- **Purpose**: This repository builds a BepInEx plugin (C#) that adds synchronized party music + light effects to Lethal Company, plus a small frontend playground for track metadata and browsing.
+- **Two main parts**: the core plugin in `MuzikaGromche/` (targets `netstandard2.1`) and the frontend in `Frontend/` (Vite 3 + Vue + Vitest).
+- **Tools and helpers**: there are some helpful Python scripts in the `playground` directory.
+
+## What to edit / hotspots
+
+- `MuzikaGromche/Plugin.cs`: plugin entry and initial configuration registration.
+- `MuzikaGromche/*.cs` (e.g. `PoweredLights.cs`, `DiscoBallManager.cs`, `SpawnRateManager.cs`, `ScreenFiltersManager.cs`): main game integration and effect logic.
+- `UnityAssets/` and `MuzikaGromche/bin/...`: Unity assets and compiled outputs used for packaging.
+- Frontend audio/metadata: `Frontend/src/audio/AudioEngine.ts` and `Frontend/public/*` (track lists and audio bundles).
+- Sources of audio tracks are edited and mixed outside of this repo, and only final deliveries are checked in here.
+
+## Build & run (developer workflow)
+
+- Primary helper: `Justfile` (root) and `MuzikaGromche.just.user` (root, not checked into the repo, so some commands may be unavailable). Common recipes:
+  - `just build` — runs both `build-debug` and `build-release` (calls `dotnet build`).
+  - `just build-release` — `dotnet build --configuration Release`.
+  - `just build-debug` — `dotnet build --configuration Debug`.
+  - `just build-debug run` — build & run the game for testing, most commonly used combination.
+  - `just install-imperium` — installs `dist/MuzikaGromche-Debug.zip` into an r2modman/Imperium profile path (see `Justfile` for `plugin_dir`). Not needed, as it is a post-build step anyway.
+  - `just ogg <track_name>` and `just ogg1 <track_name>` — custom msbuild targets that convert wav→ogg via `dotnet msbuild /t:wav2ogg` (used when adding tracks from outside of this repo).
+  - `just loud <track_name>` — runs a Python script that measures loudness of an audio track in LUFS, useful to calculate volume adjustments for normalization to a consistent desirable level.
+  - `just oggloud1 <track_name>` and `just oggloud <track_name>` — convert and measure loudness in one command invocation (single track, and intro+loop pair of tracks respectively).
+
+- Frontend: in `Frontend/`:
+  - Use `pnpm` (lockfile `pnpm-lock.yaml` present). Run `pnpm install`.
+  - Dev: `pnpm run dev` (Vite). Build: `pnpm run build`.
+  - Test: `pnpm run test:browser` or `pnpm run coverage`. Uses Vitest with unified config in `vite.config.ts`.
+
+- Python scripts in `playground`:
+  - Use `uv` tool to run Python code, or corresponding `just` targets if available.
+
+## Packaging and outputs
+
+- Plugin target: `netstandard2.1` — compiled DLLs appear under `MuzikaGromche/bin/<Configuration>/netstandard2.1/`.
+- The repo expects a `dist/` zip for quick install (see `Justfile` `install-imperium` target). Look for `dist/MuzikaGromche-Debug.zip` when installing into a profile.
+
+## Conventions & patterns
+
+- BepInEx plugin pattern: follow `Plugin.cs` for how features are registered and how configuration entries are declared.
+- Prefer small localized changes: keep public APIs stable and avoid broad refactors across many `*.cs` files without tests. The game integration is timing-sensitive.
+- Manual testing is done by running the game (see `Justfile` `run` target).
+- Track assets: audio tracks and timings are curated; if you add tracks, use the `just ogg` or `dotnet msbuild` tasks to convert. Run the game once, so that it dumps a new JSON metadata under the frontend `public/` directory to ensure that data stays in sync.
+
+## Integration points & external dependencies
+
+- Game modding: integrates with Lethal Company via BepInEx. The repo assumes you understand how to drop plugin DLLs into r2modman profiles (see `Justfile` `plugin_dir`).
+- External tools: `dotnet` (SDK for building and custom msbuild targets), `just` (task runner) — commands are invoked from repository root; `pnpm`/`node` (frontend) — commands are invoked from `Frontend` directory.
+
+## Examples to reference
+
+- Change visual effects: edit `MuzikaGromche/PoweredLights.cs` or `MuzikaGromche/ScreenFiltersManager.cs` and test by running `just build-debug run`.
+- Add frontend metadata: update `Frontend/src/assets/MuzikaGromcheTracks.json` and run `pnpm run build`.
+
+## What NOT to assume
+
+- There are no automated unit tests in the C# mod; it is unreasonably hard to run mod's code outside of Unity runtime, so don't bother with it. Validate changes with local builds and by installing into an r2modman profile.
+- Packaging and profile paths are user-specific — `Justfile` contains a template `plugin_dir` that uses `$HOME` and `imperium_profile` fields; do not hardcode absolute paths in commits.
+
+## Where to look next (quick links)
+
+- `Justfile` and `MuzikaGromche.just.user` — primary developer recipes and packaging helpers.
+- `MuzikaGromche/` — all plugin source code.
+- `UnityAssets/` — art/animator resources, treat them as opaque binary blobs.
+- `Frontend/` — frontend app, `src/audio/AudioEngine.ts` for audio logic.

CHANGELOG.md

@@ -0,0 +1,128 @@
+# Changelog
+
+## MuzikaGromche 1337.9001.69
+
+- Show real Artist & Song info in the config.
+
+## MuzikaGromche 1337.9001.68 - LocalHost hotfix
+
+- Fixed occasionally broken playback of v1337.9001.67, sorry about that.
+- Turns out, client-side vanilla-compat mode can never be perfectly timed, so don't expect much without a modded host.
+- Removed an existing track Yalgaar.
+- Merged two config options into one: Reduce Visual Effects & Display Lyrics.
+- Added a new track Arcane.
+
+## MuzikaGromche 1337.9001.67 - LocalHost Edition
+
+- Added a new track TwoFastTuFurious (from the same artist as PickUpSticks), thematic to the upcoming Valentine's Day.
+- Added support for client-side playback while playing with an unmodded/vanilla host.
+- Tweaked the amount of visual flare at the Factory's start room (main tile).
+
+## MuzikaGromche 1337.9001.4 - v73 Chinese New Year Edition
+
+- Remastered recently added track IkWilJe using a higher quality source audio and better fitting visual effects.
+- Adjusted lyrics for PWNED (can't believe it missed an obvious joke).
+- Added a new track Paarden.
+- Added a new track DiscoKapot.
+- Added an accessibility option to reduce the intensity of overly distracting visual effects.
+- Seasonal content like New Year's songs (IkWilJe, Paarden, DiscoKapot) will only be available for selection during their respective seasons.
+- Reduced memory usage by almost 400 MB, thanks to loading audio clips on demand (not preloading all tracks at launch).
+- Added a new track PickUpSticks.
+
+## MuzikaGromche 1337.9001.3 - v73 Happy New Year Edition
+
+- Added a new track IkWilJe.
+
+## MuzikaGromche 1337.9001.2 - v73 Rushed Edition
+
+- Added a new track HighLow.
+
+## MuzikaGromche 1337.9001.1 - v73 Music louder Edition
+
+- Raised the default audio volume, and added a configuration slider.
+- Tweaked color palette, lyrics and visual effects for MoyaZhittya and some other tracks.
+
+## MuzikaGromche 1337.9001.0 - v73 Music quieter Edition
+
+- Updated netcode-patch to support Lethal Company v73.
+- Remastered all the audio tracks to target a consistent loudness level which allows you hear your teammates.
+- Remastered track Song2 to fix cut points.
+- Shortened intro of track Peretasovka to match vanilla timings.
+- Added multiple intro variants for BeefLiver.
+- Added a new track BbIXODaHET.
+- Added a new track Whistle. Now it can fully replace WhistleJester!
+- Added a new track ReelGoon.
+
+## MuzikaGromche 1337.420.9004 - Life Support Edition
+
+- Override Death Screen / Game Over text in certain cases.
+- Added a new track AttentionPls featuring multiple intro variants and new visual effects.
+
+## MuzikaGromche 1337.420.9003 - Lights Out Edition
+
+- Fixed wrong colors during fade out transition, e.g. in Mineshaft tunnel tiles.
+
+## MuzikaGromche 1337.420.9002 - Anime Edition
+
+- Added a new track OnePartiyaUdar in Japanese language.
+- Remastered recently added tracks at conventional 44100 Hz for better stitching.
+- Improved playback experience: use precise DSP time and up-front scheduing for seamless audio stitching, add custom Audio Sources to improve reliability.
+- Removed remaining CSync code and package references even from debug builds.
+- Downgraded LobbyCompatibility to optional dependency.
+- Toggled config option to increase certain spawn rate to ON by default.
+- Fixed resetting to wrong initial colors, e.g. in Mineshaft tunnel tiles.
+
+## MuzikaGromche 1337.420.9001 - Multiverse Edition
+
+- Added support for tracks to rotate between multiple audio variants during a round.
+- Added a new track Beha with three different variants of intro.
+
+## MuzikaGromche 1337.420.69 - It's All DiscoNnected Edition
+
+- Fixed harmless but annoying errors in BepInEx console output.
+- Improve smoothness of color animations.
+- Added a new track BeefLiver.
+
+## MuzikaGromche 1337.69.420 - It's All Connected Edition
+
+- Fix certain object hanging around after being disabled.
+- CSync proved to be unreliable for config syncing, so rewrote track selection to custom netcode.
+
+## MuzikaGromche 13.37.9001 - Chromaberrated Edition
+
+- Fixed more missing flickering behaviours for some animators controllers.
+- Fixed some powered lights not fully turning off or flickering when there are multiple Light components per container.
+- Improved performance by pre-loading certain assets at the start of round instead of at a timing-critical frame update.
+- Added an opt-in config option to increase certain spawn rate to experience content of this mod more often.
+
+## MuzikaGromche 13.37.1337 - Photosensitivity Warning Edition
+
+- Added LobbyCompatibility to dependencies to avoid desync issues.
+- Fixed lyrics not being displayed in some situations.
+- Fixed visual issues with the fade out effect.
+- Fixed visual glitch at the last beat of a loop.
+- Fixed timings of one of the tracks.
+- Removed unnecessary "Enable Color Animations" config option.
+- Fixed missing flickering behaviours for some animators controllers.
+
+## MuzikaGromche 13.37.911 - Sri Lanka Bus hotfix
+
+- Fixed certain event sometimes not working due to wrong method call.
+- Added support for pre-v70 Mansion Main tile.
+
+## MuzikaGromche 13.37.420 - Sri Lanka Bus Edition
+
+Completely rewritten by Ratijas, with tons of new content.
+
+- Added lots of new tracks.
+- Fixed gaps in old tracks.
+- New code synchronizes light show to the beat.
+- Timings, animation curves, color palettes and events fine-tuned for each track by visual artist [Just Nothing](https://t.me/REALJUSTNOTHING).
+- Configurable Audio Delay for those with Bluetooth headset.
+- Configurable chance of randomly choosing each tracks.
+- Added lyrics to *some* of the tracks, and a configuration toggle.
+- Certain tiles are patched by [WaterGun](https://www.youtube.com/channel/UCCxCFfmrnqkFZ8i9FsXBJVA) to add some visual flare.
+
+## MuzikaGromche 13.37.6 - Christmas Special
+
+Last known version released by Oflor. Added special timed content for New Year and Christmas.

Directory.Build.targets

@@ -0,0 +1,5 @@
+<Project>
+    <Target Name="NetcodePatch" AfterTargets="PostBuildEvent">
+        <Exec Command="dotnet netcode-patch -uv 2022.3.62 -nv 1.12.0 &quot;$(TargetPath)&quot; @(ReferencePathWithRefAssemblies->'&quot;%(Identity)&quot;', ' ')"/>
+    </Target>
+</Project>

Frontend/.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

Frontend/.gitignore

@@ -0,0 +1,55 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
+.cache
+dist
+.idea
+.vite-node
+ltex*
+.DS_Store
+.zed
+
+# tests & coverage
+coverage
+.vitest-reports
+*.tsbuildinfo
+
+# exclude static html reporter folder
+test/browser/html/
+test/core/html/
+.vitest-attachments
+explainFiles.txt
+.vitest-dump
+
+# ESLint
+.eslintcache
+
+# Vite CSS Modules
+*.module.css.d.ts
+
+# Project assets
+/public/MuzikaGromcheAudio/*
+!/public/MuzikaGromcheAudio/.gitkeep

Frontend/README.md

@@ -0,0 +1,39 @@
+# Muzika Gromche — Web Player & Editor
+
+Play your favorite tracks on repeat right in your browser.
+
+## Project structure
+
+The look & feel is inspired by a certain popular NLE (Non-Linear video Editor) which incorporates DAW (Digital Audio Workstation) functionality in it.
+
+- Library page lists all available audio tracks with some basic information presented in cards. There is a search / filter field on top.
+- Player page features in-depth information about selected audio track, a dedicated timeline widget lets you play, seek, scrub, zoom into timeline tracks & clips, and manupulate them. Each timeline track represents either a segment of the song (intro, loop), or a specific kind of visual effects (such as flickering, fading out & color palette for powered lights, lyrics, drunkness & condensation).
+
+## Development
+
+### Adding new tracks
+
+1. Add track declaration to Plugin.cs and fill in its properties.
+2. Launch the game once, so that it generates a new JSON dump (in the Lethal Company save files directory) of all tracks.
+3. Replace `src/assets/MuzikaGromcheTracks.json` with the new JSON dump.
+4. Discard lines with IP address and username or replace them with generic ones.
+
+### Run & test
+
+First time setup:
+- copy audio files from the `/Assets/` directory located at repository's root to `Frontend/public/MuzikaGromcheAudio/` directory.
+
+Muzika Gromche Web Player & Editor is built with Vue 3 + TypeScript + Vite.
+
+```sh
+pnpm run dev
+pnpm run test
+```
+
+### Deploy
+
+```sh
+pnpm run build
+```
+
+Use scp, rsync or any other tool to upload content of `dist/` to root@ratijas.me `/var/www/html/muzika-gromche/`.

Frontend/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-svg-loader" />

Frontend/eslint.config.ts

@@ -0,0 +1,19 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  lessOpinionated: true,
+  ignores: [
+    'src/assets/MuzikaGromcheTracks.json',
+  ],
+  rules: {
+    'default-case-last': 'off',
+    'pnpm/json-enforce-catalog': 'off',
+    'pnpm/yaml-enforce-settings': 'off',
+    'ts/consistent-type-definitions': 'off',
+    'no-console': 'off',
+    // who said I can't pass refs inside objects as props?
+    'vue/no-mutating-props': ['error', {
+      shallowOnly: true,
+    }],
+  },
+})

Frontend/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/icon-32.png" sizes="32x32" type="image/png">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Muzika Gromche — The ultimate Jester party music mod</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

Frontend/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "muzika-gromche-frontend",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "packageManager": "pnpm@10.28.1+sha512.7d7dbbca9e99447b7c3bf7a73286afaaf6be99251eb9498baefa7d406892f67b879adb3a1d7e687fc4ccc1a388c7175fbaae567a26ab44d1067b54fcb0d6a316",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check prebuild \"build-only {@}\" --",
+    "prebuild": "tsx scripts/generate-icons.ts",
+    "build-only": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "type-check": "vue-tsc --build",
+    "lint": "eslint . --cache",
+    "lint:fix": "eslint . --cache --fix"
+  },
+  "dependencies": {
+    "@material-design-icons/svg": "^0.14.15",
+    "@tailwindcss/vite": "^4.1.18",
+    "@unhead/vue": "^2.1.2",
+    "@vueuse/core": "^14.1.0",
+    "mitt": "^3.0.1",
+    "pinia": "^3.0.4",
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.27",
+    "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^6.7.3",
+    "@tsconfig/node24": "^24.0.4",
+    "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.9",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "4.0.15",
+    "@vitest/eslint-plugin": "^1.6.6",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "eslint": "~9.39.2",
+    "eslint-plugin-format": "^1.3.1",
+    "eslint-plugin-vue": "~10.6.2",
+    "jiti": "^2.6.1",
+    "jsdom": "^27.4.0",
+    "npm-run-all2": "^8.0.4",
+    "png-to-ico": "^3.0.1",
+    "prettier": "^3.8.1",
+    "sharp": "^0.33.5",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@^7.3.1",
+    "vite-css-modules": "^1.12.0",
+    "vite-plugin-vue-devtools": "^8.0.5",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^4.0.18",
+    "vitest-browser-vue": "^2.0.2",
+    "vue-tsc": "^3.2.3"
+  }
+}

Frontend/pnpm-workspace.yaml

@@ -0,0 +1,12 @@
+catalogMode: manual
+
+shellEmulator: true
+
+trustPolicy: no-downgrade
+trustPolicyExclude:
+  - semver@6.3.1
+  - undici-types@6.21.0
+
+onlyBuiltDependencies:
+  - esbuild
+  - sharp

Frontend/public/MuzikaGromcheAudio/.gitkeep

@@ -0,0 +1 @@
+Copy /Assets/ to this directory.

Frontend/scripts/generate-icons.ts

@@ -0,0 +1,51 @@
+import { promises as fs } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import toIco from 'png-to-ico'
+import sharp from 'sharp'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const sourceIcon = path.resolve(__dirname, '../../icon.png')
+const outputDir = path.resolve(__dirname, '../public')
+
+async function generateIcons() {
+  await fs.mkdir(outputDir, { recursive: true })
+
+  // Generate PNGs
+  const sizes = [32, 192, 256]
+  for (const size of sizes) {
+    const outputPath = path.join(outputDir, `icon-${size}.png`)
+    await sharp(sourceIcon)
+      .resize(size, size)
+      .toFile(outputPath)
+    console.log(`Generated ${outputPath}`)
+  }
+
+  // Generate apple-touch-icon
+  const appleIconPath = path.join(outputDir, 'apple-touch-icon.png')
+  await sharp(sourceIcon)
+    .resize(180, 180)
+    .toFile(appleIconPath)
+  console.log(`Generated ${appleIconPath}`)
+
+  // Generate favicon.ico
+  const icoSizes = [16, 24, 32, 48]
+  const buffers = await Promise.all(icoSizes.map(size =>
+    sharp(sourceIcon)
+      .resize(size, size)
+      .png()
+      .toBuffer(),
+  ))
+  const icoBuffer = await toIco(buffers)
+  const icoPath = path.join(outputDir, 'favicon.ico')
+  await fs.writeFile(icoPath, icoBuffer)
+  console.log(`Generated ${icoPath}`)
+}
+
+generateIcons().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})