Page header: "+ Add tag" and "+ Add property" above the title until the first one

Open
  • Is something wrong?
#315 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
72/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Active
Tech stack
react, tailwindcss, typescript
Domain
frontend

Research direction

Start in PageView.tsx at the data-line layout, then read Tags.tsx and Properties.tsx to see how each component marks its empty state. Update the layout and margins while keeping DOM order stable, and revise the layout comment and relevant stories in PageView.stories.tsx. Check the running app against the listed first-tag, first-property, and mixed-state behaviors, including tag input focus.

Written by the indexing model from the issue text.

Description

enhancement

What

Put "+ Add tag" and "+ Add property" above the page title, the way Notion does, while each one is still for adding the first tag or property. Once a page has a tag, "+ Add tag" stays at the end of the chip row under the title, as it does now. Once a page has a property, "+ Add property" stays under the table.

Today an empty tag row and an empty properties section sit beside the title.

How

Both components already mark themselves data-bare when empty:

  • Tags when it has no chips (Tags.tsx)
  • Properties when it has no rows and no draft open (Properties.tsx)

So the "first one" rule is already computed, and this is a layout change in PageView.tsx (the data-line div that holds the title, tags and properties):

  1. The title takes a full row. [data-bare] items get a negative order so they come before it, and filled items come after. The after: line-break trick goes away. Keep the reordering in CSS so the DOM doesn't change, and an open tag input or property draft isn't remounted when it moves.
  2. Re-tune the margins (mb-3 on the tag row, mb-4 on the section, mt-6 on the title) so the buttons sit close above the title.
  3. Update the layout comment in PageView.tsx and the stories in PageView.stories.tsx that describe the buttons as sitting "to the right" of the title.

Unchanged: the hover/focus reveal (the buttons are still inside the same data-line), journal days, zooms and references (they never show empty tags or properties).

Behaviour to settle

  • First tag: on Enter, the chip appears and the row moves below the title, with the input still open and focused. Proposed: move on the first Enter, which matches Notion. The other option is to keep the row bare until the input closes.
  • First property: clicking "+ Add property" opens a draft at once, so the table appears under the title straight away. Same as Notion.
  • Empty strip: the hidden buttons keep their room (opacity, not removal), so a new page has a blank band above its title.
  • Tab order: the order is visual only, so Tab still goes title → "+ Add tag". Leave it unless it bothers someone; fixing it means moving DOM nodes.

Done when

  • A new page shows both buttons above the title on hover or focus, and nothing beside it.
  • Adding the first tag moves the chip row under the title without losing the input's focus.
  • Adding the first property puts the table under the title.
  • With some tags and no properties, only "+ Add property" is above the title.
  • Stories are updated, and the change is checked in the running app.

🤖 Generated with Claude Code

Dominant language
TypeScript
Stars
0
Forks
1
Avg merge
46m
Merged PRs (30d)
117

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from shovon/pbnotes

All issues in shovon/pbnotes

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.