@appscode/design-system 2.17.85 → 2.17.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "2.17.85",
+  "version": "2.17.87",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/navbar/Appdrawer.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
   isOfflineInstaller: false,
 });
 
-const appList = [
+const baseAppList = [
   {
     name: "id",
     icon_url: "https://cdn.appscode.com/images/products/platform/platform.svg",
@@ -73,15 +73,21 @@ const appList = [
   },
 ];
 
-if (props.activeOrgType !== 3) {
-  appList.splice(1, 0, {
-    name: "console",
-    icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
-    title: "Console",
-    port: "5990",
-    sub_title: "Manage your kubernetes clusters",
-  });
-}
+const appList = computed(() => {
+  const list = [...baseAppList];
+
+  if (props.activeOrgType !== 3) {
+    list.splice(1, 0, {
+      name: "console",
+      icon_url: "https://cdn.appscode.com/images/products/console/console_512x512.svg",
+      title: "Console",
+      port: "5990",
+      sub_title: "Manage your kubernetes clusters",
+    });
+  }
+
+  return list;
+});
 
 const NavbarItem = defineAsyncComponent(() => import("./NavbarItem.vue"));
 const NavbarItemContent = defineAsyncComponent(() => import("./NavbarItemContent.vue"));
@@ -91,7 +97,7 @@ function handleIsActiveChange(isActive: string) {
   showDrawer.value = !!isActive?.length;
 }
 
-const getUrl = (product: (typeof appList)[0]) => {
+const getUrl = (product: (typeof baseAppList)[0]) => {
   if (props.baseUrl.search("bb.test") !== -1) {
     return `http://bb.test:${product.port}/${product.name}/`;
   } else if (props.baseUrl.search("localhost") !== -1) {
@@ -101,32 +107,36 @@ const getUrl = (product: (typeof appList)[0]) => {
   return `${props.baseUrl}/${product.name}/`;
 };
 
-const appListWithUrl = appList.map((el) => {
-  return {
-    ...el,
-    url: getUrl(el),
-  };
-});
+const appListWithUrl = computed(() =>
+  appList.value.map((el) => {
+    return {
+      ...el,
+      url: getUrl(el),
+    };
+  }),
+);
 
 const isSelfHosted = computed(() => {
   const list = ["https://appscode.ninja", "https://appscode.com", "http://bb.test:8080"];
   return !list.includes(props.baseUrl);
 });
 
-const filteredAppList = appListWithUrl.filter((element) => {
-  // remove own app from dropdown
-  if (element.name === props.currentApp) return false;
-
-  // remove billing selfhost & learn from selfhost mode
-  // but always keep billing when this is an offline installer
-  const selfHostList = ["billing", "selfhost", "learn"];
-  if (isSelfHosted.value && selfHostList.includes(element.name)) {
-    if (element.name === "billing" && props.isOfflineInstaller && props.activeOrgType === 6) return true;
-    return false;
-  }
-
-  return true;
-});
+const filteredAppList = computed(() =>
+  appListWithUrl.value.filter((element) => {
+    // remove own app from dropdown
+    if (element.name === props.currentApp) return false;
+
+    // remove billing selfhost & learn from selfhost mode
+    // but always keep billing when this is an offline installer
+    const selfHostList = ["billing", "selfhost", "learn"];
+    if (isSelfHosted.value && selfHostList.includes(element.name)) {
+      if (element.name === "billing" && props.isOfflineInstaller && props.activeOrgType === 6) return true;
+      return false;
+    }
+
+    return true;
+  }),
+);
 
 const handleClick = (name: string) => {
   if (name === "grafana") setCookie("gorg", props.activeOrganization, { domain: props.rootDomain });

package/vue-components/v3/navbar/ThemeMode.vue

@@ -29,9 +29,30 @@ const themeModes = ref<ThemeModes>({
 
 const emit = defineEmits(["set:theme"]);
 
+// localStorage throws when the origin's quota is full, and when storage is
+// unreachable altogether (private browsing, sandboxed iframe, blocked site
+// data, server-side render). Remembering the theme is a convenience, so a
+// failure must never stop the theme from being read or applied.
+const readThemeMode = (): string | null => {
+  try {
+    return localStorage.getItem("themeMode");
+  } catch {
+    // no stored preference available
+    return null;
+  }
+};
+
+const persistThemeMode = (mode: string) => {
+  try {
+    localStorage.setItem("themeMode", mode);
+  } catch {
+    // not remembered across reloads, but it still applies for this session
+  }
+};
+
 onMounted(() => {
   // get theme mode from localStorage or set default one
-  themeMode.value = localStorage.getItem("themeMode") || "light";
+  themeMode.value = readThemeMode() || "light";
 });
 
 onUnmounted(() => {
@@ -39,7 +60,7 @@ onUnmounted(() => {
 });
 
 const onThemeModeChange = (n: string) => {
-  localStorage.setItem("themeMode", n);
+  persistThemeMode(n);
 
   let theme = n;
   if (n === "system") {