npm - huhaa-myskills - Versions diffs - 0.2.13 → 0.3.0 - Mend

huhaa-myskills 0.2.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/bin/huhaa-myskills.mjs +71 -5
package/package.json +1 -1
package/packages/web/dist/assets/index-CaQOPbDU.css +1 -0
package/packages/web/dist/assets/index-Dlvh4-4K.js +36 -0
package/packages/web/dist/index.html +2 -2
package/packages/web/src/App.vue +239 -265
package/packages/web/src/components/DetailPanel.vue +551 -0
package/packages/web/src/stores/i18n.js +6 -0
package/packages/web/src/stores/skills.js +127 -0
package/packages/web/src/styles.css +922 -275
package/packages/web/dist/assets/index-BPepSb3q.js +0 -36
package/packages/web/dist/assets/index-CIGkgT5w.css +0 -1

package/packages/web/dist/index.html CHANGED Viewed

@@ -15,8 +15,8 @@
     <link rel="manifest" href="/site.webmanifest">
     <meta name="theme-color" content="#7c3aed">
     <meta name="description" content="一个高效的技能、规则和提示管理工具">
-    <script type="module" crossorigin src="/assets/index-BPepSb3q.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CIGkgT5w.css">
+    <script type="module" crossorigin src="/assets/index-Dlvh4-4K.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CaQOPbDU.css">
   </head>
   <body>
     <div id="app"></div>

package/packages/web/src/App.vue CHANGED Viewed

@@ -12,6 +12,11 @@ const i18n = useI18nStore();
 const t = i18n.t;
 const md = new MarkdownIt({ html: false, linkify: true, typographer: true });
 const viewMode = ref('list');
