fix: improve outline actions with kebab menu and popover

Author: onmax

packages/nimiq-icons/src/flags/icons.json

@@ -1268,7 +1268,7 @@
 			"body": "<mask id=\"nimiq-flags-zw-hexagon-pbk987\" width=\"32\" height=\"28\" x=\"0\" y=\"2\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\"><path fill=\"#fff\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></mask><g fill=\"none\"><g mask=\"url(#nimiq-flags-zw-hexagon-pbk987)\"><path fill=\"#6DA544\" d=\"M1.962 0H32v32H1.962z\"/><path fill=\"#FFDA44\" d=\"M3.613 4.581H32v4.582l-4.069 6.875 4.07 6.875v4.58H3.612z\"/><path fill=\"#D80027\" d=\"M8.25 9.162H32v4.582l-1.687 2.25L32 18.325v4.581H8.25z\"/><path fill=\"#EEE\" d=\"M0 0v32l17.488-16z\"/><path fill=\"#D80027\" d=\"m6.437 11.825 1.032 3.188h3.35l-2.713 1.975 1.038 3.187-2.713-1.969-2.712 1.969 1.037-3.187-2.712-1.976h3.35z\"/><path fill=\"#FFDA44\" d=\"m9.281 16.263-2.7-.957-.212-1.937a1.044 1.044 0 10-2.032.475l-.75.756h1.344c0 1.4-1.044 1.4-1.044 2.794l.575 1.387h3.482l.58-1.387q.086-.198.107-.413c.5-.2.65-.719.65-.719\"/><path fill=\"#333\" d=\"m1.963 0 13.75 13.75H32v4.575H15.638L1.962 32H0l16-16L0 0z\"/><path fill=\"url(#nimiq-flags-zw-hexagon-pbk987)\" d=\"M31.15 14.71 24.707 3.54a2.58 2.58 0 00-2.234-1.29H9.582c-.92 0-1.77.49-2.23 1.29L.907 14.71c-.46.8-.46 1.78 0 2.58l6.445 11.17c.46.8 1.31 1.29 2.23 1.29h12.89c.92 0 1.77-.49 2.23-1.29l6.445-11.17c.464-.8.464-1.78.004-2.58\"/></g><defs><radialGradient id=\"nimiq-flags-zw-hexagon-pbk987\" cx=\"0\" cy=\"0\" r=\"1\" gradientTransform=\"matrix(30.943 0 0 30.9452 23.829 29.395)\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#1D1D1B\" stop-opacity=\".3\"/><stop offset=\"1\" stop-color=\"#E9B213\" stop-opacity=\"0\"/></radialGradient></defs></g>"
 		}
 	},
-	"lastModified": 1759217871,
+	"lastModified": 1759218657,
 	"width": 32,
 	"height": 32
 }

packages/nimiq-icons/src/flags/info.json

@@ -2,7 +2,7 @@
 	"prefix": "nimiq-flags",
 	"name": "nimiq-flags",
 	"total": 422,
-	"version": "1.0.0-beta.100",
+	"version": "1.0.0-beta.102",
 	"author": {
 		"name": "onmax",
 		"url": "https://github.com/onmax"

packages/nimiq-icons/src/flags/package.json

@@ -2,7 +2,7 @@
 	"name": "nimiq-flags",
 	"description": "The Nimiq Flags as an iconify icon set.",
 	"version": "1.0.0-beta.102",
-	"iconSetVersion": "1.0.0-beta.100",
+	"iconSetVersion": "1.0.0-beta.102",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",

packages/nimiq-icons/src/icons/icons.json

@@ -1586,7 +1586,7 @@
 			"hidden": true
 		}
 	},
-	"lastModified": 1759217871,
+	"lastModified": 1759218657,
 	"width": 12,
 	"height": 12
 }

packages/nimiq-icons/src/icons/info.json

@@ -2,7 +2,7 @@
 	"prefix": "nimiq",
 	"name": "nimiq-icons",
 	"total": 84,
