# Stellar Notes desktop: polished HTML reference

A polish of the Stellar Notes desktop app (0.1.3, `StellerSecurity/Stellar.UI.Notes.DesktopApp`,
Angular + Ionic in Electron) in the Stellar design system. **The structure and the features stay
as they are**: library and folders, the notes list, the editor, Favorites, folders, search, selecting
several notes, locking a note and the app with a password, sharing through Stellar Secret, Stellar ID. What
changes is how it looks and reads: one blue, one dialog, one menu, errors at the field, real empty
states, cleaner note rows, and fixed texts. Round 2 (after the internal review, 21 Oct 2026) makes it
behave like a desktop app rather than a web page, with Apple Notes on the Mac as the reference: desktop
density, a sidebar that hides, the account at the foot of the sidebar, selection with ⌘-click and
Shift-click, Lock, Share and Favorite on view in the editor toolbar, and the real app icon.

One design for macOS, Windows and Linux. The window frame (traffic lights, caption buttons) is drawn
by the operating system, so nothing here imitates it.

Plain HTML, CSS and JS, no build step, no dependencies. Poppins comes from Google Fonts; icons are
Tabler (MIT), copied from the package into `icons.js`.

## Open it

```
cd build && python3 -m http.server 8080    # then open http://localhost:8080/
```

`index.html` is the entry point: every screen as a picture, one click into it. Inside the app the
dark chip in the bottom left corner, just above the account row ("Review: states"), switches between
states: empty, search without results, several notes selected, the sidebar hidden, every menu and
dialog. The prototype keeps your notes in this browser
(`localStorage`), so it behaves like the app: write a note, lock it, make a folder, set an app
password and open the app again.

Sample passwords: the locked sample note and the app lock screen both take `Zurich2026` (an app
password you set in Settings replaces it).

## Install it like an app (Safari)

The build installs as its own window with the Stellar Notes icon, so it can be reviewed the way a
desktop app is used. Safari needs the build on a web address (it cannot add a `file://` page):

1. Open the link to the build in Safari on the Mac.
2. In the menu bar: File, then Add to Dock. Keep the name "Stellar Notes" and press Add.
3. Open Stellar Notes from the Dock. It opens in its own window, without the browser around it.
4. The review chip stays in the corner of that window, so every state is still one click away.

The installed window starts with the sample notes: Safari copies cookies into the Dock app, not the
browser's stored data. `manifest.webmanifest` gives the name, the window mode (`standalone`), the start
page (`app.html`) and the icons; every page links it, with an `apple-touch-icon` and a `theme-color`.

## Screens

| File | In the app today | States in this build |
|---|---|---|
| `app.html` | `home.page`, `add-note.page`, the modals | a note open; nothing selected; no notes; Favorites (and empty); a folder (and empty); search with and without results; a locked note (shut and unlocked); the sidebar hidden and shown; logged in and out; 2 and 4 notes selected; every menu and dialog (see the chip) |
| `locked.html` | the "App Is Locked" modal in `home.page.html` | locked; wrong password; reset password dialog |
| `login.html` | `profile/login` | log in; field errors; after a password reset |
| `forgot-password.html` | `profile/forgot-password`, `create-new-password` | email; the code; the new password |
| `register.html` | `profile/create-account` | the form; field errors |
| `index.html` | none | review entry point, not an app screen |

## Worth knowing before you build it

Everything below is a change against the app as it is today. Nothing here changes what the app does
with notes, encryption, sync or Stellar ID; it changes what the person sees.

### Text fixes

