Myx
c3ef8e8800
All checks were successful
Queue Release Build / prepare (push) Successful in 17s
Deploy Web Apps / deploy (push) Successful in 9m58s
Queue Release Build / build-linux (push) Successful in 26m26s
Queue Release Build / build-windows (push) Successful in 25m3s
Queue Release Build / finalize (push) Successful in 1m43s
203 lines
7.9 KiB
HTML
203 lines
7.9 KiB
HTML
<div class="space-y-6 max-w-xl">
|
|
<!-- Server Endpoints -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<div class="flex items-center gap-2">
|
|
<ng-icon
|
|
name="lucideGlobe"
|
|
class="w-5 h-5 text-muted-foreground"
|
|
/>
|
|
<h4 class="text-sm font-semibold text-foreground">Server Endpoints</h4>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@if (hasMissingDefaultServers()) {
|
|
<button
|
|
type="button"
|
|
(click)="restoreDefaultServers()"
|
|
class="px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
|
|
>
|
|
Restore Defaults
|
|
</button>
|
|
}
|
|
<button
|
|
type="button"
|
|
(click)="testAllServers()"
|
|
[disabled]="isTesting()"
|
|
class="flex items-center gap-1.5 px-2.5 py-1 text-xs bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors disabled:opacity-50"
|
|
>
|
|
<ng-icon
|
|
name="lucideRefreshCw"
|
|
class="w-3.5 h-3.5"
|
|
[class.animate-spin]="isTesting()"
|
|
/>
|
|
Test All
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-xs text-muted-foreground mb-3">
|
|
Active server endpoints stay enabled at the same time. You pick the endpoint when creating a new server.
|
|
</p>
|
|
|
|
<!-- Server List -->
|
|
<div class="space-y-2 mb-3">
|
|
@for (server of servers(); track server.id) {
|
|
<div
|
|
class="flex items-center gap-3 p-2.5 rounded-lg border transition-colors"
|
|
[class.border-primary]="server.isActive"
|
|
[class.bg-primary/5]="server.isActive"
|
|
[class.border-border]="!server.isActive"
|
|
[class.bg-secondary/30]="!server.isActive"
|
|
>
|
|
<div
|
|
class="w-2.5 h-2.5 rounded-full flex-shrink-0"
|
|
[class.bg-green-500]="server.status === 'online'"
|
|
[class.bg-red-500]="server.status === 'offline'"
|
|
[class.bg-yellow-500]="server.status === 'checking'"
|
|
[class.bg-muted]="server.status === 'unknown'"
|
|
[class.bg-orange-500]="server.status === 'incompatible'"
|
|
></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm font-medium text-foreground truncate">{{ server.name }}</span>
|
|
@if (server.isActive) {
|
|
<span class="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-full">Active</span>
|
|
}
|
|
</div>
|
|
<p class="text-xs text-muted-foreground truncate">{{ server.url }}</p>
|
|
@if (server.latency !== undefined && server.status === 'online') {
|
|
<p class="text-[10px] text-muted-foreground">{{ server.latency }}ms</p>
|
|
}
|
|
@if (server.status === 'incompatible') {
|
|
<p class="text-[10px] text-destructive">Update the client in order to connect to other users</p>
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
@if (!server.isActive && server.status !== 'incompatible') {
|
|
<button
|
|
type="button"
|
|
(click)="setActiveServer(server.id)"
|
|
class="p-1.5 hover:bg-secondary rounded-lg transition-colors"
|
|
title="Activate"
|
|
>
|
|
<ng-icon
|
|
name="lucideCheck"
|
|
class="w-3.5 h-3.5 text-muted-foreground hover:text-primary"
|
|
/>
|
|
</button>
|
|
}
|
|
@if (server.isActive && hasMultipleActiveServers()) {
|
|
<button
|
|
type="button"
|
|
(click)="deactivateServer(server.id)"
|
|
class="p-1.5 hover:bg-secondary rounded-lg transition-colors"
|
|
title="Deactivate"
|
|
>
|
|
<ng-icon
|
|
name="lucideX"
|
|
class="w-3.5 h-3.5 text-muted-foreground hover:text-foreground"
|
|
/>
|
|
</button>
|
|
}
|
|
@if (hasMultipleServers()) {
|
|
<button
|
|
type="button"
|
|
(click)="removeServer(server.id)"
|
|
class="p-1.5 hover:bg-destructive/10 rounded-lg transition-colors"
|
|
title="Remove"
|
|
>
|
|
<ng-icon
|
|
name="lucideTrash2"
|
|
class="w-3.5 h-3.5 text-muted-foreground hover:text-destructive"
|
|
/>
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Add New Server -->
|
|
<div class="border-t border-border pt-3">
|
|
<h4 class="text-xs font-medium text-foreground mb-2">Add New Server</h4>
|
|
<div class="flex gap-2">
|
|
<div class="flex-1 space-y-1.5">
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newServerName"
|
|
placeholder="Server name"
|
|
class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
<input
|
|
type="url"
|
|
[(ngModel)]="newServerUrl"
|
|
placeholder="Server URL (e.g., http://localhost:3001)"
|
|
class="w-full px-3 py-1.5 bg-secondary rounded-lg border border-border text-foreground text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
(click)="addServer()"
|
|
[disabled]="!newServerName || !newServerUrl"
|
|
class="px-3 py-1.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed self-end"
|
|
>
|
|
<ng-icon
|
|
name="lucidePlus"
|
|
class="w-4 h-4"
|
|
/>
|
|
</button>
|
|
</div>
|
|
@if (addError()) {
|
|
<p class="text-xs text-destructive mt-1.5">{{ addError() }}</p>
|
|
}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Connection Settings -->
|
|
<section>
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<ng-icon
|
|
name="lucideServer"
|
|
class="w-5 h-5 text-muted-foreground"
|
|
/>
|
|
<h4 class="text-sm font-semibold text-foreground">Connection</h4>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-foreground">Auto-reconnect</p>
|
|
<p class="text-xs text-muted-foreground">Reconnect when connection is lost</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="autoReconnect"
|
|
(change)="saveConnectionSettings()"
|
|
class="sr-only peer"
|
|
/>
|
|
<div
|
|
class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
|
|
></div>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-foreground">Search all servers</p>
|
|
<p class="text-xs text-muted-foreground">Search across all server directories</p>
|
|
</div>
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="searchAllServers"
|
|
(change)="saveConnectionSettings()"
|
|
class="sr-only peer"
|
|
/>
|
|
<div
|
|
class="w-10 h-5 bg-secondary rounded-full peer peer-checked:bg-primary peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"
|
|
></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|