Skip to content

Improved the webui pages for phone - #121

Open
defnax wants to merge 197 commits into
RetroShare:masterfrom
defnax:improvements_v2
Open

Improved the webui pages for phone#121
defnax wants to merge 197 commits into
RetroShare:masterfrom
defnax:improvements_v2

Conversation

@defnax

@defnax defnax commented Jul 26, 2026

Copy link
Copy Markdown
Contributor

Changes implemented:

Mobile and responsive interface

  • Added the bottom mobile navigation bar.
  • Improved the overall WebUI layout for phones.
  • Made Network, People, Chats, Mail, Files, Forums, Boards, Channels, and Config pages phone-compatible.
  • Improved mobile status-bar spacing and alignment.
  • Fixed mobile popup and modal sizing.
  • Used available phone viewport height more effectively.
  • Fixed modal buttons and content being outside the visible phone area.
  • Fixed Android image viewing so Back returns to the WebUI.
  • Fixed phone-only channel-post overlap.
  • Improved identity editing on phones.
  • Fixed participant-list access on phones.
  • Added phone-friendly participant actions.
  • Hide unnecessary Network Graph controls from the mobile friend list.
  • Kept Network Graph accessible from the selected friend’s detail view.
  • Improved direct and distant chat alignment on phones.
  • Removed wasted outer space around direct and distant chat windows.
  • Kept desktop layouts unchanged where mobile-specific behavior was introduced.

Navigation and unread counters

  • Added unread counters for direct chats.
  • Added unread counters for distant chats.
  • Added unread counters for public chat rooms.
  • Added unread mail counting.
  • Added counters to the desktop navigation.
  • Added red circular counter badges to the phone navigation.
  • Added counters to Network, People, Chat, and Mail navigation items.
  • Changed chat badges to count only genuinely new/unread chats.
  • Prevented normal existing conversations from being counted as new.
  • Clear chat counters after opening the corresponding conversation.
  • Clear section counters after viewing the relevant page.
  • Fixed desktop mail counter styling.
  • Fixed mail read state so opening a message clears its unread badge.
  • Preserved mail folder state when marking messages as read.

Public chat rooms

  • Improved public chat-room layout for phones.
  • Added avatars to the identity selector used when joining a room.
  • Added participant counts to public room badges, including rooms not yet subscribed to.
  • Made the participant list accessible on phones.
  • Added participant actions on mobile:
    • Private chat
    • Compose mail
    • Open identity details
  • Fixed missed chat-room invitations.
  • Fixed chat-room autojoin.
  • Added attachment, image, and emoji controls.
  • Fixed invisible emoji picker behavior.
  • Fixed chat image viewer navigation and modal behavior.
  • Fixed quote-message context menu behavior.
  • Improved chat message scrolling and positioning.
  • Added loading of older room messages when scrolling upward.
  • Prevented room updates from forcing the reader back to the newest message.
  • Displayed messages sent from another RetroShare client using your identity.
  • Added handling for refusing room invitations.
  • Improved room invitation synchronization.

Direct chats

  • Added direct-chat history.
  • Added file, image, and emoji buttons.
  • Combined mobile file and picture attachments under one paperclip button.
  • Increased the available width of the phone text field.
  • Added a compact, rounded phone composer.
  • Added a circular mobile Send button.
  • Made the emoji window fit inside the phone viewport.
  • Added direct-chat previews to the Network page.
  • Added unread direct-chat counts.
  • Added older-message loading when scrolling upward.
  • Prevented scrolling for older messages from reloading the page.
  • Fixed direct chat selection and active-chat behavior.

Distant chats

  • Added mobile composer improvements to distant chats.
  • Fixed distant-chat phone alignment.
  • Added file, image, and emoji attachment support.
  • Fixed incorrect duplicate distant conversations associated with multiple own identities.
  • Kept conversations associated with the correct local identity.
  • Added unread distant-chat counting.
  • Changed status dots so green represents an actually active tunnel.
  • Prevented every historical distant chat from appearing active.
  • Improved tunnel adoption and reconnect behavior.
  • Prevented stale tunnel polling from closing a newer conversation.
  • Improved identity switching and draft handling.
  • Fixed distant-chat replies not appearing.
  • Fixed accidental tunnel opening when selecting a People contact.
  • Improved Leave Chat result handling.

