CZEN
Open KitHubOpen
Chapter 08

Shared elements of the app

On a phone

A handful of things the app uses the same way across every view — worth knowing whether you’re in Kits, Paints, Gear, or Shopping.

At the top, the app keeps its logo, an offline indicator (it lets you know when you’ve lost your connection), and a Settings button. From here you switch between the four main views — Kits, Paints, Gear, and Shopping.

Search, filters, and the Add button are all contextual — they change based on whichever view you’re currently in. In the Paints view, the header also gains a switch for the Brand Catalogue and the Standards Swatch Chart. The app also offers quick access to the Kit Gallery from here, across your whole collection.

Photo viewer

The app uses the same photo viewer everywhere a gallery opens — zoom, arrow keys, keyboard navigation, swipe on touch devices, and a strip of thumbnails under the main image. When uploading, the app lets you choose whether to take a photo right away (camera) or pick one from your phone’s library.

Topics across the app

Topics work as an assignable tag on a kit, paint, or Gear item — on an item’s card, the app shows small coloured pills for its assigned Topics, and clicking a pill jumps you straight into that Topic’s detail view.

Wherever the app shows a link to an external site (a shop, instructions, a reference), it automatically fetches that site’s favicon — the link itself stays editable.

Confirmations and error states

The app uses one unified confirmation dialog (Yes/No) throughout — for irreversible actions (deleting something, signing a guest out, a hard reset of the app) it highlights the dialog as destructive. Text input (like renaming something) is handled through a similarly unified, generic field.

If a specific part of a screen crashes, the app catches the failure and isolates it to just that component — instead of a blank white screen, it offers a “Try again” or “Restart app” button, while the rest of the app keeps working.

Status badges

Coloured badges are used consistently across kit and paint cards — the badge colour helps you tell a status (in progress, finished, running low…) apart at a glance, before you even read the text.

Help, what’s new, and the Back button

Open this help with the question-mark button in the header; you can search it at the top. After an app update, a What’s new window shows once with the changes in the new version. Your browser’s Back button (on Android too) closes an open window or detail and takes you to the previous view — it never kicks you out of the app.

On a computer

A handful of things the app uses the same way across every view — worth knowing whether you’re in Kits, Paints, Gear, or Shopping.

Left-hand menu and top bar

On desktop the app keeps its navigation in the left-hand menu: the logo, the four main views — Kits, Paints, Gear, and Shopping — and under the active view its filters and sorting (for Paints also the sub-items My paints, Catalog, and Standards, for Gear the sub-items Accessories, Literature, and Topics). Below it is an always-visible Kit gallery item, and at the very bottom Help and Settings.

The page’s top bar shows its title, search, and an Add button that changes with the view. The offline indicator and the quick-add shortcuts belong to the mobile version — they’re not on desktop.

Photo viewer

The app uses the same photo viewer everywhere a gallery opens — zoom, arrow keys, keyboard navigation, swipe on touch devices, and a strip of thumbnails under the main image. When uploading on desktop, you pick files from your computer.

Topics across the app

Topics work as an assignable tag on a kit, paint, or Gear item — on an item’s card, the app shows small coloured pills for its assigned Topics, and clicking a pill jumps you straight into that Topic’s detail view.

Wherever the app shows a link to an external site (a shop, instructions, a reference), it automatically fetches that site’s favicon — the link itself stays editable.

Confirmations and error states

The app uses one unified confirmation dialog (Yes/No) throughout — for irreversible actions (deleting something, signing a guest out, a hard reset of the app) it highlights the dialog as destructive. Text input (like renaming something) is handled through a similarly unified, generic field.

If a specific part of a screen crashes, the app catches the failure and isolates it to just that component — instead of a blank white screen, it offers a “Try again” or “Restart app” button, while the rest of the app keeps working.

Status badges

Coloured badges are used consistently across kit and paint cards — the badge colour helps you tell a status (in progress, finished, running low…) apart at a glance, before you even read the text.

Help, what’s new, and the Back button

Open this help with Help in the left-hand menu; you can search it at the top. After an app update, a What’s new window shows once with the changes in the new version. Your browser’s Back button closes an open detail or window and takes you to the previous view — it never kicks you out of the app.