Fixed server sorting using a best defaults guess. Restyled the server list view page, made ux a bit more intuitive and rm dropdown bs.

Author: nickheyer

web/discopanel/src/lib/stores/auth.ts

@@ -10,6 +10,7 @@ import {
 	ChangePasswordRequestSchema,
 	UseRecoveryKeyRequestSchema
 } from '$lib/proto/discopanel/v1/auth_pb';
+import * as _ from 'lodash-es';
 
 interface AuthState {
 	user: User | null;
@@ -152,7 +153,7 @@ function createAuthStore() {
 		},
 
 		async logout() {
-			let currentState: AuthState = get({ subscribe });
+			const currentState: AuthState = get({ subscribe });
 
 			try {
 				if (currentState.token) {
@@ -214,8 +215,8 @@ function createAuthStore() {
 				});
 				const response = await rpcClient.auth.changePassword(request);
 				return response;
-			} catch (error: any) {
-				throw new Error(error.message || 'Failed to change password');
+			} catch (error) {
+				throw new Error(_.get(error, 'message') || 'Failed to change password');
 			}
 		},
 

web/discopanel/src/lib/stores/servers.ts

@@ -51,4 +51,61 @@ export const runningServers = derived(
 export const stoppedServers = derived(
   serversStore,
   $servers => $servers.filter(server => server.status === ServerStatus.STOPPED)
+);
+
+function getTimestampMs(ts: { seconds: bigint } | undefined): number {
+  if (!ts) return 0;
+  return Number(ts.seconds) * 1000;
+}
+
+/**
+ * AUTO SORT PRIORITY:
+ * 1. Pin most recently created/updated server as #1
+ * 2. Running servers w/ players first (by player count desc)
+ * 3. Running servers wo/ players (by lastStarted desc)
+ * 4. Non-running servers (by updatedAt desc)
+ */
+export function sortServersByActivity(servers: Server[]): Server[] {
+  if (servers.length <= 1) return servers;
+
+  // Find the most recently created or updated server to pin
+  let pinnedIdx = 0;
+  let pinnedTime = 0;
+  for (let i = 0; i < servers.length; i++) {
+    const created = getTimestampMs(servers[i].createdAt);
+    const updated = getTimestampMs(servers[i].updatedAt);
+    const latest = Math.max(created, updated);
+    if (latest > pinnedTime) {
+      pinnedTime = latest;
+      pinnedIdx = i;
+    }
+  }
+
+  const pinned = servers[pinnedIdx];
+  const rest = servers.filter((_, i) => i !== pinnedIdx);
+
+  rest.sort((a, b) => {
+    const aRunning = a.status === ServerStatus.RUNNING ? 1 : 0;
+    const bRunning = b.status === ServerStatus.RUNNING ? 1 : 0;
+    // Running servers first
+    if (aRunning !== bRunning) return bRunning - aRunning;
+
+    // Both running: sort by players online desc
+    if (aRunning && bRunning) {
+      const playerDiff = (b.playersOnline || 0) - (a.playersOnline || 0);
+      if (playerDiff !== 0) return playerDiff;
+      // Tiebreak by lastStarted (most recent first)
+      return getTimestampMs(b.lastStarted) - getTimestampMs(a.lastStarted);
+    }
+
+    // Both not running: sort by updatedAt desc
+    return getTimestampMs(b.updatedAt) - getTimestampMs(a.updatedAt);
+  });
+
+  return [pinned, ...rest];
+}
+
+export const activitySortedServers = derived(
+  serversStore,
+  $servers => sortServersByActivity([...$servers])
 );

web/discopanel/src/routes/+layout.svelte

@@ -31,31 +31,31 @@
 		DropdownMenuTrigger
 	} from '$lib/components/ui/dropdown-menu';
 	import { get } from 'svelte/store';
-	import { serversStore, runningServers } from '$lib/stores/servers';
+	import { serversStore, runningServers, activitySortedServers } from '$lib/stores/servers';
 	import { authStore, currentUser, canAccessSettings, authEnabled } from '$lib/stores/auth';
 	import { onMount } from 'svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
 	import GlobalLoading from '$lib/components/global-loading.svelte';
 
-	import { Server, Home, Settings, Package, User, LogOut, LogIn, FileText, Sun, Moon } from '@lucide/svelte';
+	import { Server, Home, Settings, Package, User as UserIcon, LogOut, LogIn, FileText, Sun, Moon } from '@lucide/svelte';
 	import { toggleMode, mode } from 'mode-watcher';
-	import { ServerStatus } from '$lib/proto/discopanel/v1/common_pb';
+	import { ServerStatus, type User } from '$lib/proto/discopanel/v1/common_pb';
 
 	let { children } = $props();
 
-	let servers = $derived($serversStore);
+	let servers = $derived($activitySortedServers);
 	let runningCount = $derived($runningServers.length);
 	let user = $derived($currentUser);
 	let showSettingsNav = $derived($canAccessSettings);
 	let loading = $state(true);
 	let isAuthEnabled = $derived($authEnabled);
 
-	function getUserInitials(user: any) {
+	function getUserInitials(user: User) {
 		if (!user) return '';
 		return user.username.slice(0, 2).toUpperCase();
 	}
 
-	function getDisplayRole(user: any): string {
+	function getDisplayRole(user: User): string {
 		if (!user?.roles?.length) return 'No roles';
 		return user.roles[0];
 	}
@@ -215,7 +215,7 @@
 								<SidebarGroupLabel>Quick Access</SidebarGroupLabel>
 								<SidebarGroupContent>
 									<SidebarMenu>
-										{#each servers.slice(0, 5) as server}
+										{#each servers as server (server.id)}
 											<SidebarMenuItem>
 												<SidebarMenuButton isActive={page.url.pathname === `/servers/${server.id}`}>
 													{#snippet child({ props })}
@@ -278,7 +278,7 @@
 									</DropdownMenuLabel>
 									<DropdownMenuSeparator />
 									<DropdownMenuItem onclick={() => goto('/profile')}>
-										<User class="mr-2 h-4 w-4" />
+										<UserIcon class="mr-2 h-4 w-4" />
 										<span>Profile</span>
 									</DropdownMenuItem>
 									<DropdownMenuSeparator />

web/discopanel/src/routes/+page.svelte

@@ -16,7 +16,8 @@
 	} from '@lucide/svelte';
 	import { ServerStatus, type Server as ServerType } from '$lib/proto/discopanel/v1/common_pb';
 	import { rpcClient } from '$lib/api/rpc-client';
-	import { serversStore } from '$lib/stores/servers';
+	import { serversStore, sortServersByActivity } from '$lib/stores/servers';
+	import type { Timestamp } from '@bufbuild/protobuf/wkt';
 
 	// Dashboard data
 	let dashboardServers: ServerType[] = $state([]);
@@ -147,7 +148,7 @@
 
 
 
-	const formatUptime = (lastStarted: any) => {
+	const formatUptime = (lastStarted?: Timestamp) => {
 		if (!lastStarted) return 'Never';
 		const start = new Date(Number(lastStarted.seconds) * 1000);
 		const diff = currentTime.getTime() - start.getTime();
@@ -376,7 +377,7 @@
 					</div>
 				{:else}
 					<div class="space-y-3">
-						{#each dashboardServers.slice(0, 5) as server}
+						{#each sortServersByActivity([...dashboardServers]).slice(0, 5) as server (server.id)}
 							{@const StatusIcon = getStatusIcon(server.status)}
 							<div class="group flex items-center justify-between p-3 rounded-lg hover:bg-muted/50 transition-colors">
 								<div class="flex items-center gap-3 flex-1">
@@ -444,7 +445,7 @@
 					</div>
 				{:else}
 					<div class="space-y-3">
-						{#each recentActivity as activity, i}
+						{#each recentActivity as activity, i (activity)}
 							<div class="flex items-start gap-3 animate-in fade-in-50 slide-in-from-right-2" style="animation-delay: {300 + i * 50}ms">
 								<div class="mt-1">
 									{#if activity.status === ServerStatus.RUNNING}