| Where | Today | In this build |
|---|---|---|
| Delete a note | Your’e gone permanently delete this note? | This note will be deleted permanently. You cannot undo this. |
| Delete selected notes | Your’e gone permanently delete this notes? | The 2 selected notes will be deleted permanently. You cannot undo this. |
| App password is on | Encryption successfully work | The app password is on (the line under it is unchanged: "Your notes are safe and encrypted with your password.") |
| Log in | Don’t have an Stellar ID? | Don’t have a Stellar ID? |
| Create Stellar ID | Already have Stellar ID? | Already have a Stellar ID? |
| Empty editor | Your Notes Await · Tap to + button to add note | Select a note · Pick a note from the list to read or edit it, or start a new one. [New note] |
| Note count | 1 notes | 1 note |
| Settings | Ask for password when opening App | Ask for password when opening the app |
| App password | Password On App · Lock app with password · Add App Password · Disable App Password | App password · Turn on app password · Turn off app password |
| Password fields | placeholders Input Password · Confirm Password | labels Password · Confirm password |
| Lock a note | Lock Note · Lock Note with password | Lock note · Set a password for this note. You will need it to open the note. |
| Unlock a note | This note is locked · Enter the password for the note · Confirm | Unlock note · This note is locked. Enter its password to open it. · Unlock |
| Remove a lock | Remove Lock Password · Are you sure, you want to remove the password for the note? It will be stored in a decrypted-state… | Remove the lock? · The note will no longer ask for a password and will be stored decrypted on this device… |
| App locked | App Is Locked · Reset Password | The app is locked · Reset password |
| Reset dialog | WARNING · Please confirm that you want to the reset password. If you confirm all notes stored will be deleted on your device and cant be recovered! | Reset the app password? · Resetting deletes all notes stored on this device. They cannot be recovered. · [Reset and delete notes] |
| Turn off app password | To disable app password, please enter current password · Warning, this will leave your notes in a decrypted state… | Turn off the app password? · Enter your current app password to confirm. · This leaves your notes in a decrypted state. You can add a password again at any time. |
| Password mismatch | The two passwords does not match. · Passowrd do not match | The passwords do not match. |
| Account menu, logged out | Log In to your Profile · Please enter your email and password | Stellar ID · You are not logged in. · [Log in] [Create Stellar ID] |
| Account menu, logged in | Account Name · Logout | Logged in with Stellar ID · Log out |
| Log out | Confirm Logout · Are you sure you want to logout? · You’re logged out. Your notes is still available on this device. | Log out? · Your notes stay available on this device. · You are logged out. Your notes are still on this device. |
| Log in | Stellar ID - Login · Please enter your email and password · Log In | Log in with Stellar ID · Enter the email and password of your Stellar ID. · Log in |
| Forgot password | Forgot Password? · Please enter email to receive verification code · Send Code · Please input code · Don’t receive a code? | Forgot your password? · Enter the email of your Stellar ID and we will send you a verification code. · Send code · Enter the code · Didn’t get a code? |
| Create Stellar ID | Please enter email and password to create your free Stellar ID. · Create Account | Enter your email and a password to create your free Stellar ID. · Create Stellar ID |
| Share | How it works? · Write and send message, it will be deleted once read. · Create Secret · Your note secret created. Copy link or share it. · Burn Secret | How it works · Stellar Secret creates a one-time link for your note. Send it to someone, and the message is deleted once it is read. · Create secret link · Your secret link is ready · Burn secret |
| Strength block | Password must have at least 6 characters · Upper & lower case letters · Longer Password · Great Password! | At least 6 characters · Upper and lower case letters · 10 characters or more · Great |
| Editor placeholders | Enter title · Enter your note here.. | Untitled note · Write your note here |
| List heading for All Notes | Notes | All notes (the same name as in the sidebar) |
| Everywhere | Title Case (New Note, All Notes, Search Note) | sentence case (New note, All notes, Search notes) |

### Behaviour and layout changes

1. **One blue.** The Ionic primary `#5d6fa3` (New at Folders, the select checkboxes, Lock Note,
   Create Stellar ID) is gone. Set `--ion-color-primary` to `#2761FC` (shade `#2152D4`) in the theme
   and every Ionic control follows. Neutrals: `#0B0C19`, `#62626A`, `#D6D6E0`, `#EAEAF0`, `#F6F6FD`.
2. **Errors at the field, not in a toast.** A wrong note password, a wrong app password, a password
   mismatch and a folder name that already exists show under their field, and the field keeps what
   was typed (today: a wrong note or app password gives a dark toast and an emptied field, a mismatch
   gives the toast only, and a folder name that already exists silently opens that folder). The toast stays only for
   background events and for the result of an action whose dialog has closed (secret burned,
   logged out).
3. **The editor toolbar (round 2).** One row, 44 high, at the top of the editor column: formatting
   on the left; on the right **Lock**, Share, the Favorite star and •••. Lock is the product's main
   function, so it is a button, not an item under a menu: on a note without a lock it reads "Lock
   note"; on a locked note "Unlock note" (the button is blue); on a locked note opened with its
   password "Remove lock". Opening another note locks it again, as the app does today
   (`add-note.page.ts` asks for the password every time a locked note is opened). The star is a toggle (`aria-pressed`). The gear of today is gone; •••
   keeps only what is not already a button: Pin, Move to folder, Delete. Share waits until a locked
   note is unlocked. With no note open the toolbar row stays, empty, so the columns do not jump.
