Component: The Rest of the PrimeVue buttons (#7649)

## Summary

Automated initial change, cleaned up manually.

Please check the screenshot changes.

Includes a11y updates to icon buttons.

Doesn't hit the buttons in Desktop.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7649-WIP-Component-The-Rest-of-the-PrimeVue-buttons-2ce6d73d365081d68e06f200f1321267)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue

@@ -18,42 +18,49 @@
         #actions
       >
         <Button
-          size="small"
-          icon="pi pi-trash"
-          text
-          severity="danger"
+          variant="destructive"
+          size="icon-sm"
+          :aria-label="$t('g.delete')"
           @click.stop="deleteBlueprint"
         >
+          <i class="icon-[lucide--trash-2] size-3.5" />
         </Button>
         <Button
-          size="small"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('g.edit')"
           @click.stop="editBlueprint"
         >
-          <template #icon>
-            <i class="icon-[lucide--square-pen]" />
-          </template>
+          <i class="icon-[lucide--square-pen] size-3.5" />
         </Button>
       </template>
       <template v-else #actions>
         <Button
           class="bookmark-button"
-          size="small"
-          :icon="isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark'"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('icon.bookmark')"
           @click.stop="toggleBookmark"
-        />
+        >
+          <i
+            :class="
+              cn(
+                isBookmarked ? 'pi pi-bookmark-fill' : 'pi pi-bookmark',
+                'size-3.5'
+              )
+            "
+          />
+        </Button>
         <Button
           v-tooltip.bottom="$t('g.learnMore')"
           class="help-button"
-          size="small"
-          icon="pi pi-question"
-          text
-          severity="secondary"
+          variant="muted-textonly"
+          size="icon-sm"
+          :aria-label="$t('g.learnMore')"
           @click.stop="props.openNodeHelp(nodeDef)"
-        />
+        >
+          <i class="pi pi-question size-3.5" />
+        </Button>
       </template>
     </TreeExplorerTreeNode>
 
@@ -67,7 +74,6 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem } from 'primevue/menuitem'
 import Tag from 'primevue/tag'
@@ -77,11 +83,13 @@ import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import NodePreview from '@/components/node/NodePreview.vue'
+import Button from '@/components/ui/button/Button.vue'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
 import { useSubgraphStore } from '@/stores/subgraphStore'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { cn } from '@/utils/tailwindUtil'
 
 const { t } = useI18n()