feat(design): Visual Island Template Composer with 10 official HyperOS templates, Design Hub Bento Grid & Design Manager (#272, #327, #383, #385) - #390
Merged
Conversation
…aomi templates (#272, Phase 4) (#327) * feat(composer): add island template model, Room persistence, matcher and translator Phase 4 (#272) data layer: ComposerTemplate/IslandTemplateDefinition model covering the 10 Xiaomi templates and their slots (left graphic, text, progress, buttons, rule), a Room-backed repository with a hand-written 1->2 migration (avoids destructive fallback wiping settings), a pure ComposerTemplateMatcher cloned from RulesEngine, and a ComposerTemplateTranslator hooked into NotificationReaderService just before the built-in translator dispatch. A matched template now wins over native Live Updates and the built-in per-type translators for STANDARD/MESSAGE/PROGRESS/DOWNLOAD/MEDIA notifications. Co-Authored-By: Claude Fable 5.1 <[email protected]> * test(composer): add matcher and repository unit tests Covers package/title/text regex matching, priority ordering, disabled templates, invalid-regex safety, and JSON round-tripping every field of IslandTemplateDefinition through the Room repository (fake in-memory DAO, matching this repo's existing testing conventions). ComposerTemplateMatcher is kept free of android.util.Log so it stays plain-JUnit testable. Co-Authored-By: Claude Fable 5.1 <[email protected]> * feat(composer): add island template composer UI and DesignScreen entry point Phase 4 (#272) Compose layer: a shared IslandTemplatePreview live pill plus 10 default-definition catalog wrappers for the Xiaomi templates, slot editors (left graphic, text/badge, progress, action buttons, rule binder with an app picker + advanced regex toggle), IslandComposerScreen (type switcher + live preview + gated editors + save), and ComposerTemplateListScreen (list/enable/delete), wired into DesignScreen and HomeScreen's hand-rolled route enum alongside the existing Widgets/Themes flows. Co-Authored-By: Claude Fable 5.1 <[email protected]> * fix(composer): make ComposerTemplateMatcher regex cache thread-safe NotificationReaderService dispatches each notification onto Dispatchers.Default (a real thread pool), so this singleton's regex cache can be hit concurrently by multiple notifications. Switch the plain mutableMapOf to a ConcurrentHashMap to avoid data races on the 24/7 service path. Co-Authored-By: Claude Fable 5.1 <[email protected]> * feat(design): island templates as translator presentations (#272, Phase 4) Rework of the Composer along the lines David asked for in #327: templates are not a feature of their own any more, they are presets for the Phase 3 translator pipeline, and every preview goes through the component added for TranslatorScreen. - IslandTemplateCatalog: the ten official Xiaomi templates as named PresentationConfig presets. Reuses the ids the editor's picker already offered (so tpl_call_kit / tpl_media_compact keep the meaning DynamicTranslator gives them) and adds the two that were missing, boarding pass and courier tracking. Picking one produces an ordinary CustomTranslator with presentation.mode = TEMPLATE, so templates inherit matching, priority, theming and .htrans import/export instead of a parallel store. - HyperOsIslandPreview gains an IslandPreviewSample (so each template previews with content that suits it), a showChrome flag for thumbnail use, and resolves TEMPLATE presets before rendering. The three copies of the token replacement chain collapse into one helper, which also fixes the compact pill showing a raw {notif.title}. - Design tab: a Designs section listing the active designs, and Add design -> from a template (gallery of the ten, each previewed) or a custom design, which stays disabled until the Widget Studio lands. After picking a template the only question asked is the notification type. - Translator editor: the template sheet is the same gallery, and picking a template now also opens the slot editors, so each element can be bound to notification data alongside the match conditions already there. - DynamicTranslator fills the slots from the preset for a translator that only carries a templateId, so an imported .htrans renders as its template. Tests: 12 new IslandTemplateCatalog cases; :app:testDebugUnitTest is 416 green and :app:assembleDebug builds. * fix(design): templates are materialized once, then rendered exactly as saved (#272) effectivePresentation() merged the preset slot by slot, comparing each whole slot to the class defaults, and refilled an empty action list from the preset. Two silent losses: editing one text field of a translator that still carried a bare templateId dropped the preset's other fields (the payment template's highlight / OTP text), and deleting a preset's only action brought it back on every render. A template is now either bare (only a templateId: rendered as the preset) or concrete (rendered as saved). The editor materializes it when a translator is loaded, when the mode is switched to TEMPLATE, and when a template is picked (applyTemplate), so every edit and deletion sticks. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]> * fix(design): payment template highlights the OTP the translator actually extracts (#272) The preset used {regex.1}, which nothing in DynamicTranslator's variable map ever fills, so the payment island's highlight / pill text rendered blank. It now uses {smart_action.OTP.code}, filled by the existing OTP extraction. A test pins every preset to variables the translator provides. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]> --------- Co-authored-by: noelpatata2 <[email protected]> Co-authored-by: Claude Fable 5.1 <[email protected]> Co-authored-by: noelpatata <[email protected]>
…el, and Guides section (#383) * feat: add dedicated Design Manager screen and update design dashboard layout - Add `DesignManagerScreen` to allow browsing, searching, previewing, importing, exporting, and managing island designs. - Replace `DesignsCarousel` on `DesignScreen` with a `DesignStatusCard` summary card that navigates to the new manager screen. - Track previous route in `HomeScreen` to return to either the Design Manager or Translator Manager after design editing. - Add vertical scrolling to notification type selection in `AddDesignFlow`. - Add localized strings for design management features. * feat: replace carousels with status cards on design screen - Replace theme, widget, and translator carousels on `DesignScreen` with summary status cards and action buttons. - Update notification type selection in `AddDesignFlow` to use a 2-column grid layout with type icons and suggested tags. - Add required string resources for status cards and suggested badges. * feat: update design screen layout to a bento grid Replace status cards for themes, widgets, designs, and translators in `DesignScreen` with a compact bento grid layout (`DesignVariantBento`), and add string resources for layout variants. * feat: add featured carousel and guides sections to design screen - Add `FeaturedSection` and `GuidesSection` to `DesignScreen` for showcasing featured content and documentation links. - Define documentation URL constants in `DocumentationUrls.kt`. - Add localized string resources for new sections in English and Spanish. * ui: refine template card layout and tag placement in AddDesignFlow - Set a minimum height of 142.dp on design template cards. - Restructure card layout with a fixed top slot for the "Suggested" tag to maintain consistent icon alignment. - Adjust vertical spacing and padding within the template card.
…feedback) (#385) Salvaged from #384 on top of #383: each official template gets a TemplateCardLayout (style, progress, hint button, Xiaomi accent) and the preview renders a TemplateFocusCard modelled on the HyperIsland ToolKit demo instead of the generic expanded island. Used by the template gallery, the translator editor and My Designs. Co-authored-by: noelpatata2 <[email protected]>
…nize DesignManager UI (#389) * feat: add per-app custom design management and package exclusion support - Add `excludedPackages` field to `CustomTranslator` model and enforce exclusions in `TranslatorRegistry`. - Add `getDesignsForApp` and `toggleDesignForApp` methods to `TranslatorViewModel` to toggle designs per package. - Replace custom design placeholder in `AppConfigScreen` with `AppDesignsSectionCard` for managing app designs. - Update `DesignPreviewCardItem` to support explicit checked state overrides. * fix(design): show notification type designs on app config screen and wire add design flow * feat(design): separate design items and add search & filter to app config design subscreen * feat(design): add preview visibility toggle button on app config design subscreen * feat(app-config): add filter bottom sheet for custom designs * feat(design-manager): show AddDesignFlow bottom sheet on add fab and empty state * feat(design): modernize add fab bottom sheet with m3 expressive design * feat(design-manager): move explanation to help bottom sheet invoked by top bar info icon * feat(app-config): add help info action to design subscreen top bar
📱 Debug APK Ready for TestingThe debug APK for commit
|
D4vidDf
changed the title
Open
6 tasks done
D4vidDf
added
enhancement
D4vidDf
marked this pull request as ready for review
September 25, 2026 16:01
Owner
Author
|
Need users to test if all the templates works on their devices. I tested some combinations on my Xiaomi 13t and Xiaomi 15 Ultra |
8 tasks
noelpatata
added a commit
to noelpatata/HyperBridge
that referenced
this pull request
Sep 25, 2026
Takes David's D4vidDf#390/D4vidDf#391 versions of the composer, Design hub and 0.6 service code, and re-applies only the Studio (D4vidDf#273) changes on top: - Design Manager opens WIDGET-mode designs in the Studio instead of the translator editor - dropped the leftover BridgeIslandGroup.scheduleRelease calls (the group was reverted in D4vidDf#380) - Room stays v2 upstream + our v3 (source tables) / v4 (composer test builds) migrations Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Overview
This PR delivers Phase 4 of the Custom Translators & Design Framework (#272) by introducing the Visual Island Template Composer. Built upon user feedback in #327, island templates are integrated directly into the custom translator pipeline as first-class
PresentationMode.TEMPLATEpresets rather than as a separate siloed subsystem.In addition, this PR redesigns the Design Hub (
DesignScreen) with a clean Material 3 Bento Grid layout, introduces the dedicated Design Manager Screen for comprehensive template & custom design management, and refines island previews to reflect authentic Xiaomi HyperOS Island visuals.Key Highlights & Architectural Changes
1. 🏝️ The 10 Official Xiaomi HyperOS Island Templates (
IslandTemplateCatalog)tpl_standard_alert)tpl_call_kit)tpl_media_compact)tpl_media_expanded)tpl_ride_sharing)tpl_delivery_status)tpl_sports_live)tpl_timer_countdown)tpl_boarding_pass)tpl_otp_payment)CustomTranslatorwithpresentation.mode = TEMPLATE..htransimport/export capabilities.2. 📱 Realistic HyperOS Island Previews (
HyperOsIslandPreview,TemplateFocusCard)HyperOsIslandPreviewto look like the authentic hardware cutout / island:IslandPreviewSample) so each template previews with contextually appropriate demo content (e.g. flight numbers, OTP code, song titles).{smart_action.OTP.code}) for seamless preview rendering.3. 🍱 Redesigned Design Hub (
DesignScreen)DesignVariantBento) organizing Themes, Micro-Widgets, Designs, and Translators.GuidesSection,DocumentationUrls.kt).AddDesignFlow): Guided creation flow allowing users to choose an island template layout via visual gallery cards, select target notification types (in an intuitive 2-column grid with suggested badges), and immediately generate or edit a design.4. 🗂️ Dedicated Design Manager (
DesignManagerScreen)HomeScreennavigation back-stack tracking.Changes by Module
IslandTemplateCatalog.ktHyperOsIslandPreview.ktTemplateFocusCard.ktAddDesignFlow.ktDesignScreen.ktDesignManagerScreen.ktTranslatorEditorScreen.ktIslandTemplateCatalogTest.ktstrings.xml/strings.xml (es-rES)Testing & Verification
IslandTemplateCatalogTesttesting all 10 templates, token resolution, and slot boundaries../gradlew testDebugUnitTest./gradlew compileDebugKotlin/./gradlew assembleDebugDesignScreen.AddDesignFlowto create designs for various notification types.HyperOsIslandPreview.DesignManagerScreen.Related Issues