feat(client): improve ui of assets page (#189)

Author: alexzhang1030

packages/client/src/assets/styles/main.css

@@ -152,3 +152,15 @@ body::-webkit-scrollbar {
   /* Support Firefox */
   scrollbar-width: none;
 }
+
+/* Shikiji */
+/* refer: https://shikiji.netlify.app/guide/dual-themes#class-based-dark-mode */
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: var(--shiki-dark-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}

packages/client/src/components/assets/AssetDetails.vue

@@ -159,7 +159,7 @@ const supportsPreview = computed(() => {
                 icon="i-carbon-copy"
                 action mr1 mt--2px flex-none
                 :border="false"
-                @click="copy(asset.publicPath, { silent: false, type: 'assets-public-path' })"
+                @click="copy(asset.publicPath, { type: 'assets-public-path' })"
               />
               <RouterLink
                 :to="asset.publicPath"

packages/client/src/components/assets/FilepathItem.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { VTooltip as vTooltip } from '@vue/devtools-ui'
+
 const props = defineProps<{
   filepath: string
   lineBreak?: boolean
@@ -7,13 +9,15 @@ const props = defineProps<{
 
 const parsed = computed(() => ({ path: props.filepath }),
 )
+
+const { copy } = useCopy()
 </script>
 
 <template>
   <button
-    font-mono hover:underline
+    v-tooltip="'Copy file path'" font-mono hover:underline
     :class="lineBreak ? '' : 'ws-nowrap of-hidden truncate'"
-    :title="filepath"
+    :title="filepath" @click="copy(filepath)"
   >
     {{ parsed.path }}
   </button>