Understanding the Main Interface

The item list page is the core interface of NeatHub. This page explains each functional area in detail.

In Simple Terms

The "page full of items" you see when you open the app is the main interface. Almost every feature in the app starts here -- search, add items, access settings, view reminders -- all accessible from this page.

Overall Page Structure

The item list page is divided into several areas from top to bottom:

  • Top: title bar and tool icons
  • Middle: filter bar and item list
  • Bottom: floating action buttons
  • Side: drawer menu
Screenshot placeholder: overall layout of the item list page with labeled areas

Top Toolbar

The top area displays the app title and several feature icons:

Screenshot placeholder: top toolbar icons

Quick Filter Area

Cascade Category Shortcuts

  • Displays frequently used category shortcuts (cascade attributes from Attribute Management, such as multi-level "Location" or "Category" attributes)
  • Tap to enter the item list for that category
  • Customize which categories are shown in Module Settings

Attribute Tag Filters

  • Displays filter tags for commonly used attributes
  • Tap a tag to quickly filter by that attribute value
  • Tap "More" to expand and show all tags

Aggregate View

Custom item groupings that you can swipe through horizontally:

  • Each group shows a title and item count
  • Swipe horizontally to browse items within a group
  • Tap the list icon to view the full list
In Simple Terms

The Aggregate View is like "quick groups" on the home page. For example, set up an "Expiring Soon" group and you can see those items right on the home page without navigating to the reminders page. See Module Settings for how to configure this.

List Action Bar

Above the list is a row of action buttons:

  • View Switch: Three display modes -- list, waterfall, and grid. See List Views
  • Total Count: Shows "Total X | Value X"
  • Filter: Opens the filter panel to filter by attributes. See Search & Filter
  • More: Sort Settings, multi-select mode, and other options
Screenshot placeholder: list action bar

Item List

The core area displaying all item cards:

Item Card Content

  • Item image (primary image)
  • Item name
  • Quantity, price, and other info
  • Status and attribute tags

Card Actions

Pull to Refresh

  • Pull down to refresh the list data
  • Pull up to load more items

Multi-Select Mode

Long-press an item card to enter multi-select mode:

  • Check multiple items
  • An action bar appears at the bottom: edit, delete, move, etc.
  • Tap "Cancel" to exit multi-select mode

For more on what batch operations can do, see Batch Operations.

Screenshot placeholder: multi-select mode and bottom action bar

Floating Button Area

Several quick-action buttons in the bottom-right corner:

Screenshot placeholder: floating button group in the bottom-right corner
Tip

Long-press the add button to enter screenshot mode, which hides the floating buttons for 5 seconds so you can take a clean screenshot to share.

Side Drawer Menu

Tap the menu icon in the top-left corner to open:

Screenshot placeholder: side drawer menu expanded

Web Version Layout

The web version uses a split-pane layout:

  • Left side: Item list
  • Right side: Item detail page
  • A draggable divider in the middle adjusts the width
  • Ideal for viewing the list and details simultaneously on a large screen
Screenshot placeholder: desktop split-pane layout

Related Articles