-	"version": "1.0.0-beta.100",
+	"version": "1.0.0-beta.102",
 	"author": {
 		"name": "onmax",
 		"url": "https://github.com/onmax"

packages/nimiq-icons/src/icons/package.json

@@ -2,7 +2,7 @@
 	"name": "nimiq-icons",
 	"description": "The Nimiq Icons as an iconify icon set.",
 	"version": "1.0.0-beta.102",
-	"iconSetVersion": "1.0.0-beta.100",
+	"iconSetVersion": "1.0.0-beta.102",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",

packages/nimiq-vitepress-theme/src/layout/OutlineActions.vue

@@ -10,7 +10,6 @@ const {
   copyMarkdownLink,
   chatGPTUrl,
   claudeUrl,
-  viewAsMarkdown,
   copyOptionsConfig,
   showCopyMarkdown,
 } = useSourceCode()
@@ -50,7 +49,13 @@ const dropdownOptions = computed(() => {
     options.push({
       icon: 'i-tabler:eye',
       label: 'View as markdown',
-      onClick: viewAsMarkdown,
+      onClick: () => {
+        if (typeof window !== 'undefined') {
+          const currentPath = window.location.pathname
+          const markdownPath = currentPath.replace(/\.html$/, '.md').replace(/\/$/, '/index.md')
+          window.open(markdownPath, '_blank', 'noopener,noreferrer')
+        }
+      },
     })
   }
 
@@ -68,7 +73,7 @@ const dropdownOptions = computed(() => {
 
   if (copyOptionsConfig.value.claude) {
     options.push({
-      icon: 'i-tabler:sparkles',
+      icon: 'i-tabler:brand-openai',
       label: 'Open in Claude',
       onClick: () => {
         if (typeof window !== 'undefined') {
@@ -97,58 +102,78 @@ function toggleExpanded() {
         v-for="(action, index) in allActions"
         :key="index"
         flex="~ items-center justify-between"
-        p-4
-        cursor-pointer
-        hover:bg-neutral-100
-        rounded-6
-        transition-colors
-        @click="action.onClick"
+        relative
       >
-        <div flex="~ items-center gap-8" f-text-xs text-neutral-800>
-          <div :class="action.icon" />
-          <span>{{ action.label }}</span>
-        </div>
-
-        <button
-          v-if="index === 0 && hasDropdown"
-          type="button"
+        <div
+          flex="~ items-center gap-8"
+          flex-1
           p-4
-          hover:bg-neutral-200
-          rounded-4
+          cursor-pointer
+          hover:bg-neutral-100
+          rounded-6
           transition-colors
-          @click.stop="toggleExpanded"
+          f-text-xs
+          text-neutral-800
+          @click="action.onClick"
         >
-          <div :class="isExpanded ? 'i-tabler:chevron-up' : 'i-tabler:chevron-down'" />
-        </button>
-      </div>
+          <div :class="action.icon" />
+          <span>{{ action.label }}</span>
+        </div>
 
-      <Transition
-        enter-active-class="transition-all duration-200"
-        enter-from-class="opacity-0 -translate-y-8"
-        enter-to-class="opacity-100 translate-y-0"
-        leave-active-class="transition-all duration-200"
-        leave-from-class="opacity-100 translate-y-0"
-        leave-to-class="opacity-0 -translate-y-8"
-      >
-        <div v-if="isExpanded && hasDropdown" flex="~ col gap-4" pl-16>
-          <div
-            v-for="(option, idx) in dropdownOptions"
-            :key="idx"
-            flex="~ items-center gap-8"
-            p-4
-            cursor-pointer
+        <div v-if="index === 0 && hasDropdown" relative>
+          <button
+            type="button"
+            p-6
             hover:bg-neutral-100
             rounded-6
             transition-colors
-            f-text-xs
-            text-neutral-700
-            @click="option.onClick"
+            @click.stop="toggleExpanded"
           >
-            <div :class="option.icon" />
-            <span>{{ option.label }}</span>
-          </div>
+            <div i-tabler:dots />
+          </button>
+
+          <Transition
+            enter-active-class="transition-all duration-200"
+            enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100"
+            leave-active-class="transition-all duration-150"
+            leave-from-class="opacity-100 scale-100"
+            leave-to-class="opacity-0 scale-95"
+          >
+            <div
+              v-if="isExpanded"
+              absolute
+              right-0
+              top="[calc(100%+4px)]"
+              min-w-200
+              bg-white
+              rounded-8
+              shadow-lg
+              border="1 neutral-200"
+              z-50
+              py-4
+              @click="isExpanded = false"
+            >
+              <div
+                v-for="(option, idx) in dropdownOptions"
+                :key="idx"
+                flex="~ items-center gap-8"
+                px-12
+                py-8
+                cursor-pointer
+                hover:bg-neutral-100
+                transition-colors
+                f-text-xs
+                text-neutral-700
+                @click="option.onClick"
+              >
+                <div :class="option.icon" />
+                <span>{{ option.label }}</span>
+              </div>
+            </div>
+          </Transition>
         </div>
-      </Transition>
+      </div>
     </div>
   </div>
 </template>