Move Up and Down

Reorder files and folders inside the parent so the visual order matches the way your UI renders and how you want to talk about the UI.

Move Up

Bump a file or folder higher inside the parent so the visual order matches the way your UI renders.

When to use

• When you want the file order to mirror your JSX
• When arranging components to match the mental model of the UI

How to use

1. Right-click on a file or folder in the File Nesting Explorer
2. Select "Move Up" from the context menu
3. The item jumps one position higher
4. The new order sticks, even after reloading the project

Example

If your component renders Header, then Content, then Footer:

// Dashboard.tsx
<div>
  <Header />
  <Content />
  <Footer />
</div>

Use Move Up to arrange files in the same order:

Dashboard.tsx
  ├── Header.tsx    ← First (matches JSX)
  ├── Content.tsx   ← Second
  └── Footer.tsx    ← Third

Move Down

Push a file or folder lower in the list so the explorer matches how you want to talk about the UI.

When to use

• When a file should appear later in the UI narrative
• When reorganizing components after inserting new ones
• When alphabetical order doesn't match your flow

How to use

1. Right-click on a file or folder in the File Nesting Explorer
2. Select "Move Down" from the context menu
3. The item drops one position lower
4. The new order stays put across sessions

Example

Before (alphabetical order):

Dashboard.tsx
  ├── Content.tsx
  ├── Footer.tsx
  └── Header.tsx

After moving Content.tsx down twice:

Dashboard.tsx
  ├── Footer.tsx
  ├── Header.tsx
  └── Content.tsx   ← Moved down