On a phone - andreaderuvo/argus GitHub Wiki

On a phone

There is no phone version. It is the same app, the same address, the same token and the same desks โ€” a session you left open on the laptop is the session you find on the train. What changes below 560px is the navigation, and it changes because the desktop navigation does not survive that width: measured on a 390px screen, a bar of seven tabs came to 476px of content in a 390px strip โ€” a tab and a bit off the side, and the ones you could see were 55px targets wearing 10px words.

The menu, not a bar

The navigation is a drawer that comes in from the left, and the โ˜ฐ in the header opens it. Tap the veil, tap a destination, or press Escape, and it goes away.

It holds the rail's destinations โ€” Files, Sessions, Windows, Prompts, Values, To do, System, Journal. Sessions, To do and Windows carry a count. An amber count means one of those sessions has stopped and is waiting for you, the same as everywhere else.

Two decisions inside that are worth saying out loud:

  • The hamburger wears the waiting mark itself, as a dot. An alert you have to open a menu to see is not an alert, and that is exactly what moving the navigation into a drawer would otherwise have cost.
  • There is no Settings row. The sliders are in the header on every screen, and a menu whose job is to hold what the header cannot hold has no business repeating it.

Desks you put away are in the drawer, under Put away: the desk's colour, the amber ring when an agent in it is waiting for you, and a tap brings it back. On a desktop they sit in the rail; a phone has no rail, and they used to land in the bottom bar as a stack of grey buttons.

The header fits the phone. It used to be 424px on every screen, so every phone narrower than that was shown the whole page shrunk to fit. Below 560px it now does without the keyboard's shortcuts (a phone has no keyboard to press them on) and the repository button, which is in Settings โ†’ About Argus; System stays only while it is an alarm (a disk or memory going amber or red), since it is in the menu anyway. Below 400px the header's buttons are 42px. It fits a 360px phone, with the alarm showing too.

If you want the bar back, it is a setting: Settings โ†’ Look โ†’ Bar along the bottom, on a phone. With it on you get four tabs along the bottom and the drawer keeps the other four โ€” which is the layout Argus had before, kept because a bar you can reach with a thumb without opening anything is a real argument, just not the default one.

A window's title bar

A window narrower than 520px keeps its name, the i, a โ‹ฏ and Close. Everything else โ€” the bell, the chain, full screen, moving it to another desk โ€” is in the sheet behind the โ‹ฏ.

Two things about how that is decided:

  • It is asked of the window, not of the screen. A 300px window on a wide monitor has exactly the same problem as a phone, and a media query cannot tell the two apart. So the window is its own container and answers for itself.
  • The sheet is read off the bar. Whatever the width hid is what the sheet offers, so a window that carries buttons of its own needs no special case and nothing can be left unreachable by forgetting to list it.

The name gets the room that leaves, because the name is the one thing on that bar you cannot work out from looking at the picture.

The desk toolbar

Icons only, below 560px, and bigger than they were: 40px tall instead of 36. Measured on a 390px screen, fourteen buttons wearing their words came to 970px of content in a 390px strip โ€” two thirds of the toolbar off the side, at a size a thumb cannot be sure of. What is left over still scrolls, because a desk toolbar is a row of tools and not a row of five.

The custom arrangement keeps no word either: the puzzle piece is distinct enough beside three tilings, and its label was a seventh of the strip.

Scrolling, and dragging

The desk tabs scroll sideways. That is worth stating because it is the thing that breaks first: what makes a tab draggable is telling the browser not to treat a touch on it as a scroll, and doing that to the whole strip is how the strip stopped scrolling โ€” twice.

So the rule everywhere something can be both dragged and scrolled past:

  • A quick swipe scrolls. Always.
  • A press held for about a third of a second picks the thing up โ€” a desk tab, a window's tab in the tray.
  • A prompt drags from its handle, the tile of six dots at the left of the row, and only from there. The gesture belongs to that 22px square; the rest of the list scrolls normally.

The terminal

The key bar under a session is the row a touch keyboard does not have: Esc, Tab, the arrows, and the control codes. A coarse pointer gets it by default, and two settings cover what a media query cannot see โ€” a laptop with a touchscreen you drive with the trackpad, and a tablet with a keyboard attached.

Scrolling the terminal with a finger pans the buffer rather than the page. Copying, pasting a screenshot, and the rest of it work as they do anywhere; see Sessions and the terminal.

If your keyboard duplicates letters as you type, that is a known one and the FAQ says what to do.

Targets

Nothing you tap is smaller than 46px (the header's buttons, at 42px below 400px, are the one exception), and a window's own buttons go to 36px as soon as the pointer is coarse โ€” an audit found a dozen of them sitting at exactly 30, which is comfortable with a mouse and a lottery with a thumb.

Installing it

Add it to the home screen and it runs without the browser's furniture, which is worth more than it sounds: an installed app has no tabs to switch and no address bar to focus, so nearly every keyboard shortcut that a browser would otherwise swallow reaches Argus instead โ€” see Keyboard shortcuts.

Several machines, several apps. A browser identifies an installed app by its origin โ€” scheme, host and port โ€” so https://one-machine:8090 and https://another:8090 are two apps and installing either has never had anything to do with the other. What made them hard to live with is that both were an icon called Argus drawn with the same picture: the manifest now carries the address it was asked for, so the name is Argus ยท host and the label under the icon is that host's own first word. Nothing is stored or guessed โ€” it is the Host header, which is what you typed.

If the browser never offers, the offer is a button: Settings โ†’ Go to โ†’ Install it on this device. It keeps whatever the browser raised, so you can take it when you want rather than when it asks; and where there was nothing to keep, it says why in three lines it can actually check โ€” a secure origin, a running service worker, a manifest that arrives with its icons โ€” and then where each browser hides the command by hand. Safari never offers and never will, which is a fact about Safari rather than a fault, and the sheet says so on an iPhone.

Getting the address and the token onto the phone in the first place is a QR code: Settings โ†’ Go to โ†’ Open on another device, or start the server with --qr and photograph what it prints. Each device can have its own token, so losing a phone costs you one revoke rather than a new token everywhere.

Scan once, then open it in your browser. The phone remembers the token in the browser that opened the link. A QR code, though, is usually opened by whatever read it โ€” Google Lens, the camera of a Samsung or a Xiaomi, a chat app โ€” in a browser of its own, which keeps nothing for Chrome or Safari. Argus notices that and says so, once per visit, with Open in Chrome (Android) and Copy the link (anywhere): open it there once and it stays remembered. Use the same address each time too โ€” an IP, a short name and a full name are three different sites to a browser, each remembering the token on its own. That is why the QR code is drawn for one address only (address in the config, else the machine's full name; the others are folded under it), and why Argus, opened at another, offers to move you there.