From a4eb8fb0184eda322ef2fb42470a2fb992fd6752 Mon Sep 17 00:00:00 2001
From: Jeroen Nijhuis <jeroen.nijhuis@justeattakeaway.com>
Date: Sat, 23 Mar 2024 18:21:05 +0100
Subject: [PATCH] feat: added setting for manually specifying namespaces for
 clusters resolves #8

---
 package-lock.json                             | 164 ++++++++++++------
 package.json                                  |   2 +-
 src/App.vue                                   |   1 +
 src/assets/icons/plus.svg                     |   1 +
 src/components/ContextSwitcher.vue            |  50 +++++-
 src/components/RouterViewport.vue             |   3 +-
 src/components/settings/Navigation.vue        |   1 +
 src/components/ui/tags-input/TagsInput.vue    |  22 +++
 .../ui/tags-input/TagsInputInput.vue          |  19 ++
 .../ui/tags-input/TagsInputItem.vue           |  22 +++
 .../ui/tags-input/TagsInputItemDelete.vue     |  24 +++
 .../ui/tags-input/TagsInputItemText.vue       |  28 +++
 src/components/ui/tags-input/index.ts         |   5 +
 src/providers/SettingsContextProvider.ts      |  10 +-
 src/router.ts                                 |  10 +-
 src/views/Settings.vue                        |   2 +-
 src/views/settings/Clusters.vue               | 125 +++++++++++++
 src/views/settings/Contexts.vue               |   1 -
 src/views/settings/General.vue                |  30 +++-
 19 files changed, 442 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/icons/plus.svg
 create mode 100644 src/components/ui/tags-input/TagsInput.vue
 create mode 100644 src/components/ui/tags-input/TagsInputInput.vue
 create mode 100644 src/components/ui/tags-input/TagsInputItem.vue
 create mode 100644 src/components/ui/tags-input/TagsInputItemDelete.vue
 create mode 100644 src/components/ui/tags-input/TagsInputItemText.vue
 create mode 100644 src/components/ui/tags-input/index.ts
 create mode 100644 src/views/settings/Clusters.vue
 delete mode 100644 src/views/settings/Contexts.vue

diff --git a/package-lock.json b/package-lock.json
index ae3651d..b2f4c1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
         "monaco-editor": "^0.45.0",
         "monaco-languageclient": "^7.3.0",
         "pluralize": "^8.0.0",
-        "radix-vue": "^1.2.7",
+        "radix-vue": "^1.5.3",
         "tailwind-merge": "^2.1.0",
         "tailwindcss-animate": "^1.0.7",
         "vee-validate": "^4.12.5",
@@ -1349,40 +1349,41 @@
       }
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
-      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
       "dependencies": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
       "dependencies": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "node_modules/@floating-ui/vue": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
-      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
       "dependencies": {
-        "@floating-ui/dom": "^1.4.5",
+        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/utils": "^0.2.1",
         "vue-demi": ">=0.13.0"
       }
     },
     "node_modules/@floating-ui/vue/node_modules/vue-demi": {
-      "version": "0.14.6",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-      "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
       "hasInstallScript": true,
       "bin": {
         "vue-demi-fix": "bin/vue-demi-fix.js",
@@ -1437,6 +1438,14 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -2290,6 +2299,14 @@
       "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
       "dev": true
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.7.tgz",
+      "integrity": "sha512-BVvNZhx362+l2tSwSuyEUV4h7+jk9raNdoTSdLfwTshXJSaGmYKluGRJznziCI3KX02Z19DdsQrdfrpXAU3Hfg==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -12423,13 +12440,32 @@
       }
     },
     "node_modules/radix-vue": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.7.tgz",
-      "integrity": "sha512-U3cq4kOO6BT0YXq5jSIhmc72b70XRVGGty3XCDluc//GYr5iChvWUh7OK8/9uvY+Z9q3Z/VKb4K1DsvIJmZ0dA==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.5.3.tgz",
+      "integrity": "sha512-K1JF8P238jGKRwwlWe0LNCd80bamfWFnDhLNBAgoWvSRORRIsoo7DODnC4TLE62JE55tf/6ABSs5JIvp2BvYPA==",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.3",
-        "@floating-ui/vue": "^1.0.2",
-        "fast-deep-equal": "^3.1.3"
+        "@floating-ui/dom": "^1.5.4",
+        "@floating-ui/vue": "^1.0.4",
+        "@internationalized/date": "^3.5.2",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.6"
+      }
+    },
+    "node_modules/radix-vue/node_modules/nanoid": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+      "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
       }
     },
     "node_modules/railroad-diagrams": {
@@ -16117,40 +16153,41 @@
       "dev": true
     },
     "@floating-ui/core": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz",
