@shwfed/nuxt 0.1.64 → 0.1.65

package/dist/runtime/components/app.vue

@@ -1,31 +1,34 @@
 <script setup>
-import { useHead, useNuxtApp, useRoute, useRouter, useRuntimeConfig } from "#app";
-import { computed, onMounted, ref } from "vue";
-import { CommandDialog, CommandInput, CommandList, CommandGroup, CommandEmpty, CommandItem } from "./ui/command";
+import { useHead, useNuxtApp, useRoute, useRuntimeConfig } from "#app";
+import { computed, reactive, watch } from "vue";
+import { CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./ui/command";
 import { TooltipProvider } from "./ui/tooltip";
 import { Toaster } from "vue-sonner";
-import { useLocalStorage, useMagicKeys, useSessionStorage, useTimeoutFn, whenever } from "@vueuse/core";
+import { useMagicKeys, useTimeoutFn, whenever } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import { Icon } from "@iconify/vue";
 import { Effect } from "effect";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuLabel } from "./ui/dropdown-menu";
 import { setGlobalDslContext } from "../plugins/cel/context";
-import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider } from "./ui/sidebar";
+import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from "./ui/sidebar";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./ui/dropdown-menu";
+import { z } from "zod";
 import Logo from "./logo.vue";
-const { $dsl } = useNuxtApp();
+import { useFavorite } from "../composables/useFavorite";
+import { useNavigationTabs } from "../composables/useNavigationTabs";
+import { commandActionSchema, executeCommandAction } from "../utils/command";
+import { createPaletteItemValue, normalizeCommandsForPalette, splitNavigationForPalette } from "../utils/command-palette";
+import { isRouteActive, normalizeRoutePath } from "../utils/route";
+import { applyRootNavigationFallback } from "../utils/sidebar-fallback";
+const { $dsl, $logout, $md } = useNuxtApp();
+const { t } = useI18n();
+const route = useRoute();
+const { tabs, active, tabList, activateTab, closeTab } = useNavigationTabs();
 const {
   public: {
     shwfed: config
-  },
-  app
+  }
 } = useRuntimeConfig();