4. **One menu component.** Right-click on a note shows every action on it: Pin, Favorite, Move to
   folder, Lock, Share, then Delete (today right-click has only Share and Delete). The fourth item
   reads Lock, Unlock or Remove lock depending on the note. Share is unavailable on a locked note
   until it is unlocked (today right-click does nothing on a locked note). Right-click on a note that
   is not selected marks that row and leaves the selection as it is, as on a Mac. Right-click on a
   selection of several acts on all of them (Favorite, Move to folder, Delete N notes). Folders have
   a right-click menu too (Rename, Delete). Menus are desktop menus: 30 px items, the brand blue
   under the pointer, the shortcut on the right (⌘⌫ on Delete).
5. **Note rows (round 2).** Rows separated by hairlines instead of white cards with gaps: the title
   (14, semibold), then the date and one line of preview (13), then the folder in small text (not in
   a folder view). The date once; a note without a title is "Untitled note" (today the title falls
   back to a long date, under a second date); the preview puts a space between lines (today
   "Trip to ZurichBook the train…"). Pinned notes sit in a **Pinned** group at the top, the rest
   under **Notes**, as in Apple Notes, so the pin needs no icon. A favorite shows a small star; a
   locked note a lock. The selected row is tinted, and brand blue with white text while the list has
   the focus. No buttons appear on hover: the toolbar and right-click carry the actions.
6. **Locked note in the list:** a lock, "Locked note" and the date, no piece of the note ID. The
   date of a locked note is formatted with the `"UTC"` time zone today and every other note with
   `"Europe/Copenhagen"` (`home.page.html`); both should use the device's local time, which is what
   this build does.
7. **Dates:** a note edited today shows the time, then Yesterday, the weekday within a week, day and
   month this year, and the year for older notes (today every card shows `yyyy-MM-dd H:mm`).
8. **Empty states**, each with its reason and a way out: no notes at all, nothing selected (today a
   mobile "Tap to + button"), a locked note that was not unlocked (today a blank white panel), an
   empty folder, empty Favorites, and search without results. While searching, the count at the top
   stays the total of the view (today it drops to "0 notes", which reads as "you have no notes"); in
   a folder the way out is "Search all notes".
9. **Search** is always visible, so the separate search icon in the header (search mode) is gone.
10. **Lock note and the app password** share one password component. The Lock button is enabled
    when the password has at least 6 characters and the confirmation matches; nothing below the
    strength block moves. Met requirements get a green check (today they are struck through, which
    reads as "not met"). Today the code accepts a 2-character note password and a 3-character app password while the
    screen asks for 6: this build follows the screen. "Longer password" now has a number, 10 characters, so a person
    can tell when it is met (today it turns on at an internal score of 3).
11. **Settings.** The wipe-after-20-wrong-passwords row shows an "Always on" chip instead of a
    switch that cannot be switched. Its text says "this device" instead of "your phone".
12. **Folders.** New folder and Rename folder are one dialog with a label and an inline error
    (today Rename is an inline field in the sidebar). Deleting a folder keeps its notes in All
    notes, as today. Move to folder lists the folders as choices with "No folder" for All notes
    only. "New folder" in that dialog creates a folder and moves the note into it, as in the editor today. Dragging a note onto a folder still works.
13. **Selecting several notes (round 2).** The select-mode button (it read as "make a checklist")
    and the bar at the foot are gone. As on any desktop: a click selects one note and opens it;
    ⌘-click (Ctrl-click on Windows and Linux) adds or removes a note; Shift-click and Shift+↑/↓
    select a range; ⌘A in the list selects all; Esc goes back to one note. With two or more selected
    the editor column shows "N notes selected", their titles, and Move to folder, Favorite (Remove
    from favorites when all are) and Delete; the delete dialog states the count. Dragging a selected
    row onto a folder moves the whole selection. The list is a `listbox` with
    `aria-multiselectable`, rows are `option` with `aria-selected`, and ↑/↓, Home and End move
    through it.
