feat: :sparkles: exibir titulo inteiro ao abrir notificacao e adicionar fallback de imagem

src/components/NotificationDetailDialog.vue

@@ -2,7 +2,7 @@
   <q-dialog ref="dialogRef" @hide="onDialogHide">
     <q-card class="notif-detail-card">
       <q-card-section class="row items-center q-pb-none">
-        <div class="text-h6 text-violet-normal ellipsis" style="max-width: calc(100% - 48px)">
+        <div class="text-h6 text-violet-normal notif-detail-card__title" style="max-width: calc(100% - 48px)">
           {{ item.notification?.title }}
         </div>
         <q-space />
@@ -12,8 +12,8 @@
       <q-separator class="q-mt-sm" />
 
       <q-card-section class="q-pt-md notif-detail-card__scroll">
-        <div v-if="imageUrl" class="notif-detail-card__image q-mb-md">
-          <img :src="imageUrl" alt="" class="notif-detail-card__img" />
+        <div v-if="imageUrl && !imageError" class="notif-detail-card__image q-mb-md">
+          <img :src="imageUrl" alt="" class="notif-detail-card__img" @error="imageError = true" />
         </div>
 
         <div class="text-body2 text-grey-8 notif-detail-card__message">
@@ -60,13 +60,14 @@ const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
 const { t } = useI18n();
 const store = userStore();
 const markedReadId = ref(null);
+const imageError = ref(false);
 
 const imageUrl = computed(() => {
-  const media = props.item.notification?.media?.[0]?.url;
-  if (media) return media;
   const direct = props.item.notification?.image_url;
   if (!direct) return null;
-  return direct.startsWith("http") ? direct : (process.env.API_URL ?? "") + direct;
+  if (direct.startsWith("http")) return direct;
+  const base = (process.env.API_URL ?? "").replace(/\/$/, "");
+  return `${base}/${direct.replace(/^\//, "")}`;
 });
 
 const formatDate = (dateStr) => {
@@ -111,6 +112,11 @@ onMounted(async () => {
     overflow-y: auto;
   }
 
+  &__title {
+    white-space: normal;
+    word-break: break-word;
+  }
+
   &__image {
     width: 100%;
     border-radius: 8px;

src/components/UnreadNotificationsDialog.vue

@@ -35,10 +35,11 @@
             >
               <div class="notif-card__image">
                 <img
-                  v-if="imageUrl(item)"
+                  v-if="imageUrl(item) && !imageErrors.has(item.id)"
                   :src="imageUrl(item)"
                   alt=""
                   class="notif-card__img"
+                  @error="onImageError(item)"
                 />
                 <div v-else class="notif-card__placeholder flex flex-center">
                   <q-icon
@@ -128,6 +129,7 @@ const store = userStore();
 
 const loading = ref(false);
 const notifications = ref([]);
+const imageErrors = ref(new Set());
 
 const localUnreadCount = computed(() => notifications.value.filter((n) => !n.read).length);
 
@@ -147,11 +149,15 @@ const fetchUnread = async () => {
 };
 
 const imageUrl = (item) => {
-  const media = item.notification?.media?.[0]?.url;
-  if (media) return media;
   const direct = item.notification?.image_url;
   if (!direct) return null;
-  return direct.startsWith("http") ? direct : process.env.API_URL + direct;
+  if (direct.startsWith("http")) return direct;
+  const base = (process.env.API_URL ?? "").replace(/\/$/, "");
+  return `${base}/${direct.replace(/^\//, "")}`;
+};
+
+const onImageError = (item) => {
+  imageErrors.value = new Set(imageErrors.value).add(item.id);
 };
 
 const formatDate = (dateStr) => {