Update src/templates/dashboard/chart_browser.html

src/templates/dashboard/chart_browser.html

@@ -20,8 +20,9 @@
     <section class="card cb-connect">
         <h2 class="cb-connect-title">Connect Google Drive</h2>
         <p class="cb-muted">
-            The Browser needs <strong>read-only</strong> access to list your folders and show the images inside them.
-            It never edits, moves or deletes anything in your Drive. This is separate from the Trading Journal connection.
+            The Browser needs access to your Drive to list your folders, show the images inside them, and let you
+            <strong>upload</strong> new charts or <strong>delete</strong> ones you no longer need (deleted images go to your Drive trash).
+            It only changes anything when you press Upload or Delete. This is separate from the Trading Journal connection.
         </p>
         <a href="{{ url_for('chart_browser.connect') }}" class="cb-btn cb-btn-primary cb-btn-block">CONNECT GOOGLE DRIVE</a>
     </section>
@@ -61,6 +62,11 @@
             </div>
         </div>
 
+        <div class="cb-banner" id="cb-write-banner" hidden>
+            <span>Reconnect Google Drive to enable upload &amp; delete.</span>
+            <a href="{{ url_for('chart_browser.connect') }}" class="cb-btn cb-btn-primary">RECONNECT</a>
+        </div>
+
         <div class="cb-stage" id="cb-stage" tabindex="0">
             <div class="cb-slide" id="cb-slide">
                 <img class="cb-img" id="cb-img" alt="" draggable="false">
@@ -121,6 +127,15 @@
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                 <span>Refresh</span>
             </button>
+            <button type="button" class="cb-tool" id="cb-upload" title="Upload images to this folder" hidden>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                <span id="cb-upload-label">Upload</span>
+            </button>
+            <input type="file" id="cb-upload-input" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/avif" multiple hidden>
+            <button type="button" class="cb-tool cb-tool-danger" id="cb-delete" title="Move this image to the Drive trash" hidden>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg>
+                <span>Delete</span>
+            </button>
             <button type="button" class="cb-tool" id="cb-clear" title="Delete temporary copies of images">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path></svg>
                 <span>Clear cache</span>
@@ -135,12 +150,15 @@
 <script>
   window.CB = {
     csrf: "{{ csrf_token() }}",
+    canWrite: {{ can_write|tojson }},
     lastFolder: {{ last_folder|tojson }},
     urls: {
       folders:    "{{ url_for('chart_browser.api_folders') }}",
       images:     "{{ url_for('chart_browser.api_images') }}",
       image:      "{{ url_for('chart_browser.api_image', file_id='FILE_ID') }}",
       clearCache: "{{ url_for('chart_browser.api_clear_cache') }}",
+      upload:     "{{ url_for('chart_browser.api_upload') }}",
+      remove:     "{{ url_for('chart_browser.api_delete_image', file_id='FILE_ID') }}",
       connect:    "{{ url_for('chart_browser.connect') }}"
     }
   };