fix raw_url link to file not updating, tweak styles

src/js/classes/storage.js

@@ -318,7 +318,7 @@ export const StorageJs = (type = 'gist') => {
         }).then(result=> result.json()).then(response => {
           this.setLastStorageHost('GIST');
           const file = response.files && fileName in response.files ? response.files[fileName] : undefined; 
-          return { response, file, gistId: this.gistId };
+          return { response, file, gistId: this.gistId, ok: response.ok || file.raw_url };
         });
       },
       editGistFile: function(fileName, content) {

src/public/plugins/resources-editor.js

@@ -13,7 +13,7 @@ export var ResourcesEditor = function({
   const self = this;
   this.name = 'ResourcesEditor';
   this.selectedResourcesJson = 'resources.json';
-  this.resourcesFileUrl = '';
+  this.resourcesFileUrl = '';// todo this should be written in the file itself instead. It doesnt persist between reloads atm
   this.resourcesFileContent = '';
   const dbStorage = app.data.db;
   this.getVloatileResource = () => dbStorage.getDbValue(`volatileResources-${this.selectedResourcesJson}`);
@@ -119,14 +119,16 @@ export var ResourcesEditor = function({
 
   this.onCommitResourceFiles = newContent => {
     this.isBusy('Uploading changes to gist...');
-    app.data.storage.editGistFile('resources.json', newContent).then(({response, gistId}) => {
-      if(response.ok){
+    app.data.storage.editGistFile('resources.json', newContent).then(({ok, gistId, file}) => {
+      if(ok){
         ToastWc.show({
           type: 'info',
           content: 'Saved resources on gist',
           time: 1000,
         });
+        this.resourcesFileUrl = file.raw_url;
         document.querySelector('resources-component').setIsNew(false);
+        document.querySelector('resources-component').updateRawUrl(file.raw_url);
       } else {
         ToastWc.show({
           type: 'error',
@@ -185,6 +187,7 @@ export var ResourcesEditor = function({
                 time: 3000,
               });
               this.isBusy('');
+              document.querySelector('resources-component').updateRawUrl(resolve.raw_url);
             }).catch(() => {
               ToastWc.show({
                 type: 'error',
@@ -208,9 +211,10 @@ export var ResourcesEditor = function({
           })
         }
         this.initResourcesFile().then(file => {
+            this.resourcesFileUrl = file.raw_url;
             ToastWc.show({
                 type: 'success',
-                content: `Editing resources.json at\n${file.raw_url}`,
+                content: `Editing resources.json at\n${file.raw_url || '---'}`,
                 time: 2000,
                 onClick: ()=> window.open(file.raw_url, "_blank")
             });
@@ -229,10 +233,6 @@ export var ResourcesEditor = function({
           });
           this.isBusy('');
           this.initResourcesFile(true).then(this.initResourcesComponent);
-          // this.setVolatileResource({
-          //   filename:'resources.json',
-          //   content: '', // todo not having raw_url can be used to detect if new file
-          // });
         });
       },
       preConfirm: () => {

src/public/web-components.js

@@ -246,11 +246,10 @@ class ResourcesComponent extends HTMLElement {
       <div id="resources-editor" style="display:flex;flex-direction:column;width: 100%;height:100%; overflow: hidden;">
         <div class="flex-wrap" style="gap: 10px;padding-bottom:2px;">
           <slot name="header-area"></slot>
-          <a id="resourcesFileLink" href="${this.resourcesFileUrl}" target="_blank" rel="noopener noreferrer">resources.json</a>
+          <a id="resourcesFileLink" href="${this.resourcesFileUrl}" target="_blank" rel="noopener noreferrer">resources.json</a><span id="isNewFile"></span>
           <label for="resources-editor-select" id="resource-list-label">...</label> 
           from <a href="${this.gistId}" id="gistIdFileLink" target="_blank" rel="noopener noreferrer">Gist</a>
-          <div id="header-buttons"  class="flex-wrap" style="flex:1;gap: 10px;"></div>
-          <div id="isNewFile"></div>
+          <div id="header-buttons" class="flex-wrap" style="flex:1;gap: 10px;justify-content: end;"></div>
         </div>
         
 
@@ -300,7 +299,9 @@ class ResourcesComponent extends HTMLElement {
       this.selectedResources = Object.values(evt.target.selectedOptions).map(
         (item, index) => ({id:item.id, index, src: item.dataset.src})
       );
-      shadowRoot.getElementById('selected-resource-preview').innerHTML = this.selectedResources.map(resource => {
+      shadowRoot.getElementById('selected-resource-preview').innerHTML = this.selectedResources.map((resource, index) => {
+        if(index > 100) return;// we need some hard limit from preventing potential crash
+
         const selectedItem = resource.src;
         if (selectedItem.startsWith('data:image')) {
           return `
@@ -405,12 +406,16 @@ class ResourcesComponent extends HTMLElement {
     shadowRoot
       .getElementById('onRemoveButton')
       .addEventListener('click', this.onRemoveResource);
+    this.updateRawUrl = (newUrl) => {
+      shadowRoot.getElementById('resourcesFileLink').href = newUrl || 'unknown';
+    }
   }
+
   init({ file, darkMode, headerButtons, gistId }) {//todo you cannot pass functions to web components, but can use events?
     console.log({ file, darkMode, headerButtons, gistId })
     this.resourcesFileContent = file.content || '{}';
     const shadowRoot = document.querySelector('resources-component').shadowRoot;
-    shadowRoot.getElementById('resourcesFileLink').href = file.raw_url;
+    this.updateRawUrl(file.raw_url);
     shadowRoot.getElementById('gistIdFileLink').href = gistId || '';
     if (darkMode) shadowRoot.getElementById('resources-editor').setAttribute("data-theme", "dark");
     this.updateResourcesList(this.resourcesFileContent, !file.raw_url);