370 lines
14 KiB
HTML
370 lines
14 KiB
HTML
<div class="flex flex-col h-full">
|
|
<!-- My Servers -->
|
|
<div class="p-4 border-b border-border">
|
|
<h3 class="font-semibold text-foreground mb-2">My Servers</h3>
|
|
@if (savedRooms().length === 0) {
|
|
<p class="text-sm text-muted-foreground">No joined servers yet</p>
|
|
} @else {
|
|
<div class="flex flex-wrap gap-2">
|
|
@for (room of savedRooms(); track room.id) {
|
|
<button
|
|
(click)="joinSavedRoom(room)"
|
|
type="button"
|
|
class="px-3 py-1.5 text-xs rounded-full bg-secondary hover:bg-secondary/80 border border-border text-foreground"
|
|
>
|
|
{{ room.name }}
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
<!-- Search Header -->
|
|
<div class="p-4 border-b border-border">
|
|
<div class="flex items-center gap-2">
|
|
<div class="relative flex-1">
|
|
<ng-icon
|
|
name="lucideSearch"
|
|
class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground w-4 h-4"
|
|
/>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="searchQuery"
|
|
(ngModelChange)="onSearchChange($event)"
|
|
placeholder="Search servers..."
|
|
class="w-full pl-10 pr-4 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
<button
|
|
(click)="openSettings()"
|
|
type="button"
|
|
class="p-2 bg-secondary hover:bg-secondary/80 rounded-lg border border-border transition-colors"
|
|
title="Settings"
|
|
>
|
|
<ng-icon
|
|
name="lucideSettings"
|
|
class="w-5 h-5 text-muted-foreground"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Server Button -->
|
|
<div class="p-4 border-b border-border">
|
|
<button
|
|
(click)="openCreateDialog()"
|
|
type="button"
|
|
class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
|
|
>
|
|
<ng-icon
|
|
name="lucidePlus"
|
|
class="w-4 h-4"
|
|
/>
|
|
Create New Server
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search Results -->
|
|
<div class="flex-1 overflow-y-auto">
|
|
@if (isSearching()) {
|
|
<div class="flex items-center justify-center py-8">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
|
</div>
|
|
} @else if (searchResults().length === 0) {
|
|
<div class="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<ng-icon
|
|
name="lucideSearch"
|
|
class="w-12 h-12 mb-4 opacity-50"
|
|
/>
|
|
<p class="text-lg">No servers found</p>
|
|
<p class="text-sm">Try a different search or create your own</p>
|
|
</div>
|
|
} @else {
|
|
<div class="p-4 space-y-3">
|
|
@for (server of searchResults(); track server.id) {
|
|
<button
|
|
(click)="joinServer(server)"
|
|
type="button"
|
|
class="w-full p-4 bg-card rounded-lg border transition-all text-left group"
|
|
[class.border-border]="!isServerMarkedBanned(server)"
|
|
[class.hover:border-primary/50]="!isServerMarkedBanned(server)"
|
|
[class.hover:bg-card/80]="!isServerMarkedBanned(server)"
|
|
[class.border-destructive/40]="isServerMarkedBanned(server)"
|
|
[class.bg-destructive/5]="isServerMarkedBanned(server)"
|
|
[class.hover:border-destructive/60]="isServerMarkedBanned(server)"
|
|
[attr.aria-label]="isServerMarkedBanned(server) ? 'Banned server' : 'Join server'"
|
|
>
|
|
<div class="flex items-start justify-between">
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<h3
|
|
class="font-semibold transition-colors"
|
|
[class.text-foreground]="!isServerMarkedBanned(server)"
|
|
[class.group-hover:text-primary]="!isServerMarkedBanned(server)"
|
|
[class.text-destructive]="isServerMarkedBanned(server)"
|
|
>
|
|
{{ server.name }}
|
|
</h3>
|
|
@if (isServerMarkedBanned(server)) {
|
|
<ng-icon
|
|
name="lucideLock"
|
|
class="w-4 h-4 text-destructive"
|
|
/>
|
|
<span class="inline-flex items-center rounded-full bg-destructive/10 px-2 py-0.5 text-[11px] font-medium text-destructive"
|
|
>Banned</span
|
|
>
|
|
} @else if (server.isPrivate) {
|
|
<ng-icon
|
|
name="lucideLock"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
<span class="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
|
|
>Private</span
|
|
>
|
|
} @else if (server.hasPassword) {
|
|
<ng-icon
|
|
name="lucideLock"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
<span class="inline-flex items-center rounded-full bg-secondary px-2 py-0.5 text-[11px] font-medium text-muted-foreground"
|
|
>Password</span
|
|
>
|
|
} @else {
|
|
<ng-icon
|
|
name="lucideGlobe"
|
|
class="w-4 h-4 text-muted-foreground"
|
|
/>
|
|
}
|
|
</div>
|
|
@if (server.description) {
|
|
<p class="text-sm text-muted-foreground mt-1 line-clamp-2">
|
|
{{ server.description }}
|
|
</p>
|
|
}
|
|
@if (server.topic) {
|
|
<span class="inline-block mt-2 px-2 py-0.5 text-xs bg-secondary rounded-full text-muted-foreground">
|
|
{{ server.topic }}
|
|
</span>
|
|
}
|
|
</div>
|
|
<div class="flex items-center gap-1 text-muted-foreground text-sm ml-4">
|
|
<ng-icon
|
|
name="lucideUsers"
|
|
class="w-4 h-4"
|
|
/>
|
|
<span>{{ getServerUserCount(server) }}/{{ getServerCapacityLabel(server) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 space-y-1 text-xs">
|
|
<div class="text-muted-foreground">
|
|
Users: <span class="text-foreground/80">{{ getServerUserCount(server) }}/{{ getServerCapacityLabel(server) }}</span>
|
|
</div>
|
|
<div class="text-muted-foreground">
|
|
Listed by: <span class="text-foreground/80">{{ server.sourceName || server.hostName || 'Unknown' }}</span>
|
|
</div>
|
|
<div class="text-muted-foreground">
|
|
Owner: <span class="text-foreground/80">{{ server.ownerName || server.ownerId || 'Unknown' }}</span>
|
|
</div>
|
|
@if (server.hasPassword && !server.isPrivate && !isServerMarkedBanned(server)) {
|
|
<div class="text-muted-foreground">Access: <span class="text-foreground/80">Password required</span></div>
|
|
}
|
|
</div>
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (joinErrorMessage() || error()) {
|
|
<div class="p-4 bg-destructive/10 border-t border-destructive">
|
|
<p class="text-sm text-destructive">{{ joinErrorMessage() || error() }}</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
@if (showBannedDialog()) {
|
|
<app-confirm-dialog
|
|
title="Banned"
|
|
confirmLabel="OK"
|
|
cancelLabel="Close"
|
|
variant="danger"
|
|
[widthClass]="'w-96 max-w-[90vw]'"
|
|
(confirmed)="closeBannedDialog()"
|
|
(cancelled)="closeBannedDialog()"
|
|
>
|
|
<p>You are banned from {{ bannedServerName() || 'this server' }}.</p>
|
|
</app-confirm-dialog>
|
|
}
|
|
|
|
@if (showPasswordDialog() && passwordPromptServer()) {
|
|
<app-confirm-dialog
|
|
title="Password required"
|
|
confirmLabel="Join server"
|
|
cancelLabel="Cancel"
|
|
[widthClass]="'w-[420px] max-w-[92vw]'"
|
|
(confirmed)="confirmPasswordJoin()"
|
|
(cancelled)="closePasswordDialog()"
|
|
>
|
|
<div class="space-y-3">
|
|
<p>Enter the password to join {{ passwordPromptServer()!.name }}.</p>
|
|
|
|
<div>
|
|
<label
|
|
for="join-server-password"
|
|
class="mb-1 block text-xs font-medium uppercase tracking-wide text-muted-foreground"
|
|
>
|
|
Server password
|
|
</label>
|
|
<input
|
|
id="join-server-password"
|
|
type="password"
|
|
[(ngModel)]="joinPassword"
|
|
placeholder="Enter password"
|
|
class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
@if (joinPasswordError()) {
|
|
<p class="text-sm text-destructive">{{ joinPasswordError() }}</p>
|
|
}
|
|
</div>
|
|
</app-confirm-dialog>
|
|
}
|
|
|
|
<!-- Create Server Dialog -->
|
|
@if (showCreateDialog()) {
|
|
<div
|
|
class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
|
(click)="closeCreateDialog()"
|
|
(keydown.enter)="closeCreateDialog()"
|
|
(keydown.space)="closeCreateDialog()"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-label="Close create server dialog"
|
|
>
|
|
<div
|
|
class="bg-card border border-border rounded-lg p-6 w-full max-w-md m-4"
|
|
(click)="$event.stopPropagation()"
|
|
(keydown.enter)="$event.stopPropagation()"
|
|
(keydown.space)="$event.stopPropagation()"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
tabindex="-1"
|
|
>
|
|
<h2 class="text-xl font-semibold text-foreground mb-4">Create Server</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label
|
|
for="create-server-name"
|
|
class="block text-sm font-medium text-foreground mb-1"
|
|
>Server Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newServerName"
|
|
placeholder="My Awesome Server"
|
|
id="create-server-name"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-description"
|
|
class="block text-sm font-medium text-foreground mb-1"
|
|
>Description (optional)</label
|
|
>
|
|
<textarea
|
|
[(ngModel)]="newServerDescription"
|
|
placeholder="What's your server about?"
|
|
rows="3"
|
|
id="create-server-description"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary resize-none"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-topic"
|
|
class="block text-sm font-medium text-foreground mb-1"
|
|
>Topic (optional)</label
|
|
>
|
|
<input
|
|
type="text"
|
|
[(ngModel)]="newServerTopic"
|
|
placeholder="gaming, music, coding..."
|
|
id="create-server-topic"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-signal-endpoint"
|
|
class="block text-sm font-medium text-foreground mb-1"
|
|
>Signal Server Endpoint</label
|
|
>
|
|
<select
|
|
id="create-server-signal-endpoint"
|
|
[(ngModel)]="newServerSourceId"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
>
|
|
@for (endpoint of activeEndpoints(); track endpoint.id) {
|
|
<option [value]="endpoint.id">{{ endpoint.name }} ({{ endpoint.url }})</option>
|
|
}
|
|
</select>
|
|
<p class="mt-1 text-xs text-muted-foreground">This endpoint handles all signaling for this chat server.</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
[(ngModel)]="newServerPrivate"
|
|
id="private"
|
|
class="w-4 h-4 rounded border-border bg-secondary"
|
|
/>
|
|
<label
|
|
for="private"
|
|
class="text-sm text-foreground"
|
|
>Private server</label
|
|
>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="create-server-password"
|
|
class="block text-sm font-medium text-foreground mb-1"
|
|
>Password (optional)</label
|
|
>
|
|
<input
|
|
type="password"
|
|
[(ngModel)]="newServerPassword"
|
|
placeholder="Leave blank to allow joining without a password"
|
|
id="create-server-password"
|
|
class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
|
/>
|
|
<p class="mt-1 text-xs text-muted-foreground">Users who already joined keep access even if you change the password later.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 mt-6">
|
|
<button
|
|
(click)="closeCreateDialog()"
|
|
type="button"
|
|
class="flex-1 px-4 py-2 bg-secondary text-foreground rounded-lg hover:bg-secondary/80 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
(click)="createServer()"
|
|
[disabled]="!newServerName() || !newServerSourceId"
|
|
type="button"
|
|
class="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|