perf(ui): render sidebar template icons via CSS mask

Author: cossssmin

src/server/ui/App.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, watchEffect } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
-import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCodeCorner, FileCode, FileText, Code, BookText, MailQuestion, Moon, Sun } from '@lucide/vue'
+import { Monitor, CodeXml, Smartphone, ChevronDown, ArrowUp, ArrowDown, CornerDownLeft, Check, Search, FileCode, FileText, Code, BookText, MailQuestion, Moon, Sun } from '@lucide/vue'
 import SidebarClose from '@/components/SidebarClose.vue'
-import Markdown from '@/components/Markdown.vue'
 import logoUrl from '@/logo.svg'
 import logoGradientUrl from '@/logo-gradient.svg'
 import { Kbd } from '@/components/ui/kbd'
@@ -340,7 +339,7 @@ onUnmounted(() => {
                     :is-active="isActive(t.href)"
                   >
                     <RouterLink :to="t.href" class="truncate">
-                      <component :is="t.path.endsWith('.md') ? Markdown : FileCodeCorner" class="size-3 shrink-0 opacity-70" :stroke-width="1" />
+                      <span class="mz-tpl-icon size-4 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
                       <span class="truncate">{{ t.name }}</span>
                     </RouterLink>
                   </SidebarMenuButton>
@@ -507,7 +506,7 @@ onUnmounted(() => {
               :value="t.path"
               @select="onCommandSelect(t.href)"
             >
-              <component :is="t.path.endsWith('.md') ? Markdown : FileCodeCorner" class="size-3 shrink-0 opacity-70" :stroke-width="1" />
+              <span class="mz-tpl-icon size-3 shrink-0 opacity-70" :class="t.path.endsWith('.md') ? 'mz-tpl-icon-md' : 'mz-tpl-icon-vue'" />
               <span>{{ getFileName(t.path) }}</span>
               <span class="sr-only">{{ ' ' + t.path.split('/').join(' ') }}</span>
             </CommandItem>

src/server/ui/components/Markdown.vue

@@ -127,3 +127,28 @@
   border-left: 2px solid #f59e0b;
   min-width: fit-content;
 }
+
+/**
+ * Template list icons, painted as a CSS mask so the sidebar can render
+ * thousands of rows without a Vue component or inline <svg> per row. Each
+ * icon SVG is decoded once and reused; background-color: currentColor keeps
+ * the currentColor theming the old <svg> icons had.
+ */
+.mz-tpl-icon {
+  display: inline-block;
+  background-color: currentColor;
+  -webkit-mask-position: center;
+          mask-position: center;
+  -webkit-mask-size: contain;
+          mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+}
+.mz-tpl-icon-vue {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='m5 16-3 3 3 3'/%3E%3Cpath d='m9 22 3-3-3-3'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.15V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.706.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2h-3.35'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='m5 16-3 3 3 3'/%3E%3Cpath d='m9 22 3-3-3-3'/%3E%3C/svg%3E");
+}
+.mz-tpl-icon-md {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M3 22V14l4 4 4-4v8'/%3E%3C/svg%3E");
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22h6a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v6'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M3 22V14l4 4 4-4v8'/%3E%3C/svg%3E");
+}