{
  lib,
  buildNpmPackage,
  fetchFromGitHub,
  writeText,
}:
let
  version = "2024.02.24-beta1";

  # Got to love those hand crafted, artisinal patches 😁
  insertVersionPatch = writeText "0001-headscale-ui-insert-version" ''
    --- a/src/routes/settings.html/+page.svelte
    +++ b/src/routes/settings.html/+page.svelte
    @@ -26,7 +26,7 @@
     		<ThemeSettings />
     		<div class="p-4" />
     		<h1 class="text-2xl bold text-primary mb-4">Version</h1>
    -		<b>insert-version</b>
    +		<b>${version}</b>
     		<div class ="p-4"></div>
    		<DevSettings></DevSettings>
     	</div>
  '';
in
buildNpmPackage {
  pname = "headscale-ui";
  inherit version;

  src = fetchFromGitHub {
    owner = "gurucomputing";
    repo = "headscale-ui";
    rev = version;
    hash = "sha256-jbyy8W/qAso2yb/hNsmVHiT0mJXInpEIejU+3IB9wJY=";
  };

  npmDepsHash = "sha256-SHcsTfX2AnHR8fNCE2+JYV33DtZFQOqN7LSoV+fUu5A=";

  npmPackFlags = [ "--ignore-scripts" ];
  makeCacheWritable = true;

  patches = [ insertVersionPatch ];

  installPhase = ''
    cp -a build $out
  '';

  meta = with lib; {
    description = "A web frontend for the headscale Tailscale-compatible coordination server";
    homepage = "https://github.com/gurucomputing/headscale-ui";
    license = licenses.bsd3;
    maintainers = with maintainers; [ ];
    mainProgram = "headscale-ui";
    platforms = platforms.all;
  };
}