-      "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
       "requires": {
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "@floating-ui/dom": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
-      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
       "requires": {
-        "@floating-ui/core": "^1.4.2",
-        "@floating-ui/utils": "^0.1.3"
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
       }
     },
     "@floating-ui/utils": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
-      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
     "@floating-ui/vue": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.2.tgz",
-      "integrity": "sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
       "requires": {
-        "@floating-ui/dom": "^1.4.5",
+        "@floating-ui/dom": "^1.6.1",
+        "@floating-ui/utils": "^0.2.1",
         "vue-demi": ">=0.13.0"
       },
       "dependencies": {
         "vue-demi": {
-          "version": "0.14.6",
-          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
-          "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
+          "version": "0.14.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
           "requires": {}
         }
       }
@@ -16178,6 +16215,14 @@
       "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
       "dev": true
     },
+    "@internationalized/date": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.2.tgz",
+      "integrity": "sha512-vo1yOMUt2hzp63IutEaTUxROdvQg1qlMRsbCvbay2AK2Gai7wIgCyK5weEX3nHkiLgo4qCXHijFNC/ILhlRpOQ==",
+      "requires": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "@jest/schemas": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
@@ -16803,6 +16848,14 @@
       "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==",
       "dev": true
     },
+    "@swc/helpers": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.7.tgz",
+      "integrity": "sha512-BVvNZhx362+l2tSwSuyEUV4h7+jk9raNdoTSdLfwTshXJSaGmYKluGRJznziCI3KX02Z19DdsQrdfrpXAU3Hfg==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -23936,13 +23989,22 @@
       "dev": true
     },
     "radix-vue": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.7.tgz",
