Home grid
The menu's Home screen: your apps in a grid you arrange by long-press or Edit, with folders and the app drawer.
openvibe-shared/ov-homeJSON
Build it
OpenVibeHome.home(el, o)Props
apps- list?
back- any
look- function?
user- object?
token- string?
tools- list?
usage- any
yours- list?
groups- list?
onOpen- any
apiBase- any
feedLive- function?
onPosted- function?
actorBase- any
frameBase- any
toolCount- any
mountIcons- any
pulseReady- function?
feedMissing- function?
Anatomy
- gridThe apps and folders, four or five to a row on a phone and a wrapped grid on a computer.
- appOne app tile: its icon and name, a link; long-press starts Edit and drags it.
- folderA tile of up to four app previews that opens the folder.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Movement is removed; a tile still moves with the keyboard and Edit still works.
- Name
- Your home grid
- Target
- At least 44 × 44 px per tile
- Focus
- Arrow keys move between tiles in Edit; Delete takes a tile off Home; Enter opens the app.
States
- default
- editing
- dragging
- folder-open
- signed-in
- signed-out
Tokens
color.bg.raisedcolor.text.secondarysize.taphsl(--ovh-h)
Android · Jetpack Compose
LazyVerticalGrid
Use a LazyVerticalGrid of app tiles with long-press drag (ItemTouchHelper or a drag-and-drop grid); folders are tiles with four previews.
iOS · SwiftUI
Use a LazyVGrid of app tiles with .onDrag/.onDrop and a jiggle-free Edit mode; folders open a sheet.
Markup
Default
<div class="ovh"><div class="ovh-sec"><span>Your Home</span><button type="button" aria-label="Edit Home">Edit</button></div><ul class="ovh-grid" aria-label="Your home"><li><a class="ovh-app" href="https://openvibe.live"><span class="ovh-ic"></span><span class="ovh-name">Live</span></a></li><li><a class="ovh-app" href="https://openvibe.chat"><span class="ovh-ic"></span><span class="ovh-name">Chat</span></a></li></ul></div>