Bugfix/040 UI (#2881)

* fix sideload and install flow

* move updates chevron inside upddate button

* update dictionaries to include langauge names

* fix: address todos (#2880)

* fix: address todos

* fix enlgish translation

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* use existing translation, no need to duplicate

* fix: update dialog and other fixes (#2882)

---------

Co-authored-by: Alex Inkin <alexander@inkin.ru>
Co-authored-by: Aiden McClelland <me@drbonez.dev>
This commit is contained in:
Matt Hill
2025-04-21 10:57:12 -06:00
committed by GitHub
parent b1621f6b34
commit 27272680a2
59 changed files with 515 additions and 510 deletions

View File

@@ -1,73 +1,94 @@
import { AsyncPipe } from '@angular/common'
import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
import { toSignal } from '@angular/core/rxjs-interop'
import { SwUpdate } from '@angular/service-worker'
import { Exver, LoadingService } from '@start9labs/shared'
import { WA_WINDOW } from '@ng-web-apis/common'
import { LoadingService } from '@start9labs/shared'
import { Version } from '@start9labs/start-sdk'
import { TuiResponsiveDialog } from '@taiga-ui/addon-mobile'
import { TuiAutoFocus } from '@taiga-ui/cdk'
import { TuiButton, TuiDialog } from '@taiga-ui/core'
import { TuiButton } from '@taiga-ui/core'
import { PatchDB } from 'patch-db-client'
import { debounceTime, endWith, map, merge, Subject } from 'rxjs'
import { distinctUntilChanged, map, merge, Subject } from 'rxjs'
import { ConfigService } from 'src/app/services/config.service'
import { DataModel } from 'src/app/services/patch-db/data-model'
// @TODO Alex
@Component({
standalone: true,
selector: 'refresh-alert',
template: `
<!-- <ng-template-->
<!-- [tuiDialog]="show$ | async"-->
<!-- [tuiDialogOptions]="{ label: 'Refresh Needed', size: 's' }"-->
<!-- (tuiDialogChange)="onDismiss()"-->
<!-- >-->
<!-- Your user interface is cached and out of date. Hard refresh the page to-->
<!-- get the latest UI.-->
<!-- <ul>-->
<!-- <li>-->
<!-- <b>On Mac</b>-->
<!-- : cmd + shift + R-->
<!-- </li>-->
<!-- <li>-->
<!-- <b>On Linux/Windows</b>-->
<!-- : ctrl + shift + R-->
<!-- </li>-->
<!-- </ul>-->
<!-- <button-->
<!-- tuiButton-->
<!-- tuiAutoFocus-->
<!-- appearance="secondary"-->
<!-- style="float: right"-->
<!-- (click)="onDismiss()"-->
<!-- >-->
<!-- Ok-->
<!-- </button>-->
<!-- </ng-template>-->
<ng-template
[tuiResponsiveDialog]="show()"
[tuiResponsiveDialogOptions]="{ label: 'Refresh Needed', size: 's' }"
(tuiResponsiveDialogChange)="dismiss$.next()"
>
@if (isPwa) {
<p>
Your user interface is cached and out of date. Attempt to reload the
PWA using the button below. If you continue to see this message,
uninstall and reinstall the PWA.
</p>
<button
tuiButton
tuiAutoFocus
appearance="secondary"
style="float: right"
[tuiAppearanceFocus]="false"
(click)="pwaReload()"
>
Reload
</button>
} @else {
Your user interface is cached and out of date. Hard refresh the page to
get the latest UI.
<ul>
<li>
<b>On Mac</b>
: cmd + shift + R
</li>
<li>
<b>On Linux/Windows</b>
: ctrl + shift + R
</li>
</ul>
<button
tuiButton
tuiAutoFocus
appearance="secondary"
style="float: right"
[tuiAppearanceFocus]="false"
(click)="dismiss$.next()"
>
Ok
</button>
}
</ng-template>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [TuiDialog, AsyncPipe, TuiButton, TuiAutoFocus],
imports: [TuiResponsiveDialog, TuiButton, TuiAutoFocus],
})
export class RefreshAlertComponent {
private readonly win = inject(WA_WINDOW)
private readonly updates = inject(SwUpdate)
private readonly loader = inject(LoadingService)
private readonly exver = inject(Exver)
private readonly config = inject(ConfigService)
private readonly dismiss$ = new Subject<boolean>()
private readonly version = Version.parse(inject(ConfigService).version)
readonly show$ = merge(
this.dismiss$,
inject<PatchDB<DataModel>>(PatchDB)
.watch$('serverInfo', 'version')
.pipe(
map(version => !!this.exver.compareExver(this.config.version, version)),
endWith(false),
),
).pipe(debounceTime(0))
readonly dismiss$ = new Subject<void>()
readonly isPwa = this.win.matchMedia('(display-mode: standalone)').matches
// @TODO use this like we did on 0344
onPwa = false
ngOnInit() {
this.onPwa = window.matchMedia('(display-mode: standalone)').matches
}
readonly show = toSignal(
merge(
this.dismiss$.pipe(map(() => false)),
inject<PatchDB<DataModel>>(PatchDB)
.watch$('serverInfo', 'version')
.pipe(
distinctUntilChanged(),
map(v => this.version.compare(Version.parse(v)) !== 'equal'),
),
),
{
initialValue: false,
},
)
async pwaReload() {
const loader = this.loader.open('Reloading PWA').subscribe()
@@ -80,11 +101,7 @@ export class RefreshAlertComponent {
} finally {
loader.unsubscribe()
// always reload, as this resolves most out of sync cases
window.location.reload()
this.win.location.reload()
}
}
onDismiss() {
this.dismiss$.next(false)
}
}

View File

@@ -1,28 +0,0 @@
import { TuiDropdownService } from '@taiga-ui/core'
import {
ChangeDetectionStrategy,
Component,
Directive,
Injectable,
} from '@angular/core'
import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'
@Injectable({ providedIn: `root` })
export class SidebarService extends TuiPortalService {}
@Directive({
selector: '[tuiSidebar]',
standalone: true,
providers: [{ provide: TuiDropdownService, useExisting: SidebarService }],
})
export class SidebarDirective {}
@Component({
selector: 'sidebar-host',
template: '<ng-container #viewContainer></ng-container>',
styles: [':host { position: fixed; top: 0; }'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
providers: [{ provide: TuiPortalService, useExisting: SidebarService }],
})
export class SidebarHostComponent extends TuiPortals {}