-      "integrity": "sha512-U3cq4kOO6BT0YXq5jSIhmc72b70XRVGGty3XCDluc//GYr5iChvWUh7OK8/9uvY+Z9q3Z/VKb4K1DsvIJmZ0dA==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.5.3.tgz",
+      "integrity": "sha512-K1JF8P238jGKRwwlWe0LNCd80bamfWFnDhLNBAgoWvSRORRIsoo7DODnC4TLE62JE55tf/6ABSs5JIvp2BvYPA==",
       "requires": {
-        "@floating-ui/dom": "^1.5.3",
-        "@floating-ui/vue": "^1.0.2",
-        "fast-deep-equal": "^3.1.3"
+        "@floating-ui/dom": "^1.5.4",
+        "@floating-ui/vue": "^1.0.4",
+        "@internationalized/date": "^3.5.2",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.6"
+      },
+      "dependencies": {
+        "nanoid": {
+          "version": "5.0.6",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.6.tgz",
+          "integrity": "sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA=="
+        }
       }
     },
     "railroad-diagrams": {
diff --git a/package.json b/package.json
index 58ee8ef..4e8cf13 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "monaco-editor": "^0.45.0",
     "monaco-languageclient": "^7.3.0",
     "pluralize": "^8.0.0",
-    "radix-vue": "^1.2.7",
+    "radix-vue": "^1.5.3",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "vee-validate": "^4.12.5",
diff --git a/src/App.vue b/src/App.vue
index 7b4109a..343a483 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,6 +10,7 @@ import CommandPaletteProvider from "./providers/CommandPaletteProvider";
 import TabProvider from "./providers/TabProvider";
 import DialogProvider from "./providers/DialogProvider";
 import DialogHandler from "./components/DialogHandler.vue";
+import Settings from "./views/Settings.vue";
 </script>
 
 <template>
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
new file mode 100644
index 0000000..d5520b5
--- /dev/null
+++ b/src/assets/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V7H13V11H17V13H13V17H11V13H7V11H11ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/ContextSwitcher.vue b/src/components/ContextSwitcher.vue
index 40759d4..3f2558c 100644
--- a/src/components/ContextSwitcher.vue
+++ b/src/components/ContextSwitcher.vue
@@ -11,12 +11,14 @@ import {
 } from "@/providers/KubeContextProvider";
 import { KubeContextStateKey } from "@/providers/KubeContextProvider";
 import { Kubernetes } from "@/services/Kubernetes";
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
 
 const showSingleCommand = injectStrict(ShowSingleCommandKey);
 const registerCommand = injectStrict(RegisterCommandStateKey);
 const { context, namespace } = injectStrict(KubeContextStateKey);
 const setContext = injectStrict(KubeContextSetContextKey);
 const setNamespace = injectStrict(KubeContextSetNamespaceKey);
+const { settings } = injectStrict(SettingsContextStateKey);
 
 onMounted(() => {
   registerCommand({
@@ -32,7 +34,23 @@ onMounted(() => {
         name: context,
         description: "Switch to " + context,
         commands: async (): Promise<Command[]> => {
-          const namespaces = await Kubernetes.getNamespaces(context);
+          const clusterSettings = settings.value.contextSettings.find(
+            (c) => c.context === context
+          );
+
+          let namespaces = [];
+
+          if (
+            clusterSettings &&
+            clusterSettings.namespaces &&
+            clusterSettings.namespaces.length > 0
+          ) {
+            namespaces = clusterSettings.namespaces;
+          } else {
+            namespaces = await (
+              await Kubernetes.getNamespaces(context)
+            ).map((ns) => ns.metadata?.name || "");
+          }
 
           return [
             {
@@ -46,12 +64,12 @@ onMounted(() => {
             } as Command,
           ].concat(
             namespaces.map((namespace) => ({
-              id: namespace.metadata?.name || "",
-              name: namespace.metadata?.name || "",
+              id: namespace || "",
+              name: namespace || "",
               description: "Switch to " + namespace,
               execute: () => {
                 setContext(context);
-                setNamespace(namespace.metadata?.name || "");
+                setNamespace(namespace || "");
               },
             }))
           );
@@ -66,7 +84,23 @@ onMounted(() => {
     id: "switch-namespace",
     keywords: ["ns", "namespace"],
     commands: async (): Promise<Command[]> => {
-      const namespaces = await Kubernetes.getNamespaces(context.value);
+      const clusterSettings = settings.value.contextSettings.find(
+        (c) => c.context === context.value
+      );
+
+      let namespaces = [];
+
+      if (
+        clusterSettings &&
+        clusterSettings.namespaces &&
+        clusterSettings.namespaces.length > 0
+      ) {
+        namespaces = clusterSettings.namespaces;
+      } else {
+        namespaces = await (
+          await Kubernetes.getNamespaces(context.value)
+        ).map((ns) => ns.metadata?.name || "");
+      }
 
       return [
         {
@@ -79,11 +113,11 @@ onMounted(() => {
         } as Command,
       ].concat(
         namespaces.map((namespace) => ({
-          id: namespace.metadata?.name || "",
-          name: namespace.metadata?.name || "",
+          id: namespace || "",
+          name: namespace || "",
           description: "Switch to " + namespace,
           execute: () => {
-            setNamespace(namespace.metadata?.name || "");
+            setNamespace(namespace || "");
           },
         }))
       );
diff --git a/src/components/RouterViewport.vue b/src/components/RouterViewport.vue
index 31e30ab..92fd64f 100644
--- a/src/components/RouterViewport.vue
+++ b/src/components/RouterViewport.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { KubeContextStateKey } from "@/providers/KubeContextProvider";
-import { injectStrict } from '@/lib/utils';
+import { injectStrict } from "@/lib/utils";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import TabOrchestrator from "@/components/TabOrchestrator.vue";
 import { useRoute } from "vue-router";
@@ -8,7 +8,6 @@ import NoContext from "@/views/NoContext.vue";
 
 const { context } = injectStrict(KubeContextStateKey);
 const route = useRoute();
-
 </script>
 <template>
   <div class="flex flex-col max-h-screen relative router-viewport">
diff --git a/src/components/settings/Navigation.vue b/src/components/settings/Navigation.vue
index ecd4566..2b495db 100644
--- a/src/components/settings/Navigation.vue
+++ b/src/components/settings/Navigation.vue
@@ -4,5 +4,6 @@ import NavigationItem from "@/components/settings/NavigationItem.vue";
 <template>
   <nav class="flex flex-col space-y-1">
     <NavigationItem :to="{ name: 'SettingsGeneral' }" title="General" />
+    <NavigationItem :to="{ name: 'SettingsClusters' }" title="Clusters" />
   </nav>
 </template>
diff --git a/src/components/ui/tags-input/TagsInput.vue b/src/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 0000000..5989dc2
--- /dev/null
+++ b/src/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/src/components/ui/tags-input/TagsInputInput.vue b/src/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 0000000..ff8f1dc
--- /dev/null
+++ b/src/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/src/components/ui/tags-input/TagsInputItem.vue b/src/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 0000000..c3cc8d4
--- /dev/null
+++ b/src/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/src/components/ui/tags-input/TagsInputItemDelete.vue b/src/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 0000000..c72ee63
--- /dev/null
+++ b/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Cross2Icon class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/src/components/ui/tags-input/TagsInputItemText.vue b/src/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 0000000..4024849
--- /dev/null
+++ b/src/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import {
+  TagsInputItemText,
+  type TagsInputItemTextProps,
+  useForwardProps,
+} from "radix-vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  TagsInputItemTextProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TagsInputItemText
+    v-bind="forwardedProps"
+    :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)"
+  />
+</template>
diff --git a/src/components/ui/tags-input/index.ts b/src/components/ui/tags-input/index.ts
new file mode 100644
index 0000000..31305f3
--- /dev/null
+++ b/src/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/src/providers/SettingsContextProvider.ts b/src/providers/SettingsContextProvider.ts
index fc59104..bf28662 100644
--- a/src/providers/SettingsContextProvider.ts
+++ b/src/providers/SettingsContextProvider.ts
@@ -11,6 +11,11 @@ export const SettingsContextStateKey: InjectionKey<
   ToRefs<SettingsContextState>
 > = Symbol("SettingsContextState");
 
+export interface ContextSettings {
+  context: string;
+  namespaces: string[];
+}
+
 export interface SettingsContextState {
   settings: {
     lastContext: string | null;
@@ -21,6 +26,7 @@ export interface SettingsContextState {
     shell: {
       executable: string;
     };
+    contextSettings: ContextSettings[];
     collapsedNavigationGroups: string[];
   };
 }
@@ -36,9 +42,10 @@ export default {
         tabProvider: {
           height: 50,
         },
-        shell: { 
+        shell: {
           executable: "/bin/sh",
         },
+        contextSettings: [],
         collapsedNavigationGroups: [],
       },
     });
@@ -66,6 +73,7 @@ export default {
     }
 
     watch(state, (newState) => {
+      console.log("Settings changed...", newState);
       save();
     });
   },
diff --git a/src/router.ts b/src/router.ts
index a416655..f70c78f 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -17,9 +17,9 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import("./views/settings/General.vue"),
       },
       {
-        path: "contexts",
-        name: "SettingsContexts",
-        component: () => import("./views/settings/Contexts.vue"),
+        path: "clusters",
+        name: "SettingsClusters",
+        component: () => import("./views/settings/Clusters.vue"),
       },
     ],
   },
@@ -28,8 +28,8 @@ const routes: Array<RouteRecordRaw> = [
     name: "Pods",
     component: () => import("./views/Pods.vue"),
     meta: {
-      requiresContext: true
-    }
+      requiresContext: true,
+    },
   },
   {
     path: "/deployments",
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 8bb24bd..0d424f6 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -13,7 +13,7 @@ import Navigation from "@/components/settings/Navigation.vue";
       <aside class="w-[150px]">
         <Navigation />
       </aside>
-      <div class="flex-1 lg:max-w-2xl">
+      <div class="flex-1 max-w-full">
         <div class="space-y-6"><router-view /></div>
       </div>
     </div>
diff --git a/src/views/settings/Clusters.vue b/src/views/settings/Clusters.vue
new file mode 100644
index 0000000..badc485
--- /dev/null
+++ b/src/views/settings/Clusters.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import Separator from "@/components/ui/separator/Separator.vue";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+} from "@/components/ui/form";
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText,
+} from "@/components/ui/tags-input";
+import { Kubernetes } from "@/services/Kubernetes";
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { injectStrict } from "@/lib/utils";
+
+const contexts = ref<string[]>([]);
+const currentContext = ref<string | undefined>(undefined);
+
+const { settings } = injectStrict(SettingsContextStateKey);
+
+const getNamespacesForCluster = (): string[] => {
+  const clusterSettings = settings.value.contextSettings.find(
+    (c) => c.context === currentContext.value
+  );
+
+  return clusterSettings?.namespaces ?? [];
+};
+
+const setNamespacesForCluster = (namespaces: string[]) => {
+  console.log(namespaces);
+  const clusterSettings = settings.value.contextSettings.find(
+    (c) => c.context === currentContext.value
+  );
+
+  if (clusterSettings) {
+    clusterSettings.namespaces = namespaces;
+  } else {
+    settings.value.contextSettings.push({
+      context: currentContext.value as string,
+      namespaces,
+    });
+  }
+};
+
+onMounted(async () => {
+  contexts.value = await Kubernetes.getContexts();
+});
+</script>
+<template>
+  <div class="flex items-center justify-between">
+    <div>
+      <h3 class="text-lg font-medium">Cluster specific settings</h3>
+      <p class="text-sm text-muted-foreground">
+        Settings that can be tuned per cluster
+      </p>
+    </div>
+    <div>
+      <Select v-model="currentContext">
+        <SelectTrigger>
+          <SelectValue placeholder="Select a cluster" />
+        </SelectTrigger>
+        <SelectContent align="end">
+          <SelectGroup>
+            <SelectItem
+              v-for="context in contexts"
+              :key="context"
+              :value="context"
+            >
+              {{ context }}
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  </div>
+  <Separator />
+  <div v-if="!currentContext">
+    <p class="text-sm text-muted-foreground">
+      Select a cluster to view its specific settings
+    </p>
+  </div>
+  <div v-else>
+    <div>
+      <FormField name="namespaces">
+        <FormItem>
+          <FormLabel>Namespaces</FormLabel>
+          <FormControl>
+            <TagsInput
+              :model-value="getNamespacesForCluster()"
+              @update:model-value="setNamespacesForCluster"
+            >
+              <TagsInputItem
+                v-for="namespace in getNamespacesForCluster()"
+                :key="namespace"
+                :value="namespace"
+              >
+                <TagsInputItemText />
+                <TagsInputItemDelete />
+              </TagsInputItem>
+
+              <TagsInputInput placeholder="Namespace..." />
+            </TagsInput>
+          </FormControl>
+          <FormDescription>
+            Allows you to specify the namespaces to use for this cluster
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </div>
+  </div>
+</template>
diff --git a/src/views/settings/Contexts.vue b/src/views/settings/Contexts.vue
deleted file mode 100644
index aeb0e78..0000000
--- a/src/views/settings/Contexts.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template>Contexts</template>
diff --git a/src/views/settings/General.vue b/src/views/settings/General.vue
index 2fec153..85517f4 100644
--- a/src/views/settings/General.vue
+++ b/src/views/settings/General.vue
@@ -1,20 +1,34 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import { Input } from '@/components/ui/input'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 
-import { SettingsContextStateKey } from '@/providers/SettingsContextProvider';
-import { injectStrict } from '@/lib/utils';
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { injectStrict } from "@/lib/utils";
 
 const { settings } = injectStrict(SettingsContextStateKey);
-
 </script>
 <template>
-  <div>
-    <FormField v-slot="{ componentField }" v-model="settings.shell.executable" name="username">
+  <div class="max-w-2xl">
+    <FormField
+      v-slot="{ componentField }"
+      v-model="settings.shell.executable"
+      name="username"
+    >
       <FormItem>
         <FormLabel>Shell executable</FormLabel>
         <FormControl>
-          <Input type="text" placeholder="Please specify a shell e.g. /bin/sh" v-bind="componentField" />
+          <Input
+            type="text"
+            placeholder="Please specify a shell e.g. /bin/sh"
+            v-bind="componentField"
+          />
         </FormControl>
         <FormDescription>
           The default shell to use when opening a shell for a container