feat: Sidebar UI #153

sameoldlab · 2025-04-08T09:43:31Z

Initial version of sidebar UI update.

Splits Room sidebar into Index and Chat mode.
Collapses to a sidebar on mobile
Allows hiding Space selector when already inside a space

Displays all threads in Index Mode, leaving space for additional data to be moved here in future PRs.

closes #129

sameoldlab · 2025-04-08T09:44:07Z

still wip. preview here: https://sideroom.netlify.app

erlend-sh · 2025-04-08T14:23:46Z

closes #129, #23, #103

Only need to solve completely for #129 in this PR. Make one PR per issue, with #103 next and #23 completed last.

currently just a copy of threads

chat only includes threads originiating from a channel, while index has everything. (not sure how if these... loose threads are meant to be a feature.

copied changes to relevant files: muni-town#158 -> UserSession.svelte muni-town#154 -> SpaceBar.svelte muni-town#145 -> SpaceBar.svelte

…town#154)" conflicts

sameoldlab · 2025-04-15T18:00:52Z

All done now. Meld is an amazing marvel of software.

michaelwschultz · 2025-04-15T18:17:44Z

@erlend-sh I saw your thoughts on this change in a few places. Mind weighing in here with your thoughts. Would be great if you could test this out on your device as well. Btw, what device are you using mainly?

erlend-sh · 2025-04-15T18:34:12Z

This first iteration LGTM 👍

The big change for next iteration is that the toggle between index/chat should change the main content view, I.e. it should work the same way the toggle between chat/threads currently does.

My main device is an old iPad Pro (maybe 2019), though that might change soon since it’s pretty busted heh.

michaelwschultz · 2025-04-16T07:15:31Z

Awesome job @sameoldlab! This is going to make the mobile experience so much better. I've got a review queued up for you with a couple of small nits around naming and a few other about things I think we can just get rid of. I'd like to get @erlend-sh to weigh in on a few design change ideas I had after playing around with it.

Mainly, my proposal is to get rid of the old Chat | Threads | Wiki toolbar altogether and simplify the sidebar back into one rather than two separate parts. This cleans up the UI quite and bit and still fixes the usability issues on mobile. Gifs below to illustrate changes.

Sidebar area proposed changes

Remove the ability to hide the spaces bar. It doesn't take up that much space and will be nice for seeing notifications across spaces later.
Wikis should appear in the "IndexMode" section (right @erlend-sh?)
Expand current space name to take up the full width of the sidebar
- Remove channel name breadcrumb
Move the settings gear in the top right to the bottom bar with the theme color (not seen in demo, I just hid it)
Move the user avatar back to the spaces bar at the bottom (not seen in demo)
Selecting a channel, thread, or wiki, should close the sidebar (not seen in demo)

Main area proposed changes (these do not all need to be done here)

Remove Chat | Threads | Wiki toolbar
Move Create Thread icon to individual message popover (feels like more obvious ux)

I'm sure there are a few things I'm missing but we can add to this list later if we like the proposal. We can also break this up into multiple parts if need be.

Mobile	Desktop

erlend-sh · 2025-04-16T07:36:26Z

Mainly, my proposal is to get rid of the old Chat | Threads | Wiki toolbar altogether and simplify the sidebar back into one rather than two separate parts.

Agreed. The plan is to follow up with #103 by having the index/chat toggle mirrored like so:

My UX notes are all over the place right now so I’ll try to put a cohesive doc together for a linear story.

sameoldlab · 2025-04-16T08:58:19Z

@michaelwschultz is the demo video running with some of the changes you suggested already applied?

sameoldlab · 2025-04-16T09:44:10Z

Remove the ability to hide the spaces bar. It doesn't take up that much space and will be nice for seeing notifications across spaces later.

This one was @erlend-sh's suggestion. Personally, I also prefer always having it expanded but can see a reason for the alternative. I could add some stronger persistence for whatever users choose to localStorage.

Wikis should appear in the "IndexMode" section (right @erlend-sh?)
Remove Chat | Threads | Wiki toolbar

I'm planning to do these in a follow up PR. Changing those involves refactoring TimelineView.svelte component into multiple smaller files. So if I can do the refactor first and merge that, the rest will continue with much smaller merge conflicts (ideally 0) than the ones here.

Expand current space name to take up the full width of the sidebar

Do you mean extending into where the Room Selection is currently? If so, would depend on locking the sidebar visible. I had an earlier commit (never fully designed it) with a single row across the top. Maybe something like that could work for this.

Move the settings gear in the top right to the bottom bar with the theme color (not seen in demo, I just hid it)

Assuming you mean channel settings? I think it would lose locality to what it affects placed in the bottom bar. There's also settings for groups and rooms (if admin) inside the sidebar currently. I do think the UI could take more advantage of tooltip menus to remove all of these... but that'd be separate issue from the sidebar.

Move the user avatar back to the spaces bar at the bottom (not seen in demo)

Yeah, I could see that working better. But would also mean those are hidden when the spaces collapse.

Selecting a channel, thread, or wiki, should close the sidebar (not seen in demo)
Remove channel name breadcrumb

Yes. Might need to rebuild the mobile drawer to get this working (currently using a class from Daisy UI), so not sure how long it would take.

Move Create Thread icon to individual message popover (feels like more obvious ux)

Yeah, could put this in a different issue. It sounds like you want to get rid of the far right button group in the TimelineView? I agree with most (probably all?) of it. I made a mistake splitting files and changing them together in this PR, so trying to avoid making it worse now.

michaelwschultz

Here are a few bits that just need some clean up. Once these are addressed let's get this merged in!

src/lib/components/ChatMode.svelte

src/lib/components/ContextMenu.svelte

michaelwschultz · 2025-04-16T06:17:54Z

src/lib/components/IndexMode.svelte

+<!--
+Pages
+Threads
+Links
+--->


@erlend-sh I'm not sure index makes sense as a tab name. The icon looks like an inbox which I kinda like. But these aren't notifications. It's just other "stuff". Maybe this is the "garden" area?

The icon I’ve been using in mock-ups is an ℹ️ as a hybrid of index/info. Open to suggestions though.

michaelwschultz · 2025-04-16T06:19:37Z

src/lib/components/IndexMode.svelte

No matter what we end up calling these sidebar sections, I think 'Mode' isn't the right word. If we're going to remove the tabs in the current header. We could just call these ChatTab and IndexTab.

src/lib/components/IndexMode.svelte

michaelwschultz · 2025-04-16T06:41:57Z

src/lib/components/SpacesColumn.svelte

+  import { Button, ToggleGroup } from "bits-ui";
+  import ThemeSelector from "$lib/components/ThemeSelector.svelte";
+  import { Space } from "@roomy-chat/sdk";
+  // import TooltipPortal from "$lib/components/TooltipPortal.svelte";


Nit: remove

michaelwschultz · 2025-04-16T06:42:17Z

src/lib/components/SpacesColumn.svelte

+<!--
+<TooltipPortal
+  text={activeTooltip}
+  visible={!!activeTooltip}
+  x={tooltipPosition.x}
+  y={tooltipPosition.y}
+/>
+-->


Nit: remove commented code

Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>

https://github.com/muni-town/roomy/pull/153/files/41e9551b57f3188ad2846a2eda875e34f9bf3827#r2046156578

IndexMode -> SidebarIndex ChatMode -> SidebarChat

sameoldlab added 5 commits April 7, 2025 16:03

convert channel layout to component

46aac96

top bar with room/channel header

b069980

setContext in [space]/+layout

17b9a6f

check g.space in (app)/+layout

76005ca

merge sidebars

ccf5390

sameoldlab added 2 commits April 8, 2025 11:46

update index sidebar tab

8717576

no header. extract profile/theme bar, scrollable index

6a83afd

sameoldlab added 7 commits April 9, 2025 17:42

+ SpaceBar.svelte

39cb2e6

split SpaceBar from root +layout.svelte

249f494

add class prop to themeselector

3faf537

split sidebar to components

2a2010e

toggle spaces sidebar

c1cbd27

default closed inside spaces

28e4b7a

overlay menu on mobile

74901b8

sameoldlab force-pushed the feat/sidebarui branch from 0906751 to 74901b8 Compare April 10, 2025 16:24

sameoldlab added 10 commits April 10, 2025 17:25

format

bf6bd52

fix sidebar width

1db3a71

fallback to string blank if no usable space or channel name

e4e5c3f

disable auto reroute

6331e53

render space/+page (index)

da826b4

add indexMode view

953baf5

currently just a copy of threads

linked threads in chat

6139d0b

chat only includes threads originiating from a channel, while index has everything. (not sure how if these... loose threads are meant to be a feature.

merge TimelineView.svelte changes

7c67a49

merge routes/(app)/+layout.svelte conflicts

5fcfa2b

copied changes to relevant files: muni-town#158 -> UserSession.svelte muni-town#154 -> SpaceBar.svelte muni-town#145 -> SpaceBar.svelte

merge "refactor: update to latest version of Leaf / Roomy SDK. (muni-…

47f0d52

…town#154)" conflicts

sameoldlab force-pushed the feat/sidebarui branch from d521be0 to 47f0d52 Compare April 11, 2025 15:35

sameoldlab added 2 commits April 11, 2025 16:40

Merge branch 'main' into feat/sidebarui

33cb179

update index logo

9d88377

sameoldlab added 6 commits April 15, 2025 18:40

remove dev files from merge

d59f311

rm main +layout files

716ff97

mv +layout.root* -> +layout

41b8922

remove unused function

2164baf

remove @debug

e9917b2

fix indicator aspect ratio

41e9551

michaelwschultz moved this to Todo in Roomy Apr 15, 2025

michaelwschultz added this to Roomy Apr 15, 2025

michaelwschultz moved this from Todo to In Review in Roomy Apr 15, 2025

michaelwschultz assigned sameoldlab Apr 15, 2025

sameoldlab added 3 commits April 16, 2025 14:49

Merge branch 'main' into feat/sidebarui

8022c7c

preserve sidebar state across sessions

68e349c

no channel breadcrumb in room title

0d84b12

michaelwschultz requested changes Apr 16, 2025

View reviewed changes

github-project-automation bot moved this from In Review to In Progress in Roomy Apr 16, 2025

michaelwschultz moved this from In Progress to In Review in Roomy Apr 17, 2025

sameoldlab and others added 4 commits April 17, 2025 09:57

fix: narrow ChatMode.svelte Accordion.Content prop type

dade168

Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>

reduce z-index for portal

cc029a1

https://github.com/muni-town/roomy/pull/153/files/41e9551b57f3188ad2846a2eda875e34f9bf3827#r2046156578

rm Tooltip comments

bafa66f

change file names

c5be63b

IndexMode -> SidebarIndex ChatMode -> SidebarChat

sameoldlab requested a review from michaelwschultz April 17, 2025 09:34

sameoldlab and others added 2 commits April 17, 2025 10:35

change inbox icon to info

b258ba0

Merge branch 'main' into feat/sidebarui

df08852

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Sidebar UI #153

feat: Sidebar UI #153

sameoldlab commented Apr 8, 2025 •

edited

Loading

sameoldlab commented Apr 8, 2025

erlend-sh commented Apr 8, 2025

sameoldlab commented Apr 15, 2025

michaelwschultz commented Apr 15, 2025

erlend-sh commented Apr 15, 2025

michaelwschultz commented Apr 16, 2025 •

edited

Loading

erlend-sh commented Apr 16, 2025

sameoldlab commented Apr 16, 2025

sameoldlab commented Apr 16, 2025 •

edited

Loading

michaelwschultz left a comment

michaelwschultz Apr 16, 2025

erlend-sh Apr 17, 2025

michaelwschultz Apr 16, 2025

michaelwschultz Apr 16, 2025

michaelwschultz Apr 16, 2025

feat: Sidebar UI #153

Are you sure you want to change the base?

feat: Sidebar UI #153

Conversation

sameoldlab commented Apr 8, 2025 • edited Loading

sameoldlab commented Apr 8, 2025

erlend-sh commented Apr 8, 2025

sameoldlab commented Apr 15, 2025

michaelwschultz commented Apr 15, 2025

erlend-sh commented Apr 15, 2025

michaelwschultz commented Apr 16, 2025 • edited Loading

Sidebar area proposed changes

Main area proposed changes (these do not all need to be done here)

erlend-sh commented Apr 16, 2025

sameoldlab commented Apr 16, 2025

sameoldlab commented Apr 16, 2025 • edited Loading

michaelwschultz left a comment

Choose a reason for hiding this comment

michaelwschultz Apr 16, 2025

Choose a reason for hiding this comment

erlend-sh Apr 17, 2025

Choose a reason for hiding this comment

michaelwschultz Apr 16, 2025

Choose a reason for hiding this comment

michaelwschultz Apr 16, 2025

Choose a reason for hiding this comment

michaelwschultz Apr 16, 2025

Choose a reason for hiding this comment

sameoldlab commented Apr 8, 2025 •

edited

Loading

michaelwschultz commented Apr 16, 2025 •

edited

Loading

sameoldlab commented Apr 16, 2025 •

edited

Loading