From b5331eddecbd67a751c046a2602f9d0b1ff36253 Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Thu, 22 May 2025 00:07:34 +0900 Subject: [PATCH 1/9] changes style for installed apps --- src/app/apps/apps.component.html | 15 +--- src/app/apps/apps.component.ts | 55 +------------ .../apps/installed/installed.component.html | 80 +++++++++++-------- src/app/apps/installed/installed.component.ts | 42 ++++------ src/styles/shared.scss | 1 + 5 files changed, 71 insertions(+), 122 deletions(-) diff --git a/src/app/apps/apps.component.html b/src/app/apps/apps.component.html index 50209559..f4a99542 100644 --- a/src/app/apps/apps.component.html +++ b/src/app/apps/apps.component.html @@ -1,23 +1,17 @@
-
-
- -
+
diff --git a/src/app/apps/apps.component.ts b/src/app/apps/apps.component.ts index f5e3d565..6592ce2f 100644 --- a/src/app/apps/apps.component.ts +++ b/src/app/apps/apps.component.ts @@ -1,17 +1,15 @@ -import {Component, Injector, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; -import {noop, Observable, Subscription} from 'rxjs'; -import {Device, PackageInfo, RawPackageInfo} from '../types'; -import {AppManagerService, DeviceManagerService, RepositoryItem} from '../core/services'; +import {noop, Subscription} from 'rxjs'; +import {Device, RawPackageInfo} from '../types'; +import {AppManagerService, RepositoryItem} from '../core/services'; import {MessageDialogComponent} from '../shared/components/message-dialog/message-dialog.component'; import {ProgressDialogComponent} from '../shared/components/progress-dialog/progress-dialog.component'; -import {keyBy} from 'lodash'; import {open as showOpenDialog} from '@tauri-apps/plugin-dialog'; import {basename, downloadDir} from "@tauri-apps/api/path"; import {APP_ID_HBCHANNEL} from "../shared/constants"; import {HbchannelRemoveComponent} from "./hbchannel-remove/hbchannel-remove.component"; import {StatStorageInfoComponent} from "../shared/components/stat-storage-info/stat-storage-info.component"; -import {DetailsComponent} from "./details/details.component"; @Component({ selector: 'app-apps', @@ -20,10 +18,7 @@ import {DetailsComponent} from "./details/details.component"; }) export class AppsComponent implements OnInit, OnDestroy { - packages$?: Observable; - instPackages?: Record; device: Device | null = null; - devices$?: Observable; tabId: string = 'installed'; @ViewChild('storageInfo') storageInfo?: StatStorageInfoComponent; @@ -32,24 +27,12 @@ export class AppsComponent implements OnInit, OnDestroy { private packagesSubscription?: Subscription; constructor( - public deviceManager: DeviceManagerService, private modalService: NgbModal, private appManager: AppManagerService, ) { } ngOnInit(): void { - this.devices$ = this.deviceManager.devices$; - this.deviceSubscription = this.deviceManager.selected$.subscribe((device) => { - this.device = device; - if (device) { - this.loadPackages(); - } else { - this.packages$ = undefined; - this.packagesSubscription?.unsubscribe(); - this.packagesSubscription = undefined; - } - }); } ngOnDestroy(): void { @@ -58,21 +41,6 @@ export class AppsComponent implements OnInit, OnDestroy { this.packagesSubscription = undefined; } - loadPackages(): void { - const device = this.device; - if (!device) return; - this.packagesSubscription?.unsubscribe(); - this.packages$ = this.appManager.packages$(device); - this.packagesSubscription = this.packages$.subscribe({ - next: (pkgs) => { - if (pkgs?.length) { - this.instPackages = keyBy(pkgs, (pkg) => pkg.id); - } - }, error: noop - }); - this.appManager.load(device).catch(noop); - } - async openInstallChooser(): Promise { if (!this.device) return; const path = await showOpenDialog({ @@ -189,21 +157,6 @@ export class AppsComponent implements OnInit, OnDestroy { } } - openDetails(item: RepositoryItem): void { - const modalRef = this.modalService.open(DetailsComponent, { - size: 'lg', - scrollable: true, - injector: Injector.create({ - providers: [ - {provide: RepositoryItem, useValue: item}, - {provide: 'device', useValue: this.device}, - ], - }), - }); - const component = modalRef.componentInstance as DetailsComponent; - component.parent = this; - } - private handleInstallationError(name: string, e: Error) { MessageDialogComponent.open(this.modalService, { title: `Failed to install ${name}`, diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index 62aa3c8e..b7c25df6 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -1,35 +1,49 @@ -@let installed = installed$ | async; -@if (installedError) { - - -} @else if (installed) { -
    - @for (pkg of installed; track pkg.id) { -
  • -
    - - -
    -
    {{ pkg.title }}
    -
    - v{{ pkg.version }} - @let rpkg = repoPackages && repoPackages[pkg.id]; - @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) { -  › v{{ rpkg.manifest?.version }} - } +
    + +
    + +
    +
    +
    + @let installed = installed$ | async; + @if (installedError) { + + + } @else if (installed) { +
      + @for (pkg of installed; track pkg.id) { +
    • +
      + + +
      +
      {{ pkg.title }}
      +
      + v{{ pkg.version }} + @let rpkg = repoPackages && repoPackages[pkg.id]; + @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) { +  › v{{ rpkg.manifest?.version }} + } +
      -
    - @if (repoPackages?.[pkg.id]?.manifest?.hasUpdate(pkg.version)) { - - } -
    • - } -
-} @else { - -} + @if (repoPackages?.[pkg.id]?.manifest?.hasUpdate(pkg.version)) { + + } + + } + + } @else { + + } + diff --git a/src/app/apps/installed/installed.component.ts b/src/app/apps/installed/installed.component.ts index 82463024..01af434a 100644 --- a/src/app/apps/installed/installed.component.ts +++ b/src/app/apps/installed/installed.component.ts @@ -1,49 +1,37 @@ -import {Component, Host, Input, OnDestroy} from '@angular/core'; +import {Component, Host, OnDestroy, OnInit} from '@angular/core'; import {AppsComponent} from '../apps.component'; import {Device, PackageInfo} from "../../types"; import {Observable, Subscription} from "rxjs"; -import {AppsRepoService, RepositoryItem} from "../../core/services"; +import {AppManagerService, DeviceManagerService, RepositoryItem} from "../../core/services"; +import {fromPromise} from "rxjs/internal/observable/innerFrom"; @Component({ selector: 'app-installed', templateUrl: './installed.component.html', styleUrls: ['./installed.component.scss'] }) -export class InstalledComponent implements OnDestroy { +export class InstalledComponent implements OnInit, OnDestroy { - @Input() device: Device | null = null; + devices$?: Observable; + installed$: Observable | undefined; installedError?: Error; repoPackages?: Record; private subscription?: Subscription; - private installedField?: Observable; - constructor(@Host() public parent: AppsComponent, private appsRepo: AppsRepoService) { + constructor(@Host() public parent: AppsComponent, public deviceManager: DeviceManagerService, + private appManager: AppManagerService) { } - @Input() - set installed$(value: Observable | undefined) { - this.subscription?.unsubscribe(); - this.subscription = value?.subscribe({ - next: (pkgs) => { - this.installedError = undefined; - - const strings: string[] = pkgs?.map((pkg) => pkg.id) ?? []; - this.appsRepo.showApps(...strings).then(apps => this.repoPackages = apps); - }, - error: (error) => { - console.log('installed apps', error); - return this.installedError = error; - } + ngOnInit(): void { + this.devices$ = this.deviceManager.devices$; + this.subscription = this.devices$.subscribe(devices => { + this.device = devices?.find(d => d.default) ?? null; + this.loadPackages(); }); - this.installedField = value; - } - - get installed$(): Observable | undefined { - return this.installedField; } ngOnDestroy(): void { @@ -51,7 +39,9 @@ export class InstalledComponent implements OnDestroy { } loadPackages(): void { + const device = this.device; + if (!device) return; this.installedError = undefined; - this.parent.loadPackages(); + this.installed$ = fromPromise(this.appManager.load(device)); } } diff --git a/src/styles/shared.scss b/src/styles/shared.scss index ac8bad63..b67c3281 100644 --- a/src/styles/shared.scss +++ b/src/styles/shared.scss @@ -14,6 +14,7 @@ .storage-info-bar { width: 25%; + height: 15px; max-width: 110px; } From 941b305d893452a263b87ce38dab6160893ddcea Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 23 May 2025 01:01:15 +0900 Subject: [PATCH 2/9] installed app details wip --- src/app/apps/channel/channel.component.html | 52 ++++++++++--------- .../installed/details/details.component.html | 29 +++++++++++ .../installed/details/details.component.scss | 8 +++ .../details/details.component.spec.ts | 23 ++++++++ .../installed/details/details.component.ts | 35 +++++++++++++ .../apps/installed/installed.component.html | 2 +- src/app/apps/installed/installed.component.ts | 19 ++++++- src/app/core/services/app-manager.service.ts | 44 +++++++++++++++- src/app/files/files.module.ts | 24 +++++---- src/app/shared/pipes/filesize.pipe.ts | 7 +-- src/app/shared/shared.module.ts | 4 +- src/app/types/index.ts | 5 ++ 12 files changed, 206 insertions(+), 46 deletions(-) create mode 100644 src/app/apps/installed/details/details.component.html create mode 100644 src/app/apps/installed/details/details.component.scss create mode 100644 src/app/apps/installed/details/details.component.spec.ts create mode 100644 src/app/apps/installed/details/details.component.ts diff --git a/src/app/apps/channel/channel.component.html b/src/app/apps/channel/channel.component.html index 9e6fd842..358680b2 100644 --- a/src/app/apps/channel/channel.component.html +++ b/src/app/apps/channel/channel.component.html @@ -1,26 +1,28 @@ -@let repoPage = repoPage$ | async; -@if (repoPage) { -
    -
  • - @let manifest = item.manifest; - @if (manifest) { -
    - -
    -
    {{ item.title }}
    -
    {{ manifest.appDescription }}
    +
    + @let repoPage = repoPage$ | async; + @if (repoPage) { +
      +
    • + @let manifest = item.manifest; + @if (manifest) { +
      + +
      +
      {{ item.title }}
      +
      {{ manifest.appDescription }}
      +
      -
    - - } -
    • -
-
- - -
-} @else { - -} + + } + + +
+ + +
+ } @else { + + } + diff --git a/src/app/apps/installed/details/details.component.html b/src/app/apps/installed/details/details.component.html new file mode 100644 index 00000000..3bc8cae9 --- /dev/null +++ b/src/app/apps/installed/details/details.component.html @@ -0,0 +1,29 @@ +
+
+ +

{{ pkg.title }}

+
v{{ pkg.version }}
+
+

{{ pkg.appDescription }}

+
    +
  • + Launch +
    • +
  • + Uninstall +
    • +
  • +
    Space used
    +
    + @let du = diskUsage$ | async; + @if (!du) { + Calculating... + } @else if (du.error) { + Failed to calculate + } @else if (du.result) { + {{ du.result.total * 1024 | filesize:sizeOptions }} + } +
    +
    • +
+
diff --git a/src/app/apps/installed/details/details.component.scss b/src/app/apps/installed/details/details.component.scss new file mode 100644 index 00000000..d20d912e --- /dev/null +++ b/src/app/apps/installed/details/details.component.scss @@ -0,0 +1,8 @@ +.app-header { + min-height: 64px; +} + +.app-icon { + width: 64px; + height: 64px; +} diff --git a/src/app/apps/installed/details/details.component.spec.ts b/src/app/apps/installed/details/details.component.spec.ts new file mode 100644 index 00000000..82e1a058 --- /dev/null +++ b/src/app/apps/installed/details/details.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DetailsComponent } from './details.component'; + +describe('DetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DetailsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/apps/installed/details/details.component.ts b/src/app/apps/installed/details/details.component.ts new file mode 100644 index 00000000..35694908 --- /dev/null +++ b/src/app/apps/installed/details/details.component.ts @@ -0,0 +1,35 @@ +import {Component, Inject} from '@angular/core'; +import {AsyncResult, Device, PackageInfo} from "../../../types"; +import {AppManagerService, PackageDiskUsage} from "../../../core/services"; +import {fromPromise} from "rxjs/internal/observable/innerFrom"; +import {Observable} from "rxjs"; +import {AsyncPipe} from "@angular/common"; +import {SharedModule} from "../../../shared/shared.module"; +import {FilesizePipe} from "../../../shared/pipes/filesize.pipe"; +import {FileSizeOptions} from "filesize"; + +@Component({ + selector: 'app-details', + standalone: true, + imports: [ + AsyncPipe, + SharedModule, + FilesizePipe + ], + templateUrl: './details.component.html', + styleUrl: './details.component.scss' +}) +export class DetailsComponent { + + diskUsage$: Observable>; + sizeOptions: FileSizeOptions = {base: 2, standard: 'jedec'}; + + constructor( + @Inject('device') public device: Device, + @Inject('package') public pkg: PackageInfo, + appManager: AppManagerService + ) { + this.diskUsage$ = fromPromise(appManager.appDiskUsage(device, pkg.folderPath) + .then((result) => ({result})).catch((error) => ({error}))); + } +} diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index b7c25df6..923a476c 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -19,7 +19,7 @@ } @else if (installed) {
    @for (pkg of installed; track pkg.id) { -
  • +
  • diff --git a/src/app/apps/installed/installed.component.ts b/src/app/apps/installed/installed.component.ts index 01af434a..531a7167 100644 --- a/src/app/apps/installed/installed.component.ts +++ b/src/app/apps/installed/installed.component.ts @@ -1,9 +1,11 @@ -import {Component, Host, OnDestroy, OnInit} from '@angular/core'; +import {Component, Host, Injector, OnDestroy, OnInit} from '@angular/core'; import {AppsComponent} from '../apps.component'; import {Device, PackageInfo} from "../../types"; import {Observable, Subscription} from "rxjs"; import {AppManagerService, DeviceManagerService, RepositoryItem} from "../../core/services"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; +import {DetailsComponent as InstalledDetailsComponent} from "./details/details.component"; +import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; @Component({ selector: 'app-installed', @@ -23,7 +25,7 @@ export class InstalledComponent implements OnInit, OnDestroy { private subscription?: Subscription; constructor(@Host() public parent: AppsComponent, public deviceManager: DeviceManagerService, - private appManager: AppManagerService) { + private appManager: AppManagerService, private modals: NgbModal) { } ngOnInit(): void { @@ -44,4 +46,17 @@ export class InstalledComponent implements OnInit, OnDestroy { this.installedError = undefined; this.installed$ = fromPromise(this.appManager.load(device)); } + + openDetails(pkg: PackageInfo) { + this.modals.open(InstalledDetailsComponent, { + size: 'lg', + scrollable: true, + injector: Injector.create({ + providers: [ + {provide: 'package', useValue: pkg}, + {provide: 'device', useValue: this.device}, + ] + }) + }); + } } diff --git a/src/app/core/services/app-manager.service.ts b/src/app/core/services/app-manager.service.ts index 4148307f..9084abc7 100644 --- a/src/app/core/services/app-manager.service.ts +++ b/src/app/core/services/app-manager.service.ts @@ -1,6 +1,6 @@ import {Injectable} from '@angular/core'; import {BehaviorSubject, catchError, firstValueFrom, lastValueFrom, mergeMap, noop, Observable, Subject} from 'rxjs'; -import {Device, PackageInfo, RawPackageInfo} from '../../types'; +import {Device, DeviceLike, PackageInfo, RawPackageInfo} from '../../types'; import { LunaResponse, LunaResponseError, @@ -279,6 +279,37 @@ export class AppManagerService { ); } + async appDiskUsage(device: DeviceLike, appDir: string): Promise { + const appIndex = appDir.indexOf('/usr/palm/applications/'); + if (appIndex < 0) { + throw new Error('Not accepted appDir format: ' + appDir); + } + const installBase = appDir.substring(0, appIndex); + const appId = appDir.substring(appIndex + 23); + const pkgInfo = JSON.parse(await this.file.read(device, `${installBase}/usr/palm/packages/${appId}/packageinfo.json`, undefined, 'utf-8')) as PkgInfo; + const dirs = [appDir]; + pkgInfo.services?.forEach(service => { + const serviceDir = `${installBase}/usr/palm/services/${service}`; + dirs.push(serviceDir); + }); + return await this.cmd.exec(device, `xargs du -d 0 -c`, 'utf-8', dirs.join('\n')) + .then(stdout => (Object.fromEntries(stdout.split('\n').map(line => line.match(/(\d+)\t(.+)/)) + .map((match): [keyof PackageDiskUsage, number] | null => { + if (!match) { + return null; + } + const size = parseInt(match[1] ?? '0'); + const path = match[2] ?? ''; + if (path === 'total') { + return ['total', size]; + } else if (path.includes('/usr/palm/applications')) { + return ['application', size]; + } else if (path.includes('/usr/palm/services')) { + return [path.substring(path.lastIndexOf('/')), size]; + } + return null; + }).filter(v => v) as Iterable<[keyof PackageDiskUsage, number]>) as unknown as PackageDiskUsage)); + } } function mapAppinstalldResponse(v: LunaResponse, expectResult: string | RegExp): boolean { @@ -301,6 +332,10 @@ function mapAppinstalldResponse(v: LunaResponse, expectResult: string | RegExp): return false; } +interface PkgInfo { + services?: string[]; +} + export interface InstallProgressHandler { (progress?: number, statusText?: string): void; } @@ -314,3 +349,10 @@ export class InstallError extends Error { return new InstallError('Can\'t install because of insufficient space', details); } } + +export interface PackageDiskUsage { + application: number; + total: number; + + [service: string]: number; +} diff --git a/src/app/files/files.module.ts b/src/app/files/files.module.ts index 53296b53..9813047f 100644 --- a/src/app/files/files.module.ts +++ b/src/app/files/files.module.ts @@ -15,6 +15,7 @@ import {FilesTableComponent} from './files-table/files-table.component'; import {SharedModule} from "../shared/shared.module"; import {CreateDirectoryMessageComponent} from './create-directory-message/create-directory-message.component'; import {ReactiveFormsModule} from "@angular/forms"; +import {FilesizePipe} from "../shared/pipes/filesize.pipe"; @NgModule({ @@ -24,17 +25,18 @@ import {ReactiveFormsModule} from "@angular/forms"; FilesTableComponent, CreateDirectoryMessageComponent, ], - imports: [ - CommonModule, - FilesRoutingModule, - NgbTooltipModule, - SharedModule, - NgbDropdown, - NgbDropdownItem, - NgbDropdownMenu, - NgbDropdownToggle, - ReactiveFormsModule, - ] + imports: [ + CommonModule, + FilesRoutingModule, + NgbTooltipModule, + SharedModule, + NgbDropdown, + NgbDropdownItem, + NgbDropdownMenu, + NgbDropdownToggle, + ReactiveFormsModule, + FilesizePipe, + ] }) export class FilesModule { } diff --git a/src/app/shared/pipes/filesize.pipe.ts b/src/app/shared/pipes/filesize.pipe.ts index dd4e7b05..34bc576b 100644 --- a/src/app/shared/pipes/filesize.pipe.ts +++ b/src/app/shared/pipes/filesize.pipe.ts @@ -1,12 +1,13 @@ import {Pipe, PipeTransform} from "@angular/core"; -import {filesize, FileSizeOptionsBase} from 'filesize'; +import {filesize, FileSizeOptions} from 'filesize'; @Pipe({ - name: 'filesize' + name: 'filesize', + standalone: true }) export class FilesizePipe implements PipeTransform { - transform(bytes: number, options: Partial): string { + transform(bytes: number, options: Partial): string { return filesize(bytes, {output: "string", ...options}); } diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index a95a83d4..45be2a06 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -17,7 +17,6 @@ import {FilesizePipe} from "./pipes/filesize.pipe"; declarations: [ PageNotFoundComponent, TrustUriPipe, - FilesizePipe, MessageDialogComponent, ProgressDialogComponent, MessageTraceComponent, @@ -26,11 +25,10 @@ import {FilesizePipe} from "./pipes/filesize.pipe"; StatStorageInfoComponent, ], imports: [CommonModule, FormsModule, NgbModule, - ExternalLinkDirective], + ExternalLinkDirective, FilesizePipe], exports: [ PageNotFoundComponent, TrustUriPipe, - FilesizePipe, MessageDialogComponent, ProgressDialogComponent, MessageTraceComponent, diff --git a/src/app/types/index.ts b/src/app/types/index.ts index 76b77faf..c908fe04 100644 --- a/src/app/types/index.ts +++ b/src/app/types/index.ts @@ -1,3 +1,8 @@ export * from './device-manager'; export * from './file-session'; export * from './device'; + +export interface AsyncResult { + result?: T; + error?: E; +} From e4d3750a9893eb145a4267131571237549d18279 Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Wed, 2 Jul 2025 22:31:30 +0900 Subject: [PATCH 3/9] channel app details wip --- src/app/apps/channel/channel.component.html | 4 +- src/app/apps/channel/channel.component.ts | 51 +++++++++++++-------- src/app/apps/details/details.component.ts | 17 +++---- 3 files changed, 42 insertions(+), 30 deletions(-) diff --git a/src/app/apps/channel/channel.component.html b/src/app/apps/channel/channel.component.html index 358680b2..e033e8ac 100644 --- a/src/app/apps/channel/channel.component.html +++ b/src/app/apps/channel/channel.component.html @@ -13,7 +13,9 @@
    {{ manifest.appDescription }}
    - + }
diff --git a/src/app/apps/channel/channel.component.ts b/src/app/apps/channel/channel.component.ts index 41e9dcf0..a979d5c4 100644 --- a/src/app/apps/channel/channel.component.ts +++ b/src/app/apps/channel/channel.component.ts @@ -1,32 +1,45 @@ -import {Component, Host, Input, OnInit} from '@angular/core'; +import {Component, Host, Injector, Input, OnInit} from '@angular/core'; import {Observable} from 'rxjs'; -import {AppsRepoService, RepositoryPage} from '../../core/services'; +import {AppsRepoService, RepositoryItem, RepositoryPage} from '../../core/services'; import {AppsComponent} from '../apps.component'; import {RawPackageInfo} from "../../types"; +import {DetailsComponent} from "../details/details.component"; +import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; @Component({ - selector: 'app-channel', - templateUrl: './channel.component.html', - styleUrls: ['./channel.component.scss'] + selector: 'app-channel', + templateUrl: './channel.component.html', + styleUrls: ['./channel.component.scss'] }) export class ChannelComponent implements OnInit { - page = 1; - repoPage$?: Observable; + page = 1; + repoPage$?: Observable; - @Input() - installed?: Record; + @Input() + installed?: Record; - constructor( - @Host() public parent: AppsComponent, - private appsRepo: AppsRepoService) { - } + constructor( + @Host() public parent: AppsComponent, + private appsRepo: AppsRepoService, + private modals: NgbModal) { + } - ngOnInit(): void { - this.loadPage(1); - } + ngOnInit(): void { + this.loadPage(1); + } - loadPage(page: number): void { - this.repoPage$ = this.appsRepo.allApps$(page); - } + loadPage(page: number): void { + this.repoPage$ = this.appsRepo.allApps$(page); + } + + openDetails(item: RepositoryItem) { + this.modals.open(DetailsComponent, { + injector: Injector.create({ + providers: [ + {provide: RepositoryItem, useValue: item}, + ] + }) + }); + } } diff --git a/src/app/apps/details/details.component.ts b/src/app/apps/details/details.component.ts index cca8aae3..381ad79f 100644 --- a/src/app/apps/details/details.component.ts +++ b/src/app/apps/details/details.component.ts @@ -1,7 +1,7 @@ -import {Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core'; +import {Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core'; import {AppManagerService, IncompatibleReason, PackageManifest, RepositoryItem} from "../../core/services"; import {noop, Observable, of} from "rxjs"; -import {AsyncPipe, NgForOf, NgIf, NgOptimizedImage, NgSwitch, NgSwitchCase, NgSwitchDefault} from "@angular/common"; +import {AsyncPipe, NgForOf, NgIf, NgOptimizedImage, NgSwitch, NgSwitchCase} from "@angular/common"; import {open as openPath} from "@tauri-apps/plugin-shell"; import { NgbActiveModal, @@ -11,7 +11,7 @@ import { NgbDropdownToggle } from "@ng-bootstrap/ng-bootstrap"; import {SharedModule} from "../../shared/shared.module"; -import {Device, PackageInfo} from "../../types"; +import {PackageInfo} from "../../types"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; import {AppsComponent} from "../apps.component"; import {ExternalLinkDirective} from "../../shared/directives"; @@ -29,9 +29,7 @@ import {ExternalLinkDirective} from "../../shared/directives"; NgbDropdownMenu, NgbDropdownToggle, SharedModule, - NgSwitch, - NgSwitchDefault, - NgForOf, + NgSwitch,NgForOf, ExternalLinkDirective ], templateUrl: './details.component.html', @@ -43,7 +41,7 @@ export class DetailsComponent implements OnInit, OnDestroy { fullDescriptionHtml$: Observable; installedInfo$?: Observable; - incompatible$: Observable; + incompatible$!: Observable; @ViewChild('fullDescription', {static: true}) fullDescription!: ElementRef; @@ -56,12 +54,11 @@ export class DetailsComponent implements OnInit, OnDestroy { constructor( public modal: NgbActiveModal, public item: RepositoryItem, - @Inject('device') public device: Device, private appManager: AppManagerService, private renderer2: Renderer2 ) { this.manifest = item.manifest!; - this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(device, item)); + // this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(device, item)); this.fullDescriptionHtml$ = item.fullDescriptionUrl ? fromPromise(fetch(item.fullDescriptionUrl) .then(resp => resp.text())) : of(''); this.reloadInstalledInfo(); @@ -89,6 +86,6 @@ export class DetailsComponent implements OnInit, OnDestroy { } private reloadInstalledInfo(): void { - this.installedInfo$ = fromPromise(this.appManager.info(this.device, this.item.id)); + // this.installedInfo$ = fromPromise(this.appManager.info(this.device, this.item.id)); } } From cab5c7b5978584bd338fccedb14938c8ec39c4aa Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 22 May 2026 21:42:04 +0900 Subject: [PATCH 4/9] finish apps section redesign - 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) --- src/app/apps/apps.component.html | 26 ++++- src/app/apps/apps.component.scss | 19 ++++ src/app/apps/apps.component.ts | 59 +++++++++-- src/app/apps/channel/channel.component.ts | 3 + src/app/apps/details/details.component.html | 14 ++- src/app/apps/details/details.component.ts | 41 ++++++-- .../installed/details/details.component.html | 18 +++- .../details/details.component.spec.ts | 99 +++++++++++++++---- .../installed/details/details.component.ts | 31 +++++- .../apps/installed/installed.component.html | 13 --- src/app/apps/installed/installed.component.ts | 46 +++++---- 11 files changed, 289 insertions(+), 80 deletions(-) diff --git a/src/app/apps/apps.component.html b/src/app/apps/apps.component.html index f4a99542..41994352 100644 --- a/src/app/apps/apps.component.html +++ b/src/app/apps/apps.component.html @@ -1,11 +1,12 @@ -
+
+ @if (dragOver) { +
+
+ Drop .ipk to install +
+
+ }
diff --git a/src/app/apps/apps.component.scss b/src/app/apps/apps.component.scss index e69de29b..738ac7dc 100644 --- a/src/app/apps/apps.component.scss +++ b/src/app/apps/apps.component.scss @@ -0,0 +1,19 @@ +.drop-overlay { + position: absolute; + inset: 0; + background: rgba(13, 110, 253, 0.15); + border: 3px dashed rgba(13, 110, 253, 0.75); + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + z-index: 1050; +} + +.drop-overlay-inner { + padding: 1rem 1.5rem; + background: var(--bs-body-bg); + border-radius: 0.5rem; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); + font-size: 1.25rem; +} diff --git a/src/app/apps/apps.component.ts b/src/app/apps/apps.component.ts index 6592ce2f..554db1e2 100644 --- a/src/app/apps/apps.component.ts +++ b/src/app/apps/apps.component.ts @@ -1,16 +1,20 @@ -import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; -import {noop, Subscription} from 'rxjs'; +import {noop, Observable, Subscription} from 'rxjs'; import {Device, RawPackageInfo} from '../types'; -import {AppManagerService, RepositoryItem} from '../core/services'; +import {AppManagerService, DeviceManagerService, RepositoryItem} from '../core/services'; import {MessageDialogComponent} from '../shared/components/message-dialog/message-dialog.component'; import {ProgressDialogComponent} from '../shared/components/progress-dialog/progress-dialog.component'; import {open as showOpenDialog} from '@tauri-apps/plugin-dialog'; import {basename, downloadDir} from "@tauri-apps/api/path"; +import * as os from "@tauri-apps/plugin-os"; +import {getCurrentWebview} from "@tauri-apps/api/webview"; import {APP_ID_HBCHANNEL} from "../shared/constants"; import {HbchannelRemoveComponent} from "./hbchannel-remove/hbchannel-remove.component"; import {StatStorageInfoComponent} from "../shared/components/stat-storage-info/stat-storage-info.component"; +type UnlistenFn = () => void; + @Component({ selector: 'app-apps', templateUrl: './apps.component.html', @@ -19,26 +23,59 @@ import {StatStorageInfoComponent} from "../shared/components/stat-storage-info/s export class AppsComponent implements OnInit, OnDestroy { device: Device | null = null; + devices$?: Observable; tabId: string = 'installed'; + dragOver = false; @ViewChild('storageInfo') storageInfo?: StatStorageInfoComponent; private deviceSubscription?: Subscription; - private packagesSubscription?: Subscription; + private unlistenDragDrop?: UnlistenFn; constructor( private modalService: NgbModal, private appManager: AppManagerService, + public deviceManager: DeviceManagerService, + private zone: NgZone, ) { } ngOnInit(): void { + this.devices$ = this.deviceManager.devices$; + this.deviceSubscription = this.devices$.subscribe(devices => { + this.device = devices?.find(d => d.default) ?? null; + }); + this.setupDragDrop().catch(e => console.warn('Drag-drop listener failed:', e)); } ngOnDestroy(): void { this.deviceSubscription?.unsubscribe(); - this.packagesSubscription?.unsubscribe(); - this.packagesSubscription = undefined; + this.unlistenDragDrop?.(); + } + + private async setupDragDrop(): Promise { + if (os.type() === 'android' || os.type() === 'ios') return; + const webview = getCurrentWebview(); + this.unlistenDragDrop = await webview.onDragDropEvent(event => { + this.zone.run(() => { + switch (event.payload.type) { + case 'over': + case 'enter': + this.dragOver = true; + break; + case 'leave': + this.dragOver = false; + break; + case 'drop': + this.dragOver = false; + const ipks = event.payload.paths.filter(p => p.toLowerCase().endsWith('.ipk')); + for (const path of ipks) { + this.installFromPath(path).catch(noop); + } + break; + } + }); + }); } async openInstallChooser(): Promise { @@ -51,11 +88,17 @@ export class AppsComponent implements OnInit, OnDestroy { if (!path) { return; } + await this.installFromPath(path); + } + + private async installFromPath(path: string): Promise { + if (!this.device) return; const progress = ProgressDialogComponent.open(this.modalService); const component = progress.componentInstance as ProgressDialogComponent; try { await this.appManager.installByPath(this.device, path, (progress, statusText) => component.update(statusText, progress)); + this.storageInfo?.refresh(); } catch (e) { console.warn(e); this.handleInstallationError(await basename(path), e as Error); @@ -107,8 +150,8 @@ export class AppsComponent implements OnInit, OnDestroy { } } - async installPackage(item: RepositoryItem, channel: 'stable' | 'beta' = 'stable'): Promise { - const device = this.device; + async installPackage(item: RepositoryItem, channel: 'stable' | 'beta' = 'stable', deviceOverride?: Device): Promise { + const device = deviceOverride ?? this.device; if (!device) return false; const progress = ProgressDialogComponent.open(this.modalService); try { diff --git a/src/app/apps/channel/channel.component.ts b/src/app/apps/channel/channel.component.ts index a979d5c4..a61162fb 100644 --- a/src/app/apps/channel/channel.component.ts +++ b/src/app/apps/channel/channel.component.ts @@ -34,10 +34,13 @@ export class ChannelComponent implements OnInit { } openDetails(item: RepositoryItem) { + if (!this.parent.device) return; this.modals.open(DetailsComponent, { injector: Injector.create({ providers: [ {provide: RepositoryItem, useValue: item}, + {provide: 'device', useValue: this.parent.device}, + {provide: 'parent', useValue: this.parent}, ] }) }); diff --git a/src/app/apps/details/details.component.html b/src/app/apps/details/details.component.html index eb3fa1e7..2e52663e 100644 --- a/src/app/apps/details/details.component.html +++ b/src/app/apps/details/details.component.html @@ -19,11 +19,23 @@

{{ item.title }}

+ @let allDevices = devices$ | async; + @if (allDevices && allDevices.length > 1) { + + }
@switch (installed && manifest.hasUpdate(installed.version)) { @case (false) { - } diff --git a/src/app/apps/details/details.component.ts b/src/app/apps/details/details.component.ts index 381ad79f..8b0bc2e1 100644 --- a/src/app/apps/details/details.component.ts +++ b/src/app/apps/details/details.component.ts @@ -1,5 +1,5 @@ -import {Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core'; -import {AppManagerService, IncompatibleReason, PackageManifest, RepositoryItem} from "../../core/services"; +import {Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core'; +import {AppManagerService, DeviceManagerService, IncompatibleReason, PackageManifest, RepositoryItem} from "../../core/services"; import {noop, Observable, of} from "rxjs"; import {AsyncPipe, NgForOf, NgIf, NgOptimizedImage, NgSwitch, NgSwitchCase} from "@angular/common"; import {open as openPath} from "@tauri-apps/plugin-shell"; @@ -11,7 +11,7 @@ import { NgbDropdownToggle } from "@ng-bootstrap/ng-bootstrap"; import {SharedModule} from "../../shared/shared.module"; -import {PackageInfo} from "../../types"; +import {Device, PackageInfo} from "../../types"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; import {AppsComponent} from "../apps.component"; import {ExternalLinkDirective} from "../../shared/directives"; @@ -42,25 +42,41 @@ export class DetailsComponent implements OnInit, OnDestroy { fullDescriptionHtml$: Observable; installedInfo$?: Observable; incompatible$!: Observable; + devices$: Observable; + selectedDevice: Device; @ViewChild('fullDescription', {static: true}) fullDescription!: ElementRef; - parent?: AppsComponent; - - private unsubscribeClickListener!: () => void; constructor( public modal: NgbActiveModal, public item: RepositoryItem, + @Inject('device') public device: Device, + @Inject('parent') private parent: AppsComponent, private appManager: AppManagerService, + private deviceManager: DeviceManagerService, private renderer2: Renderer2 ) { this.manifest = item.manifest!; - // this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(device, item)); + this.selectedDevice = device; + this.devices$ = this.deviceManager.devices$; this.fullDescriptionHtml$ = item.fullDescriptionUrl ? fromPromise(fetch(item.fullDescriptionUrl) .then(resp => resp.text())) : of(''); + this.refreshForDevice(); + } + + onDeviceChange(name: string): void { + let next: Device | undefined; + this.devices$.subscribe(devices => next = devices?.find(d => d.name === name)).unsubscribe(); + if (!next) return; + this.selectedDevice = next; + this.refreshForDevice(); + } + + private refreshForDevice(): void { + this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(this.selectedDevice, this.item)); this.reloadInstalledInfo(); } @@ -77,15 +93,20 @@ export class DetailsComponent implements OnInit, OnDestroy { this.unsubscribeClickListener(); } + launchApp(id: string) { + this.parent.launchApp(id); + } + installPackage(item: RepositoryItem, channel: 'stable' | 'beta' = 'stable') { - this.parent?.installPackage(item, channel).then((installed) => installed && this.reloadInstalledInfo()); + this.parent.installPackage(item, channel, this.selectedDevice) + .then((installed) => installed && this.reloadInstalledInfo()); } removePackage(item: PackageInfo) { - this.parent?.removePackage(item).then((removed) => removed && this.reloadInstalledInfo()); + this.parent.removePackage(item).then((removed) => removed && this.reloadInstalledInfo()); } private reloadInstalledInfo(): void { - // this.installedInfo$ = fromPromise(this.appManager.info(this.device, this.item.id)); + this.installedInfo$ = fromPromise(this.appManager.info(this.selectedDevice, this.item.id)); } } diff --git a/src/app/apps/installed/details/details.component.html b/src/app/apps/installed/details/details.component.html index 3bc8cae9..63c28380 100644 --- a/src/app/apps/installed/details/details.component.html +++ b/src/app/apps/installed/details/details.component.html @@ -1,4 +1,7 @@ -
+
+ +
+

{{ pkg.title }}

@@ -6,12 +9,17 @@

{{ pkg.title }}

{{ pkg.appDescription }}

    -
  • +
    • -
  • + + @if (hasUpdate) { + + } +
    • +
  • Space used
    diff --git a/src/app/apps/installed/details/details.component.spec.ts b/src/app/apps/installed/details/details.component.spec.ts index 82e1a058..b85bfc67 100644 --- a/src/app/apps/installed/details/details.component.spec.ts +++ b/src/app/apps/installed/details/details.component.spec.ts @@ -1,23 +1,88 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; +import {EMPTY, of} from 'rxjs'; -import { DetailsComponent } from './details.component'; +import {DetailsComponent} from './details.component'; +import {AppManagerService, PackageManifest, RepositoryItem} from '../../../core/services'; +import {Device, PackageInfo} from '../../../types'; +import {AppsComponent} from '../../apps.component'; -describe('DetailsComponent', () => { - let component: DetailsComponent; - let fixture: ComponentFixture; +describe('InstalledDetailsComponent', () => { + let component: DetailsComponent; + let fixture: ComponentFixture; + let parentSpy: jasmine.SpyObj; + let modalSpy: jasmine.SpyObj; - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [DetailsComponent] - }) - .compileComponents(); + const device: Device = { + name: 'test', host: '192.168.1.1', port: 22, username: 'prisoner', + profile: 'ose', privateKey: {openSsh: 'test'}, + }; + const pkg: PackageInfo = { + id: 'com.example.app', title: 'Example', version: '1.0.0', + folderPath: '/media/developer/apps/usr/palm/applications/com.example.app', + iconUri: '', appDescription: '', + }; - fixture = TestBed.createComponent(DetailsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + function setup(repoPackage: RepositoryItem | null = null) { + parentSpy = jasmine.createSpyObj('AppsComponent', ['launchApp', 'removePackage', 'installPackage']); + parentSpy.removePackage.and.resolveTo(true); + parentSpy.installPackage.and.resolveTo(true); + modalSpy = jasmine.createSpyObj('NgbActiveModal', ['close', 'dismiss']); + const appManagerStub = { + appDiskUsage: () => Promise.reject(new Error('not under test')), + } as Partial; - it('should create', () => { - expect(component).toBeTruthy(); - }); + TestBed.configureTestingModule({ + imports: [DetailsComponent], + providers: [ + {provide: 'device', useValue: device}, + {provide: 'package', useValue: pkg}, + {provide: 'parent', useValue: parentSpy}, + {provide: 'repoPackage', useValue: repoPackage}, + {provide: NgbActiveModal, useValue: modalSpy}, + {provide: AppManagerService, useValue: appManagerStub}, + ], + }); + + fixture = TestBed.createComponent(DetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + } + + it('should create', () => { + setup(); + expect(component).toBeTruthy(); + }); + + it('Launch calls parent.launchApp and closes the modal', () => { + setup(); + component.launch(); + expect(parentSpy.launchApp).toHaveBeenCalledWith(pkg.id); + expect(modalSpy.close).toHaveBeenCalled(); + }); + + it('Uninstall calls parent.removePackage and closes the modal on success', async () => { + setup(); + await component.uninstall(); + expect(parentSpy.removePackage).toHaveBeenCalledWith(pkg); + expect(modalSpy.close).toHaveBeenCalled(); + }); + + it('Uninstall keeps the modal open when removePackage returns false', async () => { + setup(); + parentSpy.removePackage.and.resolveTo(false); + await component.uninstall(); + expect(modalSpy.close).not.toHaveBeenCalled(); + }); + + it('hasUpdate is false when no repo package is provided', () => { + setup(null); + expect(component.hasUpdate).toBeFalse(); + }); + + it('hasUpdate reflects the repo manifest comparison', () => { + const newer = new RepositoryItem({manifest: new PackageManifest({version: '2.0.0'})}, ''); + setup(newer); + expect(component.hasUpdate).toBeTrue(); + }); }); diff --git a/src/app/apps/installed/details/details.component.ts b/src/app/apps/installed/details/details.component.ts index 35694908..3319f721 100644 --- a/src/app/apps/installed/details/details.component.ts +++ b/src/app/apps/installed/details/details.component.ts @@ -1,12 +1,14 @@ import {Component, Inject} from '@angular/core'; import {AsyncResult, Device, PackageInfo} from "../../../types"; -import {AppManagerService, PackageDiskUsage} from "../../../core/services"; +import {AppManagerService, PackageDiskUsage, RepositoryItem} from "../../../core/services"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; import {Observable} from "rxjs"; import {AsyncPipe} from "@angular/common"; +import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {SharedModule} from "../../../shared/shared.module"; import {FilesizePipe} from "../../../shared/pipes/filesize.pipe"; import {FileSizeOptions} from "filesize"; +import {AppsComponent} from "../../apps.component"; @Component({ selector: 'app-details', @@ -27,9 +29,36 @@ export class DetailsComponent { constructor( @Inject('device') public device: Device, @Inject('package') public pkg: PackageInfo, + @Inject('parent') private parent: AppsComponent, + @Inject('repoPackage') public repoPackage: RepositoryItem | null, + public modal: NgbActiveModal, appManager: AppManagerService ) { this.diskUsage$ = fromPromise(appManager.appDiskUsage(device, pkg.folderPath) .then((result) => ({result})).catch((error) => ({error}))); } + + get hasUpdate(): boolean { + return this.repoPackage?.manifest?.hasUpdate(this.pkg.version) === true; + } + + launch(): void { + this.parent.launchApp(this.pkg.id); + this.modal.close(); + } + + async uninstall(): Promise { + const removed = await this.parent.removePackage(this.pkg); + if (removed) { + this.modal.close(); + } + } + + async update(): Promise { + if (!this.repoPackage) return; + const installed = await this.parent.installPackage(this.repoPackage); + if (installed) { + this.modal.close(); + } + } } diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index 923a476c..fd9d19c5 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -1,16 +1,3 @@ -
    - -
    - -
    -
    @let installed = installed$ | async; @if (installedError) { diff --git a/src/app/apps/installed/installed.component.ts b/src/app/apps/installed/installed.component.ts index 531a7167..22740760 100644 --- a/src/app/apps/installed/installed.component.ts +++ b/src/app/apps/installed/installed.component.ts @@ -1,8 +1,8 @@ -import {Component, Host, Injector, OnDestroy, OnInit} from '@angular/core'; +import {Component, Host, Injector, Input, OnChanges, SimpleChanges} from '@angular/core'; import {AppsComponent} from '../apps.component'; import {Device, PackageInfo} from "../../types"; -import {Observable, Subscription} from "rxjs"; -import {AppManagerService, DeviceManagerService, RepositoryItem} from "../../core/services"; +import {Observable} from "rxjs"; +import {AppManagerService, AppsRepoService, RepositoryItem} from "../../core/services"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; import {DetailsComponent as InstalledDetailsComponent} from "./details/details.component"; import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; @@ -12,39 +12,41 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; templateUrl: './installed.component.html', styleUrls: ['./installed.component.scss'] }) -export class InstalledComponent implements OnInit, OnDestroy { +export class InstalledComponent implements OnChanges { + + @Input() device: Device | null = null; - device: Device | null = null; - devices$?: Observable; installed$: Observable | undefined; installedError?: Error; repoPackages?: Record; - private subscription?: Subscription; - - constructor(@Host() public parent: AppsComponent, public deviceManager: DeviceManagerService, - private appManager: AppManagerService, private modals: NgbModal) { + constructor(@Host() public parent: AppsComponent, + private appManager: AppManagerService, private appsRepo: AppsRepoService, + private modals: NgbModal) { } - ngOnInit(): void { - this.devices$ = this.deviceManager.devices$; - this.subscription = this.devices$.subscribe(devices => { - this.device = devices?.find(d => d.default) ?? null; + ngOnChanges(changes: SimpleChanges): void { + if (changes['device']) { this.loadPackages(); - }); - } - - ngOnDestroy(): void { - this.subscription?.unsubscribe(); + } } loadPackages(): void { const device = this.device; - if (!device) return; this.installedError = undefined; - this.installed$ = fromPromise(this.appManager.load(device)); + this.repoPackages = undefined; + if (!device) { + this.installed$ = undefined; + return; + } + this.installed$ = fromPromise(this.appManager.load(device).then(packages => { + this.appsRepo.showApps(...packages.map(p => p.id)) + .then(repo => this.repoPackages = repo) + .catch(() => undefined); + return packages; + })); } openDetails(pkg: PackageInfo) { @@ -55,6 +57,8 @@ export class InstalledComponent implements OnInit, OnDestroy { providers: [ {provide: 'package', useValue: pkg}, {provide: 'device', useValue: this.device}, + {provide: 'parent', useValue: this.parent}, + {provide: 'repoPackage', useValue: this.repoPackages?.[pkg.id] ?? null}, ] }) }); From 9d2b718e9039adea8b93e6686d3a34e4767401ec Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 22 May 2026 22:36:59 +0900 Subject: [PATCH 5/9] keep installed bottom bar pinned across tab switches - 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) --- src/app/apps/apps.component.html | 20 ++--- src/app/apps/apps.component.ts | 14 ++-- src/app/apps/channel/channel.component.scss | 6 ++ .../apps/installed/installed.component.html | 78 +++++++++++-------- .../apps/installed/installed.component.scss | 6 ++ src/app/apps/installed/installed.component.ts | 22 +++++- src/styles.scss | 7 ++ 7 files changed, 95 insertions(+), 58 deletions(-) diff --git a/src/app/apps/apps.component.html b/src/app/apps/apps.component.html index 41994352..c6aeab72 100644 --- a/src/app/apps/apps.component.html +++ b/src/app/apps/apps.component.html @@ -16,22 +16,14 @@
- -
- -
- + @if (tabId === 'installed') { + + }
-
+
@if (dragOver) {
diff --git a/src/app/apps/apps.component.ts b/src/app/apps/apps.component.ts index 554db1e2..26598795 100644 --- a/src/app/apps/apps.component.ts +++ b/src/app/apps/apps.component.ts @@ -1,6 +1,6 @@ -import {Component, NgZone, OnDestroy, OnInit, ViewChild} from '@angular/core'; +import {Component, NgZone, OnDestroy, OnInit} from '@angular/core'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap'; -import {noop, Observable, Subscription} from 'rxjs'; +import {noop, Observable, Subject, Subscription} from 'rxjs'; import {Device, RawPackageInfo} from '../types'; import {AppManagerService, DeviceManagerService, RepositoryItem} from '../core/services'; import {MessageDialogComponent} from '../shared/components/message-dialog/message-dialog.component'; @@ -11,7 +11,6 @@ import * as os from "@tauri-apps/plugin-os"; import {getCurrentWebview} from "@tauri-apps/api/webview"; import {APP_ID_HBCHANNEL} from "../shared/constants"; import {HbchannelRemoveComponent} from "./hbchannel-remove/hbchannel-remove.component"; -import {StatStorageInfoComponent} from "../shared/components/stat-storage-info/stat-storage-info.component"; type UnlistenFn = () => void; @@ -26,8 +25,7 @@ export class AppsComponent implements OnInit, OnDestroy { devices$?: Observable; tabId: string = 'installed'; dragOver = false; - - @ViewChild('storageInfo') storageInfo?: StatStorageInfoComponent; + readonly storageChanged$ = new Subject(); private deviceSubscription?: Subscription; private unlistenDragDrop?: UnlistenFn; @@ -98,7 +96,7 @@ export class AppsComponent implements OnInit, OnDestroy { try { await this.appManager.installByPath(this.device, path, (progress, statusText) => component.update(statusText, progress)); - this.storageInfo?.refresh(); + this.storageChanged$.next(); } catch (e) { console.warn(e); this.handleInstallationError(await basename(path), e as Error); @@ -136,7 +134,7 @@ export class AppsComponent implements OnInit, OnDestroy { const progress = ProgressDialogComponent.open(this.modalService); try { await this.appManager.remove(this.device, pkg.id); - this.storageInfo?.refresh(); + this.storageChanged$.next(); return true; } catch (e) { MessageDialogComponent.open(this.modalService, { @@ -190,7 +188,7 @@ export class AppsComponent implements OnInit, OnDestroy { const component = progress.componentInstance as ProgressDialogComponent; await this.appManager.installByManifest(device, manifest, (progress, statusText) => component.update(statusText, progress)); - this.storageInfo?.refresh(); + this.storageChanged$.next(); return true; } catch (e: any) { this.handleInstallationError(item.title, e as Error); diff --git a/src/app/apps/channel/channel.component.scss b/src/app/apps/channel/channel.component.scss index e69de29b..45f4aeb5 100644 --- a/src/app/apps/channel/channel.component.scss +++ b/src/app/apps/channel/channel.component.scss @@ -0,0 +1,6 @@ +:host { + display: block; + height: 100%; + width: 100%; + overflow: auto; +} diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index fd9d19c5..f1f848c5 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -1,36 +1,48 @@ -
- @let installed = installed$ | async; - @if (installedError) { - - - } @else if (installed) { -
    - @for (pkg of installed; track pkg.id) { -
  • -
    - - -
    -
    {{ pkg.title }}
    -
    - v{{ pkg.version }} - @let rpkg = repoPackages && repoPackages[pkg.id]; - @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) { -  › v{{ rpkg.manifest?.version }} - } +
    + @let installed = installed$ | async; + @if (installedError) { + + + } @else if (installed) { +
      + @for (pkg of installed; track pkg.id) { +
    • +
      + + +
      +
      {{ pkg.title }}
      +
      + v{{ pkg.version }} + @let rpkg = repoPackages && repoPackages[pkg.id]; + @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) { +  › v{{ rpkg.manifest?.version }} + } +
      -
    - @if (repoPackages?.[pkg.id]?.manifest?.hasUpdate(pkg.version)) { - - } -
    • - } -
- } @else { - - } + @if (repoPackages?.[pkg.id]?.manifest?.hasUpdate(pkg.version)) { + + } + + } + + } @else { + + } +
+
+ +
+ +
diff --git a/src/app/apps/installed/installed.component.scss b/src/app/apps/installed/installed.component.scss index e69de29b..2ce388ce 100644 --- a/src/app/apps/installed/installed.component.scss +++ b/src/app/apps/installed/installed.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} diff --git a/src/app/apps/installed/installed.component.ts b/src/app/apps/installed/installed.component.ts index 22740760..815a6016 100644 --- a/src/app/apps/installed/installed.component.ts +++ b/src/app/apps/installed/installed.component.ts @@ -1,18 +1,19 @@ -import {Component, Host, Injector, Input, OnChanges, SimpleChanges} from '@angular/core'; +import {Component, Host, Injector, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild} from '@angular/core'; import {AppsComponent} from '../apps.component'; import {Device, PackageInfo} from "../../types"; -import {Observable} from "rxjs"; +import {Observable, Subscription} from "rxjs"; import {AppManagerService, AppsRepoService, RepositoryItem} from "../../core/services"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; import {DetailsComponent as InstalledDetailsComponent} from "./details/details.component"; import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; +import {StatStorageInfoComponent} from "../../shared/components/stat-storage-info/stat-storage-info.component"; @Component({ selector: 'app-installed', templateUrl: './installed.component.html', styleUrls: ['./installed.component.scss'] }) -export class InstalledComponent implements OnChanges { +export class InstalledComponent implements OnChanges, OnInit, OnDestroy { @Input() device: Device | null = null; @@ -22,11 +23,26 @@ export class InstalledComponent implements OnChanges { repoPackages?: Record; + @ViewChild('storageInfo') storageInfo?: StatStorageInfoComponent; + + private storageSubscription?: Subscription; + constructor(@Host() public parent: AppsComponent, private appManager: AppManagerService, private appsRepo: AppsRepoService, private modals: NgbModal) { } + ngOnInit(): void { + this.storageSubscription = this.parent.storageChanged$.subscribe(() => { + this.storageInfo?.refresh(); + this.loadPackages(); + }); + } + + ngOnDestroy(): void { + this.storageSubscription?.unsubscribe(); + } + ngOnChanges(changes: SimpleChanges): void { if (changes['device']) { this.loadPackages(); diff --git a/src/styles.scss b/src/styles.scss index ffabc992..124bd7a7 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -33,3 +33,10 @@ body { .bg-panel { @extend .bg-dark-subtle; } + +app-apps .tab-content > .tab-pane.active { + flex: 1 1 0; + min-height: 0; + display: flex; + flex-direction: column; +} From fd59902cdf548be8e3a11c86f5deff882cc3f9b6 Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 22 May 2026 22:37:47 +0900 Subject: [PATCH 6/9] group device select with install action in channel details - 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) --- src/app/apps/details/details.component.html | 73 +++++++++++---------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/src/app/apps/details/details.component.html b/src/app/apps/details/details.component.html index 2e52663e..12edaf3c 100644 --- a/src/app/apps/details/details.component.html +++ b/src/app/apps/details/details.component.html @@ -20,58 +20,59 @@

{{ item.title }}

@let allDevices = devices$ | async; - @if (allDevices && allDevices.length > 1) { - - } - -
- @switch (installed && manifest.hasUpdate(installed.version)) { - @case (false) { - - } - @case (true) { - - } - @default { - +
+ @if (allDevices && allDevices.length > 1) { + + } + @switch (installed && manifest.hasUpdate(installed.version)) { + @case (false) { + } + @case (true) { + + } + @default { + + } + } + @if (item.manifestBeta || installed) {
-
-
- + } +
+ + Website +
From d6b5a49d97dd5e393a3896bffc1db2b50e831521 Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 22 May 2026 22:56:51 +0900 Subject: [PATCH 7/9] redesign Available as card grid and Installed as master-detail 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) --- src/app/apps/apps.module.ts | 2 + src/app/apps/channel/channel.component.html | 60 ++++++++---- src/app/apps/channel/channel.component.scss | 93 +++++++++++++++++++ src/app/apps/channel/channel.component.ts | 35 +++++-- .../installed/details/details.component.html | 84 +++++++++++------ .../installed/details/details.component.scss | 8 +- .../details/details.component.spec.ts | 44 +++++---- .../installed/details/details.component.ts | 57 ++++++------ .../apps/installed/installed.component.html | 81 +++++++++------- .../apps/installed/installed.component.scss | 34 +++++++ src/app/apps/installed/installed.component.ts | 43 +++++---- 11 files changed, 387 insertions(+), 154 deletions(-) diff --git a/src/app/apps/apps.module.ts b/src/app/apps/apps.module.ts index 10defa72..eb7a0b46 100644 --- a/src/app/apps/apps.module.ts +++ b/src/app/apps/apps.module.ts @@ -8,6 +8,7 @@ import {InstalledComponent} from "./installed/installed.component"; import {NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbProgressbar} from "@ng-bootstrap/ng-bootstrap"; import {SharedModule} from "../shared/shared.module"; import {HbchannelRemoveComponent} from './hbchannel-remove/hbchannel-remove.component'; +import {DetailsComponent as InstalledDetailsComponent} from "./installed/details/details.component"; import {FormsModule} from "@angular/forms"; @NgModule({ @@ -27,6 +28,7 @@ import {FormsModule} from "@angular/forms"; NgbProgressbar, NgOptimizedImage, FormsModule, + InstalledDetailsComponent, ] }) export class AppsModule { diff --git a/src/app/apps/channel/channel.component.html b/src/app/apps/channel/channel.component.html index e033e8ac..04ed6448 100644 --- a/src/app/apps/channel/channel.component.html +++ b/src/app/apps/channel/channel.component.html @@ -1,27 +1,51 @@
@let repoPage = repoPage$ | async; @if (repoPage) { -
    -
  • - @let manifest = item.manifest; - @if (manifest) { -
    - -
    -
    {{ item.title }}
    -
    {{ manifest.appDescription }}
    -
    -
    - + @if (page === 1 && repoPage.packages.length > 0) { +
    +
    Featured
    +
    + @for (item of repoPage.packages.slice(0, 4); track item.id) { + + } +
    +
    + } +
    +
    All apps
    +
    + @for (item of repoPage.packages; track item.id) { + @if (item.manifest) { + + } } -
    • -
+
+
+ [pageSize]="1" aria-label="App pages" (pageChange)="loadPage($event)">
} @else { diff --git a/src/app/apps/channel/channel.component.scss b/src/app/apps/channel/channel.component.scss index 45f4aeb5..8f565357 100644 --- a/src/app/apps/channel/channel.component.scss +++ b/src/app/apps/channel/channel.component.scss @@ -4,3 +4,96 @@ width: 100%; overflow: auto; } + +.featured-heading { + font-size: 0.75rem; + letter-spacing: 0.05em; +} + +.featured-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 0.75rem; +} + +.featured-card { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + background: var(--bs-tertiary-bg); + border: 1px solid var(--bs-border-color); + border-radius: 0.5rem; + text-align: left; + transition: transform 0.12s ease, box-shadow 0.12s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); + } +} + +.featured-icon { + flex: 0 0 auto; + border-radius: 0.5rem; +} + +.featured-text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.featured-title { + font-weight: 600; + font-size: 1rem; +} + +.featured-desc { + font-size: 0.875rem; +} + +.app-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); + gap: 1rem; +} + +.app-card { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + padding: 0.75rem 0.5rem 1rem; + background: var(--bs-body-bg); + border: 1px solid var(--bs-border-color); + border-radius: 0.5rem; + text-align: center; + transition: transform 0.12s ease, box-shadow 0.12s ease; + + &:hover { + transform: translateY(-1px); + box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); + } +} + +.app-card-icon { + border-radius: 0.75rem; + margin-bottom: 0.25rem; +} + +.app-card-title { + font-weight: 600; + font-size: 0.95rem; + max-width: 100%; +} + +.app-card-version { + font-size: 0.8rem; +} + +.app-card-pill { + margin-top: 0.5rem; +} diff --git a/src/app/apps/channel/channel.component.ts b/src/app/apps/channel/channel.component.ts index a61162fb..3f5f7119 100644 --- a/src/app/apps/channel/channel.component.ts +++ b/src/app/apps/channel/channel.component.ts @@ -1,8 +1,8 @@ -import {Component, Host, Injector, Input, OnInit} from '@angular/core'; -import {Observable} from 'rxjs'; -import {AppsRepoService, RepositoryItem, RepositoryPage} from '../../core/services'; +import {Component, Host, Injector, OnDestroy, OnInit} from '@angular/core'; +import {Observable, Subscription} from 'rxjs'; +import {AppManagerService, AppsRepoService, RepositoryItem, RepositoryPage} from '../../core/services'; import {AppsComponent} from '../apps.component'; -import {RawPackageInfo} from "../../types"; +import {PackageInfo} from "../../types"; import {DetailsComponent} from "../details/details.component"; import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; @@ -11,28 +11,49 @@ import {NgbModal} from "@ng-bootstrap/ng-bootstrap"; templateUrl: './channel.component.html', styleUrls: ['./channel.component.scss'] }) -export class ChannelComponent implements OnInit { +export class ChannelComponent implements OnInit, OnDestroy { page = 1; repoPage$?: Observable; - @Input() - installed?: Record; + installedById: Record = {}; + + private installedSubscription?: Subscription; constructor( @Host() public parent: AppsComponent, private appsRepo: AppsRepoService, + private appManager: AppManagerService, private modals: NgbModal) { } ngOnInit(): void { this.loadPage(1); + const device = this.parent.device; + if (device) { + this.installedSubscription = this.appManager.packages$(device).subscribe(pkgs => { + this.installedById = (pkgs ?? []).reduce((acc, p) => { + acc[p.id] = p; + return acc; + }, {} as Record); + }); + } + } + + ngOnDestroy(): void { + this.installedSubscription?.unsubscribe(); } loadPage(page: number): void { this.repoPage$ = this.appsRepo.allApps$(page); } + cardState(item: RepositoryItem): 'install' | 'installed' | 'update' { + const inst = this.installedById[item.id]; + if (!inst) return 'install'; + return item.manifest?.hasUpdate(inst.version) === true ? 'update' : 'installed'; + } + openDetails(item: RepositoryItem) { if (!this.parent.device) return; this.modals.open(DetailsComponent, { diff --git a/src/app/apps/installed/details/details.component.html b/src/app/apps/installed/details/details.component.html index 63c28380..e19f6e48 100644 --- a/src/app/apps/installed/details/details.component.html +++ b/src/app/apps/installed/details/details.component.html @@ -1,37 +1,63 @@ -
- -
-
-
- -

{{ pkg.title }}

-
v{{ pkg.version }}
-
-

{{ pkg.appDescription }}

-
    - - @if (hasUpdate) { - + @if (hasUpdate) { + + } + +
+
+
+ @if (pkg.appDescription) { +

{{ pkg.appDescription }}

} - -
  • -
    Space used
    -
    +
    +
    App ID
    +
    {{ pkg.id }}
    + @if (pkg.vendor) { +
    Vendor
    +
    {{ pkg.vendor }}
    + } + @if (pkg.type) { +
    Type
    +
    {{ pkg.type }}
    + } +
    Path
    +
    {{ pkg.folderPath }}
    +
    Disk usage
    +
    @let du = diskUsage$ | async; - @if (!du) { - Calculating... + @if (!du || (!du.result && !du.error)) { + Calculating… } @else if (du.error) { - Failed to calculate + Unavailable } @else if (du.result) { {{ du.result.total * 1024 | filesize:sizeOptions }} } -
    -
    • - + + @if (sourceUrl) { +
    Website
    +
    + {{ sourceUrl }} +
    + } + +
    diff --git a/src/app/apps/installed/details/details.component.scss b/src/app/apps/installed/details/details.component.scss index d20d912e..d063d4a3 100644 --- a/src/app/apps/installed/details/details.component.scss +++ b/src/app/apps/installed/details/details.component.scss @@ -1,8 +1,10 @@ -.app-header { - min-height: 64px; +:host { + display: block; + height: 100%; } -.app-icon { +.detail-icon { width: 64px; height: 64px; + border-radius: 0.75rem; } diff --git a/src/app/apps/installed/details/details.component.spec.ts b/src/app/apps/installed/details/details.component.spec.ts index b85bfc67..f21123aa 100644 --- a/src/app/apps/installed/details/details.component.spec.ts +++ b/src/app/apps/installed/details/details.component.spec.ts @@ -1,6 +1,4 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; -import {EMPTY, of} from 'rxjs'; import {DetailsComponent} from './details.component'; import {AppManagerService, PackageManifest, RepositoryItem} from '../../../core/services'; @@ -11,7 +9,6 @@ describe('InstalledDetailsComponent', () => { let component: DetailsComponent; let fixture: ComponentFixture; let parentSpy: jasmine.SpyObj; - let modalSpy: jasmine.SpyObj; const device: Device = { name: 'test', host: '192.168.1.1', port: 22, username: 'prisoner', @@ -27,7 +24,6 @@ describe('InstalledDetailsComponent', () => { parentSpy = jasmine.createSpyObj('AppsComponent', ['launchApp', 'removePackage', 'installPackage']); parentSpy.removePackage.and.resolveTo(true); parentSpy.installPackage.and.resolveTo(true); - modalSpy = jasmine.createSpyObj('NgbActiveModal', ['close', 'dismiss']); const appManagerStub = { appDiskUsage: () => Promise.reject(new Error('not under test')), } as Partial; @@ -35,17 +31,20 @@ describe('InstalledDetailsComponent', () => { TestBed.configureTestingModule({ imports: [DetailsComponent], providers: [ - {provide: 'device', useValue: device}, - {provide: 'package', useValue: pkg}, - {provide: 'parent', useValue: parentSpy}, - {provide: 'repoPackage', useValue: repoPackage}, - {provide: NgbActiveModal, useValue: modalSpy}, {provide: AppManagerService, useValue: appManagerStub}, ], }); fixture = TestBed.createComponent(DetailsComponent); component = fixture.componentInstance; + component.pkg = pkg; + component.device = device; + component.parent = parentSpy; + component.repoPackage = repoPackage; + component.ngOnChanges({ + pkg: {currentValue: pkg, previousValue: undefined, firstChange: true, isFirstChange: () => true}, + device: {currentValue: device, previousValue: undefined, firstChange: true, isFirstChange: () => true}, + }); fixture.detectChanges(); } @@ -54,25 +53,32 @@ describe('InstalledDetailsComponent', () => { expect(component).toBeTruthy(); }); - it('Launch calls parent.launchApp and closes the modal', () => { + it('Launch calls parent.launchApp', () => { setup(); component.launch(); expect(parentSpy.launchApp).toHaveBeenCalledWith(pkg.id); - expect(modalSpy.close).toHaveBeenCalled(); }); - it('Uninstall calls parent.removePackage and closes the modal on success', async () => { + it('Uninstall calls parent.removePackage with the package', async () => { setup(); - await component.uninstall(); + const removed = await component.uninstall(); expect(parentSpy.removePackage).toHaveBeenCalledWith(pkg); - expect(modalSpy.close).toHaveBeenCalled(); + expect(removed).toBeTrue(); }); - it('Uninstall keeps the modal open when removePackage returns false', async () => { - setup(); - parentSpy.removePackage.and.resolveTo(false); - await component.uninstall(); - expect(modalSpy.close).not.toHaveBeenCalled(); + it('Update calls parent.installPackage when a repo package is available', async () => { + const newer = new RepositoryItem({manifest: new PackageManifest({version: '2.0.0'})}, ''); + setup(newer); + const installed = await component.update(); + expect(parentSpy.installPackage).toHaveBeenCalledWith(newer); + expect(installed).toBeTrue(); + }); + + it('Update is a no-op without a repo package', async () => { + setup(null); + const installed = await component.update(); + expect(installed).toBeFalse(); + expect(parentSpy.installPackage).not.toHaveBeenCalled(); }); it('hasUpdate is false when no repo package is provided', () => { diff --git a/src/app/apps/installed/details/details.component.ts b/src/app/apps/installed/details/details.component.ts index 3319f721..0ae9fad5 100644 --- a/src/app/apps/installed/details/details.component.ts +++ b/src/app/apps/installed/details/details.component.ts @@ -1,17 +1,16 @@ -import {Component, Inject} from '@angular/core'; +import {Component, Input, OnChanges, SimpleChanges} from '@angular/core'; import {AsyncResult, Device, PackageInfo} from "../../../types"; import {AppManagerService, PackageDiskUsage, RepositoryItem} from "../../../core/services"; import {fromPromise} from "rxjs/internal/observable/innerFrom"; -import {Observable} from "rxjs"; +import {Observable, of} from "rxjs"; import {AsyncPipe} from "@angular/common"; -import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap"; import {SharedModule} from "../../../shared/shared.module"; import {FilesizePipe} from "../../../shared/pipes/filesize.pipe"; import {FileSizeOptions} from "filesize"; import {AppsComponent} from "../../apps.component"; @Component({ - selector: 'app-details', + selector: 'app-installed-details', standalone: true, imports: [ AsyncPipe, @@ -21,21 +20,26 @@ import {AppsComponent} from "../../apps.component"; templateUrl: './details.component.html', styleUrl: './details.component.scss' }) -export class DetailsComponent { +export class DetailsComponent implements OnChanges { - diskUsage$: Observable>; + @Input() pkg!: PackageInfo; + @Input() device!: Device; + @Input() parent!: AppsComponent; + @Input() repoPackage: RepositoryItem | null = null; + + diskUsage$: Observable> = of({}); sizeOptions: FileSizeOptions = {base: 2, standard: 'jedec'}; - constructor( - @Inject('device') public device: Device, - @Inject('package') public pkg: PackageInfo, - @Inject('parent') private parent: AppsComponent, - @Inject('repoPackage') public repoPackage: RepositoryItem | null, - public modal: NgbActiveModal, - appManager: AppManagerService - ) { - this.diskUsage$ = fromPromise(appManager.appDiskUsage(device, pkg.folderPath) - .then((result) => ({result})).catch((error) => ({error}))); + constructor(private appManager: AppManagerService) { + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['pkg'] || changes['device']) { + this.diskUsage$ = this.pkg && this.device + ? fromPromise(this.appManager.appDiskUsage(this.device, this.pkg.folderPath) + .then((result) => ({result})).catch((error) => ({error}))) + : of({}); + } } get hasUpdate(): boolean { @@ -44,21 +48,18 @@ export class DetailsComponent { launch(): void { this.parent.launchApp(this.pkg.id); - this.modal.close(); } - async uninstall(): Promise { - const removed = await this.parent.removePackage(this.pkg); - if (removed) { - this.modal.close(); - } + uninstall(): Promise { + return this.parent.removePackage(this.pkg); } - async update(): Promise { - if (!this.repoPackage) return; - const installed = await this.parent.installPackage(this.repoPackage); - if (installed) { - this.modal.close(); - } + update(): Promise { + if (!this.repoPackage) return Promise.resolve(false); + return this.parent.installPackage(this.repoPackage); + } + + get sourceUrl(): string | undefined { + return this.repoPackage?.manifest?.sourceUrl; } } diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index f1f848c5..92ef34d9 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -1,39 +1,56 @@ -
    - @let installed = installed$ | async; - @if (installedError) { - - - } @else if (installed) { -
      - @for (pkg of installed; track pkg.id) { -
    • -
      - - -
      -
      {{ pkg.title }}
      -
      - v{{ pkg.version }} - @let rpkg = repoPackages && repoPackages[pkg.id]; - @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) { -  › v{{ rpkg.manifest?.version }} - } +
      +
      - @if (repoPackages?.[pkg.id]?.manifest?.hasUpdate(pkg.version)) { - +
      • } - - } -
    + } + + } @else { + + } +
    + +
    + @if (selectedPkg && device) { + } @else { - +
    + +
    Select an installed app to see details
    +
    } -
    + +
    - @for (dev of allDevices; track dev.name) { - - } - - } - @switch (installed && manifest.hasUpdate(installed.version)) { - @case (false) { - - } - @case (true) { - - } - @default { - - } - } - @if (item.manifestBeta || installed) { -
    - -
      -
    • - Install Beta -
      • - -
    • -
    • - Uninstall -
      • -       -
    -
    + (Installed v{{ installed.version }}) }
    - - Website - + +
    Root required
    +
    Root is optional
    +     + + +
    + +
    About
    +

    {{ item.shortDescription }}

    +
    + +
    +
    Links
    + + + {{ url }} + +
    -
    - +
    +
    + @let allDevices = devices$ | async; + @if (allDevices && allDevices.length > 1) { + + } + @switch (installed && manifest.hasUpdate(installed.version)) { + @case (false) { + + } + @case (true) { + + } + @default { + + } + } + @if (item.manifestBeta || installed) { +
    + +
      +
    • + Install Beta +
      • + +
    • +
    • + Uninstall +
      • +       +
    +
    + }
    -
    -
    -
    diff --git a/src/app/apps/details/details.component.scss b/src/app/apps/details/details.component.scss index 5e537a6b..f75fd044 100644 --- a/src/app/apps/details/details.component.scss +++ b/src/app/apps/details/details.component.scss @@ -1,12 +1,21 @@ +app-channel-app-details { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + .full-description { img { max-width: 100%; } } -.app-details-icon { - max-width: 25vw; - max-height: 25vw; - height: auto; - object-fit: contain; +.hero-icon { + border-radius: 0.75rem; + flex: 0 0 auto; +} + +.detail-footer { + flex: 0 0 auto; } diff --git a/src/app/apps/details/details.component.ts b/src/app/apps/details/details.component.ts index 8b0bc2e1..941560c5 100644 --- a/src/app/apps/details/details.component.ts +++ b/src/app/apps/details/details.component.ts @@ -4,7 +4,7 @@ import {noop, Observable, of} from "rxjs"; import {AsyncPipe, NgForOf, NgIf, NgOptimizedImage, NgSwitch, NgSwitchCase} from "@angular/common"; import {open as openPath} from "@tauri-apps/plugin-shell"; import { - NgbActiveModal, + NgbActiveOffcanvas, NgbDropdown, NgbDropdownItem, NgbDropdownMenu, @@ -51,7 +51,7 @@ export class DetailsComponent implements OnInit, OnDestroy { private unsubscribeClickListener!: () => void; constructor( - public modal: NgbActiveModal, + public offcanvas: NgbActiveOffcanvas, public item: RepositoryItem, @Inject('device') public device: Device, @Inject('parent') private parent: AppsComponent, diff --git a/src/styles.scss b/src/styles.scss index 124bd7a7..21b05453 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -40,3 +40,13 @@ app-apps .tab-content > .tab-pane.active { display: flex; flex-direction: column; } + +.offcanvas.app-detail-offcanvas { + --bs-offcanvas-width: 480px; +} + +@media (max-width: 575.98px) { + .offcanvas.app-detail-offcanvas { + --bs-offcanvas-width: 100%; + } +} From 214063aa24417c01e4be8bf72bd87219c018664e Mon Sep 17 00:00:00 2001 From: Mariotaku Date: Fri, 22 May 2026 23:52:14 +0900 Subject: [PATCH 9/9] restyle channel grid with featured row and corner state badges 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) --- src/app/apps/channel/channel.component.html | 65 +++++++---- src/app/apps/channel/channel.component.scss | 109 +++++++++--------- src/app/apps/details/details.component.html | 15 ++- .../installed/details/details.component.html | 31 ++--- .../apps/installed/installed.component.html | 2 +- 5 files changed, 125 insertions(+), 97 deletions(-) diff --git a/src/app/apps/channel/channel.component.html b/src/app/apps/channel/channel.component.html index 04ed6448..5a669889 100644 --- a/src/app/apps/channel/channel.component.html +++ b/src/app/apps/channel/channel.component.html @@ -1,23 +1,38 @@
    @let repoPage = repoPage$ | async; @if (repoPage) { - @if (page === 1 && repoPage.packages.length > 0) { + @if (page === 1 && repoPage.packages.length > 2) {
    -
    Featured
    +
    Featured
    - @for (item of repoPage.packages.slice(0, 4); track item.id) { - + @for (item of repoPage.packages.slice(1, 3); track item.id) { + } @@ -25,25 +40,29 @@
    Featured
    }
    -
    All apps
    +
    {{ page === 1 ? 'All apps' : ('Page ' + page) }}
    @for (item of repoPage.packages; track item.id) { @if (item.manifest) { } }
    -
    +
    diff --git a/src/app/apps/channel/channel.component.scss b/src/app/apps/channel/channel.component.scss index 8f565357..b6c64d03 100644 --- a/src/app/apps/channel/channel.component.scss +++ b/src/app/apps/channel/channel.component.scss @@ -5,95 +5,96 @@ overflow: auto; } -.featured-heading { - font-size: 0.75rem; - letter-spacing: 0.05em; +.featured-grid { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 0.75rem; } -.featured-grid { +.app-grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.75rem; } -.featured-card { +.app-card { + position: relative; display: flex; flex-direction: row; - align-items: center; + align-items: flex-start; gap: 0.75rem; padding: 0.75rem; - background: var(--bs-tertiary-bg); + background: transparent; border: 1px solid var(--bs-border-color); - border-radius: 0.5rem; + border-radius: var(--bs-border-radius); text-align: left; - transition: transform 0.12s ease, box-shadow 0.12s ease; + transition: background 0.12s ease, border-color 0.12s ease; &:hover { - transform: translateY(-1px); - box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); + background: var(--bs-tertiary-bg); + border-color: var(--bs-border-color-translucent); } } -.featured-icon { - flex: 0 0 auto; - border-radius: 0.5rem; -} - -.featured-text { - display: flex; +.app-card-hero { + grid-row: 1 / 3; flex-direction: column; - min-width: 0; -} + align-items: flex-start; + padding: 1rem; + gap: 0.75rem; -.featured-title { - font-weight: 600; - font-size: 1rem; -} + .app-card-icon { + width: 80px; + height: 80px; + } -.featured-desc { - font-size: 0.875rem; -} + .app-card-title { + font-size: 1.1rem; + } -.app-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); - gap: 1rem; + .app-card-desc { + -webkit-line-clamp: 3; + } } -.app-card { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - gap: 0.25rem; - padding: 0.75rem 0.5rem 1rem; - background: var(--bs-body-bg); - border: 1px solid var(--bs-border-color); +.app-card-icon { + width: 48px; + height: 48px; border-radius: 0.5rem; - text-align: center; - transition: transform 0.12s ease, box-shadow 0.12s ease; - - &:hover { - transform: translateY(-1px); - box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); - } + flex: 0 0 auto; } -.app-card-icon { - border-radius: 0.75rem; - margin-bottom: 0.25rem; +.app-card-text { + display: flex; + flex-direction: column; + min-width: 0; + flex: 1 1 auto; } .app-card-title { font-weight: 600; font-size: 0.95rem; - max-width: 100%; + line-height: 1.2; } .app-card-version { font-size: 0.8rem; + color: var(--bs-secondary-color); + margin-top: 0.15rem; +} + +.app-card-desc { + font-size: 0.85rem; + color: var(--bs-secondary-color); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } -.app-card-pill { - margin-top: 0.5rem; +.app-card-tag { + position: absolute; + top: 0.5rem; + right: 0.5rem; } diff --git a/src/app/apps/details/details.component.html b/src/app/apps/details/details.component.html index a61fdbc4..d03328fd 100644 --- a/src/app/apps/details/details.component.html +++ b/src/app/apps/details/details.component.html @@ -8,15 +8,18 @@
    {{ item.title }}
    App icon

    {{ item.title }}

    -
    +
    v{{ manifest.version }} @if (installed) { - (Installed v{{ installed.version }}) + ยท installed v{{ installed.version }} }
    + @if (installed) { + Installed + } -
    Root required
    -
    Root is optional
    +
    Root required
    +
    Root optional
    @@ -31,12 +34,12 @@

    {{ item.title }}

    -
    About
    +
    About

    {{ item.shortDescription }}

    -
    Links
    +
    Links
    {{ url }} diff --git a/src/app/apps/installed/details/details.component.html b/src/app/apps/installed/details/details.component.html index e19f6e48..6dbae694 100644 --- a/src/app/apps/installed/details/details.component.html +++ b/src/app/apps/installed/details/details.component.html @@ -2,15 +2,18 @@
    -

    {{ pkg.title }}

    -
    +

    {{ pkg.title }}

    +
    v{{ pkg.version }} @if (hasUpdate) { - › v{{ repoPackage!.manifest!.version }} available + › v{{ repoPackage!.manifest!.version }} }
    + @if (hasUpdate) { + Update available + }
    -
    +
    @@ -26,34 +29,36 @@

    {{ pkg.title }}

    @if (pkg.appDescription) { -

    {{ pkg.appDescription }}

    +
    About
    +

    {{ pkg.appDescription }}

    } +
    Details
    -
    App ID
    +
    App ID
    {{ pkg.id }}
    @if (pkg.vendor) { -
    Vendor
    +
    Vendor
    {{ pkg.vendor }}
    } @if (pkg.type) { -
    Type
    +
    Type
    {{ pkg.type }}
    } -
    Path
    +
    Path
    {{ pkg.folderPath }}
    -
    Disk usage
    +
    Disk usage
    @let du = diskUsage$ | async; @if (!du || (!du.result && !du.error)) { - Calculating… + Calculating… } @else if (du.error) { - Unavailable + Unavailable } @else if (du.result) { {{ du.result.total * 1024 | filesize:sizeOptions }} }
    @if (sourceUrl) { -
    Website
    +
    Website
    {{ sourceUrl }}
    diff --git a/src/app/apps/installed/installed.component.html b/src/app/apps/installed/installed.component.html index 92ef34d9..fe412b89 100644 --- a/src/app/apps/installed/installed.component.html +++ b/src/app/apps/installed/installed.component.html @@ -20,7 +20,7 @@
    {{ pkg.title }}
    -
    +
    v{{ pkg.version }} @if (hasUpdate(pkg)) { Update