dev: improve zellij session tooling

Signed-off-by: Patrizio Bekerle <[email protected]>

justfile

@@ -7,32 +7,38 @@ default:
 
 # Variables
 
+zellijSession := "qon-web-companion"
+projectName := "qon-web-companion"
 transferDir := `if [ -d "$HOME/NextcloudPrivate/Transfer" ]; then echo "$HOME/NextcloudPrivate/Transfer"; else echo "$HOME/Nextcloud/Transfer"; fi`
 
-# Kill and run a terminal with the qon-web-companion session
-[group('dev')]
-term: term-kill term-run
+# Aliases
 
-# Open a terminal with the qon-web-companion session
+alias dev := run
+
+# Open a terminal with the project session
 [group('dev')]
 term-run:
-    zellij --layout term.kdl attach qon-web-companion -c
+    zellij --layout term.kdl attach {{ zellijSession }} -c
 
-# Kill the qon-web-companion session
+# Kill the project session
 [group('dev')]
 term-kill:
-    zellij --layout term.kdl attach qon-web-companion -c
+    -zellij delete-session {{ zellijSession }} -f
 
-# Apply the patch to the qon-web-companion repository
+# Kill and run a terminal with the project session
+[group('dev')]
+term: term-kill term-run
+
+# Apply the patch to the project repository
 [group('patch')]
 git-apply-patch:
-    git apply {{ transferDir }}/qon-web-companion.patch
+    git apply {{ transferDir }}/{{ projectName }}.patch
 
-# Create a patch from the staged changes in the qon-web-companion repository
+# Create a patch from the staged changes in the project repository
 [group('patch')]
 @git-create-patch:
     echo "transferDir: {{ transferDir }}"
-    git diff --no-ext-diff --staged --binary > {{ transferDir }}/qon-web-companion.patch
+    git diff --no-ext-diff --staged --binary > {{ transferDir }}/{{ projectName }}.patch
     ls -l1t {{ transferDir }}/ | head -2
 
 # Download the translations from Crowdin
@@ -45,6 +51,45 @@ translations-download:
 translations-upload:
     crowdin upload
 
+# Interactive npm run dev script selector
+[group('dev')]
+run:
+    #!/usr/bin/env bash
+    set -euo pipefail
+
+    # Define the watch scripts with descriptions
+    watch_scripts=(
+        "dev-chrome: Google Chrome"
+        "dev-firefox: Mozilla Firefox"
+    )
+
+    # Use fzf to select a script
+    selected_script=$(printf '%s\n' "${watch_scripts[@]}" | fzf \
+        --height 40% \
+        --layout=reverse \
+        --border \
+        --prompt='Select NPM run script > ' \
+        --preview='echo "Will run: npm run $(echo {} | cut -d: -f1)"' \
+        --preview-window=up:1 \
+        | cut -d: -f1)
+
+    # Check if a script was selected
+    if [[ -n "$selected_script" ]]; then
+        # Get the full line for the selected script
+        full_text=$(printf '%s\n' "${watch_scripts[@]}" | grep "^$selected_script:")
+
+        # Set Zellij pane name
+        if command -v zellij &> /dev/null; then
+            zellij action rename-pane "$full_text"
+        fi
+
+        echo "Running: npm run $selected_script"
+        npm run "$selected_script"
+    else
+        echo "No script selected. Exiting."
+        exit 1
+    fi
+
 # Format all justfiles
 [group('linter')]
 just-format:

shell.nix

@@ -4,8 +4,8 @@
       nodejs_20
       just # task runner
       crowdin-cli
+      fzf # fuzzy finder
       zellij # smart terminal workspace
       imagemagick # screenshot resizing
     ];
 }
-

term.kdl

@@ -1,19 +1,34 @@
+// https://zellij.dev/documentation/creating-a-layout
 layout {
-  pane split_direction="vertical" {
-    pane command="npm" {
-      args "run" "dev-chrome"
+  tab name="main" focus=true {
+    pane size=1 borderless=true {
+      plugin location="zellij:tab-bar"
     }
-    pane command="npm" start_suspended=true {
-      args "run" "dev-firefox"
+    pane size="60%" {
+      command "lazygit"
+      focus true
     }
-  }
-  pane split_direction="vertical" {
-    pane focus=true
-    pane command="npm" size="30%" {
-      args "install"
+    pane split_direction="vertical" size="40%" {
+      pane {
+        command "just"
+        args "run"
+      }
+      pane {
+        command "npm"
+        args "install"
+      }
+    }
+    pane size=1 borderless=true {
+      plugin location="zellij:status-bar"
     }
   }
-  pane size=1 borderless=true {
-    plugin location="zellij:status-bar"
+  tab name="term" {
+    pane size=1 borderless=true {
+      plugin location="zellij:tab-bar"
+    }
+    pane
+    pane size=1 borderless=true {
+      plugin location="zellij:status-bar"
+    }
   }
 }