feat(ui): mobile responsiveness + mokoonyx retheme + Bootstrap 5 drop-in (#719 #822 #835 #818 #803)

jmiller commented

2026-07-21 19:28:32 +00:00

Owner

Consolidated mobile + retheme work (design: #719). Integration branch, ships dev → rc → main.

This PR = baseline drop-in for on-dev build verification. A follow-up commit will add the full Bootstrap-component mobile rewrite (nav→offcanvas, settings→drawer, wide tables→.table-responsive).

Included (4 signed commits)

#822 WP-B — retheme theme-mokogit-{light,dark}.css token values to mokoonyx (dark #0e1318/#151b22/#2b323b; light accent #aec5f5 + black text on accent-filled buttons) + MokoOnyx app-chrome layer in mokogit-brand.css.
#803 WP-D — toast success level + showSuccessToast + unit test; flash-toast.ts mirrors server .flash-message banners into aria-live toasts (no-JS banner fallback preserved).
#835 WP-C — unified #mokogit-fab: desktop sidebar-corner FAB → mobile collapse-into-tab → login in-card bar; refactors theme-toggle/a11y-menu to mountable controls; removes navbar toggles (keeps CSRF theme form). Fixes a11y being unreachable <768px.
#719 WP-E — vendored Bootstrap 5.3.3 (MIT) full drop-in (web_src/{css,js}/vendor/bootstrap), loaded before the Fomantic modules; mokogit-mobile.css (diffs, nav, tables, settings, 44px touch targets); index.css/index.ts wiring.

Verification notes

Local vite build is not possible on the exFAT dev drive (pnpm symlinks unsupported) — this merge is the build check via CI/Docker.
Known risk being evaluated: full Bootstrap Reboot may collide with Fomantic on desktop. Load order (Bootstrap before Fomantic) is chosen to minimize it; this dev deploy is to observe the actual impact in light + dark before promoting.

https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

Consolidated mobile + retheme work (design: #719). Integration branch, ships dev → rc → main. **This PR = baseline drop-in for on-dev build verification.** A follow-up commit will add the full Bootstrap-component mobile rewrite (nav→offcanvas, settings→drawer, wide tables→`.table-responsive`). ### Included (4 signed commits) - **#822 WP-B** — retheme `theme-mokogit-{light,dark}.css` token values to mokoonyx (dark `#0e1318`/`#151b22`/`#2b323b`; light accent `#aec5f5` + black text on accent-filled buttons) + MokoOnyx app-chrome layer in `mokogit-brand.css`. - **#803 WP-D** — toast `success` level + `showSuccessToast` + unit test; `flash-toast.ts` mirrors server `.flash-message` banners into aria-live toasts (no-JS banner fallback preserved). - **#835 WP-C** — unified `#mokogit-fab`: desktop sidebar-corner FAB → mobile collapse-into-tab → login in-card bar; refactors theme-toggle/a11y-menu to mountable controls; removes navbar toggles (keeps CSRF theme form). Fixes a11y being unreachable <768px. - **#719 WP-E** — vendored **Bootstrap 5.3.3** (MIT) full drop-in (`web_src/{css,js}/vendor/bootstrap`), loaded before the Fomantic modules; `mokogit-mobile.css` (diffs, nav, tables, settings, 44px touch targets); `index.css`/`index.ts` wiring. ### Verification notes - Local `vite` build is not possible on the exFAT dev drive (pnpm symlinks unsupported) — this merge is the build check via CI/Docker. - **Known risk being evaluated:** full Bootstrap Reboot may collide with Fomantic on desktop. Load order (Bootstrap before Fomantic) is chosen to minimize it; this dev deploy is to observe the actual impact in light + dark before promoting. https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

jmiller added 4 commits 2026-07-21 19:28:33 +00:00

feat(ui): retheme tokens + app chrome to mokoonyx (#822 ) 4f825e7cff

Retune theme-mokogit-{light,dark}.css token VALUES to the MokoAi mokoonyx palette
(dark bg #0e1318 / card #151b22 / border #2b323b / text #e6ebf1; light accent
#aec5f5 with black text on accent-filled buttons). Extend mokogit-brand.css with a
MokoOnyx app-chrome layer (navbar, settings sidebars, cards, tables, buttons,
dropdowns, form focus ring) — all via theme vars so light/dark follow automatically.

Authored-by: Moko Consulting
Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

feat(ui): toast success level + flash→toast bridge (#803 ) c77eebfe27

Add 'success' to Intent + levels.success (green var(--color-green), check icon) and
export showSuccessToast; rewire info to a distinct neutral blue. New flash-toast.ts
mirrors server .flash-message banners into aria-live toasts (polite success/info,
assertive warning/error) and removes the banner, gated on the element existing so the
no-JS banner fallback is preserved. Unit test covers showSuccessToast.

Authored-by: Moko Consulting
Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

feat(ui): unified theme+a11y FAB with mobile collapse-into-tab (#835 ) cae7846c35

New mokogit-fab.{ts,css}: a sidebar-corner FAB hosting the light/dark+AUTO theme
toggle and the a11y toolbar. On mobile (<=767.98px) it collapses into a labeled
universal-access tab whose panel emerges from the tab (getBoundingClientRect),
closes on tap-outside/Escape; on login it relocates into the auth card as a flush
bottom bar. Refactors theme-toggle.ts/a11y-menu.ts to expose mountable controls
(shared state, localStorage preserved) and removes the superseded navbar toggles
(hidden CSRF theme form kept so signed-in theme POST still works). Fixes a11y being
unreachable on phones (navbar-right was display:none <768px).

Authored-by: Moko Consulting
Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

feat(ui): vendor Bootstrap 5 drop-in + mobile layer + wire inits (#719 )

Generic: Project CI / Lint & Validate (pull_request) Successful in 33s

Details

Universal: PR Check / Branch Policy (pull_request) Successful in 2s

Details

Generic: Project CI / Tests (pull_request) Successful in 23s

Details

Universal: PR Check / Require Docs Update (pull_request) Has been skipped

Details

Universal: PR Check / Wiki Update Reminder (pull_request) Has been skipped

Details

Universal: PR Check / Validate PR (pull_request) Successful in 18s

Details

Branch Cleanup / Delete merged branch (pull_request) Successful in 1s

Details

RC Revert / Rename rc/ back to dev/ (pull_request) Has been skipped

Details

Universal: PR Check / Secret Scan (pull_request) Successful in 51s

Details

Universal: PR Check / Build RC Package (pull_request) Has been cancelled

Details

Universal: PR Check / Report Issues (pull_request) Has been cancelled

Details

8828c33e16

Vendor Bootstrap 5.3.3 (MIT) CSS + JS bundle into web_src/{css,js}/vendor/bootstrap
(exFAT-safe; no node_modules symlink dependency). Load bootstrap.min.css BEFORE the
fomantic replacements so Fomantic overrides Reboot on desktop while Bootstrap grid +
responsive utilities power the mobile layer; import the JS bundle (incl. Popper) in
index.ts. Add mokogit-mobile.css (diffs, nav, tables, settings drawer, 44px touch
targets) targeting Gitea selectors. Wire index.css/index.ts: import mokogit-fab.css +
mokogit-mobile.css, and replace initThemeToggle/initA11yMenu with initMokogitFab +
initFlashToast.

Authored-by: Moko Consulting
Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P

jmiller merged commit 49e7485acc into dev

2026-07-21 19:29:19 +00:00

jmiller referenced this pull request

2026-07-21 19:51:56 +00:00

fix(ui): Bootstrap/Fomantic jQuery no-conflict + Bootstrap-component mobile rewrite (#719) #858

feat(ui): mobile responsiveness + mokoonyx retheme + Bootstrap 5 drop-in (#719 #822 #835 #818 #803) #857

Included (4 signed commits)

Verification notes