14. **Editor.** The title is the first line of the page, as in Notes: a field in the same scroll as
    the text, never moving when it is focused, with the date of the last edit above it in small
    text. "Standard" is our menu, with the same options (Standard, Heading 1 to 6), and it comes
    first in the toolbar. Insert link opens a small dialog. When the editor is narrower than 600 px
    (a 1024 window with the sidebar shown) Undo and Redo leave the toolbar; ⌘Z and ⇧⌘Z still work.
15. **Share, step 2.** Copy stays; the second "Share" button is not drawn. Today it calls the Web
    Share API (`navigator.share`, `shareLink()` in `share-secret-modal.component.ts`) and does nothing
    where Electron does not provide it. If the Electron build offers the system share sheet on all
    three platforms, it can come back as a secondary button next to Copy.
16. **App locked screen** sits on the soft brand surface with the ring motif instead of a grey
    backdrop. "Reset password" is a quiet blue link (it is not a delete); its consequence and the
    red button are in its dialog.
17. **Stellar ID screens** keep the split layout (blue panel, form), with labels above the fields,
    errors under them, and without the black marks in the corner of the old blue panel. Two things
    the live code does not do yet: after the forgot-password code there is no way forward (the code
    is stored, nothing opens `create-new-password`, which exists and takes `email` and
    `confirmationCode`), and "Resend code" only logs to the console. This build links the code step
    to the new-password screen. Create Stellar ID has no email verification: `createAccount()` logs
    in and opens the notes, as this build does.
18. **Account at the foot of the sidebar (round 2).** A row with the initial and the email of the
    Stellar ID, or "Log in to sync" when logged out (the app syncs notes for a logged-in Stellar ID).
    A click opens the same account menu as before, upward. The account icon in the sidebar head is
    gone. Settings has its own button next to the row (⌘, on a Mac, Ctrl+, on Windows and Linux)
    and stays in the account menu too.
19. **Window size.** `electron-start.js` opens the window at 1024 x 768 and sets no `minWidth` or
    `minHeight`, so it can be dragged smaller than any three-column layout holds. This design holds
    from 1024 wide; we suggest `minWidth: 1024, minHeight: 640`. Below 1100 the sidebar hides by
    itself (see 22).
20. **Sync states are not drawn here.** The progress bar under the list head while a sync runs
    (`ion-progress-bar` in `home.page.html`) takes `#2761FC`. "The change could not be synced.
    Please try again." and "The note could not be saved…" use the same dark toast as item 2, with
    the `alert-triangle` icon in place of the green check (this build draws only the check).

21. **Desktop density (round 2).** The first round took the Wholesale portal's web density (16 px
    text, 44 px round buttons); a desktop app used with a mouse is denser. Text 14, secondary text
    12 and 13, list heading 20, note title 24; sidebar rows 32; icon buttons 28 square with radius 8;
    search 32; fields and dialog buttons 36; menu items 30; sidebar 220, list about 300 (280 to 320);
    dialogs 440. Poppins and the brand colours stay. The arrow cursor everywhere except on links.
    The sidebar sits on the soft `#F6F6FD`, the list and the editor on white, split by hairlines; the
    editor is no longer a floating card.