Network page

  • Added the Network Graph page.
  • Added Network Graph discovery and friend visualization.
  • Added Network active-chat previews.
  • Added direct chat history.
  • Displayed your own location name.
  • Displayed friends’ custom status messages.
  • Added status-colored dots instead of status text.
  • Added the ability to change your own status from your status dot.
  • Added support for setting and retrieving your custom status string.
  • Added PGP fingerprint display.
  • Added detailed location information.
  • Added local/external address information and IPv6 visibility.
  • Cached location details.
  • Improved Network performance and request scheduling.
  • Disabled an unnecessary avatar API request.
  • Removed an unnecessary friend-list label.

Adding friends

  • Redesigned the Add Friend wizard around textual RetroShare IDs.
  • Added raw RetroShare ID support.
  • Added rsInvite= URL support.
  • Kept certificate file import and drag-and-drop as secondary options.
  • Added clearer invalid-ID errors.
  • Disabled empty submissions.
  • Improved mobile styling.
  • Accepted certificate text files even when the browser provides no MIME type.
  • Fixed adding friends through Short ID.
  • Preserved address information obtained through a Short ID.
  • Corrected certificate friends being shown as “Pending validation.”

People and identities

  • Improved the People page for phones.
  • Fixed editing identities on phones.
  • Improved the Create Identity dialog.
  • Added a persistent avatar preview.
  • Added a deterministic default jdenticon.
  • Updated the generated avatar while typing the identity name.
  • Added custom avatar selection.
  • Added “Use default” to restore the generated avatar.
  • Sent custom avatars for signed and pseudonymous identities.
  • Made the identity creation form responsive.
  • Replaced the broken signed-identity password popup.
  • Allowed creating the first signed identity without requiring another signed identity.
  • Filtered temporary zero-value identity IDs.
  • Waited for the core to return the real generated identity ID.
  • Retried identity details when RetroShare temporarily returned empty data.
  • Replaced “Unknown” with the fetched identity nickname.
  • Refreshed identity lists immediately after creation.
  • Automatically updated open room and distant-chat identity selectors.

Mail

  • Redesigned the mail view for phones.
  • Fixed the mobile mail composer height.
  • Fixed the mail composer button position.
  • Fixed composer popup height.
  • Added identity tooltips to the mail composer.
  • Fixed displaying drafts.
  • Added unread mail badges to desktop and phone navigation.
  • Fixed unread state after opening mail.
  • Kept trashed messages in Trash when marking them read.

Boards

  • Added board-post display.
  • Added board-post creation.
  • Added a comments viewer and composer.
  • Added commenter avatars.
  • Added identity selection for voting.
  • Improved identity loading for boards.
  • Added default thumbnails when a board has no image.
  • Implemented progressive loading for large boards.
  • Loaded lightweight post summaries first.
  • Loaded full posts in batches.
  • Fixed freezes in the Kanban board view.
  • Added API-response validation and safer error handling.
  • Avoided mutation of shared sorted data.

Channels

  • Improved Channels for phone and desktop.
  • Fixed channel thumbnail layout.
  • Added board-style comments to channels.
  • Added comment avatars.
  • Added comment-count badges to post thumbnails.
  • Improved channel and post creation.
  • Added default channel thumbnails.
  • Fixed large-channel loading.
  • Loaded channel metadata without downloading every post.
  • Loaded full channel content only after opening a channel.
  • Reduced content batches.
  • Split oversized failed requests into smaller batches.
  • Added validation for incomplete core responses.
  • Fixed channel-list refresh behavior.
  • Fixed mobile post overlap.

Forums

  • Improved forum creation.
  • Improved thread and reply composers.
  • Fixed subscribed-forum page layout.
  • Added default forum thumbnails.
  • Fixed long forum posts being clipped.
  • Removed a nested full-height scrolling container.
  • Added safe wrapping for long text.
  • Added horizontal scrolling for wide tables and code blocks.
  • Constrained images, videos, and embedded content to the available width.
  • Fixed emoji visibility in the forum composer.
  • Improved message-size handling.

Files and ShareManager

  • Improved My Files, Friend Files, and Search layouts.
  • Improved the “Add new file” popup for phones.
  • Redesigned ShareManager for mobile.
  • Used nearly the full phone viewport.
  • Made the folder list independently scrollable.
  • Kept Add New and Edit controls visible.
  • Converted shared-folder rows into mobile cards.
  • Replaced the stray 0 empty state with “No shared folders yet.”
  • Ensured nested dialogs appear above ShareManager.
  • Fixed file-view text alignment.

Statistics and diagnostics

  • Added the Statistics page.
  • Added a Debug page through merged follow-up work.
  • Added API timing information to the phone status sheet.
  • Reduced unnecessary Statistics polling and data collection.

