feat: enhance Project Landing Page UI/UX and Management Features (for project v2)

apps/web/src/common/components/buttons/ActionMenuButton.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onClickOutside } from '@vueuse/core';
-import { ref, computed } from 'vue';
+import { ref, computed, toRef } from 'vue';
 
 import { PIconButton, PContextMenu, useContextMenuStyle } from '@cloudforet/mirinae';
+import type { IconButtonSize, IconButtonStyleType } from '@cloudforet/mirinae/types/controls/buttons/icon-button/type';
+import type { ContextMenuPosition } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import { i18n } from '@/translations';
 
@@ -12,12 +14,14 @@ import type { ActionMenuItem } from './type';
 type SupportMenu = 'edit' | 'delete';
 const props = withDefaults(defineProps<{
     menu?: Array<SupportMenu|ActionMenuItem>;
-    styleType?: string;
-    size?: string;
+    styleType?: IconButtonStyleType;
+    size?: IconButtonSize;
+    position?: ContextMenuPosition;
 }>(), {
     menu: undefined,
     styleType: 'transparent',
     size: 'md',
+    position: 'right',
 });
 const emit = defineEmits<{(event: 'edit'): void;
     (event: 'delete'): void;
@@ -33,7 +37,7 @@ useContextMenuStyle({
     menuRef,
     visibleMenu,
     useFixedMenuStyle: true,
-    position: 'right',
+    position: toRef(props, 'position'),
     menuWidth: props.size === 'sm' ? '113px' : '192px',
 });
 const menuMap = computed<Record<SupportMenu, ActionMenuItem>>(() => ({

apps/web/src/common/modules/navigations/new-lsb/LSBDivider.vue

@@ -3,7 +3,7 @@ import { PDivider } from '@cloudforet/mirinae';
 </script>
 
 <template>
-    <div class="pt-1 pb-3 px-2 my-2">
+    <div class="pt-2 pb-2">
         <p-divider />
     </div>
 </template>

apps/web/src/common/modules/navigations/new-lsb/LSBItem.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PTreeNode } from '@cloudforet/mirinae';
+
+import BetaMark from '@/common/components/marks/BetaMark.vue';
+import NewMark from '@/common/components/marks/NewMark.vue';
+import UpdateMark from '@/common/components/marks/UpdateMark.vue';
+import FavoriteButton from '@/common/modules/favorites/favorite-button/FavoriteButton.vue';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = withDefaults(defineProps<LSBItemProps>(), {
+    icon: undefined,
+    displayType: 'list',
+    highlightTag: undefined,
+    favoriteOptions: undefined,
+    favoriteVisibility: 'always',
+});
+
+</script>
+
+<template>
+    <p-tree-node :id="props.id"
+                 :name="props.name"
+                 :icon="props.icon"
+                 :display-type="props.displayType"
+                 selectable
+                 :link="props.link"
+    >
+        <template #outer-left>
+            <slot name="outer-left" />
+        </template>
+        <template #inner-left>
+            <slot name="inner-left" />
+        </template>
+        <template #default>
+            <slot />
+        </template>
+        <template #inner-right>
+            <slot name="inner-right" />
+            <div v-if="props.highlightTag"
+                 class="h-full mt-[-0.25rem]"
+            >
+                <new-mark v-if="props.highlightTag === 'new'" />
+                <update-mark v-else-if="props.highlightTag === 'update'" />
+                <beta-mark v-else-if="props.highlightTag === 'beta'" />
+            </div>
+        </template>
+        <template #outer-right>
+            <slot name="outer-right" />
+        </template>
+        <template #action="{isHovered}">
+            <favorite-button v-if="props.favoriteVisibility !== 'none'"
+                             v-show="props.favoriteVisibility === 'hovered-only' ? isHovered : true"
+                             :item-id="props.favoriteOptions?.id ?? props.id"
+                             :favorite-type="props.favoriteOptions?.type ?? FAVORITE_TYPE.MENU"
+                             :visible-active-case-only="props.favoriteVisibility === 'active-only'"
+                             scale="0.8"
+            />
+        </template>
+    </p-tree-node>
+</template>
+

apps/web/src/common/modules/navigations/new-lsb/LSBStarredTree.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { PTreeNode, PEmpty } from '@cloudforet/mirinae';
+
+import LSBItem from '@/common/modules/navigations/new-lsb/LSBItem.vue';
+import type { LSBItemProps } from '@/common/modules/navigations/new-lsb/type';
+
+const props = defineProps<{
+    expanded?: boolean;
+    items: LSBItemProps[];
+}>();
+</script>
+
+<template>
+    <p-tree-node id="starred"
+                 icon="ic_multi-favorite"
+                 display-type="tree"
+                 :expanded="props.expanded"
+                 has-children
+    >
+        <template v-for="(_, slot) of $scopedSlots"
+                  #[slot]="scope"
+        >
+            <slot :name="slot"
+                  v-bind="scope"
+            />
+        </template>
+        <span class="font-bold">{{ $t('COMMON.STARRED') }}</span>
+        <template #children>
+            <div v-if="props.items.length > 0"
+                 class="max-h-[21rem] overflow-x-auto"
+            >
+                <l-s-b-item v-for="item in props.items"
+                            :id="item.id"
+                            :key="item.id"
+                            :name="item.name"
+                            display-type="tree"
+                            :icon="item.icon"
+                            :link="item.link"
+                            :favorite-options="item.favoriteOptions"
+                            favorite-visibility="hovered-only"
+                />
+            </div>
+            <p-empty v-else>
+                {{ $t('COMMON.STARRED_NO_DATA') }}
+            </p-empty>
+        </template>
+    </p-tree-node>
+</template>