# FPDS Homescreen Design Brief

Design (and maybe even prototype) a mobile homescreen for Capyloon that tells the story, and illustrates the values, of permissionlessness technologies when they are the default in our daily life online.

## Project

Capyloon is a mobile operating system, with a user interface built entirely as web apps. This project is to design the homescreen app around the idea of a "web3 native" user.

This project is part of a larger initiative, where we'll be shipping four versions of the OS. The first is the default homescreen. But the following editions are explorations into web3-nativeness.

The design should not be exhaustive - a minimal sketch of what is possible and where your imagination goes, given the inputs below.

## Inputs and Inspiration

Prompts
* How would the iPhone be different if Apple let users decide which apps were available? Or let them purchase books or music from anywhere? Or let users pay for something however they liked? And without giving Apple 30% cut?
* How the Android be different if it wasn't designed to make all roads lead to Google? And there wasn't a surveillance concern?
* What would an NFT-native phone be like?

Values / Themes
* user needs > device or platform or telco neeeds
* users feel in control of their online life
* unmediated communication between people
* unmediated commerce between people
* every user is a power user - the system adapts to their needs
* users are part of larger cooperative networks
* applications and services are interoperable
* applications work offline by default
* user data is available offline
* applications work locally between users in the same physical space
* contacts are directly between users
* data syncs between disparate platforms
* data is not visible to app/platform developers by default, but can be given access temporarily (and revoked)

Technologies to highlight
* ipfs / filecoin / libp2p
* peer to peer
* metamask
* web3
* cryptocurrencies
* NFTs

Examples with some of these values
* Phones:
* App stores:

## Homescreen app UI

What's modifiable?
* Can replace whole Homescreen app - it's a regular web app of html/js/css but with some new events and web APIs.
* Has a few dependencies on the System app (also a web app), noted below.
* Where is the html / js / css to modify in Homescreen app in capyloon/nutria repo?
* The whole app is in nutria/apps/homescreen . There are 2 major parts:
* The "main view" with the icons and widgets. This code is mostly under components/action_xyz.js . The idea is that you can add various kind of shortcuts to the homescreen, not just links. Widgets are another kind, activities another one.
* The "search view", triggered when focusing the search box. It gathers results from a number of search sources (under js/search), and also chooses a search engine when falling back to a keyword search. The goal is to provide fast access to your data, there's of course still a lot to do.

*Where do I change the default homescreen?*

* The homescreen app name is hardcoded here: https://github.com/capyloon/nutria/blob/5fcf7866d777c5230babca5000135c6689db2bd3/apps/system/js/bootstrap.js#L68
* Either changing that or renaming the apps/homescreen/ to replace it should work.

*What is the development, debugging and testing process to see my changes?*

* On desktop the easiest way to test homescreen changes is to connect to capyloon using Firefox devtools (remote debugging, localhost:6222). The homescreen appears in the tab list, and you can just reload it from there.
* On Gonk (mobile) devices, when pushing the homescreen we kill it to force a restart. The command to use is `./jacakady push homescreen`. The `./jackady` utility has other device related commands, see https://github.com/capyloon/nutria#build-commands for an up to date documentation.

## System app UI

*What in system UI is modifiable?*

Everything I guess... The system UI takes care of:

| Feature | Code |
| -------- | -------- |
| Window management: normal frames, keyboard frame, webext popup, carousel | components/window_manager.js, components/content_window.js, component/input_method.js, components/browser_action_popup.js|
| Lockscreen | components/lock_screen.js |
| Status bar | components/status_bar.js |
| Quick Settings | components/quick_settings.js |
| Page info | components/page_info.js |

*Where do the System app and Homescreen app have dependencies?*
* The homescreen uses the system app "launch" activity when opening a url with a keyword search. We can't use window.open() because we need to keep track of the search query.
* The system app uses the "add-to-home" homescreen activity to add links to the homescreen.
* The system app uses the "toggle-app-list" homescreen activity to show/hide the list of installed apps (which is different from the homescreen favorites).
* The system app uses the "new-tab" homescreen activity to trigger the search interface from a keyboard shortcut (Ctrl+t).
* There's a hack to stop the window swipe behavior while moving icons on the homescreen: https://github.com/capyloon/nutria/blob/5fcf7866d777c5230babca5000135c6689db2bd3/apps/system/components/content_window.js#L742 and https://github.com/capyloon/nutria/blob/5fcf7866d777c5230babca5000135c6689db2bd3/apps/homescreen/components/actions_wall.js#L168