made projectCard component, along with options to delete project from project screen

src/App.css

@@ -892,6 +892,10 @@ main {
   cursor: pointer;
 }
 
+.primary-btn.danger {
+  background: #c0392b;
+}
+
 .secondary-btn {
   flex: 1;
   background: #eee;

src/components/ProjectCard.jsx

@@ -0,0 +1,101 @@
+import { useState, useRef, useEffect } from 'react';
+
+const ProjectCard = ({ project, onSelect, onRename, onDelete }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [renaming, setRenaming] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [nameInput, setNameInput] = useState(project.name);
+  const infoRef = useRef(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handleClickOutside = (e) => {
+      if (infoRef.current && !infoRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [menuOpen]);
+
+  const handleRenameSubmit = () => {
+    const trimmed = nameInput.trim();
+    if (trimmed && trimmed !== project.name) {
+      onRename(project.id, trimmed);
+    } else {
+      setNameInput(project.name);
+    }
+    setRenaming(false);
+  };
+
+  const handleInfoClick = (e) => {
+    e.stopPropagation();
+    if (!renaming) setMenuOpen(o => !o);
+  };
+
+  return (
+    <>
+    {confirming && (
+      <div className="modal-overlay" onClick={() => setConfirming(false)}>
+        <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+          <h3>Delete "{project.name}"?</h3>
+          <p style={{ margin: 0, color: '#888', fontSize: '0.9rem' }}>This can't be undone.</p>
+          <div className="modal-actions">
+            <button className="secondary-btn" onClick={() => setConfirming(false)}>Cancel</button>
+            <button className="primary-btn danger" onClick={() => onDelete(project.id)}>Delete</button>
+          </div>
+        </div>
+      </div>
+    )}
+    <div className="project-card" onClick={() => onSelect(project.id)}>
+      <div className={`project-preview ${project.thumbnail ? 'has-thumbnail' : ''}`}>
+        {project.thumbnail ? (
+          <img
+            src={project.thumbnail}
+            alt={project.name}
+            className="thumbnail-img"
+            style={{
+              aspectRatio: `${project.width} / ${project.height}`,
+              width: project.width >= project.height ? '100%' : 'auto',
+              height: project.width >= project.height ? 'auto' : '100%'
+            }}
+          />
+        ) : (
+          <span className="project-size-badge">{project.width}x{project.height}</span>
+        )}
+      </div>
+      <div className="project-info" ref={infoRef} onClick={handleInfoClick}>
+        {renaming ? (
+          <input
+            className="project-rename-input"
+            value={nameInput}
+            onChange={(e) => setNameInput(e.target.value)}
+            onBlur={handleRenameSubmit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleRenameSubmit();
+              if (e.key === 'Escape') { setRenaming(false); setNameInput(project.name); }
+            }}
+            autoFocus
+            onClick={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <h3>{project.name}</h3>
+        )}
+        <p>{new Date(project.lastModified).toLocaleDateString()}</p>
+        {menuOpen && (
+          <div className="project-menu-dropdown">
+            <button onClick={(e) => { e.stopPropagation(); setRenaming(true); setMenuOpen(false); }}>
+              Rename
+            </button>
+            <button className="delete" onClick={(e) => { e.stopPropagation(); setConfirming(true); setMenuOpen(false); }}>
+              Delete
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+    </>
+  );
+};
+
+export default ProjectCard;

src/components/ProjectList.css

@@ -61,21 +61,16 @@
 .project-card {
   background: white;
   border-radius: 8px;
-  overflow: hidden;
   box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   cursor: pointer;
   transition: transform 0.1s ease;
   border: 1px solid #eee;
 }
 
-.project-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
 .project-preview {
   width: 100%;
   aspect-ratio: 1 / 1;
+  overflow: hidden;
   background-color: white; /* Matches card color for letterboxing */
   display: flex;
   align-items: center;
@@ -125,6 +120,8 @@
 .project-info {
   padding: 0.75rem;
   background: white;
+  position: relative;
+  cursor: pointer;
 }
 
 .project-info h3 {
@@ -142,6 +139,59 @@
   color: #888;
 }
 
+.project-rename-input {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+  font-size: 0.9rem;
+  font-family: inherit;
+  color: inherit;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  background: transparent;
+  padding: 0;
+  outline: none;
+}
+
+.project-menu-dropdown {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(100% + 4px);
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+  z-index: 10;
+  min-width: 100px;
+  overflow: hidden;
+}
+
+.project-menu-dropdown button {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  border: none;
+  text-align: left;
+  font-size: 0.8rem;
+  font-family: inherit;
+  cursor: pointer;
+  color: #333;
+}
+
+.project-menu-dropdown button:hover {
+  background: #f5f5f5;
+}
+
+.project-menu-dropdown button.delete {
+  color: #c0392b;
+}
+
+.project-menu-dropdown button.delete:hover {
+  background: #fdf0ef;
+}
+
 @media (prefers-color-scheme: dark) {
   .project-card, .project-info {
     background: #1a1a1a;
@@ -150,6 +200,22 @@
   .project-info h3 {
     color: #eee;
   }
+  .project-rename-input {
+    border-color: #555;
+  }
+  .project-menu-dropdown {
+    background: #2a2a2a;
+    border-color: #444;
+  }
+  .project-menu-dropdown button {
+    color: #eee;
+  }
+  .project-menu-dropdown button:hover {
+    background: #333;
+  }
+  .project-menu-dropdown button.delete:hover {
+    background: #3a1a1a;
+  }
 }
 
 .empty-state {

src/components/ProjectList.jsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Plus, Upload } from 'lucide-react';
-import { getProjects } from '../utils/storage';
+import { getProjects, deleteProject, updateProjectMeta } from '../utils/storage';
 import NewProjectModal from './NewProjectModal';
 import ImportProjectModal from './ImportProjectModal';
+import ProjectCard from './ProjectCard';
 import './ProjectList.css';
 
 const ProjectList = ({ onSelectProject }) => {
@@ -20,6 +21,14 @@ const ProjectList = ({ onSelectProject }) => {
     onSelectProject(id);
   };
 
+  const handleRename = (id, newName) => {
+    setProjects(updateProjectMeta(id, { name: newName }));
+  };
+
+  const handleDelete = (id) => {
+    setProjects(deleteProject(id));
+  };
+
   return (
     <div className="project-list-container">
       <div className="project-list-header">
@@ -51,28 +60,7 @@ const ProjectList = ({ onSelectProject }) => {
            <p className="empty-state">No drawings yet. Create one!</p>
         )}
         {projects.map((project) => (
-          <div key={project.id} className="project-card" onClick={() => onSelectProject(project.id)}>
-            <div className={`project-preview ${project.thumbnail ? 'has-thumbnail' : ''}`}>
-               {project.thumbnail ? (
-                 <img 
-                   src={project.thumbnail} 
-                   alt={project.name} 
-                   className="thumbnail-img" 
-                   style={{ 
-                     aspectRatio: `${project.width} / ${project.height}`,
-                     width: project.width >= project.height ? '100%' : 'auto',
-                     height: project.width >= project.height ? 'auto' : '100%'
-                   }}
-                 />
-               ) : (
-                 <span className="project-size-badge">{project.width}x{project.height}</span>
-               )}
-            </div>
-            <div className="project-info">
-              <h3>{project.name}</h3>
-              <p>{new Date(project.lastModified).toLocaleDateString()}</p>
-            </div>
-          </div>
+          <ProjectCard key={project.id} project={project} onSelect={onSelectProject} onRename={handleRename} onDelete={handleDelete} />
         ))}
       </div>
     </div>

src/utils/palettes.js

@@ -21,7 +21,7 @@ export const fetchLospecPalette = async (name) => {
     if (bundled[name]) return bundled[name];
 
     // Fall back to fetching from Lospec
-    const baseUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+    const baseUrl = import.meta.env.DEV
       ? '/lospec-api'
       : 'https://corsproxy.io/?https://lospec.com';
 

src/utils/storage.js

@@ -54,6 +54,13 @@ export const saveCustomPalette = (name, colors) => {
   localStorage.setItem(CUSTOM_PALETTES_KEY, JSON.stringify(palettes));
 };
 
+export const deleteProject = (id) => {
+  const projects = getProjects().filter(p => p.id !== id);
+  saveProjectList(projects);
+  localStorage.removeItem(`${STORAGE_PREFIX}project-${id}`);
+  return projects;
+};
+
 export const updateProjectMeta = (id, updates) => {
   const projects = getProjects();
   const index = projects.findIndex(p => p.id === id);

vite.config.js

@@ -8,7 +8,8 @@ export default defineConfig({
   server: {
     host: true,
     allowedHosts: [
-      "skrewt-station.local"
+      "skrewt-station.local",
+			"beep-boop.local"
     ],
     proxy: {
       '/lospec-api': {