Reliability, performance, and build improvements

  • Added safer handling for incomplete Boards and Channels responses.
  • Fixed large Boards and Channels performance.
  • Reduced repeated API calls and request storms.
  • Improved Network Graph loading and relayout behavior.
  • Fixed identity-detail retry loops.
  • Fixed stale friend and pending-friend entries.
  • Restored correct WebUI styling and build output.
  • Used the standard npm/Sass build process.
  • Updated generated styles.css.
  • Fixed several Mithril rendering and modal issues.
  • Added safer handling for malformed or missing API responses.

Important merged contributor fixes

These are present in your branch but were authored mainly by jolavillette, Sumit Kumar Soni, or other contributors:

  • Private and public chat infinite-history loading.
  • Distant-chat tunnel adoption and stale-poll protection.
  • Participant accessibility improvements.
  • Request-storm and polling reductions.
  • Mail unread handling in Trash.
  • Chat image-preview modal corrections.
  • Safer remote-content handling.
  • Network Graph performance improvements.
  • Identity API cleanup.
  • Cross-platform build and lint improvements.
  • Mithril upgrade and build modernization.
image

defnax added 3 commits July 26, 2026 20:50
Added Board posts display
Added for Network to list last Chats
@zelfroster

Copy link
Copy Markdown
Contributor

@defnax I feel there are some other .scss files you have not pushed yet. Can you check if there are .scss files in your local and push them?

@defnax

defnax commented Jul 27, 2026

Copy link
Copy Markdown
Contributor Author

I hate this scss, i get very often destroyed corrupted this
I need look tonight

@zelfroster

Copy link
Copy Markdown
Contributor

I hate this scss, i get very often destroyed corrupted this I need look tonight

Sure take a look when you get chance.
Also, think of .scss as the source files, and the styles.css as the output.

So, we need to be careful with the .scss always and commit them whenever pushing changes.

@defnax

defnax commented Jul 27, 2026

Copy link
Copy Markdown
Contributor Author

But i commited all changes what i see in my git app.
need look tonight if something is missed

defnax added 8 commits July 27, 2026 19:23
* corrected some place holder text
Added Navbar for webui on phones
for Boards and Channels:
* Validate API responses before processing.
* Keep rendering/navigation functional if a response is incomplete.
* Log a clear warning instead of throwing an uncaught error.
* Use independent sorted arrays, avoiding mutation of the master list.
Fixed channels thumbnail layout issue
Added same comments design from boards to channels
Fixed layout issues for myfiles, friendfiles & search
@defnax

defnax commented Aug 1, 2026

Copy link
Copy Markdown
Contributor Author

@zelfroster new review?

@zelfroster

Copy link
Copy Markdown
Contributor

@defnax I was working on streamlining some things and adding instructions, so the styles don't get messed up each time.

Let me push the changes in a bit, we can merge that, and then after you update this PR accordingly, will review it.

@defnax

defnax commented Aug 2, 2026

Copy link
Copy Markdown
Contributor Author

yes this issue with styles i get headdache, then i lose motivation when its destroyed and losing time

@defnax defnax changed the title Improved for phone the webui pages Improved the webui pages for phone Aug 4, 2026
@jolavillette

jolavillette commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

Defnax please rebase this pr/121 on master so that it gets a chance to be reviewed and merged, and I can work on it.
If you are too busy for that tell me, and I will make a pr to your branch to rebase it.

@zelfroster

Copy link
Copy Markdown
Contributor

Defnax please rebase this pr/121 on master so that it gets a chance to be reviewed and merged, and I can work on it. If you are too busy for that tell me, and I will make a pr to your branch to rebase it.

@jolavillette @defnax What's the plan for webui rn btw?

I mean broadly do we already have planned features to implement or things to improve?

Since, we are going to use AI most probably to improve things here, it would be better to add an AGENTS.md with some specific instructions here too, else the webui product as a whole would have inconsistent looking UI/UX.

@jolavillette

Copy link
Copy Markdown
Contributor

As far as I am concerned:

  • bug fixing, there are many, see for example pr/123, they are easy to review and merge
  • usability on phone/tablet, because until an mobile version of RS is released the webui all we have

May I respecfully suggest that you also use AI to make a first pass on PRs, so that you can focus on what is worth your human time? IMO that's the way everything should go now in the whole RetroShare project.

@zelfroster

Copy link
Copy Markdown
Contributor

As far as I am concerned:

  • bug fixing, there are many, see for example pr/123, they are easy to review and merge
  • usability on phone/tablet, because until an mobile version of RS is released the webui all we have

