Apps Section Redesign - #358
Draft
mariotaku wants to merge 10 commits into
Draft
Conversation
mariotaku
force-pushed
the
feature/apps-rework
branch
from
May 21, 2026 23:54
f9eff63 to
e4d3750
Compare
- lift device selection up from InstalledComponent to AppsComponent so install, launch, uninstall and update actions all see a real device - populate repoPackages in InstalledComponent so the Update button on the installed list and the Update row in the installed-details modal render when a newer version is available - wire the installed-details modal: inject parent + repoPackage, add Launch / Uninstall / Update click handlers, close modal on success, add header close button - wire the channel-details modal: inject device + parent, uncomment incompatible$ and reloadInstalledInfo so the dialog shows compatibility status and the installed version - add drag-and-drop .ipk install on desktop via the Tauri webview drag-drop event and a drop overlay; android/ios are skipped - add per-install target device selector in the channel-details modal when multiple devices are registered; AppsComponent.installPackage now accepts an optional device override - expand installed-details spec with launch / uninstall / hasUpdate coverage Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- move device select + storage info into the Installed tab as a bottom-pinned bar, while the Install button stays in the top toolbar but only renders while the Installed tab is active - make app-installed a flex column at full host height so the bar sits at the bottom of the tab area and the list scrolls in the middle - give app-channel a host-level scroll so the channel list scrolls inside the tab pane that's now a flex column - scope the .tab-content > .tab-pane.active flex layout to app-apps via a global rule in styles.scss (avoids ::ng-deep, and using .active rather than .show.active keeps the layout stable through the fade transition so the bar doesn't shift) - route storage refresh through a Subject on AppsComponent so the InstalledComponent's @ViewChild('storageInfo') can refresh after install or uninstall Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- merge the device selector and the primary Launch/Update/Install button into a single Bootstrap input-group, so the dropdown carrying Install Beta / Uninstall hangs off the same control group - promote Website to its own btn-link beneath the action group, away from action verbs in the dropdown - hide the dropdown toggle when there is nothing in it (no beta and not installed) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Available tab: - replace the single-column list with a card grid plus a Featured row built from the first page items - subscribe to AppManagerService.packages$ to render Install / Installed / Update pills per card, mirroring the inline state from the Installed tab - card hover lifts with a subtle shadow Installed tab: - split into a 320 px list pane + flex-fill detail pane above the existing bottom bar - list pane has a text filter, slim rows (36 px icon, title, version, update badge), and a primary-tinted active state - detail pane renders the refactored installed-details component inline - show an empty state with a Bootstrap icon when no row is selected - bottom bar (device select + storage info) spans the full width Installed details component: - convert from modal-only to @Input-driven (pkg / device / parent / repoPackage); recompute disk usage in ngOnChanges - new layout: header with action button group (Launch, Update when available, Uninstall icon), body with a description and metadata list (ID, vendor, type, path, disk usage, website) - selector renamed to app-installed-details and standalone component added to AppsModule imports - spec rewritten to drive the component via Inputs and ngOnChanges Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- channel.openDetails now uses NgbOffcanvas with position: end and
panelClass: app-detail-offcanvas (480 px on desktop, full-width on
narrow viewports via --bs-offcanvas-width)
- DetailsComponent injects NgbActiveOffcanvas instead of NgbActiveModal
- template restructured into:
* .offcanvas-header -- title + close button
* .offcanvas-body -- hero icon + title + version + installed and
root state; incompatibility alert; About /
description; Links
* .detail-footer -- sticky bottom bar with the device selector,
primary Launch/Update/Install button, and
a more-actions dropdown (Install Beta /
Uninstall) in one input-group
- because the component uses ViewEncapsulation.None, the host layout
selector is the element name itself (display: flex column, height
100 percent) so .offcanvas-body grows and scrolls while the footer
pins to the bottom
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Channel tab: - featured section now renders a real hierarchy: one hero card spanning two rows alongside two stacked small cards, drawn from the first page items - all-apps grid switched from icon-on-top centered cards to wider icon-left cards (260 px min) with title, version and shortDescription on the right - state indicator moved to the top-right corner of each card as a Bootstrap badge (Installed / Update); the default Install state has no badge Channel app details (offcanvas): - hero shows installed-version line plus a stock Installed badge when applicable - root-required / root-optional rendered with a shield icon instead of bold inline text - About + Links section headings use text-body-secondary Installed details panel: - header gains an "Update available" badge when a newer repo version exists; the inline version arrow still indicates the target version - body groups content into About and Details sections with stock text-body-secondary subheaders Installed list row: - meta line uses text-body-secondary; Update badge stays as stock text-bg-warning Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Back-merge rather than rebase: main rewrote every template in the Angular control-flow migration, so a rebase conflicted on all five commits with the same edits. One merge resolves it once. The two sides changed these files for orthogonal reasons — main's edits are purely syntactic (block control flow, explicit standalone/changeDetection metadata, unused CommonModule imports dropped), the branch's are the redesign itself. So conflicted templates take the branch's version and were then put back through `ng generate @angular/core:control-flow`, which converted the leftover *ngIf/ngSwitch in apps/details. Conflicted TypeScript takes the union of both import lists plus main's decorator metadata. FilesizePipe stays standalone: SharedModule now lists it under `imports`, and the new installed-details component imports it directly, so main's `standalone: false` would break both. The branch's own spec moved off Jasmine to match the vitest suite — createSpyObj to vi.fn(), toBeTrue/toBeFalse to toBe(true)/toBe(false). Its AppsComponent stub is three methods wide, so it needs an explicit cast now that it is no longer a jasmine.SpyObj. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bni6YzhEiWCD5JUgvwtE1Q
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
1 participant
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.
Main Goal
Slightly adjust UI for installed apps, available apps and apps detail