feat: add workspace management and file preview
- Add workspace update and delete API endpoints - Redesign selected files display to use interactive cards - Implement VS Code-style modal for file content preview - Enhance file tree with animations and local state - Update UI styles for explorer, forms, and modals
This commit is contained in:
Mahmoud-Emad
@@ -35,12 +35,9 @@
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<h5 class="mb-0">Heroprompt</h5>
|
||||
<div class="ms-auto">
|
||||
<button id="wsCreateBtn" class="btn btn-primary btn-sm me-2">
|
||||
<button id="wsCreateBtn" class="btn btn-primary btn-sm">
|
||||
+ New Workspace
|
||||
</button>
|
||||
<button id="refreshWs" class="btn btn-outline-secondary btn-sm">
|
||||
↻ Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,19 +49,13 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="mb-0 text-uppercase fw-bold explorer-title">Explorer</h6>
|
||||
<div class="explorer-actions">
|
||||
<button id="collapseAll" class="btn btn-sm btn-ghost me-1" title="Collapse All">
|
||||
<i class="icon-collapse"></i>
|
||||
</button>
|
||||
<button id="refreshExplorer" class="btn btn-sm btn-ghost me-1" title="Refresh">
|
||||
<button id="refreshExplorer" class="btn btn-lg btn-ghost me-2"
|
||||
title="Refresh Workspace">
|
||||
<i class="icon-refresh"></i>
|
||||
</button>
|
||||
<button id="wsDetailsBtn" class="btn btn-sm btn-ghost me-1"
|
||||
title="Workspace Settings">
|
||||
<button id="wsDetailsBtn" class="btn btn-lg btn-ghost" title="Workspace Details">
|
||||
<i class="icon-settings"></i>
|
||||
</button>
|
||||
<button id="openWsManage" class="btn btn-sm btn-ghost" title="Manage Workspaces">
|
||||
<i class="icon-manage"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -95,13 +86,6 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="selection-actions">
|
||||
<button id="selectAll" class="btn btn-xs btn-ghost" title="Select All Visible">
|
||||
Select All
|
||||
</button>
|
||||
<button id="clearSelection" class="btn btn-xs btn-ghost"
|
||||
title="Clear Selection">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,52 +135,19 @@
|
||||
<div class="selection-workspace">
|
||||
<div class="selection-header">
|
||||
<h6 class="section-title">Selected Files & Directories</h6>
|
||||
<div class="selection-actions">
|
||||
<button id="exportSelection" class="btn btn-sm btn-ghost"
|
||||
title="Export Selection">
|
||||
<i class="icon-export"></i>
|
||||
</button>
|
||||
<button id="importSelection" class="btn btn-sm btn-ghost"
|
||||
title="Import Selection">
|
||||
<i class="icon-import"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selection-content">
|
||||
<div class="selection-list-panel">
|
||||
<div class="selection-cards-container">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Selected Items</span>
|
||||
<button id="clearAllSelection" class="btn btn-xs btn-ghost">Clear
|
||||
All</button>
|
||||
<span class="panel-title">Selected Files & Directories</span>
|
||||
</div>
|
||||
<div class="selection-list">
|
||||
<ul id="selected" class="selected-items">
|
||||
<li class="empty-selection">
|
||||
<i class="icon-empty"></i>
|
||||
<p>No files selected</p>
|
||||
<small>Use checkboxes in the explorer to select files</small>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">File Preview</span>
|
||||
<div class="preview-actions">
|
||||
<button id="copyPreview" class="btn btn-xs btn-ghost"
|
||||
title="Copy Content">
|
||||
<i class="icon-copy"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<div id="preview" class="file-preview">
|
||||
<div class="empty-preview">
|
||||
<i class="icon-file"></i>
|
||||
<p>Select a file to preview</p>
|
||||
</div>
|
||||
<div id="selectedCards" class="selection-cards">
|
||||
<div class="empty-selection-cards">
|
||||
<i class="icon-empty"></i>
|
||||
<p>No files selected</p>
|
||||
<small>Use checkboxes in the explorer to select files and
|
||||
directories</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -361,7 +312,7 @@ Example:
|
||||
<button type="button" class="btn btn-danger" id="wdDelete">Delete</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
|
||||
id="wdCancel">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="wdSave">Save</button>
|
||||
<button type="button" class="btn btn-primary" id="wdUpdate">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -384,6 +335,25 @@ Example:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div class="modal fade" id="confirmDeleteModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Confirm Delete</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="confirmDeleteMessage">Are you sure you want to delete this workspace?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
Reference in New Issue
Block a user