Update theming, rebuild app from existing angular project

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

angular.json

@@ -18,7 +18,8 @@
             "outputPath": "dist/proto-creator",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/assets"]
           },
@@ -60,6 +61,28 @@
             }
           },
           "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
         }
       }
     }

package.json

@@ -11,16 +11,16 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
-    "@angular/cdk": "~18.0.0",
+    "@angular/cdk": "^18.0.2",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
-    "@angular/material": "18.0.0",
+    "@angular/material": "^18.0.2",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@tauri-apps/api": "^1",
+    "@tauri-apps/api": "^1.5.6",
     "protobufjs": "~7.3.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -30,7 +30,7 @@
     "@angular/build": "^18.0.1",
     "@angular/cli": "^18.0.1",
     "@angular/compiler-cli": "^18.0.0",
-    "@tauri-apps/cli": "^1",
+    "@tauri-apps/cli": "^1.5.14",
     "@types/jasmine": "~5.1.0",
     "@types/protobufjs": "^6.0.0",
     "jasmine-core": "~5.1.0",

src-tauri/.gitignore

@@ -1,7 +1,3 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
-
-# Generated by Tauri
-# will have schema files for capabilities auto-completion
-/gen/schemas

src-tauri/Cargo.lock

@@ -4,9 +4,9 @@ version = 3
 
 [[package]]
 name = "addr2line"
-version = "0.21.0"
+version = "0.22.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8a30b2e23b9e17a9f90641c7ab1549cd9b44f296d3ccbf309d2863cfe398a0cb"
+checksum = "6e4503c46a5c0c7844e948c9a4d6acd9f50cccb4de1c48eb9e291ea17470c678"
 dependencies = [
  "gimli",
 ]
@@ -62,6 +62,16 @@ version = "1.0.86"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b3d1d046238990b9cf5bcde22a3fb3584ee5cf65fb2765f454ed428c7a0063da"
 
+[[package]]
+name = "app"
+version = "0.1.0"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+]
+
 [[package]]
 name = "atk"
 version = "0.15.1"
@@ -94,9 +104,9 @@ checksum = "0c4b4d0bd25bd0b74681c0ad21497610ce1b7c91b1022cd21c80c6fbdd9476b0"
 
 [[package]]
 name = "backtrace"
