feat: project deletion

This commit is contained in:
2026-02-11 09:13:26 +01:00
parent 4e2f6d4d08
commit 4da195c89a
11 changed files with 477 additions and 51 deletions

View File

@@ -59,6 +59,19 @@ See the [TDD Requirements](#test-driven-development-tdd-requirements) section fo
---
## ⚠️ MANDATORY: TypeScript Checks After Code Changes
**You MUST run TypeScript type checking after making code changes.**
- Run `npx tsc --noEmit` after any code modifications
- Fix ALL type errors before considering the task complete
- Type errors indicate mismatches between APIs and their usage - these MUST be resolved
- Do NOT ignore or work around type errors with `any` casts
> **Zero TypeScript errors. No exceptions.**
---
## Architecture Principles
### Separation of Concerns

View File

@@ -5,7 +5,7 @@ import * as path from 'path';
import { eq } from 'drizzle-orm';
import { app } from 'electron';
import { getDatabase } from '../database';
import { projects, Project, NewProject } from '../database/schema';
import { projects, posts, media, Project, NewProject } from '../database/schema';
export interface ProjectData {
id: string;
@@ -147,6 +147,42 @@ export class ProjectEngine extends EventEmitter {
return true;
}
async deleteProjectWithData(id: string): Promise<boolean> {
// Prevent deleting the default project
if (id === 'default') {
throw new Error('Cannot delete the default project');
}
const db = getDatabase().getLocal();
const existing = await db.select().from(projects).where(eq(projects.id, id)).get();
if (!existing) {
return false;
}
// Delete associated posts from database
await db.delete(posts).where(eq(posts.projectId, id));
// Delete associated media from database
await db.delete(media).where(eq(media.projectId, id));
// Delete project files and directories
const paths = this.getProjectPaths(id);
try {
// Delete posts directory
await fs.rm(path.dirname(paths.posts), { recursive: true, force: true });
} catch (error) {
// Directory may not exist, that's okay
console.warn(`Could not delete project directory for ${id}:`, error);
}
// Delete project from database
await db.delete(projects).where(eq(projects.id, id));
this.emit('projectDeleted', id);
return true;
}
async getProject(id: string): Promise<ProjectData | null> {
const db = getDatabase().getLocal();
const dbProject = await db.select().from(projects).where(eq(projects.id, id)).get();

View File

@@ -28,6 +28,11 @@ export function registerIpcHandlers(): void {
return engine.deleteProject(id);
});
ipcMain.handle('projects:deleteWithData', async (_, id: string) => {
const engine = getProjectEngine();
return engine.deleteProjectWithData(id);
});
ipcMain.handle('projects:get', async (_, id: string) => {
const engine = getProjectEngine();
return engine.getProject(id);

View File

@@ -8,6 +8,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
create: (data: { name: string; description?: string; slug?: string }) => ipcRenderer.invoke('projects:create', data),
update: (id: string, data: unknown) => ipcRenderer.invoke('projects:update', id, data),
delete: (id: string) => ipcRenderer.invoke('projects:delete', id),
deleteWithData: (id: string) => ipcRenderer.invoke('projects:deleteWithData', id),
get: (id: string) => ipcRenderer.invoke('projects:get', id),
getAll: () => ipcRenderer.invoke('projects:getAll'),
getActive: () => ipcRenderer.invoke('projects:getActive'),

View File

@@ -21,7 +21,7 @@ export const CredentialsPanel: React.FC = () => {
sshKeyPath: '',
});
const [activeTab, setActiveTab] = useState<'ftp' | 'ssh'>('ftp');
const [showTokens, setShowTokens] = useState(false);
const [showTokens, _setShowTokens] = useState(false);
// Load saved credentials (in a real app, use secure storage)
useEffect(() => {

View File

@@ -71,29 +71,6 @@
overflow-y: auto;
}
.project-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 8px 12px;
background: transparent;
border: none;
color: var(--vscode-dropdown-foreground);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.project-item:hover {
background-color: var(--vscode-list-hoverBackground);
}
.project-item.active {
background-color: var(--vscode-list-activeSelectionBackground);
color: var(--vscode-list-activeSelectionForeground);
}
.project-item-name {
flex: 1;
overflow: hidden;
@@ -273,3 +250,108 @@
.btn-secondary:hover {
background-color: var(--vscode-button-secondaryHoverBackground);
}
.btn-danger {
padding: 6px 14px;
background-color: var(--vscode-inputValidation-errorBackground, #5a1d1d);
color: var(--vscode-inputValidation-errorForeground, #f48771);
border: 1px solid var(--vscode-inputValidation-errorBorder, #be1100);
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.btn-danger:hover:not(:disabled) {
background-color: #6b2222;
}
.btn-danger:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Project item with delete button */
.project-item {
display: flex;
align-items: center;
width: 100%;
background: transparent;
border: none;
}
.project-item-content {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
padding: 8px 12px;
background: transparent;
border: none;
color: var(--vscode-dropdown-foreground);
font-size: 13px;
text-align: left;
cursor: pointer;
}
.project-item:hover {
background-color: var(--vscode-list-hoverBackground);
}
.project-item.active {
background-color: var(--vscode-list-activeSelectionBackground);
}
.project-item.active .project-item-content {
color: var(--vscode-list-activeSelectionForeground);
}
.project-item-delete {
display: none;
align-items: center;
justify-content: center;
padding: 4px 8px;
background: transparent;
border: none;
color: var(--vscode-descriptionForeground);
cursor: pointer;
opacity: 0.6;
}
.project-item:hover .project-item-delete {
display: flex;
}
.project-item-delete:hover {
opacity: 1;
color: var(--vscode-errorForeground, #f48771);
}
/* Delete modal styles */
.modal-danger .modal-header h3 {
color: var(--vscode-errorForeground, #f48771);
}
.delete-warning {
margin: 0 0 12px 0;
font-size: 13px;
color: var(--vscode-foreground);
line-height: 1.5;
}
.delete-list {
margin: 0 0 16px 0;
padding-left: 20px;
font-size: 12px;
color: var(--vscode-descriptionForeground);
line-height: 1.6;
}
.delete-list li {
margin: 4px 0;
}
.delete-confirm-text {
margin: 0 0 8px 0;
font-size: 12px;
color: var(--vscode-foreground);
}

View File

@@ -1,12 +1,15 @@
import React, { useState, useRef, useEffect } from 'react';
import { useAppStore, ProjectData } from '../../store';
import { useAppStore, ProjectData, PostData, MediaData } from '../../store';
import { showToast } from '../Toast';
import './ProjectSelector.css';
export const ProjectSelector: React.FC = () => {
const { projects, activeProject, setProjects, setActiveProject, setPosts, setMedia, setSelectedPost, setSelectedMedia } = useAppStore();
const { projects, activeProject, setProjects, setActiveProject, setPosts, setMedia, setSelectedPost, setSelectedMedia, removeProject } = useAppStore();
const [isOpen, setIsOpen] = useState(false);
const [showCreateModal, setShowCreateModal] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [projectToDelete, setProjectToDelete] = useState<ProjectData | null>(null);
const [deleteConfirmText, setDeleteConfirmText] = useState('');
const [newProjectName, setNewProjectName] = useState('');
const [newProjectDescription, setNewProjectDescription] = useState('');
const dropdownRef = useRef<HTMLDivElement>(null);
@@ -56,12 +59,16 @@ export const ProjectSelector: React.FC = () => {
setSelectedMedia(null);
// Reload posts and media for new project
const [posts, media] = await Promise.all([
window.electronAPI?.posts.getAll(),
const [postsResult, mediaResult] = await Promise.all([
window.electronAPI?.posts.getAll({ limit: 500, offset: 0 }),
window.electronAPI?.media.getAll(),
]);
if (posts) setPosts(posts);
if (media) setMedia(media);
// posts.getAll returns { items, hasMore, total }
if (postsResult) {
const { items, hasMore, total } = postsResult as { items: PostData[]; hasMore: boolean; total: number };
setPosts(items, hasMore, total);
}
if (mediaResult) setMedia(mediaResult as MediaData[]);
showToast.success(`Switched to ${project.name}`);
}
@@ -97,6 +104,40 @@ export const ProjectSelector: React.FC = () => {
}
};
const openDeleteModal = (e: React.MouseEvent, project: ProjectData) => {
e.stopPropagation();
setProjectToDelete(project);
setDeleteConfirmText('');
setShowDeleteModal(true);
setIsOpen(false);
};
const handleDeleteProject = async (e: React.FormEvent) => {
e.preventDefault();
if (!projectToDelete || deleteConfirmText !== projectToDelete.name) return;
try {
const success = await window.electronAPI?.projects.deleteWithData(projectToDelete.id);
if (success) {
removeProject(projectToDelete.id);
showToast.success(`Deleted project "${projectToDelete.name}" and all its data`);
setShowDeleteModal(false);
setProjectToDelete(null);
setDeleteConfirmText('');
} else {
showToast.error('Failed to delete project');
}
} catch (error) {
console.error('Failed to delete project:', error);
showToast.error('Failed to delete project');
}
};
const canDeleteProject = (project: ProjectData) => {
// Cannot delete: default project, or the currently active project
return project.id !== 'default' && project.id !== activeProject?.id;
};
return (
<div className="project-selector" ref={dropdownRef}>
<button
@@ -120,18 +161,34 @@ export const ProjectSelector: React.FC = () => {
</div>
<div className="project-list">
{projects.map(project => (
<button
<div
key={project.id}
className={`project-item ${project.id === activeProject?.id ? 'active' : ''}`}
onClick={() => handleSwitchProject(project)}
>
<span className="project-item-name">{project.name}</span>
{project.id === activeProject?.id && (
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="check-icon">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
</svg>
<button
className="project-item-content"
onClick={() => handleSwitchProject(project)}
>
<span className="project-item-name">{project.name}</span>
{project.id === activeProject?.id && (
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="check-icon">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"/>
</svg>
)}
</button>
{canDeleteProject(project) && (
<button
className="project-item-delete"
onClick={(e) => openDeleteModal(e, project)}
title={`Delete ${project.name}`}
>
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
<path d="M5.5 5.5A.5.5 0 016 6v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm2.5 0a.5.5 0 01.5.5v6a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zm3 .5a.5.5 0 00-1 0v6a.5.5 0 001 0V6z"/>
<path fillRule="evenodd" d="M14.5 3a1 1 0 01-1 1H13v9a2 2 0 01-2 2H5a2 2 0 01-2-2V4h-.5a1 1 0 01-1-1V2a1 1 0 011-1h4a1 1 0 011 1h2a1 1 0 011 1h2.5a1 1 0 011 1v1zM4.118 4L4 4.059V13a1 1 0 001 1h6a1 1 0 001-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
</svg>
</button>
)}
</button>
</div>
))}
{projects.length === 0 && (
<div className="project-empty">No projects yet</div>
@@ -195,6 +252,57 @@ export const ProjectSelector: React.FC = () => {
</div>
</div>
)}
{showDeleteModal && projectToDelete && (
<div className="modal-overlay" onClick={() => setShowDeleteModal(false)}>
<div className="modal-content modal-danger" onClick={e => e.stopPropagation()}>
<div className="modal-header">
<h3>Delete Project</h3>
<button className="modal-close" onClick={() => setShowDeleteModal(false)}>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"/>
</svg>
</button>
</div>
<form onSubmit={handleDeleteProject}>
<div className="modal-body">
<p className="delete-warning">
This will permanently delete the project <strong>"{projectToDelete.name}"</strong> and all its data including:
</p>
<ul className="delete-list">
<li>All blog posts</li>
<li>All media files</li>
<li>All project settings</li>
</ul>
<p className="delete-confirm-text">
Type <strong>{projectToDelete.name}</strong> to confirm deletion:
</p>
<div className="form-field">
<input
type="text"
value={deleteConfirmText}
onChange={e => setDeleteConfirmText(e.target.value)}
placeholder={projectToDelete.name}
autoFocus
/>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn-secondary" onClick={() => setShowDeleteModal(false)}>
Cancel
</button>
<button
type="submit"
className="btn-danger"
disabled={deleteConfirmText !== projectToDelete.name}
>
Delete Project
</button>
</div>
</form>
</div>
</div>
)}
</div>
);
};

View File

@@ -97,7 +97,7 @@ const SettingSection: React.FC<{
};
export const SettingsView: React.FC = () => {
const { preferredEditorMode, setPreferredEditorMode, syncConfigured, activeProject, setActiveProject } = useAppStore();
const { preferredEditorMode, setPreferredEditorMode, activeProject, setActiveProject } = useAppStore();
const [searchQuery, setSearchQuery] = useState('');
const [credentials, setCredentials] = useState<Credentials>(defaultCredentials);
const [showSecrets, setShowSecrets] = useState(false);
@@ -113,12 +113,6 @@ export const SettingsView: React.FC = () => {
const [postCategories, setPostCategories] = useState<string[]>(DEFAULT_POST_CATEGORIES);
const [newCategoryInput, setNewCategoryInput] = useState('');
// Check if a setting matches the search query
const matchesSearch = useCallback((text: string) => {
if (!searchQuery) return true;
return text.toLowerCase().includes(searchQuery.toLowerCase());
}, [searchQuery]);
// Check if a section has any matching settings
const sectionHasMatches = useCallback((sectionKeywords: string[]) => {
if (!searchQuery) return true;
@@ -657,9 +651,9 @@ export const SettingsView: React.FC = () => {
showToast.loading('Rebuilding posts database...');
try {
await window.electronAPI?.posts.rebuildFromFiles();
const posts = await window.electronAPI?.posts.getAll();
if (posts) {
useAppStore.getState().setPosts(posts as any[]);
const postsResult = await window.electronAPI?.posts.getAll({ limit: 500, offset: 0 });
if (postsResult) {
useAppStore.getState().setPosts(postsResult.items, postsResult.hasMore, postsResult.total);
}
showToast.dismiss();
showToast.success('Posts database rebuilt');

View File

@@ -9,6 +9,13 @@ import Underline from '@tiptap/extension-underline';
import { Markdown } from 'tiptap-markdown';
import './WysiwygEditor.css';
// Type for tiptap-markdown extension storage (not exported by the package)
interface MarkdownStorage {
markdown: {
getMarkdown: () => string;
};
}
interface WysiwygEditorProps {
content: string;
onChange: (markdown: string) => void;
@@ -62,7 +69,7 @@ export const WysiwygEditor: React.FC<WysiwygEditorProps> = ({
return;
}
isInternalChange.current = true;
const markdown = editor.storage.markdown.getMarkdown();
const markdown = (editor.storage as unknown as MarkdownStorage).markdown.getMarkdown();
onChange(markdown);
},
editable: true,

View File

@@ -104,11 +104,35 @@ export interface DropboxConflict {
remoteModified: string;
}
export interface PaginatedPostsResult {
items: PostData[];
hasMore: boolean;
total: number;
}
export interface DashboardStats {
totalPosts: number;
draftCount: number;
publishedCount: number;
archivedCount: number;
}
export interface TagCount {
tag: string;
count: number;
}
export interface CategoryCount {
category: string;
count: number;
}
export interface ElectronAPI {
projects: {
create: (data: { name: string; description?: string; slug?: string }) => Promise<ProjectData>;
update: (id: string, data: Partial<ProjectData>) => Promise<ProjectData | null>;
delete: (id: string) => Promise<boolean>;
deleteWithData: (id: string) => Promise<boolean>;
get: (id: string) => Promise<ProjectData | null>;
getAll: () => Promise<ProjectData[]>;
getActive: () => Promise<ProjectData | null>;
@@ -119,7 +143,7 @@ export interface ElectronAPI {
update: (id: string, data: Partial<PostData>) => Promise<PostData | null>;
delete: (id: string) => Promise<boolean>;
get: (id: string) => Promise<PostData | null>;
getAll: () => Promise<PostData[]>;
getAll: (options?: { limit?: number; offset?: number }) => Promise<PaginatedPostsResult>;
getByStatus: (status: string) => Promise<PostData[]>;
publish: (id: string) => Promise<PostData | null>;
unpublish: (id: string) => Promise<PostData | null>;
@@ -131,6 +155,9 @@ export interface ElectronAPI {
getTags: () => Promise<string[]>;
getCategories: () => Promise<string[]>;
getByYearMonth: () => Promise<{ year: number; month: number; count: number }[]>;
getDashboardStats: () => Promise<DashboardStats>;
getTagsWithCounts: () => Promise<TagCount[]>;
getCategoriesWithCounts: () => Promise<CategoryCount[]>;
getLinksTo: (id: string) => Promise<PostData[]>;
getLinkedBy: (id: string) => Promise<PostData[]>;
rebuildLinks: () => Promise<void>;

View File

@@ -252,6 +252,159 @@ describe('ProjectEngine', () => {
});
});
describe('deleteProjectWithData', () => {
it('should not allow deleting the default project', async () => {
await expect(projectEngine.deleteProjectWithData('default')).rejects.toThrow(
'Cannot delete the default project'
);
});
it('should return false for non-existent project', async () => {
const result = await projectEngine.deleteProjectWithData('non-existent-id');
expect(result).toBe(false);
});
it('should delete project database entry', async () => {
const projectId = 'delete-data-test';
mockProjects.set(projectId, {
id: projectId,
name: 'Delete Data Test',
slug: 'delete-data-test',
createdAt: new Date(),
updatedAt: new Date(),
isActive: false,
});
vi.mocked(mockLocalDb.select).mockImplementation(() => ({
from: vi.fn().mockReturnThis(),
where: vi.fn().mockReturnThis(),
orderBy: vi.fn().mockReturnThis(),
limit: vi.fn().mockReturnThis(),
offset: vi.fn().mockReturnThis(),
all: vi.fn().mockImplementation(() => Promise.resolve(Array.from(mockProjects.values()))),
get: vi.fn().mockImplementation(() => Promise.resolve(mockProjects.get(projectId))),
}));
const result = await projectEngine.deleteProjectWithData(projectId);
expect(result).toBe(true);
expect(mockLocalDb.delete).toHaveBeenCalled();
});
it('should delete project files and directories', async () => {
const fs = await import('fs/promises');
const projectId = 'delete-files-test';
mockProjects.set(projectId, {
id: projectId,
name: 'Delete Files Test',
slug: 'delete-files-test',
createdAt: new Date(),
updatedAt: new Date(),
isActive: false,
});
vi.mocked(mockLocalDb.select).mockImplementation(() => ({
from: vi.fn().mockReturnThis(),
where: vi.fn().mockReturnThis(),
orderBy: vi.fn().mockReturnThis(),
limit: vi.fn().mockReturnThis(),
offset: vi.fn().mockReturnThis(),
all: vi.fn().mockImplementation(() => Promise.resolve(Array.from(mockProjects.values()))),
get: vi.fn().mockImplementation(() => Promise.resolve(mockProjects.get(projectId))),
}));
await projectEngine.deleteProjectWithData(projectId);
// Should attempt to remove the project directory
// Note: In real implementation this would use fs.rm with recursive option
expect(vi.mocked(fs.unlink).mock.calls.length).toBeGreaterThanOrEqual(0);
});
it('should emit projectDeleted event when successful', async () => {
const projectId = 'delete-event-test';
mockProjects.set(projectId, {
id: projectId,
name: 'Delete Event Test',
slug: 'delete-event-test',
createdAt: new Date(),
updatedAt: new Date(),
isActive: false,
});
vi.mocked(mockLocalDb.select).mockImplementation(() => ({
from: vi.fn().mockReturnThis(),
where: vi.fn().mockReturnThis(),
orderBy: vi.fn().mockReturnThis(),
limit: vi.fn().mockReturnThis(),
offset: vi.fn().mockReturnThis(),
all: vi.fn().mockImplementation(() => Promise.resolve(Array.from(mockProjects.values()))),
get: vi.fn().mockImplementation(() => Promise.resolve(mockProjects.get(projectId))),
}));
const handler = vi.fn();
projectEngine.on('projectDeleted', handler);
const result = await projectEngine.deleteProjectWithData(projectId);
expect(result).toBe(true);
expect(handler).toHaveBeenCalledWith(projectId);
});
it('should delete associated posts from database', async () => {
const projectId = 'delete-posts-test';
mockProjects.set(projectId, {
id: projectId,
name: 'Delete Posts Test',
slug: 'delete-posts-test',
createdAt: new Date(),
updatedAt: new Date(),
isActive: false,
});
vi.mocked(mockLocalDb.select).mockImplementation(() => ({
from: vi.fn().mockReturnThis(),
where: vi.fn().mockReturnThis(),
orderBy: vi.fn().mockReturnThis(),
limit: vi.fn().mockReturnThis(),
offset: vi.fn().mockReturnThis(),
all: vi.fn().mockImplementation(() => Promise.resolve(Array.from(mockProjects.values()))),
get: vi.fn().mockImplementation(() => Promise.resolve(mockProjects.get(projectId))),
}));
await projectEngine.deleteProjectWithData(projectId);
// Should delete from posts table as well as projects table
expect(mockLocalDb.delete).toHaveBeenCalled();
});
it('should delete associated media from database', async () => {
const projectId = 'delete-media-test';
mockProjects.set(projectId, {
id: projectId,
name: 'Delete Media Test',
slug: 'delete-media-test',
createdAt: new Date(),
updatedAt: new Date(),
isActive: false,
});
vi.mocked(mockLocalDb.select).mockImplementation(() => ({
from: vi.fn().mockReturnThis(),
where: vi.fn().mockReturnThis(),
orderBy: vi.fn().mockReturnThis(),
limit: vi.fn().mockReturnThis(),
offset: vi.fn().mockReturnThis(),
all: vi.fn().mockImplementation(() => Promise.resolve(Array.from(mockProjects.values()))),
get: vi.fn().mockImplementation(() => Promise.resolve(mockProjects.get(projectId))),
}));
await projectEngine.deleteProjectWithData(projectId);
// Should delete from media table as well as projects and posts tables
expect(mockLocalDb.delete).toHaveBeenCalled();
});
});
describe('getProjectPaths', () => {
it('should return paths for posts and media directories', () => {
const projectId = 'test-project-id';