22. **The sidebar hides (round 2).** The button at the top left of the sidebar, or ⌥⌘S (as "Show
    Folders" in Apple Notes; Ctrl+Alt+S on Windows and Linux). Hidden, its button moves into the list
    head. The choice is kept (`localStorage`, key `stellarNotesSidebar`). Below 1100 px the sidebar
    hides by itself and can be shown again; it comes back by itself above 1100.
23. **Shortcuts (round 2)**, named in the tooltips: ⌘N new note, ⌘F search, ⌥⌘S sidebar, ⌘, settings,
    ⌘⌫ delete the selection (always with the confirmation dialog), Esc back to one note. Windows and
    Linux show Ctrl+N, Ctrl+F, Ctrl+Alt+S, Ctrl+, and Delete. In a browser tab ⌘N may open a new
    browser window and ⌘, the browser's own settings instead; in the Electron app these belong in the
    application menu as accelerators.
24. **The app icon (round 2).** The hand-drawn tile (a blue square with a notes glyph) is gone; every
    surface uses the real icon of the shipped app (`Stellar Notes.app`, `icon.icns`), trimmed to its
    squircle for small sizes: `assets/img/app-icon-64.png` and `app-icon-128.png`. The Dock and
    install icons keep the macOS margins of the original: `apple-touch-icon.png` (180),
    `icon-192.png`, `icon-512.png`, plus `icon-maskable-512.png` (the same artwork on its own blue).
    Every image keeps the aspect ratio of its source; the checks measure it in Chromium and WebKit.

## Before integrating: remove the review layer

None of this ships.

1. `review.js` and its one line in every page: `<script src="review.js" defer></script>`.
2. `state.js` and its line: sample notes on `localStorage`. The app has its own services.
3. `index.html`, `review.css` and `assets/review/` (the thumbnails).
4. Every element with `data-sn-review-note` (sample passwords, "nothing is sent") and the
   `.sn-review-note` rule at the end of `styles.css`.
5. The blocks marked `REVIEW` in `app.js`: they read URL parameters (`?data`, `?dialog`, `?menu`,
   `?step`, `?errors`) to show a state on load, and make the Stellar ID forms click through.

## File map

| File | What |
|---|---|
| `styles.css` | everything visual; every class `sn-`, tokens `--sn-*` (the same values as `--sw-*` in our Wholesale portal build) |
| `app.js` | `SN.dialog`, `SN.menu`, `SN.pw` (show / hide, strength, valid-only submit), `SN.toast`, then the page logic |
| `icons.js` | the Tabler sprite; markup uses `<svg class="sn-ic"><use href="#i-name"/></svg>` |
| `state.js` | review only: the prototype store |
| `review.js`, `review.css`, `index.html`, `assets/review/` | review only |
| `assets/img/stellarsecurity_logo_inverted.svg` | the brand lockup on the index cover |
| `assets/img/app-icon-*.png`, `apple-touch-icon.png`, `icon-*.png`, `favicon-32.png` | the real Stellar Notes icon, from the shipped app |
| `manifest.webmanifest` | install as an app (name, standalone window, start page, icons) |

## Components, and where they go in the app

| Component | Class | Replaces |
|---|---|---|
| Button | `.sn-btn` + `-primary`, `-secondary`, `-danger`, `-sm` | `ion-button` variants, the text buttons in the confirmation modals |
| Field | `.sn-field`, `.sn-label`, `.sn-input`, `.sn-error` | `ion-input` with placeholder-only labels |
| Password field | `.sn-pass` + `[data-pw-toggle]` | `ion-input` + `ion-icon` eye |
| Strength block | `.sn-strength` (template `#tpl-strength`) | `.pass-info-box` + `password-strength-meter` |
| Dialog | `dialog.sn-dialog` | `ion-modal` (Share, Lock, Settings), `ion-alert` (New folder, Move, Delete folder), the confirmation modals (Delete, Locked, Reset, Disable) |
| Menu | `.sn-menu` | `ion-popover` lists (note actions, folder actions, user menu), `note-context-menu` |
| Notice | `.sn-notice` + `-success`, `-warning`, `-error` | `.enabled-info-box`, red warning lines |
| Empty state | `.sn-empty` | `initial` component, `.notes-empty-state` |
| Note list | `.sn-notes` (`listbox`), `.sn-note` (`option`), `.sn-group` | the note cards and `ion-checkbox` select mode |
| Toolbar | `.sn-toolbar`, `.sn-tool` | the editor's formatting bar and the gear |
| Account row | `.sn-account` | the user icon in the header |
| Toast | `.sn-toast` | `ToastController` (for background events only) |

Focus: every control has a 2 px `#2761FC` focus ring; Escape closes menus and dialogs; menus move
with the arrow keys; Shift+F10 or the context-menu key opens the menu of a focused row (note or
folder). The list keeps one row in the Tab order and moves with the arrow keys.

## Checks

`../verify/check.cjs` loads every state at 1440 x 900, 1280 x 800 and 1024 x 768, in Chromium and in
WebKit (Safari's engine), and asserts: no console errors, no horizontal overflow, no `#5d6fa3` in any
computed colour, no inset box-shadow outlines, no clipped text in rows, toolbar, menus and buttons,
the toolbar on one row, every logo and icon at the aspect ratio of its source file, the desktop
density, every internal link resolves, the manifest parses and its icons exist at their sizes; then
walks the flows (selection with ⌘ and Shift, keys, the panel for several notes, the toolbar, the
sidebar, the account row, unlock error, lock form, search count, menus, folders, app password, log
in). Its last output is in `../verify/last-run.txt`, screenshots in `../build-shots/` (WebKit at
1280 in `../build-shots/webkit/`).