> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mindli.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Move Boxes And Connect Sparks

> Understand how Sparks and Boxes relate, and what happens when you move, connect, or restore them

export const MndIcon = ({icon, size = 20, color, circle = false}) => {
  const iconUrl = `https://app.mindli.com/api/icon/${icon}`;
  const [isDarkMode, setIsDarkMode] = React.useState(false);
  React.useEffect(() => {
    const checkTheme = () => {
      const darkClass = document.documentElement.classList.contains('dark');
      const darkAttr = document.documentElement.getAttribute('data-theme') === 'dark';
      setIsDarkMode(darkClass || darkAttr);
    };
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => observer.disconnect();
  }, []);
  let finalColor = color;
  if (!color) {
    finalColor = isDarkMode ? '#FFFFFF' : '#333333';
  }
  const iconElement = <span style={{
    width: `${size}px`,
    height: `${size}px`,
    backgroundColor: finalColor,
    maskImage: `url(${iconUrl})`,
    maskSize: 'contain',
    maskRepeat: 'no-repeat',
    WebkitMaskImage: `url(${iconUrl})`,
    WebkitMaskSize: 'contain',
    display: 'inline-block',
    verticalAlign: 'middle'
  }} />;
  if (!circle) {
    return <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      verticalAlign: 'middle',
      transform: 'translateY(-0.08em)'
    }}>
        {iconElement}
      </span>;
  }
  const circleSize = Math.max(size + 6, 20);
  return <span style={{
    display: 'inline-flex',
    width: `${circleSize}px`,
    height: `${circleSize}px`,
    border: `2px solid ${finalColor}`,
    borderRadius: '9999px',
    alignItems: 'center',
    justifyContent: 'center',
    verticalAlign: 'middle',
    transform: 'translateY(-0.08em)'
  }}>
      {iconElement}
    </span>;
};

## Overview

A Spark is never alone. Every Spark in MindLi is connected to at least one Box — this is the core rule that keeps your thinking organized and reachable.

Understanding how Sparks and Boxes relate helps you organize confidently without losing track of anything.

***

## A Spark Is Always Connected

Every Spark must be connected to at least one Box. When you add a new Spark, it automatically connects to **Inbox** (your default Box).

A Spark can connect to multiple Boxes at once. For example, a recipe could belong to both **"Healthy Eating"** and **"Quick Dinners"**.

```
Spark: "15-Minute Salmon Bowl"
├── Connected to: Healthy Eating
└── Connected to: Quick Dinners
```

Tap **<MndIcon icon="MNDIconBoxes" /> Boxes** on any Spark to view and edit its connections, or let AI suggest relevant Boxes.

***

## Connecting and Disconnecting Sparks

| Action                  | What happens                                                          |
| ----------------------- | --------------------------------------------------------------------- |
| **Connect to Box**      | The Spark appears in the new Box while staying in its existing Boxes  |
| **Disconnect from Box** | The Spark is removed from that Box but stays in other connected Boxes |

<Note>
  If you connect a Spark to a new Box, MindLi can optionally disconnect it from Inbox automatically. Enable this in **<MndIcon icon="MNDIconSettings" /> Settings** > **<MndIcon icon="MNDIconBox" /> Box** > **Auto Disconnect from My Inbox**.
</Note>

***

## Moving Boxes

Moving a Box means changing its parent — placing it under a different Box or making it a top-level Box.

| Scenario                       | Result                                          |
| ------------------------------ | ----------------------------------------------- |
| **Move Box under another Box** | The Box becomes a Sub-Box of the new parent     |
| **Move Box to top level**      | The Box appears directly on Home with no parent |

When you move a Box, all its Sub-Boxes move with it automatically, preserving the entire structure.

Sparks inside a moved Box stay connected as-is. Moving a Box does not affect Spark connections.

***

## What Happens When You Trash a Box

When you move a Box to Trash, MindLi checks whether any Sparks would be left without an active Box.

| Spark situation                      | Options                                                         |
| ------------------------------------ | --------------------------------------------------------------- |
| **Spark has other active Boxes**     | No change needed — the Spark stays connected to those Boxes     |
| **Spark would have no active Boxes** | Choose to **Move Spark to Trash** or **Connect Spark to Inbox** |

<Note>
  Trashing a Box does not delete its Spark connections. The connections are preserved so you can restore everything later.
</Note>

### Sub-Boxes When Trashing

When you trash a Box that has Sub-Boxes, you choose what happens to them:

* **Move Sub-Boxes to Trash** — Sub-Boxes go to Trash along with the parent
* **Move Sub-Boxes up** — Sub-Boxes move up one level (to the parent Box or Home) and stay active

```
Before trashing "Projects":
Home
└── Projects        ← trashing this
    ├── Website
    └── Mobile App

After trashing (with move up):
Home
├── Website         ← moved up to Home
└── Mobile App      ← moved up to Home
```

***

## Restoring from Trash

When you restore a Spark or Box from Trash, MindLi reconnects it to its original Boxes when possible.

| Restore scenario                       | What happens                                                                                                     |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| **Spark's original Boxes are active**  | Spark reconnects to those Boxes                                                                                  |
| **Spark's original Boxes are trashed** | Spark connects to **Inbox**                                                                                      |
| **Box with trashed Sub-Boxes**         | Choose to restore them (Sub-Boxes and Sparks come back) or keep them trashed (only the selected Box is restored) |

<Check>
  **Example:** You trash a Box called "Old Project" and its Sparks. Later, you restore one of those Sparks. Because "Old Project" is still trashed, the Spark automatically connects to Inbox so it remains accessible.
</Check>

***

## Quick Reference

| Action                              | Spark connections                                      | Box structure                    |
| ----------------------------------- | ------------------------------------------------------ | -------------------------------- |
| **Connect Spark to Box**            | Spark added to new Box                                 | No change                        |
| **Disconnect Spark from Box**       | Spark removed (if other Boxes exist)                   | No change                        |
| **Move Box**                        | No change                                              | Parent updated                   |
| **Trash Box**                       | Preserved (Sparks optionally trashed or sent to Inbox) | Box moves to Trash               |
| **Restore Box**                     | Preserved                                              | Box returns to original location |
| **Restore Spark (no active Boxes)** | Connects to Inbox                                      | No change                        |

<div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '2rem', paddingTop: '2rem' }}>
  <a href="/get-started/thinking-patterns" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: 'currentColor', textDecoration: 'none', fontSize: '0.95rem', border: 'none' }}>
    <span>‹</span> <MndIcon icon="MNDIconBrain" size={16} color="currentColor" /> <span>Thinking Patterns</span>
  </a>
</div>
