Refactored the Community tab into a side menu

It started with the Filter button

The Community tab had a Filter button on the top right. Tapping it opened a separate screen for category, search, and sort.

The thing is, those same controls were already inline at the top of the screen — category chips, a search bar, a sort icon. The Filter screen was just showing the same controls in a bigger form factor. Redundant.

So I removed it. That was the whole plan.

”What goes in that empty spot?” started a domino chain

With the Filter button gone, the next thought was to put an info button there. A “this is what the Community is” kind of thing. There happened to be a menu-community.tsx screen sitting in the codebase as a dead route — a screen registered in routes but never navigated to from anywhere. The body text was actually written quite carefully.

So I started by reviving that dead route. Put a menu button on the trailing side, added “About Community” inside it, then added Freeboard and Notice items too.

But then: “what if instead of navigating to each section as a separate screen, we switch sections inside the Community tab itself?” Like Discord or Slack.

The side menu pattern

A new button on the top left. Tapping it slides a side menu in from the left. Inside:

• Public Library
• Freeboard
• Notice

Three sections. Picking one swaps the body of the Community tab. No URL navigation.

I extracted each section into its own component:

• components/page/PublicLibrarySection.tsx
• components/page/FreeboardSection.tsx
• components/page/NoticeSection.tsx

For the top-left icon I couldn’t find anything that fit, so I drew an SVG. A rounded rectangle with a vertical divider on the left — a “drawer” shape. The hamburger icon was already on the right, so a hamburger on the left too would have looked odd.

”The hamburger menu should also change per section”

Another step. The right hamburger menu was kept, but its contents should change based on which section is active. So:

• Split into menu-public-library / menu-free-board / menu-notice
• Each shows section-specific actions (“My Posts”, “About”)
• About also split: about-public-library / about-free-board / about-notice

The menuCommunity.body i18n key, which had a long mixed-purpose body, was also split per section. The Public Library paragraphs went to menuPublicLibrary.body, the Freeboard ones to menuFreeboard.body. Notice didn’t have a paragraph in the original, so I wrote a short new one.

Adding “My Posts”

Each section menu should have a “My Posts” entry. This needed server changes.

I added a mine: bool = False parameter to gather_overview and gather_freeboards. When true, filter by created_by == current achiever's ID. Adjusted the mongo query and the vector search pipeline accordingly.

On mobile, two new screens — list-my-overview.tsx, list-my-freeboard.tsx — call the API with mine=true. They use local component state instead of the global atoms so they don’t conflict with the regular lists.

Freeboard → Nox Caelo (밤 하늘)

“Freeboard” felt too generic. The Korean version became “밤 하늘” (night sky), and the English version became “Nox Caelo” (Latin for night sky). Routes and file names stayed the same (list-freeboard etc.) — only the display label changed.

In terms of branding, “Nox Caelo” probably captures the vibe better than “Freeboard”. Someone quietly posts something, someone else sees it, occasional flickers like distant stars. Maybe a bit much. But it’s there now.

Same mental model on desktop

After the mobile work, I applied the same pattern to desktop. A slide drawer doesn’t fit a wide screen, so it became a permanent narrow sidebar on the left of the SplitLayout — 200px, with the 3 sections plus sub-items (My Posts / About) per section.

For About on desktop, instead of navigating to a separate screen, I made it a centered modal that shows the body text in place. Feels more natural on a wide layout.

i18n turned out to be a small bit of luck — desktop imports the mobile locale files directly, so the label rename propagated to both sides automatically.

The side menu’s own iteration

The first version of the side menu was plain, so the feedback was “any way to make it more attractive?”

• Tried a header at the top with a large “Community” icon → too big → matched item size → eventually “let’s just remove it.” Removed.
• Added a 4px PRIMARY vertical bar on the left of the selected item. This one stayed.
• Bumped the divider color from NEUTRAL200 to NEUTRAL300 for a touch more presence.

Tried elevation (shadow) too — felt off, took it out.

Result

• Community tab = one container, with three sections swapped via the side menu
• Each section has its own contextual hamburger menu
• Same mental model on mobile and desktop
• Personalization features like “My Posts” land in the right place
• “Freeboard” → “Nox Caelo” / “밤 하늘”

It started with removing one Filter button and ended up here. Not the plan from the start, but each step pulled the next, and the whole shape settled by the end.

Refactors often go like this. “Remove this button” disturbs the meaning of another button, redefining that button makes a third spot feel off, and around it goes until the whole thing rests in a different shape. I’m never quite sure if the path was right, but at least today’s final shape feels better than the starting one.