-const props = defineProps({
-  navigation: { type: Array, required: false },
-  commands: { type: Array, required: false },
-  dsl: { type: null, required: false }
-});
-const { t } = useI18n();
 useHead({
   bodyAttrs: {
     style: {
@@ -34,308 +37,197 @@ useHead({
     }
   }
 });
-const isCommandOpen = ref(false);
-const isDropdownOpen = ref(false);
-const { start: startDropdownCloseTimer, stop: stopDropdownCloseTimer } = useTimeoutFn(() => {
-  isDropdownOpen.value = false;
+const props = defineProps({
+  dsl: { type: null, required: false }
+});
+const ui = reactive({
+  isCommandPaletteOpen: false,
+  isProfileDropdownOpen: false
+});
+const { start: startProfileCloseTimer, stop: stopProfileCloseTimer } = useTimeoutFn(() => {
+  ui.isProfileDropdownOpen = false;
 }, 150, { immediate: false });
 const { meta_k } = useMagicKeys();
-whenever(() => meta_k?.value, () => {
-  isCommandOpen.value = !isCommandOpen.value;
-});
-const router = useRouter();
-const route = useRoute();
+whenever(() => meta_k?.value, () => ui.isCommandPaletteOpen = !ui.isCommandPaletteOpen);
 setGlobalDslContext(await props.dsl?.pipe(Effect.scoped).pipe(Effect.runPromise) ?? {});
-function toNavigationKey(groupId, itemId) {
-  return groupId ? `${groupId}::${itemId}` : `::${itemId}`;
-}
-function findNavigationByKey(navList, key) {
-  const parts = key.split("::");
-  if (parts.length < 2) return void 0;
-  const groupId = parts[0] ?? "";
-  const itemId = parts[1] ?? "";
-  if (groupId === "") {
-    for (const el of navList) {
-      if (el.type === "item" && el.id === itemId) return el;
-    }
-    return void 0;
-  }
-  for (const el of navList) {
-    if (el.type === "group" && el.id === groupId) {
-      const child = el.children.find((c) => c.id === itemId);
-      return child;
-    }
+const navigationItems = computed(() => {
+  const item = z.object({
+    id: z.union([z.string(), z.number()]),
+    title: z.string(),
+    icon: z.string().optional(),
+    route: z.string(),
+    keywords: z.array(z.string()).optional()
+  });
+  const group = z.object({
+    id: z.union([z.string(), z.number()]),
+    title: z.string(),
+    icon: z.string().optional(),
+    children: z.array(item)
+  });
+  try {
+    const result = $dsl.evaluate`${config.sidebar.menus}`();
+    return z.array(z.union([group, item])).parse(result);
+  } catch {
+    return [];
   }
-  return void 0;
-}
-function normalizePathForMatch(p) {
-  const trimmed = p.replace(/\/$/, "");
-  return trimmed === "" ? "/" : trimmed;
-}
-function findNavigationKeyByPath(navList, path) {
-  const normalized = normalizePathForMatch(path);
-  for (const el of navList) {
-    if (el.type === "item") {
-      if (el.external === true) continue;
-      if (normalizePathForMatch(el.target) === normalized) return toNavigationKey("", el.id);
-    } else {
-      for (const child of el.children) {
-        if (child.external === true) continue;
-        if (normalizePathForMatch(child.target) === normalized) return toNavigationKey(el.id, child.id);
-      }
-    }
-  }
-  return void 0;
-}
-const palette = computed(() => {
-  const items = [];
-  for (const navigation2 of props.navigation ?? []) {
-    if ("children" in navigation2) {
-      const children = navigation2.children.filter((child) => {
-        if (typeof child.hidden === "string" && $dsl.evaluate`${child.hidden}`()) {
+});
+const {
+  isFavorited: isNavigationFavorited,
+  canBeFavorited: canBeNavigationFavorited,
+  toggle: toggleNavigationFavorite,
+  withFavorites: navigations
+} = useFavorite("navigation", navigationItems);
+const isNavigationItemActive = (itemRoute) => isRouteActive(route.path, itemRoute);
+const getTabLabel = (tab) => {
+  const normalizedTab = normalizeRoutePath(tab);
+  for (const group of navigations.value) {
+    if ("children" in group) {
+      const matchedChild = group.children.find((child) => {
+        if (!("route" in child))
           return false;
-        }
-        return true;
-      });
-      if (children.length > 0) {
-        items.push({
-          id: navigation2.id,
-          title: navigation2.title,
-          icon: navigation2.icon,
-          type: "group",
-          children: children.map((child) => ({
-            id: child.id,
-            title: child.title,
-            icon: child.icon,
-            type: "item",
-            external: $dsl.evaluate`${child.external}`(),
-            effect: Effect.sync(function() {
-              if ($dsl.evaluate`${child.external}`() !== true) {
-                tabs.value.add(toNavigationKey(navigation2.id, child.id));
-                activeTab.value = toNavigationKey(navigation2.id, child.id);
-                router.replace(child.target);
-              }
-            })
-          }))
-        });
-      }
-    } else {
-      if (typeof navigation2.hidden === "string" && $dsl.evaluate`${navigation2.hidden}`()) {
-        continue;
-      }
-      items.push({
-        id: navigation2.id,
-        title: navigation2.title,
-        icon: navigation2.icon,
-        type: "item",
-        external: $dsl.evaluate`${navigation2.external}`(),
-        effect: Effect.sync(function() {
-          if ($dsl.evaluate`${navigation2.external}`() !== true) {
-            tabs.value.add(toNavigationKey("", navigation2.id));
-            activeTab.value = toNavigationKey("", navigation2.id);
-            router.replace(navigation2.target);
-          }
-        })
+        return normalizeRoutePath(child.route) === normalizedTab;
       });
+      if (matchedChild)
+        return matchedChild.title;
+      continue;
     }
+    if (normalizeRoutePath(group.route) === normalizedTab)
+      return group.title;
   }
-  for (const command of props.commands ?? []) {
-    if ("children" in command) {
-      const children = command.children.filter(
-        (child) => (typeof child.hidden !== "string" || !$dsl.evaluate`${child.hidden}`()) && child.positions.includes("command-palette")
-      );
-      if (children.length > 0) {
-        items.push({
-          id: command.id,
-          title: command.title,
-          icon: command.icon,
-          type: "group",
-          children: children.map((child) => ({
-            id: child.id,
-            title: child.title,
-            icon: child.icon,
-            type: "item",
-            external: false,
-            effect: child.effect
-          }))
-        });
-      }
-    } else {
-      if ((typeof command.hidden !== "string" || !$dsl.evaluate`${command.hidden}`()) && command.positions.includes("command-palette")) {
-        items.push({
-          id: command.id,
-          title: command.title,
-          icon: command.icon,
-          type: "item",
-          external: false,
-          effect: command.effect
-        });
-      }
-    }
+  return normalizedTab;
+};
+const profileName = computed(() => {
+  if (config.profile.name === void 0)
+    return t("profile");
+  try {
+    const content = $md.inline`${config.profile.name}`();
+    const plainText = content.replace(/<[^>]*>/g, "").trim();
+    if (plainText.length === 0)
+      return t("profile");
+    return plainText;
+  } catch {
+    return t("profile");
   }
-  return items;
 });
-const navigation = computed(() => {
-  const items = [];
-  for (const navigation2 of props.navigation ?? []) {
-    if ("children" in navigation2) {
-      const children = navigation2.children.filter(
-        (child) => typeof child.hidden !== "string" || !$dsl.evaluate`${child.hidden}`()
-      );
-      if (children.length > 0) {
-        items.push({
-          id: navigation2.id,
-          title: navigation2.title,
-          icon: navigation2.icon,
-          type: "group",
-          children: children.map((child) => ({
-            id: child.id,
-            title: child.title,
-            icon: child.icon,
-            type: "item",
-            external: $dsl.evaluate`${child.external}`(),
-            target: child.target,
-            effect: Effect.sync(function() {
-              if ($dsl.evaluate`${child.external}`() !== true) {
-                tabs.value.add(toNavigationKey(navigation2.id, child.id));
-                activeTab.value = toNavigationKey(navigation2.id, child.id);
-                router.replace(child.target);
-              }
-            })
-          }))
-        });
-      }
-    } else {
-      if (typeof navigation2.hidden !== "string" || !$dsl.evaluate`${navigation2.hidden}`()) {
-        items.push({
-          id: navigation2.id,
-          title: navigation2.title,
-          icon: navigation2.icon,
-          type: "item",
-          external: $dsl.evaluate`${navigation2.external}`(),
-          target: navigation2.target,
-          effect: Effect.sync(function() {
-            if ($dsl.evaluate`${navigation2.external}`() !== true) {
-              tabs.value.add(toNavigationKey("", navigation2.id));
-              activeTab.value = toNavigationKey("", navigation2.id);
-              router.replace(navigation2.target);
-            }
-          })
-        });
-      }
-    }
-  }
-  return items;
-});
-const profile = computed(() => {
-  const items = [];
-  for (const command of props.commands ?? []) {
-    if ("children" in command) {
-      const children = command.children.filter(
-        (child) => (typeof child.hidden !== "string" || !$dsl.evaluate`${child.hidden}`()) && child.positions.includes("profile")
-      );
-      if (children.length > 0) {
-        items.push({
-          id: command.id,
-          title: command.title,
-          icon: command.icon,
-          type: "group",
-          children: children.map((child) => ({
-            id: child.id,
-            title: child.title,
-            icon: child.icon,
-            type: "item",
-            external: false,
-            effect: child.effect
-          }))
-        });
-      }
-    } else {
-      if ((typeof command.hidden !== "string" || !$dsl.evaluate`${command.hidden}`()) && command.positions.includes("profile")) {
-        items.push({
-          id: command.id,
-          title: command.title,
-          icon: command.icon,
-          type: "item",
-          external: false,
-          effect: command.effect
-        });
-      }
-    }
-  }
-  return items;
+const commandItem = z.object({
+  id: z.union([z.string(), z.number()]),
+  title: z.string(),
+  icon: z.string().optional(),
+  hidden: z.string().optional(),
+  disabled: z.string().optional(),
+  effect: z.string().optional(),
+  keywords: z.array(z.string()).optional()
 });
-const navigationFavorites = useLocalStorage("navigation-favorites", [], {
-  writeDefaults: false
+const commandGroup = z.object({
+  id: z.union([z.string(), z.number()]),
+  title: z.string(),
+  icon: z.string().optional(),
+  children: z.array(commandItem)
 });
-const navigationFavoritesItems = computed(() => {
-  const items = [];
-  for (const key of navigationFavorites.value) {
-    const item = findNavigationByKey(navigation.value, key);
-    if (!item) continue;
-    items.push({
-      id: key,
-      title: item.title,
-      icon: item.icon,
-      effect: Effect.sync(function() {
-        if (item.external !== true) {
-          tabs.value.add(key);
-          activeTab.value = key;
-          router.replace(item.target);
-        }
-      })
-    });
+const evaluateDslBoolean = (expression) => {
+  if (expression === void 0)
+    return false;
+  try {
+    return $dsl.evaluate`${expression}`() === true;
+  } catch {
+    return false;
   }
-  return items;
-});
-const paletteFavorites = computed(() => {
-  const items = [];
-  for (const key of navigationFavorites.value) {
-    const item = findNavigationByKey(navigation.value, key);
-    if (!item) continue;
-    items.push({
-      id: key,
-      title: item.title,
-      icon: item.icon,
-      external: item.external,
-      effect: Effect.sync(function() {
-        if (item.external !== true) {
-          tabs.value.add(key);
-          activeTab.value = key;
-          router.replace(item.target);
+};
+const normalizeEffectExpression = (expression) => {
+  return expression.replace(/([{,]\s*)([a-z_][\w-]*)(\s*:)/gi, "$1'$2'$3");
+};
+const profileCommands = computed(() => {
+  if (config.commands === void 0)
+    return [];
+  try {
+    const result = $dsl.evaluate`${config.commands}`();
+    const entries = z.array(z.union([commandGroup, commandItem])).parse(result);
+    const normalized = [];
+    for (const entry of entries) {
+      if ("children" in entry) {
+        const children = entry.children.filter((child) => !evaluateDslBoolean(child.hidden)).map((child) => ({
+          id: child.id,
+          title: child.title,
+          icon: child.icon,
+          disabled: evaluateDslBoolean(child.disabled),
+          effect: child.effect,
+          keywords: child.keywords
+        }));
+        if (children.length > 0) {
+          normalized.push({
+            id: entry.id,
+            title: entry.title,
+            icon: entry.icon,
+            children
+          });
         }
-      })
-    });
+        continue;
+      }
+      if (evaluateDslBoolean(entry.hidden))
+        continue;
+      normalized.push({
+        id: entry.id,
+        title: entry.title,
+        icon: entry.icon,
+        disabled: evaluateDslBoolean(entry.disabled),
+        effect: entry.effect,
+        keywords: entry.keywords
+      });
+    }
+    return normalized;
+  } catch {
+    return [];
   }
-  return items;
-});
-const tabs = useSessionStorage("navigation-tabs", /* @__PURE__ */ new Set(), {
-  writeDefaults: false
 });
-const activeTab = useSessionStorage("navigation-active-tab", void 0, {
-  writeDefaults: false
-});
-onMounted(() => {
-  const baseRaw = app.baseURL ?? "/";
-  const base = baseRaw === "" || baseRaw === "/" ? "/" : baseRaw.replace(/\/*$/, "") + "/";
-  let pathToMatch;
-  if (base === "/") {
-    pathToMatch = route.path;
-  } else if (route.fullPath.startsWith(base)) {
-    const remainder = route.fullPath.slice(base.length) || "/";
-    pathToMatch = remainder.startsWith("/") ? remainder : `/${remainder}`;
-  } else {
-    pathToMatch = route.path;
+const executeCommandEffect = (effect) => {
+  if (effect === void 0)
+    return false;
+  try {
+    let result;
+    try {
+      result = $dsl.evaluate`${effect}`();
+    } catch {
+      result = $dsl.evaluate`${normalizeEffectExpression(effect)}`();
+    }
+    const action = commandActionSchema.parse(result);
+    executeCommandAction(action, {
+      logout: $logout
+    });
+    return true;
+  } catch {
+    return false;
   }
-  const key = findNavigationKeyByPath(navigation.value, pathToMatch);
-  if (key !== void 0) {
-    tabs.value.add(key);
-    activeTab.value = key;
+};
+const executeProfileCommand = (effect) => {
+  if (effect === void 0 || executeCommandEffect(effect))
+    ui.isProfileDropdownOpen = false;
+};
+const paletteNavigation = computed(() => splitNavigationForPalette(navigations.value));
+const favoriteRoutesForPalette = computed(() => paletteNavigation.value.favoriteRoutes);
+const navigationForPalette = computed(() => paletteNavigation.value.navigationEntries);
+const commandForPalette = computed(() => normalizeCommandsForPalette(profileCommands.value));
+const executePaletteItem = (item) => {
+  if (item.type === "route") {
+    activateTab(item.route);
+    ui.isCommandPaletteOpen = false;
+    return;
   }
-});
-useHead({
-  title: () => activeTab.value ? findNavigationByKey(navigation.value, activeTab.value)?.title ?? config.title : config.title
-});
+  if (item.effect !== void 0 && !executeCommandEffect(item.effect))
+    return;
+  ui.isCommandPaletteOpen = false;
+};
+watch(
+  () => route.path,
+  (path) => {
+    applyRootNavigationFallback({
+      path,
+      items: navigationItems.value,
+      tabs: tabs.value,
+      activateTab
+    });
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
@@ -343,9 +235,9 @@ useHead({
     <ClientOnly>
       <Toaster />
       <CommandDialog
-        v-model:open="isCommandOpen"
+        v-model:open="ui.isCommandPaletteOpen"
       >
-        <CommandInput />
+        <CommandInput :placeholder="t('search')" />
         <CommandList>
           <CommandEmpty as-child>
             <section class="h-32 flex flex-col text-lg items-center justify-center gap-2 select-none">
@@ -360,77 +252,103 @@ useHead({
           </CommandEmpty>
 
           <CommandGroup
-            v-if="paletteFavorites.length > 0"
+            v-if="favoriteRoutesForPalette.length > 0"
             :heading="t('favorites')"
           >
             <CommandItem
-              v-for="el in paletteFavorites"
-              :key="el.id"
-              :value="el.id"
-              @select="el.effect.pipe(Effect.scoped).pipe(Effect.tap(() => {
-  isCommandOpen = false;
-})).pipe(Effect.runPromise)"
+              v-for="menu in favoriteRoutesForPalette"
+              :key="`fav:${menu.id}:${menu.route}`"
+              :value="createPaletteItemValue('fav', `${menu.id}:${menu.route}`)"
+              @select="executePaletteItem({ type: 'route', route: menu.route })"
             >
-              <Icon
-                v-if="el.icon"
-                :icon="el.icon"
-              />
-              <span>{{ el.title }}</span>
+              <span>{{ menu.title }}</span>
+              <span
+                v-if="menu.keywords.length > 0"
+                class="sr-only"
+              >
+                {{ menu.keywords.join(" ") }}
+              </span>
             </CommandItem>
           </CommandGroup>
 
           <template
-            v-for="el in palette"
-            :key="el.id"
+            v-for="navigation in navigationForPalette"
+            :key="navigation.id"
           >
             <CommandGroup
-              v-if="el.type === 'group'"
-              :heading="el.title"
+              v-if="'children' in navigation"
+              :heading="navigation.title"
             >
               <CommandItem
-                v-for="item in el.children"
-                :key="item.id"
-                :value="item.id"
-                :disabled="typeof item.disabled === 'string' && $dsl.evaluate`${item.disabled}`()"
-                @select="
-  item.effect.pipe(Effect.scoped).pipe(Effect.tap(() => {
-    isCommandOpen = false;
-  })).pipe(Effect.runPromise)
-"
+                v-for="menu in navigation.children"
+                :key="menu.id"
+                :value="createPaletteItemValue('nav', menu.id, navigation.id)"
+                @select="executePaletteItem({ type: 'route', route: menu.route })"
               >
-                <Icon
-                  v-if="item.icon"
-                  :icon="item.icon"
-                />
-                <span>{{ item.title }}</span>
+                <span>{{ menu.title }}</span>
                 <span
-                  v-if="item.keywords?.length"
+                  v-if="menu.keywords.length > 0"
                   class="sr-only"
                 >
-                  {{ item.keywords.join(" ") }}
+                  {{ menu.keywords.join(" ") }}
                 </span>
               </CommandItem>
             </CommandGroup>
-            <CommandItem
-              v-if="el.type === 'item'"
-              :value="el.id"
-              :disabled="typeof el.disabled === 'string' && $dsl.evaluate`${el.disabled}`()"
-              @select="el.effect.pipe(Effect.scoped).pipe(Effect.tap(() => {
-  isCommandOpen = false;
-})).pipe(Effect.runPromise)"
+            <CommandGroup v-else>
+              <CommandItem
+                :value="createPaletteItemValue('nav', navigation.id)"
+                @select="executePaletteItem({ type: 'route', route: navigation.route })"
+              >
+                <span>{{ navigation.title }}</span>
+                <span
+                  v-if="navigation.keywords.length > 0"
+                  class="sr-only"
+                >
+                  {{ navigation.keywords.join(" ") }}
+                </span>
+              </CommandItem>
+            </CommandGroup>
+          </template>
+
+          <template
+            v-for="command in commandForPalette"
+            :key="command.id"
+          >
+            <CommandGroup
+              v-if="'children' in command"
+              :heading="command.title"
             >
-              <Icon
-                v-if="el.icon"
-                :icon="el.icon"
-              />
-              <span>{{ el.title }}</span>
-              <span
-                v-if="el.keywords?.length"
-                class="sr-only"
+              <CommandItem
+                v-for="child in command.children"
+                :key="child.id"
+                :value="createPaletteItemValue('cmd', child.id, command.id)"
+                :disabled="child.disabled"
+                @select="executePaletteItem({ type: 'command', effect: child.effect })"
               >
-                {{ el.keywords.join(" ") }}
-              </span>
-            </CommandItem>
+                <span>{{ child.title }}</span>
+                <span
+                  v-if="child.keywords.length > 0"
+                  class="sr-only"
+                >
+                  {{ child.keywords.join(" ") }}
+                </span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandGroup v-else>
+              <CommandItem
+                :value="createPaletteItemValue('cmd', command.id)"
+                :disabled="command.disabled"
+                @select="executePaletteItem({ type: 'command', effect: command.effect })"
+              >
+                <span>{{ command.title }}</span>
+                <span
+                  v-if="command.keywords.length > 0"
+                  class="sr-only"
+                >
+                  {{ command.keywords.join(" ") }}
+                </span>
+              </CommandItem>
+            </CommandGroup>
           </template>
         </CommandList>
       </CommandDialog>
@@ -442,83 +360,68 @@ useHead({
         <slot name="menu" />
         <span class="flex-1" />
         <DropdownMenu
-          v-model:open="isDropdownOpen"
+          v-model:open="ui.isProfileDropdownOpen"
           :modal="false"
-          @update:open="stopDropdownCloseTimer();
-  isDropdownOpen = $event"
+          @update:open="ui.isProfileDropdownOpen = $event"
         >
           <DropdownMenuTrigger as-child>
             <button
-              ref="dropdown-trigger"
               type="button"
-              class="text-white text-sm cursor-pointer appearance-none outline-none pl-4 py-2"
-              @pointerenter="stopDropdownCloseTimer();
-  isDropdownOpen = true"
-              @pointerleave="stopDropdownCloseTimer();
-  startDropdownCloseTimer()"
-              @click.prevent="if (!isDropdownOpen) {
-    stopDropdownCloseTimer();
-    isDropdownOpen = true;
-  }"
+              class="text-white text-sm cursor-pointer appearance-none outline-none py-2 px-3 rounded hover:bg-white/10"
+              @pointerenter="stopProfileCloseTimer();
+  ui.isProfileDropdownOpen = true"
+              @pointerleave="stopProfileCloseTimer();
+  startProfileCloseTimer()"
+              @click.prevent="stopProfileCloseTimer();
+  ui.isProfileDropdownOpen = true"
             >
-              {{ $md.inline`${$config.public.shwfed.profile.name}`() }}
+              {{ profileName }}
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
             class="min-w-56"
             align="end"
-            @pointerenter="stopDropdownCloseTimer()"
-            @pointerleave="stopDropdownCloseTimer();
-  startDropdownCloseTimer()"
+            @pointerenter="stopProfileCloseTimer()"
+            @pointerleave="stopProfileCloseTimer();
+  startProfileCloseTimer()"
           >
             <template
-              v-for="el in profile"
-              :key="el.id"
+              v-for="command in profileCommands"
+              :key="command.id"
             >
-              <template v-if="el.type === 'group'">
+              <template v-if="'children' in command">
                 <DropdownMenuLabel>
-                  {{ el.title }}
+                  {{ command.title }}
                 </DropdownMenuLabel>
                 <DropdownMenuGroup>
                   <DropdownMenuItem
-                    v-for="item in el.children"
-                    :key="item.id"
-                    :disabled="typeof item.disabled === 'string' && $dsl.evaluate`${item.disabled}`()"
-                    @select="item.effect.pipe(Effect.scoped).pipe(Effect.tap(() => {
-  isDropdownOpen = false;
-})).pipe(Effect.runPromise)"
+                    v-for="child in command.children"
+                    :key="child.id"
+                    :disabled="child.disabled"
+                    @select="executeProfileCommand(child.effect)"
                   >
                     <Icon
-                      v-if="item.icon"
-                      :icon="item.icon"
+                      v-if="child.icon"
+                      :icon="child.icon"
                     />
-                    {{ item.title }}
+                    {{ child.title }}
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
                 <DropdownMenuSeparator />
               </template>
-              <template v-else>
-                <DropdownMenuItem
-                  :disabled="typeof el.disabled === 'string' && $dsl.evaluate`${el.disabled}`()"
-                  @select="el.effect.pipe(Effect.scoped).pipe(Effect.tap(() => {
-  isDropdownOpen = false;
-})).pipe(Effect.runPromise)"
-                >
-                  <Icon
-                    v-if="el.icon"
-                    :icon="el.icon"
-                  />
-                  {{ el.title }}
-                </DropdownMenuItem>
-              </template>
+              <DropdownMenuItem
+                v-else
+                :disabled="command.disabled"
+                @select="executeProfileCommand(command.effect)"
+              >
+                <Icon
+                  v-if="command.icon"
+                  :icon="command.icon"
+                />
+                {{ command.title }}
+              </DropdownMenuItem>
             </template>
-            <DropdownMenuItem
-              @select="$logout"
-            >
-              <Icon icon="fluent:sign-out-20-regular" />
-              {{ t("logout") }}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
+            <DropdownMenuSeparator v-if="profileCommands.length > 0" />
             <DropdownMenuItem disabled>
               <Icon icon="fluent:history-20-regular" />
               {{ t("build") }}
@@ -539,178 +442,122 @@ useHead({
             collapsible="icon"
             class="sticky h-full"
           >
-            <SidebarContent>
-              <SidebarGroup v-if="navigationFavoritesItems.length > 0">
-                <SidebarGroupLabel>
-                  {{ t("favorites") }}
-                </SidebarGroupLabel>
-                <SidebarMenu>
-                  <SidebarMenuItem
-                    v-for="el in navigationFavoritesItems"
-                    :key="el.id"
-                  >
-                    <SidebarMenuButton
+            <SidebarContent class="gap-0 py-1">
+              <template
+                v-for="group in navigations"
+                :key="group.id"
+              >
+                <Collapsible
+                  v-if="'children' in group"
+                  default-open
+                  class="group/collapsible"
+                >
+                  <SidebarGroup>
+                    <SidebarGroupLabel
                       as-child
-                      :is-active="el.id === activeTab"
+                      class="group/label text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"
                     >
-                      <button
-                        type="button"
-                        class="w-full"
-                        @click="el.effect.pipe(Effect.scoped).pipe(Effect.runPromise)"
-                      >
+                      <CollapsibleTrigger>
                         <Icon
-                          v-if="el.icon"
-                          :icon="el.icon"
+                          v-if="group.icon"
+                          :icon="group.icon"
                         />
-                        {{ el.title }}
-                      </button>
-                    </SidebarMenuButton>
-                    <SidebarMenuAction
-                      show-on-hover
-                      as-child
-                    >
-                      <button
-                        type="button"
-                        @click="() => {
-  navigationFavorites = navigationFavorites.filter((id) => id !== el.id);
-}"
-                      >
+                        {{ group.title }}
                         <Icon
-                          icon="fluent:star-off-20-regular"
+                          icon="fluent:chevron-right-20-regular"
+                          class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
                         />
-                      </button>
-                    </SidebarMenuAction>
-                  </SidebarMenuItem>
-                </SidebarMenu>
-              </SidebarGroup>
-              <SidebarGroup>
-                <SidebarGroupLabel>
-                  {{ t("navigation") }}
-                </SidebarGroupLabel>
-                <SidebarMenu>
-                  <template
-                    v-for="el in navigation"
-                    :key="el.id"
-                  >
-                    <Collapsible
-                      v-if="el.type === 'group'"
-                      class="group/collapsible"
-                      :default-open="el.children.some((child) => toNavigationKey(el.id, child.id) === activeTab)"
-                      as-child
-                    >
-                      <SidebarMenuItem>
-                        <CollapsibleTrigger as-child>
-                          <SidebarMenuButton :tooltip="el.title">
-                            <Icon
-                              v-if="el.icon"
-                              :icon="el.icon"
-                            />
-                            {{ el.title }}
-                            <Icon
-                              icon="fluent:chevron-right-20-regular"
-                              class="absolute right-1 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-                            />
-                          </SidebarMenuButton>
-                          <CollapsibleContent>
-                            <SidebarMenuSub>
-                              <SidebarMenuSubItem
-                                v-for="item in el.children"
-                                :key="item.id"
-                                class="group/menu-sub-item"
+                      </CollapsibleTrigger>
+                    </SidebarGroupLabel>
+                    <CollapsibleContent class="overflow-hidden data-[state=open]:overflow-visible data-[state=open]:h-auto">
+                      <SidebarGroupContent>
+                        <SidebarMenu>
+                          <SidebarMenuItem
+                            v-for="menu in group.children"
+                            :key="menu.id"
+                          >
+                            <SidebarMenuButton
+                              v-if="'route' in menu"
+                              as-child
+                              :is-active="isNavigationItemActive(menu.route)"
+                            >
+                              <button
+                                type="button"
+                                @click="activateTab(menu.route)"
                               >
-                                <SidebarMenuSubButton
-                                  as-child
-                                  :is-active="toNavigationKey(el.id, item.id) === activeTab"
-                                >
-                                  <button
-                                    type="button"
-                                    class="w-full"
-                                    @click="item.effect.pipe(Effect.scoped).pipe(Effect.runPromise)"
-                                  >
-                                    <Icon
-                                      v-if="item.icon"
-                                      :icon="item.icon"
-                                    />
-                                    {{ item.title }}
-                                  </button>
-                                </SidebarMenuSubButton>
-                                <SidebarMenuAction
-                                  :class="['transition-opacity duration-80 text-yellow-400 -translate-y-1/2', !navigationFavorites.includes(toNavigationKey(el.id, item.id)) && 'group-hover/menu-sub-item:opacity-100 opacity-0 ']"
-                                  as-child
-                                >
-                                  <button
-                                    type="button"
-                                    @click="() => {
-  const key = toNavigationKey(el.id, item.id);
-  if (navigationFavorites.includes(key)) {
-    navigationFavorites = navigationFavorites.filter((id) => id !== key);
-  } else {
-    navigationFavorites = Array.from(/* @__PURE__ */ new Set([...navigationFavorites, key]));
-  }
-}"
-                                  >
-                                    <Icon
-                                      v-if="navigationFavorites.includes(toNavigationKey(el.id, item.id))"
-                                      icon="fluent:star-20-filled"
-                                      class="text-yellow-400"
-                                    />
-                                    <Icon
-                                      v-else
-                                      icon="fluent:star-20-regular"
-                                      class="text-yellow-400"
-                                    />
-                                  </button>
-                                </SidebarMenuAction>
-                              </SidebarMenuSubItem>
-                            </SidebarMenuSub>
-                          </CollapsibleContent>
-                        </CollapsibleTrigger>
-                      </SidebarMenuItem>
-                    </Collapsible>
-                    <SidebarMenuItem v-else>
-                      <Icon
-                        v-if="el.icon"
-                        :icon="el.icon"
-                      />
-                      {{ el.title }}
-                    </SidebarMenuItem>
-                  </template>
-                </SidebarMenu>
-              </SidebarGroup>
+                                <Icon
+                                  v-if="menu.icon"
+                                  :icon="menu.icon"
+                                />
+                                {{ menu.title }}
+                              </button>
+                            </SidebarMenuButton>
+                            <SidebarMenuAction
+                              v-if="canBeNavigationFavorited(menu, group.id)"
+                              :show-on-hover="!isNavigationFavorited(menu, group.id)"
+                              class="text-yellow-500!"
+                              @click.stop="toggleNavigationFavorite(menu, group.id)"
+                            >
+                              <Icon
+                                :icon="isNavigationFavorited(menu, group.id) ? 'fluent:star-20-filled' : 'fluent:star-20-regular'"
+                              />
+                            </SidebarMenuAction>
+                          </SidebarMenuItem>
+                        </SidebarMenu>
+                      </SidebarGroupContent>
+                    </CollapsibleContent>
+                  </SidebarGroup>
+                </Collapsible>
+                <template v-else-if="'route' in group">
+                  <SidebarGroup>
+                    <SidebarGroupContent>
+                      <SidebarMenu>
+                        <SidebarMenuItem>
+                          <SidebarMenuButton
+                            as-child
+                            :is-active="isNavigationItemActive(group.route)"
+                          >
+                            <button
+                              type="button"
+                              @click="activateTab(group.route)"
+                            >
+                              <Icon
+                                v-if="group.icon"
+                                :icon="group.icon"
+                              />
+                              {{ group.title }}
+                            </button>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      </SidebarMenu>
+                    </SidebarGroupContent>
+                  </SidebarGroup>
+                </template>
+              </template>
             </SidebarContent>
           </Sidebar>
         </SidebarProvider>
         <main class="flex-1 flex flex-col bg-zinc-100 overflow-hidden">
-          <nav class="bg-white p-1 border-b border-zinc-100 h-10 flex items-center justify-start gap-1 overflow-x-hidden min-w-0">
+          <nav class="bg-white p-1 border-b border-zinc-100 h-10 flex items-center justify-start gap-1 overflow-x-auto min-w-0">
             <div
-              v-for="tab in tabs"
+              v-for="tab in tabList"
               :key="tab"
-              :class="['border rounded cursor-pointer px-2 py-1 text-sm flex items-center gap-2 truncate', activeTab === tab ? 'text-(--primary) border-(--primary)' : 'text-zinc-500 border-zinc-300 hover:text-zinc-700']"
-              @click="() => {
-  activeTab = tab;
-  const item2 = findNavigationByKey(navigation, tab);
-  $router.replace(item2?.target ?? '');
-}"
+              :class="[
+  'h-8 max-w-60 border rounded px-2 text-sm flex items-center gap-2 shrink-0 min-w-0 transition-colors',
+  active === tab ? 'text-(--primary) border-(--primary) bg-cyan-50' : 'text-zinc-600 border-zinc-200 hover:text-zinc-900 hover:border-zinc-300'
+]"
             >
-              {{ findNavigationByKey(navigation, tab)?.title ?? tab ?? "Unknown" }}
               <button
-                v-if="tabs.size > 1"
                 type="button"
-                class="opacity-80 group-hover/tab:opacity-100 transition-opacity cursor-pointer text-zinc-500 hover:text-(--primary) duration-180"
-                @click.stop="() => {
-  if (activeTab === tab) {
-    const idx = Array.from(tabs).findIndex((t2) => t2 === activeTab) - 1;
-    const previous = Array.from(tabs)[idx];
-    if (previous) {
-      activeTab = previous;
-      const item2 = findNavigationByKey(navigation, previous);
-      $router.replace(item2?.target ?? '');
-    } else {
-      activeTab = void 0;
-    }
-  }
-  tabs.delete(tab);
-}"
+                class="truncate cursor-pointer"
+                @click="activateTab(tab)"
+              >
+                {{ getTabLabel(tab) }}
+              </button>
+              <button
+                type="button"
+                class="cursor-pointer text-zinc-500 hover:text-zinc-900"
+                @click.stop="closeTab(tab)"
               >
                 <Icon icon="fluent:dismiss-20-regular" />
               </button>
@@ -729,23 +576,29 @@ useHead({
 {
   "zh": {
     "command-palette-empty": "无搜索结果",
+    "search": "搜索",
     "logout": "退出登录",
     "build": "构建",
     "navigation": "导航",
+    "profile": "个人信息",
     "favorites": "收藏"
   },
   "ja": {
     "command-palette-empty": "結果はありません",
+    "search": "検索",
     "logout": "ログアウト",
     "build": "ビルド",
     "navigation": "ナビゲーション",
+    "profile": "プロフィール",
     "favorites": "お気に入り"
   },
   "en": {
     "command-palette-empty": "No results",
+    "search": "Search",
     "logout": "Logout",
     "build": "Build",
     "navigation": "Navigation",
+    "profile": "Profile",
     "favorites": "Favorites"
   }
 }