Layout System

FFFFinance lets you arrange your dashboard panels however you like. Choose from five layout modes in Settings > Layout -- each one gives you a different way to organise your workspace.

Layout Modes

1. Draggable Grid (Default)

A flexible grid where you can freely place and resize panels. Drag any panel by its header to move it, and pull the edges or corners to resize.

The default arrangement places 11 panels in a sensible starting layout, but you can rearrange everything to suit how you work.

Your layout is saved automatically -- it will be exactly how you left it next time you open the app.

2. Split View (BSP)

A structured layout that divides the screen into halves. Each section can be split again horizontally or vertically, creating a tree of panels. Swap panels by dragging one header onto another. Resize by dragging the divider between sections.

This mode works well if you like a tidy, evenly-spaced arrangement.

3. Tabbed Tiling

A tabbed window manager where panels can be grouped into tabs. Multiple panels share a single container with tab headers -- click a tab to switch between them. Drag panels to rearrange, or drag to an edge to split and dock.

Great for keeping many panels accessible without cluttering the screen.

Your layout is saved automatically.

4. Mosaic

A fluid tiling layout where all panels fill the available space. Drag the dividers between panels to resize them. Drop panels onto others to split the space into new arrangements.

5. Simple Grid

A fixed layout with no dragging or resizing. Panels are arranged in a predetermined grid. This mode is useful if you prefer a stable, predictable layout or are on a lower-powered device.

Panel Controls

Every panel has a header bar with handy controls:

Control	What it does
Drag	Grab the header to move the panel (in draggable layout modes)
Collapse	Minimise the panel to just its header bar
Pin	Keep the panel visible (highlighted in your accent colour)
Refresh	Reload the panel's data

Some panels also have custom action buttons in their header for panel-specific features.

Panel Settings

Many panels have a settings sidebar where you can adjust how they display. Common setting types include:

Setting type	Example
Sections	Collapsible groups like "Appearance" or "Data"
Toggles	On/off switches like "Show labels"
Sliders	Adjustable values like opacity or range
Dropdowns	Selection lists like time period or chart type

Saving Layouts

• Your current layout is saved automatically as you make changes
• You can save and load named layouts from Settings > Layout
• When using the web app, your layout preferences sync across devices

Look and Feel

You can fine-tune the visual feel of your layout in Settings:

Setting	Options
Panel corners	Square, slightly rounded, rounded, or very rounded
Panel spacing	Compact, normal, or spacious
Animation speed	None, fast, normal, or slow
Panel blur	Frosted glass effect behind panels (on/off)
Panel shadows	Drop shadows on panels (on/off)
Accent glow	Subtle glow effect on accent-coloured elements (on/off)
Reduce motion	Minimise animations for accessibility (on/off)