feat: dashboard chain summary

src/components/ChainSummary.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { getLogo, useDashboard, } from '@/stores/useDashboard';
 import { computed } from 'vue';
+import { Icon } from '@iconify/vue'
 
 const props = defineProps({
   name: {
@@ -14,33 +15,18 @@ const conf = computed(() => dashboardStore.chains[props.name] || {})
 
 </script>
 <template>
-  <VCard outlined class="p-1">
-    <VList class="card-list">
-      <VListItem :to="`/${name}`">
-        <template #prepend>
-          <VAvatar rounded size="45" variant="tonal" class="me-3">
-            <VImg :src="conf.logo" height="22" />
-          </VAvatar>
-        </template>
-
-        <VListItemTitle class="font-weight-semibold text-sm mb-1">
-          {{ conf?.prettyName || props.name }}
-        </VListItemTitle>
-
-        <VListItemSubtitle class="text-xs">
-          {{ conf?.chainId || '' }}
-        </VListItemSubtitle>
-
-        <template #append>
-          <VListItemAction @click="(e: Event) => { e.stopPropagation() }">
-            <VCheckbox v-model="dashboardStore.favorite" true-icon="mdi-star" false-icon="mdi-star" color="warning"
-              :value="props.name" />
-            <VTooltip activator="parent" location="top">
-              {{ $t('index.add_to_favorite') }}
-            </VTooltip>
-          </VListItemAction>
-        </template>
-      </VListItem>
-    </VList>
-  </VCard>
+  <RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
+    <div class="w-8 h-8 rounded-full overflow-hidden">
+      <img :src="conf.logo" />
+    </div>
+    <div class="font-semibold ml-4 text-base flex-1">
+      {{ conf?.prettyName || props.name }}
+    </div>
+    <div
+      @click="(e: Event) => { e.stopPropagation(); e.preventDefault(); dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name] }"
+      class="pl-4 text-xl"
+      :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
+      <Icon icon="mdi-star" />
+    </div>
+  </RouterLink>
 </template>