+const sidebarWidth = ref(180); // 默认 180px（更合理的宽度）
+const isResizing = ref(false);
+const startX = ref(0);
+const startWidth = ref(0);
+const sidebarCollapsed = ref(false); // 侧边栏折叠状态
 const viewModeLabel = computed(() => {
   const labels = {
@@ -23,7 +28,15 @@ const viewModeLabel = computed(() => {
   return labels[viewMode.value] || '列表';
 });
-onMounted(() => store.load());
+onMounted(() => {
+  store.load();
+  window.addEventListener('keydown', handleKeydown);
+  // 从 localStorage 加载侧栏宽度
+  const saved = localStorage.getItem('huhaa-sidebar-width');
+  if (saved) {
+    sidebarWidth.value = parseInt(saved, 10);
+  }
+});
 const detailHtml = computed(() => {
   const raw = store.selected?.raw || store.selected?.preview || '';
@@ -164,180 +177,134 @@ function formatBytes(n) {
   if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
   return `${(n / 1024 / 1024).toFixed(1)} MB`;
 }
-</script>
-<template>
-  <div class="shell">
-    <aside class="sidebar">
-      <div class="brand-block">
-        <div class="logo">H</div>
-        <div>
-          <h1>HuHaa-MySkills</h1>
-          <p>{{ t('appSubtitle') }}</p>
-        </div>
-      </div>
+function handleKeydown(e) {
+  if (e.key === 'Escape' && store.selected) {
+    store.selectedId = null;
+  }
+}
-      <div class="lang-switch">
-        <span>{{ t('language') }}</span>
-        <button :class="{ active: i18n.locale === 'zh' }" @click="i18n.setLocale('zh')">中文</button>
-        <button :class="{ active: i18n.locale === 'en' }" @click="i18n.setLocale('en')">EN</button>
-      </div>
+function startResize(e) {
+  isResizing.value = true;
+  startX.value = e.clientX;
+  startWidth.value = sidebarWidth.value;
+  document.addEventListener('mousemove', onResize);
+  document.addEventListener('mouseup', stopResize);
+}
-      <div v-if="store.stats" class="stats-card">
-        <div class="stat-main">{{ store.stats.total }}</div>
-        <div class="stat-label">{{ t('skillsLoaded') }}</div>
-      </div>
+function onResize(e) {
+  if (!isResizing.value) return;
+  const diff = e.clientX - startX.value;
+  const newWidth = Math.max(80, Math.min(300, startWidth.value + diff));
+  sidebarWidth.value = newWidth;
+}
-      <div class="selected-editor-card" v-if="store.filters.editor">
-        <div>
-          <span>{{ t('selectedEditor') }}</span>
-          <strong>{{ store.filters.editor }}</strong>
-        </div>
-        <button @click="store.setFilter('editor', '')">×</button>
-      </div>
+function stopResize() {
+  isResizing.value = false;
+  document.removeEventListener('mousemove', onResize);
+  document.removeEventListener('mouseup', stopResize);
+  // 保存到 localStorage
+  localStorage.setItem('huhaa-sidebar-width', sidebarWidth.value.toString());
+}
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+</script>
-      <section class="filter-section nav-section">
-        <div class="section-head">
-          <h2>{{ t('editor') }}</h2>
-          <small>{{ t('frontSelect') }}</small>
+<template>
+  <div class="shell" :style="{ gridTemplateColumns: `${sidebarCollapsed ? 50 : sidebarWidth}px 1fr 380px` }">
+    <!-- LEFT SIDEBAR - 筛选项（支持拖拽） -->
+    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
+      <div class="sidebar-toggle" @click="sidebarCollapsed = !sidebarCollapsed" :title="sidebarCollapsed ? '展开筛选' : '折叠筛选'">
+        {{ sidebarCollapsed ? '▶' : '◀' }}
+      </div>
+      <div class="sidebar-content" v-show="!sidebarCollapsed">
+        <!-- 筛选项 -->
+        <div class="filter-compact">
+          <label class="filter-item">
+            <span>类型</span>
+            <select v-model="store.filters.kind" class="filter-select-compact">
+              <option value="">全部</option>
+              <option v-for="o in store.kinds" :key="o.name" :value="o.name">{{ o.name }}</option>
+            </select>
+          </label>
+          <label class="filter-item">
+            <span>来源</span>
+            <select v-model="store.filters.source" class="filter-select-compact">
+              <option value="">全部</option>
+              <option v-for="o in store.filterSources" :key="o.name" :value="o.name">{{ o.name }}</option>
+            </select>
+          </label>
+          <label class="filter-item">
+            <span>产品</span>
+            <select v-model="store.filters.product" class="filter-select-compact">
+              <option value="">全部</option>
+              <option v-for="o in store.products" :key="o.name" :value="o.name">{{ o.name }}</option>
+            </select>
+          </label>
+          <label class="filter-item">
+            <span>品牌</span>
+            <select v-model="store.filters.brand" class="filter-select-compact">
+              <option value="">全部</option>
+              <option v-for="o in store.brands" :key="o.name" :value="o.name">{{ o.name }}</option>
+            </select>
+          </label>
+          <label class="filter-item">
+            <span>排序</span>
+            <select v-model="store.sortKey" class="filter-select-compact">
+              <option value="default">默认</option>
+              <option value="name">名称</option>
+              <option value="updated">最近更新</option>
+              <option value="kind">类型</option>
+              <option value="source">来源</option>
+              <option value="product">产品</option>
+            </select>
+          </label>
         </div>
-        <button
-          class="pill"
-          :class="{ active: !store.filters.editor }"
-          @click="store.setFilter('editor', '')"
-        >
-          <span>{{ t('all') }}</span><b>{{ store.stats?.total || 0 }}</b>
-        </button>
-        <button
-          v-for="e in store.editors"
-          :key="e.name"
-          class="pill"
-          :class="{ active: store.filters.editor === e.name }"
-          @click="store.setFilter('editor', e.name)"
-        >
-          <span>{{ e.name }}</span><b>{{ e.count }}</b>
-        </button>
-      </section>
+      </div>
+      <!-- 拖拽调整把手 -->
+      <div class="sidebar-resize-handle" @mousedown="startResize" title="拖拽调整宽度"></div>
     </aside>
+    <!-- MAIN CONTENT -->
     <main class="main">
+      <!-- TOPBAR -->
       <header class="topbar">
-        <div class="toolbar-card">
-          <div class="toolbar-main">
-            <div class="search-box">
-              <span class="search-icon">⌕</span>
-              <input
-                v-model="store.query"
-                type="search"
-                :placeholder="t('searchPlaceholder')"
-              />
-            </div>
-            <button class="btn soft" @click="store.clearFilters">{{ t('clear') }}</button>
-            <button class="btn primary" :disabled="store.reloadState?.scanning" @click="store.reload({ done: t('reloadDone') })">
-              {{ store.reloadState?.scanning ? t('reloading') : t('reload') }}
-            </button>
-          </div>
-          <div class="toolbar-facets">
-            <label class="facet">
-              <span>{{ t('kind') }}</span>
-              <select v-model="store.filters.kind">
-                <option value="">{{ t('all') }}</option>
-                <option v-for="o in store.kinds" :key="o.name" :value="o.name">{{ o.name }} ({{ o.count }})</option>
-              </select>
-            </label>
-            <label class="facet">
-              <span>{{ t('source') }}</span>
-              <select v-model="store.filters.source">
-                <option value="">{{ t('all') }}</option>
-                <option v-for="o in store.filterSources" :key="o.name" :value="o.name">{{ o.name }} ({{ o.count }})</option>
-              </select>
-            </label>
-            <label class="facet">
-              <span>{{ t('product') }}</span>
-              <select v-model="store.filters.product">
-                <option value="">{{ t('all') }}</option>
-                <option v-for="o in store.products" :key="o.name" :value="o.name">{{ o.name }} ({{ o.count }})</option>
-              </select>
-            </label>
-            <label class="facet">
-              <span>{{ t('brand') }}</span>
-              <select v-model="store.filters.brand">
-                <option value="">{{ t('all') }}</option>
-                <option v-for="o in store.brands" :key="o.name" :value="o.name">{{ o.name }} ({{ o.count }})</option>
-              </select>
-            </label>
-            <label class="facet compact">
-              <span>{{ t('sort') }}</span>
-              <select v-model="store.sortKey">
-                <option value="default">{{ t('sortDefault') }}</option>
-                <option value="name">{{ t('sortName') }}</option>
-                <option value="updated">{{ t('sortUpdated') }}</option>
-                <option value="kind">{{ t('sortKind') }}</option>
-                <option value="source">{{ t('sortSource') }}</option>
-                <option value="product">{{ t('sortProduct') }}</option>
-              </select>
-            </label>
+        <div class="topbar-left">
+          <div class="search-box">
+            <span class="search-icon">⌕</span>
+            <input
+              v-model="store.query"
+              type="search"
+              :placeholder="t('searchPlaceholder')"
+            />
           </div>
+        </div>
-          <div class="toolbar-status">
-            <span class="filter-chip" :class="{ active: store.activeFilterCount }">
-              {{ store.activeFilterCount ? `${store.activeFilterCount} ${t('active')}` : t('noFilters') }}
-            </span>
-            <div v-if="activeFilterChips.length" class="active-chip-row" :title="activeFilterText">
-              <button
-                v-for="chip in activeFilterChips"
-                :key="`${chip.key}:${chip.value}`"
-                class="active-chip"
-                @click="clearFilterChip(chip.key)"
-              >
-                <span>{{ chip.label }}</span>
-                <strong>{{ chip.value }}</strong>
-                <b>×</b>
-              </button>
-            </div>
-            <span v-else class="active-filter">{{ t('searchHint') }}</span>
-            <span v-if="store.reloadState?.lastReloadAt" class="reload-state">
-              {{ t('lastReload') }} {{ new Date(store.reloadState.lastReloadAt).toLocaleTimeString() }}
-            </span>
-          </div>
+        <div class="topbar-right">
+          <button class="btn soft" @click="store.clearFilters">{{ t('clear') }}</button>
+          <button class="btn primary" :disabled="store.reloadState?.scanning" @click="store.reload({ done: t('reloadDone') })">
+            {{ store.reloadState?.scanning ? t('reloading') : t('reload') }}
+          </button>
         </div>
       </header>
-      <div v-if="store.error" class="error">{{ store.error }}</div>
-      <div v-if="store.loading" class="loading">{{ t('loading') }}</div>
+      <!-- CONTENT AREA -->
+      <div class="content-wrapper">
+        <div v-if="store.error" class="error">{{ store.error }}</div>
+        <div v-if="store.loading" class="loading">{{ t('loading') }}</div>
-      <div class="content">
+        <!-- LIST PANEL -->
         <section class="list-panel">
           <div class="list-head">
             <div class="list-view-label">{{ viewModeLabel }}</div>
-            <div class="list-view-controls">
-              <button
-                :class="{ active: viewMode === 'list' }"
-                class="view-btn"
-                @click="viewMode = 'list'"
-                :title="t('list')"
-              >{{ t('list') }}</button>
-              <button
-                :class="{ active: viewMode === 'tree' }"
-                class="view-btn"
-                @click="viewMode = 'tree'"
-                :title="t('category')"
-              >{{ t('category') }}</button>
-              <button
-                :class="{ active: viewMode === 'path-tree' }"
-                class="view-btn"
-                @click="viewMode = 'path-tree'"
-                title="按目录结构"
-              >目录结构</button>
-              <button
-                :class="{ active: viewMode === 'app-tree' }"
-                class="view-btn"
-                @click="viewMode = 'app-tree'"
-                title="按应用分组"
-              >应用分组</button>
-            </div>
             <div>
               <strong>{{ store.filtered.length }}</strong>
               <span>{{ t('items') }}</span>
@@ -346,28 +313,28 @@ function formatBytes(n) {
           <!-- List View -->
           <template v-if="viewMode === 'list'">
-          <button
-            v-for="item in store.filtered"
-            :key="item.id"
-            class="skill-card"
-            :class="{ selected: item.id === store.selectedId }"
-            @click="store.loadDetail(item.id)"
-          >
-            <div class="skill-title">
-              <span class="src" :class="`src-${item.source}`">{{ item.source }}</span>
-              <strong v-html="highlighted(item.name)"></strong>
-            </div>
-            <div class="skill-chipline">
-              <span>{{ item.editor || item.source }}</span>
-              <span>{{ item.kind || '-' }}</span>
-              <span v-if="item.product">{{ item.product }}</span>
-            </div>
-            <div class="skill-meta">
-              <span>{{ item.category || '-' }}</span>
-              <span v-if="item.brand">· {{ item.brand }}</span>
-            </div>
-            <p v-html="highlighted(item.description)"></p>
-          </button>
+            <button
+              v-for="item in store.filtered"
+              :key="item.id"
+              class="skill-card"
+              :class="{ selected: item.id === store.selectedId }"
+              @click="store.loadDetail(item.id)"
+            >
+              <div class="skill-title">
+                <span class="src" :class="`src-${item.source}`">{{ item.source }}</span>
+                <strong v-html="highlighted(item.name)"></strong>
+              </div>
+              <div class="skill-chipline">
+                <span>{{ item.editor || item.source }}</span>
+                <span>{{ item.kind || '-' }}</span>
+                <span v-if="item.product">{{ item.product }}</span>
+              </div>
+              <div class="skill-meta">
+                <span>{{ item.category || '-' }}</span>
+                <span v-if="item.brand">· {{ item.brand }}</span>
+              </div>
+              <p v-html="highlighted(item.description)"></p>
+            </button>
           </template>
           <!-- Tree View (by Source) -->
@@ -379,105 +346,112 @@ function formatBytes(n) {
           <!-- App Tree View -->
           <AppTree v-else-if="viewMode === 'app-tree'" />
         </section>
+      </div>
+    </main>
-        <section class="detail-panel" v-if="store.selected">
-          <div class="detail-head">
-            <div>
-              <div class="detail-kicker">
-                <span class="src" :class="`src-${store.selected.source}`">{{ store.selected.source }}</span>
-                <span>{{ store.selected.editor || store.selected.source }}</span>
-                <span>{{ store.selected.category || t('uncategorized') }}</span>
-              </div>
-              <h2>{{ i18n.skillText(store.selected, 'name') }}</h2>
-              <div class="badge-row">
-                <span
-                  v-for="badge in detailBadges"
-                  :key="badge"
-                  class="badge"
-                  :class="{ danger: badge === t('parseError'), warn: badge === t('redacted') }"
-                >{{ badge }}</span>
-              </div>
-              <p>{{ i18n.skillText(store.selected, 'description') }}</p>
-            </div>
-          </div>
+    <!-- RIGHT DETAIL PANEL - 固定第三栏（不是浮层） -->
+    <aside class="detail-panel-fixed" v-if="store.selected" role="complementary">
+      <!-- CLOSE BUTTON -->
+      <button class="detail-close" @click="store.selectedId = null" title="Close (Esc)">✕</button>
-          <div class="actions">
-            <button @click="store.copySelected('path', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyPath') }}</button>
-            <button @click="store.copySelected('dir', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyDir') }}</button>
-            <button @click="store.copySelected('rel', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyRel') }}</button>
-            <button @click="store.copySelected('prompt', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyPrompt') }}</button>
-            <button @click="store.copySelected('name', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyName') }}</button>
-            <button @click="store.copySelected('raw', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyRaw') }}</button>
-            <button @click="store.openSelected('cursor', { opened: t('opened') })">{{ t('openCursor') }}</button>
-            <button @click="store.openSelected('finder', { opened: t('opened') })">{{ t('reveal') }}</button>
+      <!-- HEADER -->
+      <div class="detail-head">
+        <div>
+          <div class="detail-kicker">
+            <span class="src" :class="`src-${store.selected.source}`">{{ store.selected.source }}</span>
+            <span>{{ store.selected.editor || store.selected.source }}</span>
+            <span>{{ store.selected.category || t('uncategorized') }}</span>
+          </div>
+          <h2>{{ i18n.skillText(store.selected, 'name') }}</h2>
+          <div class="badge-row">
+            <span
+              v-for="badge in detailBadges"
+              :key="badge"
+              class="badge"
+              :class="{ danger: badge === t('parseError'), warn: badge === t('redacted') }"
+            >{{ badge }}</span>
           </div>
+          <p>{{ i18n.skillText(store.selected, 'description') }}</p>
+        </div>
+      </div>
-          <div v-if="store.notice" class="notice">{{ store.notice }}</div>
+      <!-- ACTIONS -->
+      <div class="actions">
+        <button @click="store.copySelected('path', { copied: t('copied'), bytes: t('bytes') })" class="action-btn">💬 {{ t('copyPath') }}</button>
+        <button @click="store.copySelected('dir', { copied: t('copied'), bytes: t('bytes') })" class="action-btn">📂 {{ t('copyDir') }}</button>
+        <button @click="store.copySelected('rel', { copied: t('copied'), bytes: t('bytes') })" class="action-btn">🔗 {{ t('copyRel') }}</button>
+        <button @click="store.copySelected('prompt', { copied: t('copied'), bytes: t('bytes') })" class="action-btn">📋 {{ t('copyPrompt') }}</button>
+        <button @click="store.openSelected('cursor', { opened: t('opened') })" class="action-btn">🎯 {{ t('openCursor') }}</button>
+        <button @click="store.openSelected('finder', { opened: t('opened') })" class="action-btn">🔍 {{ t('reveal') }}</button>
+      </div>
-          <section class="usage-card">
-            <div class="usage-head">
-              <div>
-                <span>{{ t('usage') }}</span>
-                <h3>{{ t('howToUse') }}</h3>
-              </div>
-              <button @click="store.copySelected('prompt', { copied: t('copied'), bytes: t('bytes') })">{{ t('copyPrompt') }}</button>
-            </div>
-            <div class="usage-prompt"><code>{{ usagePrompt }}</code></div>
-            <div class="usage-grid">
-              <div>
-                <strong>{{ t('appliesTo') }}</strong>
-                <p>{{ store.selected.description || '-' }}</p>
-              </div>
-              <div>
-                <strong>{{ t('quickFacts') }}</strong>
-                <p>{{ store.selected.editor || store.selected.source }} · {{ store.selected.kind }}<span v-if="store.selected.product"> · {{ store.selected.product }}</span></p>
-              </div>
-            </div>
-            <div class="usage-block" v-if="store.selected.params?.length">
-              <strong>{{ t('params') }}</strong>
-              <div class="param-table">
-                <div v-for="p in store.selected.params" :key="p.name">
-                  <code>{{ p.name }}</code>
-                  <span>{{ p.type || '-' }}</span>
-                  <b v-if="p.required">{{ t('required') }}</b>
-                  <p>{{ p.description || p.default || '-' }}</p>
-                </div>
-              </div>
-            </div>
-            <div class="usage-block" v-if="store.selected.triggers?.length">
-              <strong>{{ t('triggers') }}</strong>
-              <span class="tag" v-for="tag in store.selected.triggers.slice(0, 12)" :key="tag">{{ tag }}</span>
-            </div>
-            <div class="usage-block" v-if="store.selected.links?.length">
-              <strong>{{ t('links') }}</strong>
-              <a class="usage-link" v-for="link in store.selected.links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer">{{ link.label || link.url }}</a>
-            </div>
-          </section>
+      <div v-if="store.notice" class="notice">{{ store.notice }}</div>
-          <dl class="kv">
+      <!-- SCROLLABLE CONTENT -->
+      <div class="detail-scroll">
+        <!-- USAGE CARD -->
+        <section class="usage-card">
+          <div class="usage-head">
+            <span>{{ t('usage') }}</span>
+            <h3>{{ t('howToUse') }}</h3>
+          </div>
+          <div class="usage-prompt"><code>{{ usagePrompt }}</code></div>
+          <div class="usage-grid">
             <div>
-              <dt>{{ t('path') }}</dt>
-              <dd><code>{{ store.selected.paths?.abs }}</code></dd>
+              <strong>{{ t('appliesTo') }}</strong>
+              <p>{{ store.selected.description || '-' }}</p>
             </div>
-            <div v-for="([label, value]) in detailMeta" :key="label">
-              <dt>{{ label }}</dt>
-              <dd>{{ value }}</dd>
-            </div>
-            <div v-if="store.selected.parseError" class="kv-error">
-              <dt>{{ t('parseError') }}</dt>
-              <dd>{{ store.selected.parseError }}</dd>
+            <div>
+              <strong>{{ t('quickFacts') }}</strong>
+              <p>{{ store.selected.editor || store.selected.source }} · {{ store.selected.kind }}<span v-if="store.selected.product"> · {{ store.selected.product }}</span></p>
             </div>
-            <div v-if="store.selected.triggers?.length">
-              <dt>{{ t('triggers') }}</dt>
-              <dd>
-                <span class="tag" v-for="t in store.selected.triggers.slice(0, 8)" :key="t">{{ t }}</span>
-              </dd>
+          </div>
+          <div class="usage-block" v-if="store.selected.params?.length">
+            <strong>{{ t('params') }}</strong>
+            <div class="param-table">
+              <div v-for="p in store.selected.params" :key="p.name">
+                <code>{{ p.name }}</code>
+                <span>{{ p.type || '-' }}</span>
+                <b v-if="p.required">{{ t('required') }}</b>
+                <p>{{ p.description || p.default || '-' }}</p>
+              </div>
             </div>
-          </dl>
-          <article class="markdown" v-html="detailHtml"></article>
+          </div>
+          <div class="usage-block" v-if="store.selected.triggers?.length">
+            <strong>{{ t('triggers') }}</strong>
+            <span class="tag" v-for="tag in store.selected.triggers.slice(0, 12)" :key="tag">{{ tag }}</span>
+          </div>
+          <div class="usage-block" v-if="store.selected.links?.length">
+            <strong>{{ t('links') }}</strong>
+            <a class="usage-link" v-for="link in store.selected.links" :key="link.url" :href="link.url" target="_blank" rel="noreferrer">{{ link.label || link.url }}</a>
+          </div>
         </section>
+        <!-- METADATA -->
+        <dl class="kv">
+          <div>
+            <dt>{{ t('path') }}</dt>
+            <dd><code>{{ store.selected.paths?.abs }}</code></dd>
+          </div>
+          <div v-for="([label, value]) in detailMeta" :key="label">
+            <dt>{{ label }}</dt>
+            <dd>{{ value }}</dd>
+          </div>
+          <div v-if="store.selected.parseError" class="kv-error">
+            <dt>{{ t('parseError') }}</dt>
+            <dd>{{ store.selected.parseError }}</dd>
+          </div>
+          <div v-if="store.selected.triggers?.length">
+            <dt>{{ t('triggers') }}</dt>
+            <dd>
+              <span class="tag" v-for="trig in store.selected.triggers.slice(0, 8)" :key="trig">{{ trig }}</span>
+            </dd>
+          </div>
+        </dl>
+        <!-- MARKDOWN CONTENT -->
+        <article class="markdown" v-html="detailHtml"></article>
       </div>
-    </main>
+    </aside>
   </div>
 </template>