From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
From: Modrinth Enhanced <patches@modrinth-enhanced.invalid>
Date: Sat, 19 Sep 2026 02:42:55 +0200
Subject: [PATCH] Show the running instance bar only while one is running

---
 .../src/components/ui/AppActionBar.vue        | 189 +++++++++---------
 1 file changed, 91 insertions(+), 98 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/AppActionBar.vue b/apps/app-frontend/src/components/ui/AppActionBar.vue
index eff399e..d4648a5 100644
--- a/apps/app-frontend/src/components/ui/AppActionBar.vue
+++ b/apps/app-frontend/src/components/ui/AppActionBar.vue
@@ -17,106 +17,103 @@
 			<span class="text-sm text-contrast"> {{ formatMessage(messages.offline) }} </span>
 		</div>
 		<AppUpdateButton />
+		<!-- Nothing running is worth no chip at all: it is there while an
+		     instance is, and out of the way the rest of the time. -->
 		<div
+			v-if="selectedProcess"
 			class="flex border-solid border-surface-5 text-sm font-medium items-center gap-2 py-1.5 px-3 rounded-xl border"
 		>
-			<template v-if="selectedProcess">
-				<OnlineIndicatorIcon />
-				<div class="text-contrast flex items-center gap-2">
-					<router-link
-						v-tooltip="formatMessage(messages.viewInstance)"
-						:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
-						class="hover:underline"
-					>
-						{{ selectedProcess.instance.name }}
-					</router-link>
-					<FloatingMenu
-						v-if="currentProcesses.length > 1"
-						placement="bottom"
-						@open="showInstances = true"
-						@close="showInstances = false"
+			<OnlineIndicatorIcon />
+			<div class="text-contrast flex items-center gap-2">
+				<router-link
+					v-tooltip="formatMessage(messages.viewInstance)"
+					:to="`/instance/${encodeURIComponent(selectedProcess.instance.id)}`"
+					class="hover:underline"
+				>
+					{{ selectedProcess.instance.name }}
+				</router-link>
+				<FloatingMenu
+					v-if="currentProcesses.length > 1"
+					placement="bottom"
+					@open="showInstances = true"
+					@close="showInstances = false"
+				>
+					<IconButton
+						v-tooltip="
+							showInstances
+								? formatMessage(messages.hideMoreRunningInstances)
+								: formatMessage(messages.showMoreRunningInstances)
+						"
+						class="!size-6"
+						type="quiet"
+						size="xs"
+						:label="
+							showInstances
+								? formatMessage(messages.hideMoreRunningInstances)
+								: formatMessage(messages.showMoreRunningInstances)
+						"
 					>
-						<IconButton
-							v-tooltip="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-							class="!size-6"
-							type="quiet"
-							size="xs"
-							:label="
-								showInstances
-									? formatMessage(messages.hideMoreRunningInstances)
-									: formatMessage(messages.showMoreRunningInstances)
-							"
-						>
-							<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
-						</IconButton>
-						<template #popper>
-							<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
-								<div
-									v-for="process in currentProcesses"
-									:key="process.uuid"
-									class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
+						<DropdownIcon :class="{ 'rotate-180': !!showInstances }" />
+					</IconButton>
+					<template #popper>
+						<div class="flex w-[20rem] max-h-[24rem] flex-col gap-2 overflow-auto">
+							<div
+								v-for="process in currentProcesses"
+								:key="process.uuid"
+								class="flex w-full items-center gap-2 rounded-xl bg-surface-4 p-2 text-sm"
+							>
+								<button
+									v-tooltip.left="
+										process.uuid === selectedProcess.uuid
+											? formatMessage(messages.primaryInstance)
+											: formatMessage(messages.makePrimaryInstance)
+									"
+									class="flex flex-grow items-center gap-2"
+									:class="{
+										'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
+									}"
+									:disabled="process.uuid === selectedProcess.uuid"
+									@click="selectProcess(process)"
+								>
+									<OnlineIndicatorIcon />
+									<span class="mr-auto text-contrast flex items-center gap-2">
+										{{ process.instance.name }}
+										<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
+									</span>
+								</button>
+								<button
+									v-tooltip="formatMessage(messages.stopInstance)"
+									class="active:scale-95 flex"
+									@click.stop="stop(process)"
+								>
+									<StopCircleIcon class="text-red size-5" />
+								</button>
+								<button
+									v-tooltip="formatMessage(messages.viewLogs)"
+									class="active:scale-95 flex"
+									@click.stop="goToTerminal(process.instance.id)"
 								>
-									<button
-										v-tooltip.left="
-											process.uuid === selectedProcess.uuid
-												? formatMessage(messages.primaryInstance)
-												: formatMessage(messages.makePrimaryInstance)
-										"
-										class="flex flex-grow items-center gap-2"
-										:class="{
-											'active:scale-95 transition-transform': process.uuid !== selectedProcess.uuid,
-										}"
-										:disabled="process.uuid === selectedProcess.uuid"
-										@click="selectProcess(process)"
-									>
-										<OnlineIndicatorIcon />
-										<span class="mr-auto text-contrast flex items-center gap-2">
-											{{ process.instance.name }}
-											<StarIcon v-if="process.uuid === selectedProcess.uuid" class="text-orange" />
-										</span>
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.stopInstance)"
-										class="active:scale-95 flex"
-										@click.stop="stop(process)"
-									>
-										<StopCircleIcon class="text-red size-5" />
-									</button>
-									<button
-										v-tooltip="formatMessage(messages.viewLogs)"
-										class="active:scale-95 flex"
-										@click.stop="goToTerminal(process.instance.id)"
-									>
-										<TerminalSquareIcon class="text-secondary size-5" />
-									</button>
-								</div>
+									<TerminalSquareIcon class="text-secondary size-5" />
+								</button>
 							</div>
-						</template>
-					</FloatingMenu>
-				</div>
-				<button
-					v-tooltip="formatMessage(messages.stopInstance)"
-					class="active:scale-95 flex"
-					@click="stop(selectedProcess)"
-				>
-					<StopCircleIcon class="text-red size-5" />
-				</button>
-				<button
-					v-tooltip="formatMessage(messages.viewLogs)"
-					class="active:scale-95 flex"
-					@click="goToTerminal()"
-				>
-					<TerminalSquareIcon class="text-secondary size-5" />
-				</button>
-			</template>
-			<template v-else>
-				<span class="size-2 rounded-full bg-secondary" />
-				<span class="text-secondary"> {{ formatMessage(messages.noInstancesRunning) }} </span>
-			</template>
+						</div>
+					</template>
+				</FloatingMenu>
+			</div>
+			<button
+				v-tooltip="formatMessage(messages.stopInstance)"
+				class="active:scale-95 flex"
+				@click="stop(selectedProcess)"
+			>
+				<StopCircleIcon class="text-red size-5" />
+			</button>
+			<button
+				v-tooltip="formatMessage(messages.viewLogs)"
+				class="active:scale-95 flex"
+				@click="goToTerminal()"
+			>
+				<TerminalSquareIcon class="text-secondary size-5" />
+			</button>
 		</div>
 	</div>
 </template>
@@ -202,10 +199,6 @@ const messages = defineMessages({
 		id: 'app.action-bar.view-logs',
 		defaultMessage: 'View logs',
 	},
-	noInstancesRunning: {
-		id: 'app.action-bar.no-instances-running',
-		defaultMessage: 'No instances running',
-	},
 	downloadingJava: {
 		id: 'app.action-bar.downloading-java',
 		defaultMessage: 'Downloading Java {version}',