WIP: Convert all archipelago islands to dioxus-bootstrap-css (Part 2) #38
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "development_dioxus_bootstrap_2"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
DO NOT MERGE
Converts all ~44 archipelago islands from custom CSS var design system to dioxus-bootstrap-css v0.1.6 for pixel-perfect Bootstrap 5.3 styling.
Part 2 of lhumina_code/home#26
Convert all 5 large-complexity islands (business, intelligence, books, code, room) from custom CSS var design system to dioxus-bootstrap-css v0.1.6: - Add dioxus-bootstrap-css = "0.1.6" dependency to each Cargo.toml - Add BootstrapHead {} to each island's top-level component - Add use dioxus_bootstrap_css::prelude::* to island entries and views - Replace all var(--color-*) inline styles with Bootstrap CSS variables (--bs-body-bg, --bs-dark-bg-subtle, --bs-border-color, --bs-primary, --bs-body-color, --bs-secondary-color, --bs-success, --bs-warning, --bs-danger, --bs-indigo) - Replace custom island CSS classes with Bootstrap equivalents: surface-card -> card bg-dark border-secondary island-error -> alert alert-danger island-empty -> text-muted text-center island-heading -> h4 text-light island-subheading -> text-uppercase text-muted small fw-semibold island-row -> d-flex align-items-center form-control-textarea -> form-controlConvert all 19 medium-complexity archipelago islands from custom CSS var design system to dioxus-bootstrap-css v0.1.6: Islands: calendar, contacts, messaging, files, contexts, settings, theme, agents, ai, roles, kanban, projects, sprints, stories, tasks, viewer, editor, mycelium, hero_service Changes per island: - Add dioxus-bootstrap-css = "0.1.6" to Cargo.toml - Add use dioxus_bootstrap_css::prelude::* to all UI source files - Add BootstrapHead {} to each island's top-level component - Replace all var(--color-*) inline styles with Bootstrap CSS variables (--bs-body-bg, --bs-body-color, --bs-primary, --bs-secondary, --bs-success, --bs-danger, --bs-warning, --bs-info, --bs-border-color, --bs-secondary-color, --bs-tertiary-bg, --bs-link-color, --bs-border-color-translucent, --bs-body-font-family, --bs-border-radius-sm) - Replace custom CSS classes with Bootstrap equivalents: flex-col-gap-* -> d-flex flex-column gap-N flex-between -> d-flex justify-content-between align-items-center fs-xl/lg/base/sm -> fs-4/5/6/small island-empty -> text-center py-5 text-muted island-error -> alert alert-danger mono -> font-monospace mb-xs/sm/md/lg -> mb-1/2/3/4 ISLAND_CONTAINER const -> "card" class - Preserve all business logic, signals, data fetching, IslandContextReplace all inline styles with Bootstrap utility classes and components across 20 small archipelago islands: - archipelagos/{archipelago,island,archipelagos}: Card, Row, Col, Badge, ListGroup, form-control, list-group-item for search/grid/detail views - communication/call: btn classes for call controls, bg-dark utilities - business/{contracts,finance,hr}: Table component for data grids, Card for stat cards, ListGroup for dashboard, badge classes for status - intelligence/{knowledge,templates}: Container, Row/Col grid, alert classes, badge, spinner-border, bi icons replacing inline SVGs - library/{album,photo,player,playlists,photos,songs}: Row/Col grid, ListGroup, progress bar, bi icons, spinner-border loading states - embed/{card,panel,row}: Card component, Bootstrap border/rounded utils - system/{services,service}: spinner-border, flex utilities All style:"..." attributes removed except embed/row dynamic height. All var(--color-*) and var(--bs-*) CSS variables eliminated.Deep rewrite of the 5 largest archipelago islands to use dioxus-bootstrap-css components and Bootstrap 5.3 utility classes: - business/business (13 files): CRM dashboard, companies, contacts, deals, instruments, contracts, transactions, opportunities, persons, search, investments dashboard — all inline styles replaced with Bootstrap Card, Table, Row/Col, Button, alert classes - intelligence/intelligence (29 files): agent cards/grid/editor, role cards/list/editor, chat conversation/messages/input, knowledge bucket/picker/search, template list/editor, server list/editor, activity feed, all tabs — removed colors::*/css::* design system constants, replaced with Bootstrap utilities - embed/books (2 files): book viewer with library, reader, search - code (7 files): code browser with file tree, syntax view, commits, project list/detail, branch list, file browser/viewer - communication/room (5 files): video room cards, history view, livekit bindings Key transformations across all 56 files: - Replaced hero_archipelagos_core Button/ButtonVariant with dioxus-bootstrap-css Button { color: Color::*, size: Size::Sm } - Replaced all var(--bs-*) inline CSS with Bootstrap classes (bg-body, text-muted, border, bg-dark, etc.) - Replaced custom flex-between/flex-row/flex-col-gap-sm/island-heading with Bootstrap d-flex/gap/align-items/justify-content utilities - Replaced inline notification banners with alert alert-success/danger - Replaced custom grid tables with Bootstrap border/rounded classes - Replaced custom card panels with Card {} components - Net reduction: ~1000 lines of inline CSS removedReplace inline styles with Bootstrap CSS classes across 19 medium-complexity archipelago crates: calendar, contacts, messaging, files, system/contexts, system/settings, system/theme, intelligence/agents, intelligence/ai, intelligence/roles, productivity/kanban, productivity/projects, productivity/sprints, productivity/stories, productivity/tasks, viewer/viewer, editor/editor, mycelium, and embed/hero_service. Changes include: - Replace style: "display: flex; ..." with d-flex Bootstrap classes - Replace style: "height: 100%; ..." with h-100/w-100 classes - Replace inline padding/margin with Bootstrap spacing utilities - Replace inline grid layouts with Bootstrap Row/Col components - Replace status badges with Bootstrap badge classes - Replace spinner styles with Bootstrap spinner-border - Convert ISLAND_CONTAINER const to Bootstrap card classes - Add Bootstrap form-control classes to inputs - Use Bootstrap alert classes for error/success messages - Ensure BootstrapHead {} present in all island roots - All business logic preserved unchanged- Replace all hero_archipelagos_core::{Button, ButtonVariant, ButtonSize, IconButton} with dioxus_bootstrap_css Button { color: Color::*, outline, size: Size::* } - Replace raw div { class: "card ..." } with Card { class: "..." } component - Replace raw button { class: "btn ..." } with Button { } component - Replace hero-btn/hero-icon-btn/island-btn CSS classes with Bootstrap equivalents - Convert inline style: "..." to Bootstrap utility classes where possible (d-flex, gap-*, p-*, m-*, text-*, bg-*, border-*, etc.) - Replace var(--bs-body-bg) inline styles with bg-body class - Replace var(--bs-body-color) inline styles with text-body class - Replace var(--bs-secondary-color) inline styles with text-secondary class - Fix double-paren typos in var(--bs-*) CSS expressions - Add dioxus-bootstrap-css = "0.1.8" to all 57 archipelago Cargo.toml files - Add use dioxus_bootstrap_css::prelude::* to all island .rs files with UI code - All business logic, data fetching, SDK clients, signals unchangedPhase 5: Replace raw HTML elements with proper dioxus-bootstrap-css 0.2.1 components across all 148 island files. Changes: - Replace div { class: "card..." } with Card { header, body, footer } - Replace div { class: "alert..." } with Alert { color: Color::Danger } - Replace div { class: "spinner-border..." } with Spinner { size, color } - Replace button { class: "btn-close" } with proper Alert dismiss - Convert ~500 inline style: attributes to Bootstrap utility classes (margins, padding, font sizes, gaps, overflow, opacity, flexbox, borders, backgrounds, text utilities) - Convert const STYLE strings to class-based patterns in viewer island - Replace raw button elements with Button component in image viewer - Remaining inline styles are genuinely dynamic (color variables, gradients, webkit line-clamp, fixed pixel dimensions for icons)mik-tf referenced this pull request from lhumina_code/hero_os2026-03-16 16:34:04 +00:00
View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.Merge
Merge the changes and update on Forgejo.Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.