Makes sense 👍🏼

May I respecfully suggest that you also use AI to make a first pass on PRs, so that you can focus on what is worth your human time? IMO that's the way everything should go now in the whole RetroShare project.

Yeah, that's a great suggestion, I was thinking of doing that too.

@csoler I was wondering if we can get an AI tool reviewer to automatically review PRs so the author's can fix the obvious issues etc, and then the actual reviewer can take a better look to save everyone's time and accelerate the work on webui maybe.

@zelfroster

Copy link
Copy Markdown
Contributor

This one is a good AI reviewer to use if we can get it for our project - https://www.greptile.com/open-source

@csoler

csoler commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

of course if that can be helpful. What we should avoid absolutely is the AI merging PRs by itself or even being able to modify the code in the repository.

@defnax

defnax commented Aug 8, 2026

Copy link
Copy Markdown
Contributor Author

Defnax please rebase this pr/121 on master so that it gets a chance to be reviewed and merged, and I can work on it. If you are too busy for that tell me, and I will make a pr to your branch to rebase it.

I had no time now my code broken i has some conflicts on my code with master
But now my pr is more useable on phone too
I think now more useable webui then before.

@defnax

defnax commented Aug 8, 2026

Copy link
Copy Markdown
Contributor Author

I think after this merged i will make a break with webui
I don’t know if get solved with rebase i tried on thursday no success yet i will try tonight

@jolavillette

Copy link
Copy Markdown
Contributor

Defnax please rebase this pr/121 on master so that it gets a chance to be reviewed and merged, and I can work on it. If you are too busy for that tell me, and I will make a pr to your branch to rebase it.

I had no time now my code broken i has some conflicts on my code with master

OK I will rebase it on master

New requests or leaving the graph cancel unfinished calculations.
…s can be retried while concurrent duplicates remain blocked.
…, bypassing the board cache.

 Any older board load finishes first so it can’t overwrite the new totals.
…hile open, allowing the existing tap-outside handler to close it.
Added standard component and view function support
- Unify Mail composer emoji picker with standard flat design
- Remove duplicate SCSS blocks and prevent button shadow bleeding
@defnax

defnax commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author

but i found lots of but then i stopped then its gets never finished. i can show lots of more things/issues/ui stuff needs to be improved .

@defnax

defnax commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author
  • The search icon is a bit misplaced
    Screenshot 2026-09-09 at 20 36 51

  • This emoji section is different from the other place in chat section, also the Send button doesn't look same as rest of the UI. and also those circular buttons look a bit weird.
    Screenshot 2026-09-09 at 20 43 39

-> 20e2180

- Prevent 3D inset box-shadow from bleeding into close and icon buttons
- Fix missing glyph in Chat History Browser by switching far.fa-comments to fas
- Add .far fallback mapping to Font Awesome Solid font family
- Add hover styling for modal close controls
@defnax

defnax commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author
  • The close icon is weird (many icons are like this currently), and the icon looks missing here in the center
    Screenshot 2026-09-09 at 20 38 52

fixed -> 2bca038

…sages

- Enable Ctrl+Enter (and Cmd+Enter) to insert a newline without sending
- Prevent plain Enter send handler when modifier keys (Ctrl/Cmd) are pressed
- Support dynamic multiline auto-resizing across Lobby, People, and Network chats
- Preserve Shift+Enter standard newline behavior
@defnax

defnax commented Sep 9, 2026

Copy link
Copy Markdown
Contributor Author
  • We should expand the message input just like Whatsapp does, it automatically keeps increasing the input box to a certain height, so larger messages are easier to view.
    Screenshot 2026-09-09 at 20 51 16

87f1aa8

defnax and others added 15 commits September 9, 2026 23:30
- Show dedicated attachment preview card instead of raw image HTML code in textarea
- Display larger image thumbnail with remove (×) button and file info
- Click thumbnail to open full-screen image viewer with close button and Escape key support
- Add dynamic "Add a caption... (optional)" placeholder when image is attached
- Support sending image alone or with caption across Lobby, People, and Network chats
The shared comment component defined VOTE_UP = 1, VOTE_DOWN = 2; the
core's contract is the opposite (rsgxscommon.h RsGxsVoteType: DOWN = 1,
UP = 2 -- the same values boards_util and channels_util already use).
Every thumbs-up on a board or channel comment was published as a
downvote and vice versa, and a GXS vote is a message that cannot be
retracted. Worth a release note to users of the affected build.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Removing freshVnode() without converting any of the 53 popupMessage
call sites froze every dynamic modal at its first render: mithril skips
a subtree whose children array is identical between redraws, so the Add
Friend and Create Identity dialogs kept their submit buttons disabled
forever and displayed none of what was typed. The recursive copy is
back for vnode call sites -- component call sites keep the new direct
m(component) path, which is the right long-term shape; converting the
call sites one by one can then retire the copy for real.

