changes

app/components/media/FileActions.vue

@@ -1,5 +1,5 @@
 <script setup>
-const { $buildFileUrl, $copyToClipboard, $getEditRights } = useNuxtApp();
+const { $buildFileUrl, $copyToClipboard } = useNuxtApp();
 
 const props = defineProps({
   className: String,
@@ -12,24 +12,29 @@ const props = defineProps({
 const url = $buildFileUrl(props.image.file__file);
 </script>
 <template>
-  <div :class="['buttons is-gap-1', className]">
+  <div :class="['buttons has-addons', className]">
     <button
       class="button is-small is-white"
       @click="$copyToClipboard(url)"
       title="Sao chép link"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:content-copy-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="editImage(image)"
       title="Sửa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'edit.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:edit-outline-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
@@ -38,17 +43,23 @@ const url = $buildFileUrl(props.image.file__file);
       title="Tải xuống"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'download.svg', type: 'success', size: 18 }" />
+        <Icon
+          name="material-symbols:download-rounded"
+          :size="18"
+        />
       </span>
     </button>
     <button
-      v-if="$getEditRights()"
       class="button is-small is-white"
       @click="openDeleteImageConfirm(image)"
       title="Xóa"
     >
       <span class="icon">
-        <SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
+        <Icon
+          name="material-symbols:delete-outline-rounded"
+          :size="18"
+          class="has-text-danger"
+        />
       </span>
     </button>
   </div>