feat: group ui related packages under a ui directory

docs/nix/default.nix

@@ -45,7 +45,7 @@ pkgs.stdenv.mkDerivation {
     ln -snf ${fira-code}/share/fonts/truetype/FiraCode-VF.ttf ./site/static/
 
     # Copy icons into place
-    cp -af ../pkgs/webview-ui/app/icons ./site/static/
+    cp -af ../pkgs/ui/webview-ui/app/icons ./site/static/
   '';
 
   buildPhase = ''

formatter.nix

@@ -100,7 +100,7 @@
             extraPythonPackages = (self'.packages.clan-cli.devshellPyDeps pkgs.python3Packages);
           };
           "clan-app" = {
-            directory = "pkgs/clan-app";
+            directory = "pkgs/ui/clan-app";
             extraPythonPackages = (self'.packages.clan-app.devshellPyDeps pkgs.python3Packages);
             extraPythonPaths = [ "../clan-cli" ];
           };

pkgs/flake-module.nix

@@ -3,10 +3,10 @@
 {
   imports = [
     ./clan-cli/flake-module.nix
-    ./clan-app/flake-module.nix
+    ./ui/clan-app/flake-module.nix
     ./clan-vm-manager/flake-module.nix
     ./installer/flake-module.nix
-    ./webview-ui/flake-module.nix
+    ./ui/webview-ui/flake-module.nix
     ./distro-packages/flake-module.nix
     ./icon-update/flake-module.nix
     ./generate-test-vars/flake-module.nix
@@ -35,7 +35,7 @@
         editor = pkgs.callPackage ./editor/clan-edit-codium.nix { };
         classgen = pkgs.callPackage ./classgen { };
         zerotierone = pkgs.callPackage ./zerotierone { };
-        webview-lib = pkgs.callPackage ./webview-lib { };
+        webview-lib = pkgs.callPackage ./ui/webview-lib { };
         update-clan-core-for-checks = pkgs.callPackage ./update-clan-core-for-checks { };
       };
     };

pkgs/icon-update/default.nix

@@ -13,7 +13,7 @@ pkgs.writeShellApplication {
 
   text = ''
     REPO_ROOT="$(git rev-parse --show-toplevel)"
-    OUT_DIR="$(realpath "$REPO_ROOT"/pkgs/webview-ui/app/icons)"
+    OUT_DIR="$(realpath "$REPO_ROOT"/pkgs/ui/webview-ui/app/icons)"
     export OUT_DIR
     deno run --allow-all ${src}/main.ts
   '';

pkgs/ui/clan-app/README.md

@@ -4,28 +4,14 @@ A powerful application that allows users to create and manage their own Clans.
 
 ## Getting Started
 
-Follow the instructions below to set up your development environment and start the application:
+To run the local dev environment:
 
+```console
+❯ nix run .#ui-dev
+```
 
-1. **Navigate to the Webview UI Directory**
+This will start a [process-compose] instance running `pkgs/ui/webview-ui/app` and `pkgs/ui/clan-app`, with the web server
-
+accessible at `http://localhost:3000`.
-   Go to the `clan-core/pkgs/webview-ui/app` directory and start the web server by executing:
-
-   ```bash
-   npm install
-   vite
-   ```
-
-2. **Start the Clan App**
-
-   In the `clan-app` directory, execute the following command:
-
-   ```bash
-   clan-app --debug --content-uri http://localhost:3000
-   ```
-
-This will start the application in debug mode and link it to the web server running at `http://localhost:3000`.
-
 
 ### Debugging Style and Layout
 
@@ -87,3 +73,5 @@ Here are some important documentation links related to the Clan App:
 > Error dialogs should be avoided where possible, since they are disruptive.
 >
 > For simple non-critical errors, toasts can be a good alternative.
+
+[process-compose]: https://f1bonacc1.github.io/process-compose/

pkgs/ui/clan-app/shell.nix

@@ -3,6 +3,7 @@
   mkShell,
   ruff,
   webview-lib,
+  process-compose,
   self',
 }:
 
@@ -11,7 +12,11 @@ mkShell {
 
   inputsFrom = [ self'.devShells.default ];
 
-  inherit (clan-app) nativeBuildInputs propagatedBuildInputs;
+  inherit (clan-app) propagatedBuildInputs;
+
+  nativeBuildInputs = clan-app.nativeBuildInputs ++ [
+    process-compose
+  ];
 
   buildInputs = [
     (clan-app.pythonRuntime.withPackages (
@@ -27,7 +32,7 @@ mkShell {
 
   shellHook = ''
     export GIT_ROOT=$(git rev-parse --show-toplevel)
-    export PKG_ROOT=$GIT_ROOT/pkgs/clan-app
+    export PKG_ROOT=$GIT_ROOT/pkgs/ui/clan-app
 
     export CLAN_CORE_PATH="$GIT_ROOT"