feat: right side panel favorites, no selection state, and more...

src/assets/css/style.css

@@ -1 +1,21 @@
-@import '@comfyorg/design-system/css/style.css';
+@import '@comfyorg/design-system/css/style.css';
+
+/* List transition animations */
+.list-scale-move,
+.list-scale-enter-active,
+.list-scale-leave-active {
+  transition-property: opacity, transform;
+  transition-duration: 150ms;
+  transition-timing-function: ease;
+}
+
+.list-scale-enter-from,
+.list-scale-leave-to {
+  opacity: 0;
+  transform: scale(70%);
+}
+
+.list-scale-leave-active {
+  position: absolute;
+  width: 100%;
+}

src/components/button/MoreButton.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="relative inline-flex items-center">
-    <Button size="icon" variant="secondary" @click="popover?.toggle">
+    <Button
+      size="icon"
+      variant="secondary"
+      :class="buttonClass"
+      @click="popover?.toggle"
+    >
       <i
         :class="
           cn(
@@ -56,15 +61,17 @@
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { ref } from 'vue'
+import type { HTMLAttributes } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 interface MoreButtonProps {
   isVertical?: boolean
+  buttonClass?: HTMLAttributes['class']
 }
 
-const { isVertical = false } = defineProps<MoreButtonProps>()
+const { isVertical = false, buttonClass } = defineProps<MoreButtonProps>()
 
 defineEmits<{
   menuOpened: []