popcodeorg / popcodeorg/popcode

Header Bar Updates - Clearer Project Workflow

Open
#1,140 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

design enhancement ux
Dominant language
JavaScript
Stars
191
Forks
143
Avg merge
4d 11h
Merged PRs (30d)
5

Description

I have a few suggestions for a clearer project workflow an ultimately a more familiar experience when saving and working with projects. Also some visual design tweaks to ultimately make the header bar feel less overwhelming and more familiar.

header bar updates - popcode-01

Flow and Layout Changes

  • Add a distinct "title" that can be edited instead of using "Page title."
  • This includes an icon to let users know it can be edited and the "inline-edit" experience.
  • Add a "saved" indicator once the project has been named and is being worked on.
  • Separate current project actions from new project actions (left and right side).
  • Make "New Project" disabled in initial state and add a popover to let users know why it's disabled.
  • Move "zoom button" into hamburger menu. (not a popular action)

Visual Design Changes

  • Add "line" separators between logical groupings of actions
  • Add "button" outline for buttons
  • Lighten up the text and consider not using bold on everything.
  • Remove the "popcode" text in favor of logo to make room for actions.
  • I personally like the "chevron-style" dropdown icon. Just a personal taste thing.

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

No files or tests are named. Start by locating the header bar implementation and comparing it with the attached design reference, then break the workflow and visual suggestions into agreed, testable changes. Done requires an explicit scope and verification of the requested project actions and visual updates.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.