kindred/silo
1
1
Fork 0
Code Issues 29 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(web): CreateItemPane two-column redesign with sidebar #15

New Issue
Closed
opened 2026-02-07 02:20:37 +00:00 by forbes · 0 comments
forbes commented 2026-02-07 02:20:37 +00:00
Owner
Copy Link

Context

The current CreateItemPane is a simple single-column scrolling form. The redesign (specified in frontend-spec.md) replaces it with a two-column layout: form on the left, metadata/attachments/thumbnail sidebar on the right.

Dependencies

  • #11 TagInput component (for project multi-select)
  • #13 CategoryPicker component (for category selection)
  • #14 FileDropZone component (for attachments sidebar)
  • #12 Backend presigned uploads (for real file uploads — can use mocks initially)

Layout

CSS Grid two-column: grid-template-columns: 1fr 320px. Left column scrolls independently. Right sidebar is a flex column with bordered sections.

┌────────────────────────────────────┬──────────────┐
│  Header: 'New Item' [green]        │              │
├────────────────────────────────────┤              │
│  ── Identity ────────────────────  │  Auto-       │
│  [Type *]        [Description]     │  assigned    │
│  Category *: [CategoryPicker]      │  metadata    │
│                                    │──────────────│
│  ── Sourcing ────────────────────  │  Attachments │
│  [Sourcing Type]  [Standard Cost]  │  [DropZone]  │
│  [Sourcing Link]                   │  file1.FCStd │
│                                    │──────────────│
│  ── Details ─────────────────────  │  Thumbnail   │
│  [Long Description]                │  [preview]   │
│  [Projects: TagInput]              │              │
└────────────────────────────────────┴──────────────┘

Form Sections (left column)

Divided by section headers (11px uppercase label + horizontal line).

Section Fields
Identity Type* (select), Description (input), Category* (CategoryPicker)
Sourcing Sourcing Type (select), Standard Cost (number), Sourcing Link (input)
Details Long Description (textarea), Projects (TagInput)

Fields within sections use a 2-column sub-grid: grid-template-columns: 1fr 1fr with gap: 1.25rem 1.5rem. Full-width fields span both columns.

Sidebar Sections (right column)

Three sections separated by --ctp-surface0 borders:

  1. Auto-assigned metadata: Read-only rows showing Revision ('A'), Created By (current user)
  2. Attachments: FileDropZone component
  3. Thumbnail: 4:3 placeholder box, click to upload image. If uploaded, show preview.

Submission Flow

  1. Validate: type and category required
  2. POST /api/items with form data
  3. For each attachment, POST /api/items/{pn}/files with object key (if #12 is done)
  4. If thumbnail, PUT /api/items/{pn}/thumbnail
  5. Call onCreated(item)

File association failures show warnings but don't block (item was created).

Files Modified

  • web/src/components/items/CreateItemPane.tsx — full rewrite

Acceptance Criteria

  • Two-column layout renders correctly
  • Form sections with headers display properly
  • CategoryPicker replaces select dropdown
  • TagInput replaces toggle buttons for projects
  • Sidebar shows metadata, attachments zone, thumbnail area
  • Form submission creates item via API
  • File attachments associated on creation (when backend ready)
  • Responsive: sidebar collapses below form on narrow screens
  • TypeScript compiles clean
## Context The current CreateItemPane is a simple single-column scrolling form. The redesign (specified in `frontend-spec.md`) replaces it with a two-column layout: form on the left, metadata/attachments/thumbnail sidebar on the right. ## Dependencies - #11 TagInput component (for project multi-select) - #13 CategoryPicker component (for category selection) - #14 FileDropZone component (for attachments sidebar) - #12 Backend presigned uploads (for real file uploads — can use mocks initially) ## Layout CSS Grid two-column: `grid-template-columns: 1fr 320px`. Left column scrolls independently. Right sidebar is a flex column with bordered sections. ``` ┌────────────────────────────────────┬──────────────┐ │ Header: 'New Item' [green] │ │ ├────────────────────────────────────┤ │ │ ── Identity ──────────────────── │ Auto- │ │ [Type *] [Description] │ assigned │ │ Category *: [CategoryPicker] │ metadata │ │ │──────────────│ │ ── Sourcing ──────────────────── │ Attachments │ │ [Sourcing Type] [Standard Cost] │ [DropZone] │ │ [Sourcing Link] │ file1.FCStd │ │ │──────────────│ │ ── Details ───────────────────── │ Thumbnail │ │ [Long Description] │ [preview] │ │ [Projects: TagInput] │ │ └────────────────────────────────────┴──────────────┘ ``` ## Form Sections (left column) Divided by section headers (11px uppercase label + horizontal line). | Section | Fields | |---------|--------| | Identity | Type* (select), Description (input), Category* (CategoryPicker) | | Sourcing | Sourcing Type (select), Standard Cost (number), Sourcing Link (input) | | Details | Long Description (textarea), Projects (TagInput) | Fields within sections use a 2-column sub-grid: `grid-template-columns: 1fr 1fr` with `gap: 1.25rem 1.5rem`. Full-width fields span both columns. ## Sidebar Sections (right column) Three sections separated by `--ctp-surface0` borders: 1. **Auto-assigned metadata**: Read-only rows showing Revision ('A'), Created By (current user) 2. **Attachments**: FileDropZone component 3. **Thumbnail**: 4:3 placeholder box, click to upload image. If uploaded, show preview. ## Submission Flow 1. Validate: type and category required 2. `POST /api/items` with form data 3. For each attachment, `POST /api/items/{pn}/files` with object key (if #12 is done) 4. If thumbnail, `PUT /api/items/{pn}/thumbnail` 5. Call `onCreated(item)` File association failures show warnings but don't block (item was created). ## Files Modified - `web/src/components/items/CreateItemPane.tsx` — full rewrite ## Acceptance Criteria - [ ] Two-column layout renders correctly - [ ] Form sections with headers display properly - [ ] CategoryPicker replaces select dropdown - [ ] TagInput replaces toggle buttons for projects - [ ] Sidebar shows metadata, attachments zone, thumbnail area - [ ] Form submission creates item via API - [ ] File attachments associated on creation (when backend ready) - [ ] Responsive: sidebar collapses below form on narrow screens - [ ] TypeScript compiles clean
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
forbes
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: kindred/silo#15
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?