Update index.html

This commit is contained in:
ADARSH 2025-07-05 22:51:22 +05:30 committed by GitHub
parent ea3aaf5bd1
commit 59eb888677
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -759,7 +759,7 @@
gap: 8px; gap: 8px;
} }
/* File List */ /* Files List */
.files-list { .files-list {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
@ -1011,7 +1011,7 @@
} }
.modal.active { .modal.active {
display: flex; display: flex !important;
animation: fadeIn 0.3s ease-out; animation: fadeIn 0.3s ease-out;
} }
@ -1411,9 +1411,6 @@
<button class="action-btn" id="refreshBtn" title="Refresh"> <button class="action-btn" id="refreshBtn" title="Refresh">
<i class="fas fa-sync-alt"></i> <i class="fas fa-sync-alt"></i>
</button> </button>
<button class="action-btn" id="loadFileSystemBtn" title="Load File System">
<i class="fas fa-folder-open"></i>
</button>
</div> </div>
</div> </div>
</header> </header>
@ -1594,7 +1591,7 @@
<div class="mobile-overlay" id="mobileOverlay"></div> <div class="mobile-overlay" id="mobileOverlay"></div>
<script> <script>
// Advanced Prompt Arsenal Dashboard - File System Access Version // Advanced Prompt Arsenal Dashboard
class PromptArsenal { class PromptArsenal {
constructor() { constructor() {
this.currentView = 'dashboard'; this.currentView = 'dashboard';
@ -1608,7 +1605,6 @@
this.allFiles = []; this.allFiles = [];
this.filteredFiles = []; this.filteredFiles = [];
this.fileContents = new Map(); this.fileContents = new Map();
this.directoryHandle = null;
this.init(); this.init();
} }
@ -1616,7 +1612,7 @@
async init() { async init() {
this.bindEvents(); this.bindEvents();
this.handleResize(); this.handleResize();
await this.loadInitialData(); await this.loadFileStructure();
this.updateStats(); this.updateStats();
this.renderCurrentView(); this.renderCurrentView();
} }
@ -1694,11 +1690,6 @@
refreshBtn.addEventListener('click', () => this.refresh()); refreshBtn.addEventListener('click', () => this.refresh());
} }
const loadFileSystemBtn = document.getElementById('loadFileSystemBtn');
if (loadFileSystemBtn) {
loadFileSystemBtn.addEventListener('click', () => this.loadFileSystem());
}
// Modal events // Modal events
const fileModal = document.getElementById('fileModal'); const fileModal = document.getElementById('fileModal');
const modalClose = document.getElementById('modalClose'); const modalClose = document.getElementById('modalClose');
@ -1737,87 +1728,51 @@
// Window resize // Window resize
window.addEventListener('resize', () => this.handleResize()); window.addEventListener('resize', () => this.handleResize());
// Modal click outside to close
const modal = document.getElementById('fileModal');
if (modal) {
modal.addEventListener('click', (e) => {
if (e.target === modal) {
this.closeModal();
}
});
}
} }
async loadInitialData() { async loadFileStructure() {
// First try to load from files.json if available this.showLoading(true);
try { try {
const response = await fetch('./files.json'); console.log('Loading file structure from server...');
const response = await fetch('/api/files');
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
this.allFiles = Array.isArray(data) ? data : []; this.allFiles = Array.isArray(data) ? data : [];
console.log(`Loaded ${this.allFiles.length} files from static data`); console.log(`Loaded ${this.allFiles.length} files from server`);
if (this.allFiles.length === 0) {
console.warn('No files found from server');
this.showNotification('No markdown files found', 'warning');
}
} else {
console.error('Failed to load file data from server:', response.status);
this.allFiles = [];
this.showNotification('Server unavailable - no files loaded', 'error');
} }
} catch (error) {
console.log('No static files.json found, ready for file system access');
}
if (this.allFiles.length === 0) {
this.showNotification('Click "Load File System" to browse your markdown files', 'warning');
}
this.populateFolderFilter();
this.populateFolderNavigation();
this.filteredFiles = [...this.allFiles];
}
async loadFileSystem() {
if (!('showDirectoryPicker' in window)) {
this.showNotification('File System Access API not supported in this browser', 'error');
return;
}
try {
this.showLoading(true);
this.directoryHandle = await window.showDirectoryPicker();
this.allFiles = [];
await this.scanDirectory(this.directoryHandle, '');
console.log(`Loaded ${this.allFiles.length} markdown files from file system`);
this.showNotification(`Found ${this.allFiles.length} markdown files!`, 'success');
this.populateFolderFilter(); this.populateFolderFilter();
this.populateFolderNavigation(); this.populateFolderNavigation();
this.filteredFiles = [...this.allFiles]; this.filteredFiles = [...this.allFiles];
this.updateStats();
this.renderCurrentView();
} catch (error) {
if (error.name !== 'AbortError') {
console.error('Error accessing file system:', error);
this.showNotification('Error accessing file system', 'error');
}
} finally {
this.showLoading(false);
}
}
async scanDirectory(dirHandle, path) {
try {
for await (const entry of dirHandle.values()) {
const currentPath = path ? `${path}/${entry.name}` : entry.name;
if (entry.kind === 'file' && entry.name.endsWith('.md')) {
const file = await entry.getFile();
this.allFiles.push({
name: entry.name,
path: currentPath,
relativePath: currentPath,
folder: path || 'Root',
size: file.size,
type: 'md',
lastModified: new Date(file.lastModified).toISOString(),
fileHandle: entry
});
} else if (entry.kind === 'directory' && !entry.name.startsWith('.')) {
const subDirHandle = await dirHandle.getDirectoryHandle(entry.name);
await this.scanDirectory(subDirHandle, currentPath);
}
}
} catch (error) { } catch (error) {
console.error(`Error scanning directory ${path}:`, error); console.error('Error loading file structure from server:', error);
this.allFiles = [];
this.showNotification('Server error - no files loaded', 'error');
} }
this.showLoading(false);
} }
populateFolderFilter() { populateFolderFilter() {
@ -2028,7 +1983,7 @@
<div class="empty-state"> <div class="empty-state">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<h3>No files found</h3> <h3>No files found</h3>
<p>Try adjusting your search or filter criteria, or load the file system</p> <p>Try adjusting your search or filter criteria</p>
</div> </div>
`; `;
return; return;
@ -2089,7 +2044,7 @@
<div class="empty-state"> <div class="empty-state">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
<h3>No files found</h3> <h3>No files found</h3>
<p>Try adjusting your search or filter criteria, or load the file system</p> <p>Try adjusting your search or filter criteria</p>
</div> </div>
`; `;
return; return;
@ -2170,6 +2125,11 @@
// Add click events to files // Add click events to files
treeStructure.querySelectorAll('.tree-file').forEach(fileEl => { treeStructure.querySelectorAll('.tree-file').forEach(fileEl => {
fileEl.addEventListener('click', async (e) => { fileEl.addEventListener('click', async (e) => {
// Remove active class from all files
treeStructure.querySelectorAll('.tree-file').forEach(f => f.classList.remove('active'));
// Add active class to clicked file
e.currentTarget.classList.add('active');
const filePath = e.currentTarget.dataset.file; const filePath = e.currentTarget.dataset.file;
await this.showFilePreview(filePath); await this.showFilePreview(filePath);
}); });
@ -2184,29 +2144,17 @@
let content = this.fileContents.get(filePath); let content = this.fileContents.get(filePath);
if (!content) { if (!content) {
const file = this.allFiles.find(f => f.relativePath === filePath || f.path === filePath); console.log('Loading file from server:', filePath);
if (!file) { const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
throw new Error('File not found');
}
if (file.fileHandle) { if (response.ok) {
// Use File System Access API content = await response.text();
const fileObj = await file.fileHandle.getFile(); console.log('File loaded successfully from server:', filePath);
content = await fileObj.text(); this.fileContents.set(filePath, content);
} else { } else {
// Fetch from server API console.error('Error loading file from server:', response.status);
console.log('Loading file from server:', filePath); throw new Error(`Server error: ${response.status}`);
const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
if (response.ok) {
content = await response.text();
console.log('File loaded successfully from server:', filePath);
} else {
throw new Error(`Server error: ${response.status}`);
}
} }
this.fileContents.set(filePath, content);
} }
this.showModal(filePath, content); this.showModal(filePath, content);
@ -2225,25 +2173,13 @@
if (!content) { if (!content) {
this.showLoading(true); this.showLoading(true);
const file = this.allFiles.find(f => f.relativePath === filePath || f.path === filePath); const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
if (!file) { if (response.ok) {
throw new Error('File not found'); content = await response.text();
} this.fileContents.set(filePath, content);
if (file.fileHandle) {
const fileObj = await file.fileHandle.getFile();
content = await fileObj.text();
} else { } else {
// Fetch from server API throw new Error(`Server error: ${response.status}`);
const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
if (response.ok) {
content = await response.text();
} else {
throw new Error(`Server error: ${response.status}`);
}
} }
this.fileContents.set(filePath, content);
this.showLoading(false); this.showLoading(false);
} }
@ -2289,22 +2225,12 @@
if (!content) { if (!content) {
try { try {
const file = this.allFiles.find(f => f.relativePath === filePath || f.path === filePath); const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
if (!file) { if (response.ok) {
content = 'File not found'; content = await response.text();
} else if (file.fileHandle) {
const fileObj = await file.fileHandle.getFile();
content = await fileObj.text();
this.fileContents.set(filePath, content); this.fileContents.set(filePath, content);
} else { } else {
// Fetch from server API throw new Error(`Server error: ${response.status}`);
const response = await fetch(`/api/file?path=${encodeURIComponent(filePath)}`);
if (response.ok) {
content = await response.text();
this.fileContents.set(filePath, content);
} else {
content = `Error loading file: ${response.status}`;
}
} }
} catch (error) { } catch (error) {
console.error('Preview load error:', error); console.error('Preview load error:', error);
@ -2395,11 +2321,20 @@
} }
async refresh() { async refresh() {
if (this.directoryHandle) { this.showLoading(true);
await this.loadFileSystem(); this.fileContents.clear();
} else {
await this.loadInitialData(); try {
const response = await fetch('/api/refresh');
if (response.ok) {
const result = await response.json();
console.log('Server refresh result:', result);
}
} catch (error) {
console.log('Server refresh not available');
} }
await this.loadFileStructure();
this.filterAndRenderFiles(); this.filterAndRenderFiles();
this.updateStats(); this.updateStats();
this.showNotification('Data refreshed!'); this.showNotification('Data refreshed!');