deleting items from card view

This commit is contained in:
Gamosoft 2025-11-27 11:30:49 +01:00
parent 61c04766bb
commit c8bac63cfb
2 changed files with 43 additions and 6 deletions

View File

@ -2098,6 +2098,9 @@ function noteApp() {
}
this.expandedFolders.add(folderPath);
await this.loadNotes();
// Navigate to the newly created folder on the homepage
this.goToHomepageFolder(folderPath);
} else {
ErrorHandler.handle('create folder', new Error('Server returned error'));
}
@ -3397,6 +3400,12 @@ function noteApp() {
goToHomepageFolder(folderPath) {
this.selectedHomepageFolder = folderPath || '';
// Clear editor state to show landing page
this.currentNote = '';
this.currentNoteName = '';
this.noteContent = '';
this.currentImage = '';
// Invalidate cache to force recalculation
this._homepageCache = {
folderPath: null,

View File

@ -1236,10 +1236,24 @@
<div
@click="goToHomepageFolder(folder.path)"
class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg"
style="background-color: var(--bg-secondary); border-color: var(--accent-primary); min-height: 140px; display: flex; flex-direction: column; border-width: 2px;"
onmouseover="this.style.borderColor='var(--accent-hover)'; this.style.transform='translateY(-2px)'"
onmouseout="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(0)'"
style="background-color: var(--bg-secondary); border-color: var(--accent-primary); min-height: 140px; display: flex; flex-direction: column; border-width: 2px; position: relative;"
onmouseover="this.style.borderColor='var(--accent-hover)'; this.style.transform='translateY(-2px)'; this.querySelector('.card-delete-btn').style.opacity='1';"
onmouseout="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(0)'; this.querySelector('.card-delete-btn').style.opacity='0';"
>
<!-- Delete Button -->
<button
@click.stop="deleteFolder(folder.path, folder.name)"
class="card-delete-btn"
style="position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.2s; color: var(--error); padding: 4px; border-radius: 4px; background-color: var(--bg-secondary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
title="Delete folder"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
<!-- Folder Icon -->
<div class="mb-2 flex items-center gap-2">
<svg class="w-6 h-6" style="color: var(--accent-primary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -1263,10 +1277,24 @@
<div
@click="note.path.match(/\.(png|jpg|jpeg|gif|webp)$/i) ? (currentImage = note.path, currentNote = '') : loadNote(note.path)"
class="p-4 rounded-lg border-2 cursor-pointer transition-all hover:shadow-lg"
style="background-color: var(--bg-secondary); border-color: var(--border-primary); min-height: 140px; display: flex; flex-direction: column;"
onmouseover="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(-2px)'"
onmouseout="this.style.borderColor='var(--border-primary)'; this.style.transform='translateY(0)'"
style="background-color: var(--bg-secondary); border-color: var(--border-primary); min-height: 140px; display: flex; flex-direction: column; position: relative;"
onmouseover="this.style.borderColor='var(--accent-primary)'; this.style.transform='translateY(-2px)'; this.querySelector('.card-delete-btn').style.opacity='1';"
onmouseout="this.style.borderColor='var(--border-primary)'; this.style.transform='translateY(0)'; this.querySelector('.card-delete-btn').style.opacity='0';"
>
<!-- Delete Button -->
<button
@click.stop="note.type === 'image' ? deleteImage(note.path) : deleteNote(note.path, note.name)"
class="card-delete-btn"
style="position: absolute; top: 8px; right: 8px; opacity: 0; transition: opacity 0.2s; color: var(--error); padding: 4px; border-radius: 4px; background-color: var(--bg-secondary);"
onmouseover="this.style.backgroundColor='var(--bg-hover)'"
onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
:title="note.type === 'image' ? 'Delete image' : 'Delete note'"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
</svg>
</button>
<!-- Note Title -->
<h3 class="font-semibold text-base mb-2" style="color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;" x-text="note.name"></h3>