For a component vnode (m(SomeComponent) passed ready-made) the copy
rebuilds via m(tag, attrs, children) without descending into children,
which belong to the component's own view.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Three defects around one truth the endpoints impose. A post's count
lives in mMeta.mServiceString, retallied by the core's background pass
(~15 s, p3postbase): the immediate getBoardContent refetch after a vote
read the OLD count -- and replaced the cached post object out from
under the kanban's optimistic +1, so the click changed nothing anywhere.
The refetch now happens once, 30 s later, on the core's own tally; the
post view bumps the number it renders like the kanban does.

And a comment's mUpVotes is never filled by any endpoint the JSON API
exposes (only the unexposed getRelatedComments tallies), so board
comment counts rendered 0 forever. getBoardAllContent does return the
votes as their own array, one message per vote with mParentId naming
its target: the board post view now counts them client-side, the way
the channels page always has.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Releasing the in-flight key in a finally reintroduced the storm the key
exists to stop: the view refires loadPostContent on every redraw while
the body is null, and each completed request triggers a redraw -- an
unfetchable post became a self-sustaining request loop at redraw rate,
exactly what the deleted comment warned about. The key is now released
immediately on success (the cached body stops the view), and after five
minutes on failure -- storm-proof, and the post still gets retries.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The wave's capture fixes covered the network and distant send paths and
the rooms' history -- three siblings kept reading the world at answer
time. The room send echo read this.currentLobby and appended to the
room on screen: after a room switch, the sent message landed in the
wrong room, under the wrong identity, and scrolled it. The distant
initiate's SUCCESS answer clobbered State.chatPid with no guard,
defeating every downstream isCurrentChat check and merging the old
contact's tunnel into the newly opened conversation (its refusal also
answers a null pid, which the poll then chased into "conversation
gone"). And loadChatMessages wrote its preview line -- or deleted one
-- under whatever contact was selected when the answer landed, then
scrolled it; loadOlderChatHistory fired its scroll-fixup done() into
the new conversation. All four now capture and compare.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The unification flattened the picker rules to a bare class (0,1,0),
which loses to base/_base.scss's input[type='text'] (0,1,1): border,
radius, padding and size all reverted to the global look, and the
global input:focus inset shadow bled through. The selector is now
input.emoji-search-input -- same specificity, later in the cascade --
and focus flattens the shadow.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ws its login

Two residual gaps of the per-login friend cache. refreshGpgDetails
({force: true}) -- called right after adding or removing a friend --
joined a sweep already in flight, whose friend list predates the
change: the added friend stayed missing and a removed friend came back
under the "removed successfully" popup, until the TTL expired. A force
call now chains one fresh sweep behind the in-flight one (further
forces share it), owner- and slot-checked when its turn comes.

And the history preload was a single global in-flight slot with no
login attached: the next login's first call returned the previous
login's still-running run (loading nothing), whose answers kept
writing the old conversations' previews into the new session. The
preload now records the login generation it belongs to and its
answers check it. Label to v171.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
rerunQueued was new module state outside the per-login reset: queued
under login A and left true, it swallowed login B's first force call --
the freshly added friend missing until the TTL lapsed. It resets with
the rest of the cache state now.

A refused initiate became a silent dead end once the zero pid was
recognised: nothing polled, nothing errored, "Please wait for secure
tunnel" forever. The refusal now ends the conversation visibly.

And the fixed 30 s vote refetch could land BEFORE the core's retally
(one board per ~15 s tick, asynchronous write), revert the optimistic
+1 on screen and stick -- cached content is never refreshed again. The
refetch now compares against the pre-vote counts and only replaces the
cached post once the tally has actually moved, with bounded retries;
on give-up the bump stays.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review follow-ups: inverted comment votes, frozen modals, vote counts, and six more
…button states, and preserved mobile notes-button styling.
…ne list defining routes, icons, labels, and live unread counts.
…ble names, Escape dismissal, focus trapping, and focus return.
- Hidden Create Channel, Subscribed, and Posts heading.
- Top-right ⋮ menu with Unsubscribe.
- Compact Back/Search row and blue circular Back button.
- Reduced spacing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants