feat(desktop): implement phase 2 native capabilities

frontend/src/components/ThreadList.vue

@@ -45,6 +45,9 @@
 </template>
 
 <script setup lang="ts">
+import { onBeforeUnmount, reactive, watch } from "vue";
+import { downloadAttachment } from "../api/attachments";
+import { saveFile } from "../runtime";
 import { displayDateTime, displayUser } from "../utils/display";
 import { TEXT } from "../locales";
 
@@ -68,13 +71,37 @@ const quoteContent = (item: any) =>
 const contentText = (item: any) =>
   item?.is_deleted ? TEXT.modules.knowledgeMedicalConsult.quoteDeleted : item?.content || TEXT.common.fallback;
 
-const attachmentUrl = (id: string) => {
-  const token = localStorage.getItem("ctms_token");
-  return token ? `/api/v1/attachments/${id}/download?token=${token}` : `/api/v1/attachments/${id}/download`;
+const attachmentObjectUrls = reactive<Record<string, string>>({});
+const attachmentUrl = (id: string) => attachmentObjectUrls[id] || "";
+
+const revokeAttachmentUrls = () => {
+  Object.values(attachmentObjectUrls).forEach((url) => URL.revokeObjectURL(url));
+  Object.keys(attachmentObjectUrls).forEach((key) => delete attachmentObjectUrls[key]);
 };
 
-const download = (id: string) => {
-  window.open(attachmentUrl(id), "_blank");
+const loadImageUrls = async () => {
+  revokeAttachmentUrls();
+  const files = Object.values(props.attachmentsMap).flat().filter(isImage);
+  await Promise.all(files.map(async (file) => {
+    try {
+      const response = await downloadAttachment(file.id);
+      attachmentObjectUrls[file.id] = URL.createObjectURL(
+        new Blob([response.data], { type: response.headers?.["content-type"] || file.content_type }),
+      );
+    } catch {
+      attachmentObjectUrls[file.id] = "";
+    }
+  }));
+};
+
+const download = async (id: string) => {
+  const file = Object.values(props.attachmentsMap).flat().find((item) => item.id === id);
+  const response = await downloadAttachment(id);
+  await saveFile({
+    suggestedName: file?.filename || "attachment",
+    mimeType: response.headers?.["content-type"] || file?.content_type,
+    data: response.data,
+  });
 };
 
 const isImage = (file: any) => {
@@ -88,6 +115,9 @@ const isHighlighted = (item: any) => {
   if (!props.highlightIds?.length) return false;
   return props.highlightIds.includes(item?.id);
 };
+
+watch(() => props.attachmentsMap, () => void loadImageUrls(), { deep: true, immediate: true });
+onBeforeUnmount(revokeAttachmentUrls);
 </script>
 
 <style scoped>