From 2db8d7df3f78caec2559be854e52c33a12d26dbd Mon Sep 17 00:00:00 2001
From: Om Gupta <omgupta0720@gmail.com>
Date: Thu, 23 Apr 2026 14:23:05 +0530
Subject: [PATCH] feat(desktop): remove new-project attachments, add text-file
 creator in files view

Drop the "Files & context" dropzone and "Suggest name" button from the new
project form. Expand the Upload button in the project files view into an
add-menu offering "Upload from device" and a new "Add text content" modal
that writes a .md file directly to the project.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../src/components/files/ProjectFilesView.tsx | 190 ++++++++++++++++--
 .../components/projects/NewProjectView.tsx    |  47 +----
 packages/desktop/src/index.css                | 137 ++++++++-----
 3 files changed, 269 insertions(+), 105 deletions(-)

diff --git a/packages/desktop/src/components/files/ProjectFilesView.tsx b/packages/desktop/src/components/files/ProjectFilesView.tsx
index 0d2a2c3d..ece9212a 100644
--- a/packages/desktop/src/components/files/ProjectFilesView.tsx
+++ b/packages/desktop/src/components/files/ProjectFilesView.tsx
@@ -11,8 +11,11 @@ import {
   Home,
   Image,
   Loader2,
+  Paperclip,
+  Plus,
   Search,
   Trash2,
+  Type,
   Upload,
   X,
 } from 'lucide-react'