-version = "0.3.71"
+version = "0.3.72"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "26b05800d2e817c8b3b4b54abd461726265fa9789ae34330622f2db9ee696f9d"
+checksum = "17c6a35df3749d2e8bb1b7b21a976d82b15548788d2735b9d82f329268f71a11"
 dependencies = [
  "addr2line",
  "cc",
@@ -618,7 +628,7 @@ dependencies = [
  "cc",
  "memchr",
  "rustc_version",
- "toml 0.8.13",
+ "toml 0.8.14",
  "vswhom",
  "winreg",
 ]
@@ -946,9 +956,9 @@ dependencies = [
 
 [[package]]
 name = "gimli"
-version = "0.28.1"
+version = "0.29.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4271d37baee1b8c7e4b708028c57d816cf9d2434acb33a549475f78c181f6253"
+checksum = "40ecd4077b5ae9fd2e9e169b102c6c330d0605168eb0e8bf79952b256dbefffd"
 
 [[package]]
 name = "gio"
@@ -1662,9 +1672,9 @@ dependencies = [
 
 [[package]]
 name = "object"
-version = "0.32.2"
+version = "0.35.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a6a622008b6e321afc04970976f62ee297fdbaa6f95318ca343e3eebb9648441"
+checksum = "b8ec7ab813848ba4522158d5517a6093db1ded27575b070f4177b8d12b41db5e"
 dependencies = [
  "memchr",
 ]
@@ -1675,16 +1685,6 @@ version = "1.19.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
 
-[[package]]
-name = "open"
-version = "3.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2078c0039e6a54a0c42c28faa984e115fb4c2d5bf2208f77d1961002df8576f8"
-dependencies = [
- "pathdiff",
- "windows-sys 0.42.0",
-]
-
 [[package]]
 name = "overload"
 version = "0.1.1"
@@ -1739,12 +1739,6 @@ dependencies = [
  "windows-targets 0.52.5",
 ]
 
-[[package]]
-name = "pathdiff"
-version = "0.2.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8835116a5c179084a830efb3adc117ab007512b535bc1a21c991d3b32a6b44dd"
-
 [[package]]
 name = "percent-encoding"
 version = "2.3.1"
@@ -1990,23 +1984,13 @@ checksum = "dc375e1527247fe1a97d8b7156678dfe7c1af2fc075c9a4db3690ecd2a148068"
 
 [[package]]
 name = "proc-macro2"
-version = "1.0.84"
+version = "1.0.85"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ec96c6a92621310b51366f1e28d05ef11489516e93be030060e5fc12024a49d6"
+checksum = "22244ce15aa966053a896d1accb3a6e68469b97c7f33f284b99f0d576879fc23"
 dependencies = [
  "unicode-ident",
 ]
 
-[[package]]
-name = "proto-creator"
-version = "0.0.0"
-dependencies = [
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
-]
-
 [[package]]
 name = "quick-xml"
 version = "0.31.0"
@@ -2579,7 +2563,7 @@ dependencies = [
  "cfg-expr 0.15.8",
  "heck 0.5.0",
  "pkg-config",
- "toml 0.8.13",
+ "toml 0.8.14",
  "version-compare 0.2.0",
 ]
 
@@ -2643,9 +2627,9 @@ dependencies = [
 
 [[package]]
 name = "tar"
-version = "0.4.40"
+version = "0.4.41"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b16afcea1f22891c49a00c751c7b63b2233284064f11a200fc624137c51e2ddb"
+checksum = "cb797dad5fb5b76fcf519e702f4a589483b5ef06567f160c392832c1f5e44909"
 dependencies = [
  "filetime",
  "libc",
@@ -2660,9 +2644,9 @@ checksum = "e1fc403891a21bcfb7c37834ba66a547a8f402146eba7265b5a6d88059c9ff2f"
 
 [[package]]
 name = "tauri"
-version = "1.6.7"
+version = "1.6.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67c7177b6be45bbb875aa239578f5adc982a1b3d5ea5b315ccd100aeb0043374"
+checksum = "77567d2b3b74de4588d544147142d02297f3eaa171a25a065252141d8597a516"
 dependencies = [
  "anyhow",
  "cocoa",
@@ -2681,11 +2665,9 @@ dependencies = [
  "ignore",
  "objc",
  "once_cell",
- "open",
  "percent-encoding",
  "rand 0.8.5",
  "raw-window-handle",
- "regex",
  "rfd",
  "semver",
  "serde",
@@ -2741,7 +2723,6 @@ dependencies = [
  "png",
  "proc-macro2",
  "quote",
- "regex",
  "semver",
  "serde",
  "serde_json",
@@ -2955,9 +2936,9 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.37.0"
+version = "1.38.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1adbebffeca75fcfd058afa480fb6c0b81e165a0323f9c9d39c9697e37c46787"
+checksum = "ba4f4a02a7a80d6f274636f0aa95c7e383b912d41fe721a31f29e29698585a4a"
 dependencies = [
  "backtrace",
  "bytes",
@@ -2988,14 +2969,14 @@ dependencies = [
 
 [[package]]
 name = "toml"
-version = "0.8.13"
+version = "0.8.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a4e43f8cc456c9704c851ae29c67e17ef65d2c30017c17a9765b89c382dc8bba"
+checksum = "6f49eb2ab21d2f26bd6db7bf383edc527a7ebaee412d17af4d40fdccd442f335"
 dependencies = [
  "serde",
  "serde_spanned",
  "toml_datetime",
- "toml_edit 0.22.13",
+ "toml_edit 0.22.14",
 ]
 
 [[package]]
@@ -3022,15 +3003,15 @@ dependencies = [
 
 [[package]]
 name = "toml_edit"
-version = "0.22.13"
+version = "0.22.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c127785850e8c20836d49732ae6abfa47616e60bf9d9f57c43c250361a9db96c"
+checksum = "f21c7aaf97f1bd9ca9d4f9e73b0a6c74bd5afef56f2bc931943a6e1c37e04e38"
 dependencies = [
  "indexmap 2.2.6",
  "serde",
  "serde_spanned",
  "toml_datetime",
- "winnow 0.6.8",
+ "winnow 0.6.13",
 ]
 
 [[package]]
@@ -3483,21 +3464,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9ee5e275231f07c6e240d14f34e1b635bf1faa1c76c57cfd59a5cdb9848e4278"
 
-[[package]]
-name = "windows-sys"
-version = "0.42.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a3e1820f08b8513f676f7ab6c1f99ff312fb97b553d30ff4dd86f9f15728aa7"
-dependencies = [
- "windows_aarch64_gnullvm 0.42.2",
- "windows_aarch64_msvc 0.42.2",
- "windows_i686_gnu 0.42.2",
- "windows_i686_msvc 0.42.2",
- "windows_x86_64_gnu 0.42.2",
- "windows_x86_64_gnullvm 0.42.2",
- "windows_x86_64_msvc 0.42.2",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.48.0"
@@ -3562,12 +3528,6 @@ dependencies = [
  "windows-targets 0.52.5",
 ]
 
-[[package]]
-name = "windows_aarch64_gnullvm"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "597a5118570b68bc08d8d59125332c54f1ba9d9adeedeef5b99b02ba2b0698f8"
-
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.48.5"
@@ -3592,12 +3552,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ec7711666096bd4096ffa835238905bb33fb87267910e154b18b44eaabb340f2"
 
-[[package]]
-name = "windows_aarch64_msvc"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e08e8864a60f06ef0d0ff4ba04124db8b0fb3be5776a5cd47641e942e58c4d43"
-
 [[package]]
 name = "windows_aarch64_msvc"
 version = "0.48.5"
@@ -3622,12 +3576,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "763fc57100a5f7042e3057e7e8d9bdd7860d330070251a73d003563a3bb49e1b"
 
-[[package]]
-name = "windows_i686_gnu"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c61d927d8da41da96a81f029489353e68739737d3beca43145c8afec9a31a84f"
-
 [[package]]
 name = "windows_i686_gnu"
 version = "0.48.5"
@@ -3658,12 +3606,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7bc7cbfe58828921e10a9f446fcaaf649204dcfe6c1ddd712c5eebae6bda1106"
 
-[[package]]
-name = "windows_i686_msvc"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "44d840b6ec649f480a41c8d80f9c65108b92d89345dd94027bfe06ac444d1060"
-
 [[package]]
 name = "windows_i686_msvc"
 version = "0.48.5"
@@ -3688,12 +3630,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "6868c165637d653ae1e8dc4d82c25d4f97dd6605eaa8d784b5c6e0ab2a252b65"
 
-[[package]]
-name = "windows_x86_64_gnu"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8de912b8b8feb55c064867cf047dda097f92d51efad5b491dfb98f6bbb70cb36"
-
 [[package]]
 name = "windows_x86_64_gnu"
 version = "0.48.5"
@@ -3706,12 +3642,6 @@ version = "0.52.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4e4246f76bdeff09eb48875a0fd3e2af6aada79d409d33011886d3e1581517d9"
 
-[[package]]
-name = "windows_x86_64_gnullvm"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "26d41b46a36d453748aedef1486d5c7a85db22e56aff34643984ea85514e94a3"
-
 [[package]]
 name = "windows_x86_64_gnullvm"
 version = "0.48.5"
@@ -3736,12 +3666,6 @@ version = "0.39.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "5e4d40883ae9cae962787ca76ba76390ffa29214667a111db9e0a1ad8377e809"
 
-[[package]]
-name = "windows_x86_64_msvc"
-version = "0.42.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9aec5da331524158c6d1a4ac0ab1541149c0b9505fde06423b02f5ef0106b9f0"
-
 [[package]]
 name = "windows_x86_64_msvc"
 version = "0.48.5"
@@ -3765,9 +3689,9 @@ dependencies = [
 
 [[package]]
 name = "winnow"
-version = "0.6.8"
+version = "0.6.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c3c52e9c97a68071b23e836c9380edae937f17b9c4667bd021973efc689f618d"
+checksum = "59b5e5f6c299a3c7890b876a2a587f3115162487e704907d9b6cd29473052ba1"
 dependencies = [
  "memchr",
 ]

src-tauri/Cargo.toml

@@ -1,20 +1,26 @@
 [package]
-name = "proto-creator"
+name = "app"
-version = "0.0.0"
+version = "0.1.0"
 description = "A Tauri App"
 authors = ["you"]
+license = ""
+repository = ""
+default-run = "app"
 edition = "2021"
+rust-version = "1.60"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [build-dependencies]
-tauri-build = { version = "1", features = [] }
+tauri-build = { version = "1.5.2", features = [] }
 
 [dependencies]
-tauri = { version = "1", features = [ "fs-remove-dir", "dialog-open", "fs-read-dir", "fs-read-file", "dialog-confirm", "fs-create-dir", "dialog-message", "fs-remove-file", "dialog-ask", "fs-write-file", "shell-open"] }
+serde_json = "1.0"
-serde = { version = "1", features = ["derive"] }
+serde = { version = "1.0", features = ["derive"] }
-serde_json = "1"
+tauri = { version = "1.6.5", features = [ "dialog-all", "fs-all"] }
 
 [features]
-# This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
+# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
+# If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes.
+# DO NOT REMOVE!!
 custom-protocol = [ "tauri/custom-protocol" ]

src-tauri/tauri.conf.json

@@ -1,9 +1,10 @@
 {
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
   "build": {
     "beforeDevCommand": "bun run start",
     "beforeBuildCommand": "bun run build",
-    "devPath": "http://localhost:1420",
+    "devPath": "http://localhost:4200",
-    "distDir": "../dist/proto-creator/browser"
+    "distDir": "../dist"
   },
   "package": {
     "productName": "Piv's Buf",
@@ -12,53 +13,60 @@
   "tauri": {
     "allowlist": {
       "all": false,
-      "dialog": {
-        "all": false,
-        "ask": true,
-        "confirm": true,
-        "message": true,
-        "open": true,
-        "save": false
-      },
       "fs": {
-        "all": false,
+        "all": true
-        "copyFile": false,
-        "createDir": true,
-        "exists": false,
-        "readDir": true,
-        "readFile": true,
-        "removeDir": true,
-        "removeFile": true,
-        "renameFile": false,
-        "scope": [],
-        "writeFile": true
       },
-      "shell": {
+      "dialog": {
-        "all": false,
+        "all": true
-        "open": true
       }
     },
-    "windows": [
-      {
-        "title": "Piv's Buf",
-        "width": 800,
-        "height": 600
-      }
-    ],
-    "security": {
-      "csp": null
-    },
     "bundle": {
       "active": true,
-      "targets": "all",
+      "category": "DeveloperTool",
-      "identifier": "dev.michaelpivato",
+      "copyright": "",
+      "deb": {
+        "depends": []
+      },
+      "externalBin": [],
       "icon": [
         "icons/32x32.png",
         "icons/128x128.png",
         "icons/128x128@2x.png",
         "icons/icon.icns",
         "icons/icon.ico"
+      ],
+      "identifier": "dev.michaelpivato",
+      "longDescription": "",
+      "macOS": {
+        "entitlements": null,
+        "exceptionDomain": "",
+        "frameworks": [],
+        "providerShortName": null,
+        "signingIdentity": null
+      },
+      "resources": [],
+      "shortDescription": "",
+      "targets": "all",
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
+    },
+    "security": {
+      "csp": null
+    },
+    "updater": {
+      "active": false
+    },
+    "windows": [
+      {
+        "fullscreen": false,
+        "height": 600,
+        "resizable": true,
+        "title": "Piv's Buf",
+        "width": 800
+      }
     ]
   }
 }
-}

src/app/app.component.html

@@ -1,6 +1,6 @@
 <mat-toolbar><span>BufPiv</span></mat-toolbar>
-<mat-sidenav-container>
+<mat-sidenav-container autosize>
-  <mat-sidenav>
+  <mat-sidenav mode="side" opened>
     <app-file-tree [files]="files()"></app-file-tree>
   </mat-sidenav>
   <mat-sidenav-content>

src/app/app.component.scss

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+mat-sidenav-container {
+  width: 100%;
+  height: 100%;
+}

src/app/app.component.ts

@@ -1,22 +1,23 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule } from '@angular/common';
-import { Component, signal } from "@angular/core";
+import { Component, signal } from '@angular/core';
-import { MatButtonModule } from "@angular/material/button";
+import { MatButtonModule } from '@angular/material/button';
-import { MatSidenavModule } from "@angular/material/sidenav";
+import { MatSidenavModule } from '@angular/material/sidenav';
-import { RouterOutlet } from "@angular/router";
+import { RouterOutlet } from '@angular/router';
-import { message, open } from "@tauri-apps/api/dialog";
+import { message, open } from '@tauri-apps/api/dialog';
-import { FileEntry, readDir } from "@tauri-apps/api/fs";
+import { FileEntry, readDir } from '@tauri-apps/api/fs';
-import { MatToolbarModule } from "@angular/material/toolbar";
+import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTreeModule } from "@angular/material/tree";
+import { MatTreeModule } from '@angular/material/tree';
 import {
   FileOrFolder,
   FileTreeComponent,
-} from "./file-tree/file-tree.component";
+} from './file-tree/file-tree.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
-  selector: "app-root",
+  selector: 'app-root',
   standalone: true,
-  templateUrl: "./app.component.html",
+  templateUrl: './app.component.html',
-  styleUrl: "./app.component.css",
+  styleUrl: './app.component.scss',
   imports: [
     CommonModule,
     RouterOutlet,
@@ -25,6 +26,7 @@ import {
     MatToolbarModule,
     MatTreeModule,
     FileTreeComponent,
+    MatIconModule,
   ],
 })
 export class AppComponent {
@@ -37,7 +39,7 @@ export class AppComponent {
       multiple: false,
     });
     if (Array.isArray(selectedDirectory)) {
-      message("Only a single folder can be selected at a time");
+      message('Only a single folder can be selected at a time');
     } else {
       this.selectedDirectory = selectedDirectory;
     }
@@ -52,7 +54,7 @@ export class AppComponent {
   private mapEntry(entry: FileEntry): FileOrFolder {
     return {
       isDirectory: entry.children != null,
-      name: entry.name || "",
+      name: entry.name || '',
       children: entry.children?.map((entry) => this.mapEntry(entry)),
     };
   }

src/app/app.config.ts

@@ -1,8 +1,16 @@
-import { ApplicationConfig } from "@angular/core";
+import {
-import { provideRouter } from "@angular/router";
+  ApplicationConfig,
-import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
+  provideExperimentalZonelessChangeDetection,
-import { routes } from "./app.routes";
+} from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideAnimationsAsync()],
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(routes),
+    provideAnimationsAsync(),
+  ],
 };

src/app/editor/editor.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/editor/editor.component.ts

@@ -1,16 +1,15 @@
-import { CommonModule } from "@angular/common";
+import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { Component, input } from '@angular/core';
-import { FormsModule } from "@angular/forms";
+import { FormsModule } from '@angular/forms';
-import { readTextFile } from "@tauri-apps/api/fs";
+import { readTextFile } from '@tauri-apps/api/fs';
-import { load, parse } from "protobufjs";
+import { parse } from 'protobufjs';
 
 @Component({
-  selector: "app-editor",
+  selector: 'app-editor',
   standalone: true,
   imports: [CommonModule, FormsModule],
-  templateUrl: "./editor.component.html",
+  templateUrl: './editor.component.html',
-  styleUrl: "./editor.component.css",
+  styleUrl: './editor.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EditorComponent {
   fileContents = input<string>();

src/app/file-tree/file-tree.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/app/file-tree/file-tree.component.ts

@@ -1,20 +1,19 @@
-import { DataSource } from "@angular/cdk/collections";
+import { FlatTreeControl } from '@angular/cdk/tree';
-import { FlatTreeControl } from "@angular/cdk/tree";
+import { CommonModule } from '@angular/common';
-import { CommonModule } from "@angular/common";
 import {
   ChangeDetectionStrategy,
   Component,
-  Signal,
   computed,
   input,
   output,
-} from "@angular/core";
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import {
   MatTreeFlatDataSource,
   MatTreeFlattener,
   MatTreeModule,
-} from "@angular/material/tree";
+} from '@angular/material/tree';
-import { MatIconModule } from "@angular/material/icon";
 
 export interface FileOrFolder {
   isDirectory: boolean;
@@ -29,9 +28,9 @@ interface FileNode {
 }
 
 @Component({
-  selector: "app-file-tree",
+  selector: 'app-file-tree',
   standalone: true,
-  imports: [CommonModule, MatTreeModule, MatIconModule],
+  imports: [CommonModule, MatTreeModule, MatIconModule, MatButtonModule],
   template: `<mat-tree [dataSource]="dataSource()" [treeControl]="treeControl">
     <mat-tree-node
       *matTreeNodeDef="let node"
@@ -55,8 +54,7 @@ interface FileNode {
       {{ node.name }}
     </mat-tree-node>
   </mat-tree>`,
-  styleUrl: "./file-tree.component.css",
+  styleUrl: './file-tree.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FileTreeComponent {
   files = input<FileOrFolder[]>([]);

src/index.html

@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8" />
+  <meta charset="utf-8">
-    <title>Tauri + Angular</title>
+  <title>Test</title>
-    <base href="/" />
+  <base href="/">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-      rel="stylesheet"
-    />
 </head>
-  <body>
+<body class="mat-typography">
   <app-root></app-root>
 </body>
 </html>

src/m3-theme.scss

@@ -0,0 +1,141 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #DF6B85, secondary: #AE868D, tertiary: #B48858, neutral: #988E8F
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #3f0015,
+    20: #630828,
+    25: #721633,
+    30: #82233e,
+    35: #912f49,
+    40: #a13a54,
+    50: #c0536c,
+    60: #e06c86,
+    70: #ff86a0,
+    80: #ffb2bf,
+    90: #ffd9de,
+    95: #ffecee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  secondary: (
+    0: #000000,
+    10: #3f0017,
+    20: #5f112b,
+    25: #6d1d35,
+    30: #7c2940,
+    35: #8b344c,
+    40: #9a4058,
+    50: #b95870,
+    60: #d87189,
+    70: #f78aa3,
+    80: #ffb1c0,
+    90: #ffd9df,
+    95: #ffecee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  tertiary: (
+    0: #000000,
+    10: #2b1700,
+    20: #482900,
+    25: #573300,
+    30: #673d00,
+    35: #774700,
+    40: #885200,
+    50: #aa6800,
+    60: #c98121,
+    70: #e89b3a,
+    80: #ffb868,
+    90: #ffddbb,
+    95: #ffeedf,
+    98: #fff8f4,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral: (
+    0: #000000,
+    10: #3f0018,
+    20: #5f112c,
+    25: #6d1d37,
+    30: #7c2942,
+    35: #8b344e,
+    40: #9a4059,
+    50: #b85872,
+    60: #d7718b,
+    70: #f78aa5,
+    80: #ffb1c2,
+    90: #ffd9e0,
+    95: #ffecee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #24191a,
+    20: #3a2d2f,
+    25: #46383a,
+    30: #524345,
+    35: #5e4f51,
+    40: #6a5a5c,
+    50: #847375,
+    60: #9f8c8e,
+    70: #baa6a9,
+    80: #d6c2c4,
+    90: #f3dddf,
+    95: #ffecee,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff,
+  ),
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes,  neutral-variant),
+  error: map.get($_palettes, error),
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));
+$dark-theme: mat.define-theme((
+  color: (
+    theme-type: dark,
+    primary: $_primary,
+    tertiary: $_tertiary,
+  ),
+));

src/main.ts

@@ -1,7 +1,7 @@
-import { bootstrapApplication } from "@angular/platform-browser";
+import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from "./app/app.config";
+import { appConfig } from './app/app.config';
-import { AppComponent } from "./app/app.component";
+import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
-  console.error(err),
+  console.error(err)
 );

src/styles.scss

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+@use './m3-theme.scss';
+
+@include mat.core();
+
+html {
+    @include mat.all-component-themes(m3-theme.$dark-theme);
+}
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  --mat-tree-node-min-height: 24px;
+  --mat-tree-node-text-size: 14px;
+}

tsconfig.app.json

@@ -5,6 +5,10 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": ["src/main.ts"],
+  "files": [
-  "include": ["src/**/*.d.ts"]
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
 }

tsconfig.json

@@ -19,7 +19,10 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"]
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,

tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}