@@ -151,6 +154,12 @@ export function ProjectFilesView() {
   const [newFolderOpen, setNewFolderOpen] = useState(false)
   const [newFolderName, setNewFolderName] = useState('')
 
+  // Add menu + text-content modal
+  const [addMenuOpen, setAddMenuOpen] = useState(false)
+  const [textModalOpen, setTextModalOpen] = useState(false)
+  const [textTitle, setTextTitle] = useState('')
+  const [textBody, setTextBody] = useState('')
+
   // Preview pane state
   const [selected, setSelected] = useState<FileEntry | null>(null)
   const [preview, setPreview] = useState<string | null>(null)
@@ -160,6 +169,8 @@ export function ProjectFilesView() {
 
   const fileInputRef = useRef<HTMLInputElement>(null)
   const newFolderInputRef = useRef<HTMLInputElement>(null)
+  const addMenuRef = useRef<HTMLDivElement>(null)
+  const textTitleInputRef = useRef<HTMLInputElement>(null)
 
   // Breadcrumbs
   const breadcrumbs = useMemo(() => {
@@ -285,6 +296,23 @@ export function ProjectFilesView() {
     return unsub
   }, [refresh])
 
+  useEffect(() => {
+    if (!addMenuOpen) return
+    const onDown = (e: MouseEvent) => {
+      if (!addMenuRef.current) return
+      if (!addMenuRef.current.contains(e.target as Node)) setAddMenuOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setAddMenuOpen(false)
+    }
+    window.addEventListener('mousedown', onDown)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('mousedown', onDown)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [addMenuOpen])
+
   useEffect(() => {
     if (!loading) return
     const timer = setTimeout(() => {
@@ -386,6 +414,23 @@ export function ProjectFilesView() {
     setNewFolderName('')
   }
 
+  const cancelTextModal = () => {
+    setTextModalOpen(false)
+    setTextTitle('')
+    setTextBody('')
+  }
+
+  const canSubmitText = textTitle.trim().length > 0 && textBody.trim().length > 0
+
+  const submitTextContent = () => {
+    if (!canSubmitText) return
+    const raw = textTitle.trim()
+    const hasExt = /\.[A-Za-z0-9]{1,8}$/.test(raw)
+    const filename = hasExt ? raw : `${raw}.md`
+    connection.sendFilesystemWrite(resolvePath(filename), textBody, 'utf-8')
+    cancelTextModal()
+  }
+
   const handleDelete = () => {
     if (!selected) return
     setDeleteTarget({ name: selected.name, path: resolvePath(selected.name) })
@@ -478,10 +523,49 @@ export function ProjectFilesView() {
         </div>
 
         <div className="fl-toolbar__actions">
-          <button type="button" className="fl-btn" onClick={() => fileInputRef.current?.click()}>
-            <Upload size={12} strokeWidth={1.5} />
-            Upload
-          </button>
+          <div className="fl-addmenu" ref={addMenuRef}>
+            <button
+              type="button"
+              className="fl-btn"
+              onClick={() => setAddMenuOpen((v) => !v)}
+              aria-haspopup="menu"
+              aria-expanded={addMenuOpen}
+            >
+              <Plus size={13} strokeWidth={1.5} />
+              Upload
+            </button>
+            {addMenuOpen && (
+              <div className="fl-addmenu__panel" role="menu">
+                <button
+                  type="button"
+                  className="fl-addmenu__item"
+                  role="menuitem"
+                  onClick={() => {
+                    setAddMenuOpen(false)
+                    fileInputRef.current?.click()
+                  }}
+                >
+                  <Paperclip size={14} strokeWidth={1.5} />
+                  Upload from device
+                </button>
+                <button
+                  type="button"
+                  className="fl-addmenu__item"
+                  role="menuitem"
+                  onClick={() => {
+                    setAddMenuOpen(false)
+                    setTextModalOpen(true)
+                    setTextTitle('')
+                    setTextBody('')
+                    setTimeout(() => textTitleInputRef.current?.focus(), 30)
+                  }}
+                >
+                  <Type size={14} strokeWidth={1.5} />
+                  Add text content
+                </button>
+              </div>
+            )}
+          </div>
           <input
             ref={fileInputRef}
             type="file"
@@ -500,7 +584,7 @@ export function ProjectFilesView() {
       </div>
 
       {/* Split: list + preview */}
-      <div className="fl-split">
+      <div className={`fl-split${selected ? '' : ' fl-split--nopreview'}`}>
         <div className="fl-list-wrap">
           <div className="fl-colhead">
             <button
@@ -655,16 +739,10 @@ export function ProjectFilesView() {
           </div>
         </div>
 
-        {/* Preview pane */}
-        <aside className="fl-preview">
-          {!selected ? (
-            <div className="fl-preview__empty">
-              <Eye size={20} strokeWidth={1.2} />
-              <div style={{ marginTop: 10 }}>Select a file to preview.</div>
-            </div>
-          ) : (
-            <>
-              <div className="fl-preview__thumb">
+        {/* Preview pane — only render once a file is selected */}
+        {selected && (
+          <aside className="fl-preview">
+            <div className="fl-preview__thumb">
                 {previewLoading ? (
                   <Loader2 size={20} strokeWidth={1.5} className="spin" />
                 ) : previewError ? (
@@ -744,9 +822,8 @@ export function ProjectFilesView() {
                   </button>
                 </div>
               </div>
-            </>
-          )}
-        </aside>
+          </aside>
+        )}
       </div>
 
       {dragging && (
@@ -804,6 +881,83 @@ export function ProjectFilesView() {
           </div>
         </div>
       )}
+
+      {textModalOpen && (
+        <div
+          className="modal-overlay"
+          onClick={cancelTextModal}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') cancelTextModal()
+          }}
+        >
+          <div
+            className="modal-card"
+            onClick={(e) => e.stopPropagation()}
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <div className="fl-textmodal__head">
+              <h3>Add text content</h3>
+              <button
+                type="button"
+                className="fl-iconbtn"
+                onClick={cancelTextModal}
+                aria-label="Close"
+              >
+                <X size={14} strokeWidth={1.5} />
+              </button>
+            </div>
+            <div className="modal-card__body">
+              <div className="form-field">
+                <label className="form-field__label" htmlFor="fl-text-title">
+                  Title <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <input
+                  id="fl-text-title"
+                  ref={textTitleInputRef}
+                  type="text"
+                  className="form-field__input"
+                  placeholder="Name your content"
+                  value={textTitle}
+                  onChange={(e) => setTextTitle(e.target.value)}
+                  onKeyDown={(e) => {
+                    const mod = e.metaKey || e.ctrlKey
+                    if (mod && e.key === 'Enter') submitTextContent()
+                  }}
+                />
+              </div>
+              <div className="form-field">
+                <label className="form-field__label" htmlFor="fl-text-body">
+                  Content <span style={{ color: 'var(--danger)' }}>*</span>
+                </label>
+                <textarea
+                  id="fl-text-body"
+                  className="form-field__input fl-textmodal__textarea"
+                  placeholder="Type or paste in content…"
+                  value={textBody}
+                  onChange={(e) => setTextBody(e.target.value)}
+                  onKeyDown={(e) => {
+                    const mod = e.metaKey || e.ctrlKey
+                    if (mod && e.key === 'Enter') submitTextContent()
+                  }}
+                />
+              </div>
+            </div>
+            <div className="modal-card__footer">
+              <button type="button" className="button button--ghost" onClick={cancelTextModal}>
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="button button--primary"
+                onClick={submitTextContent}
+                disabled={!canSubmitText}
+              >
+                Add Content
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/packages/desktop/src/components/projects/NewProjectView.tsx b/packages/desktop/src/components/projects/NewProjectView.tsx
index 50b58728..8931a1cb 100644
--- a/packages/desktop/src/components/projects/NewProjectView.tsx
+++ b/packages/desktop/src/components/projects/NewProjectView.tsx
@@ -6,8 +6,6 @@ import {
   FolderOpen,
   MapPin,
   Search,
-  Sparkles,
-  Upload,
 } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { projectStore } from '../../lib/store/projectStore.js'
@@ -97,8 +95,6 @@ export function NewProjectView() {
   const [instructions, setInstructions] = useState('')
   const [creating, setCreating] = useState(false)
 
-  const template = TEMPLATES.find((t) => t.id === templateId) ?? TEMPLATES[0]
-
   const pickTemplate = (id: TemplateId) => {
     const next = TEMPLATES.find((t) => t.id === id) ?? TEMPLATES[0]
     setTemplateId(id)
@@ -110,11 +106,6 @@ export function NewProjectView() {
     }
   }
 
-  const suggestName = () => {
-    if (template.id === 'blank') return
-    setName(template.name)
-  }
-
   const goBack = () => uiStore.getState().setActiveView('projects')
 
   const canCreate = name.trim().length > 0 && !creating
@@ -213,21 +204,15 @@ export function NewProjectView() {
 
           <div className="np-section">
             <div className="np-section__label">Name</div>
-            <div className="np-name">
-              <input
-                type="text"
-                className="np-input"
-                placeholder="e.g. Essay, Telegram Bots, Home ops"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                // biome-ignore lint/a11y/noAutofocus: new-project view expects the name field focused
-                autoFocus
-              />
-              <button type="button" className="np-suggest" onClick={suggestName}>
-                <Sparkles size={11} strokeWidth={1.5} />
-                Suggest
-              </button>
-            </div>
+            <input
+              type="text"
+              className="np-input"
+              placeholder="e.g. Essay, Telegram Bots, Home ops"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              // biome-ignore lint/a11y/noAutofocus: new-project view expects the name field focused
+              autoFocus
+            />
           </div>
 
           <div className="np-section">
@@ -242,20 +227,6 @@ export function NewProjectView() {
               onChange={(e) => setInstructions(e.target.value)}
             />
           </div>
-
-          <div className="np-section">
-            <div className="np-section__label">
-              Files & context
-              <span className="np-section__hint">Anything Anton should always have on hand</span>
-            </div>
-            <div className="np-dropzone">
-              <Upload size={16} strokeWidth={1.5} />
-              <span>
-                Drop files here, or{' '}
-                <span className="np-dropzone__link">pick from your computer</span>
-              </span>
-            </div>
-          </div>
         </div>
 
         <aside className="np-preview">
diff --git a/packages/desktop/src/index.css b/packages/desktop/src/index.css
index 520cf13e..c0eff9bb 100644
--- a/packages/desktop/src/index.css
+++ b/packages/desktop/src/index.css
@@ -21141,12 +21141,96 @@ button {
   color: var(--text);
   border-color: var(--border-strong);
 }
+.fl-addmenu {
+  position: relative;
+}
+.fl-addmenu__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 220px;
+  padding: 6px;
+  background: var(--bg-elev-1);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.4));
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  animation: fl-addmenu-in 0.12s ease-out;
+}
+@keyframes fl-addmenu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fl-addmenu__item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  background: transparent;
+  border: 0;
+  color: var(--text-2);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.fl-addmenu__item:hover {
+  background: var(--bg-elev-2);
+  color: var(--text);
+}
+.fl-addmenu__item svg {
+  color: var(--text-3);
+  flex-shrink: 0;
+}
+.fl-addmenu__item:hover svg {
+  color: var(--text);
+}
+.fl-addmenu__sep {
+  height: 1px;
+  background: var(--border);
+  margin: 4px 2px;
+}
+.fl-textmodal__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px 4px 20px;
+}
+.fl-textmodal__head h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+}
+.fl-textmodal__textarea {
+  min-height: 200px;
+  resize: vertical;
+  font-family: inherit;
+  line-height: 1.5;
+}
 .fl-split {
   display: grid;
   grid-template-columns: 1fr 320px;
   flex: 1;
   min-height: 0;
 }
+.fl-split.fl-split--nopreview {
+  grid-template-columns: 1fr;
+}
+.fl-split.fl-split--nopreview .fl-list-wrap {
+  border-right: none;
+}
 @media (max-width: 1100px) {
   .fl-split {
     grid-template-columns: 1fr 280px;
@@ -21286,6 +21370,10 @@ button {
   font-variant-numeric: tabular-nums;
 }
 .fl-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 60px 20px;
   text-align: center;
   color: var(--text-4);
@@ -21313,12 +21401,6 @@ button {
   overflow-y: auto;
   min-width: 0;
 }
-.fl-preview__empty {
-  padding: 60px 20px;
-  text-align: center;
-  color: var(--text-4);
-  font-size: 12px;
-}
 .fl-preview__thumb {
   padding: 20px;
   display: grid;
@@ -22236,11 +22318,6 @@ button {
   color: var(--text-4);
   line-height: 1.4;
 }
-.np-name {
-  display: flex;
-  align-items: stretch;
-  gap: 8px;
-}
 .np-input {
   flex: 1;
   padding: 10px 12px;
@@ -22272,23 +22349,6 @@ button {
 .np-textarea:focus {
   border-color: var(--border-focus);
 }
-.np-suggest {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  border-radius: 7px;
-  background: var(--bg-elev-1);
-  border: 1px solid var(--border);
-  color: var(--text-3);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
-}
-.np-suggest:hover {
-  background: var(--bg-elev-2);
-  color: var(--text);
-}
 .np-preview {
   position: sticky;
   top: 12px;
@@ -22352,27 +22412,6 @@ button {
   color: var(--text-4);
   line-height: 1.5;
 }
-.np-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 22px;
-  border: 1.5px dashed var(--border-strong);
-  border-radius: 10px;
-  color: var(--text-3);
-  font-size: 12.5px;
-  background: transparent;
-  text-align: center;
-}
-.np-dropzone__link {
-  color: var(--accent);
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
 /* ═══════════════════════════════════════════════════════════════════
    INTERACTION BLOCKS (.ix-*) — AskUser / Confirm / Plan inline cards
    Shared inline chat interaction shell. Accent + bordered + quiet variants.