Skip to content

chore(UI): Properly indent menus #8617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SenkJu merged 1 commit into from
Jul 7, 2026
Merged

chore(UI): Properly indent menus #8617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 53 additions & 51 deletions src-theme/src/routes/menu/altmanager/AltManager.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,58 +116,60 @@
</script>

<DirectLoginModal bind:visible={directLoginModalVisible}/>

<AddAccountModal bind:visible={addAccountModalVisible}/>
<OptionBar>
<Search on:search={handleSearch}/>
<SwitchSetting title="Premium Only" bind:value={premiumOnly}/>
<SwitchSetting title="Favorites Only" bind:value={favoritesOnly}/>
<MultiSelect title="Account Type" options={["Mojang", "TheAltening"]} bind:values={accountTypes}/>
</OptionBar>

<MenuList sortable={accounts.length === renderedAccounts.length} elementCount={accounts.length}
on:sort={handleAccountSort}>
{#key accounts}
{#each renderedAccounts as account}
<MenuListItem
image={account.avatar}
title={account.username}
favorite={account.favorite}
on:dblclick={() => loginToAccount(account.id)}>
<svelte:fragment slot="subtitle">
<pre class="uuid">{account.uuid}</pre>
</svelte:fragment>

<svelte:fragment slot="tag">
<MenuListItemTag text={account.type}/>
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Delete" icon="trash" on:click={() => removeAccount(account.id)}/>
<MenuListItemButton title="Favorite" icon={account.favorite ? "favorite-filled" : "favorite" }
on:click={() => toggleFavorite(account.id, !account.favorite)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Login" icon="play" on:click={() => loginToAccount(account.id)}/>
</svelte:fragment>
</MenuListItem>
{/each}
{/key}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addAccountModalVisible = true}/>
<IconTextButton icon="icon-plane.svg" title="Direct" on:click={() => directLoginModalVisible = true}/>
<IconTextButton icon="icon-random.svg" disabled={renderedAccounts.length === 0} title="Random"
on:click={loginToRandomAccount}/>
<IconTextButton icon="icon-refresh.svg" title="Restore" on:click={restoreSession}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => deleteScreen()}/>
</ButtonContainer>
</BottomButtonWrapper>

<OptionBar>
<Search on:search={handleSearch}/>
<SwitchSetting title="Premium Only" bind:value={premiumOnly}/>
<SwitchSetting title="Favorites Only" bind:value={favoritesOnly}/>
<MultiSelect title="Account Type" options={["Mojang", "TheAltening"]} bind:values={accountTypes}/>
</OptionBar>

<MenuList sortable={accounts.length === renderedAccounts.length} elementCount={accounts.length}
on:sort={handleAccountSort}>
{#key accounts}
{#each renderedAccounts as account}
<MenuListItem
image={account.avatar}
title={account.username}
favorite={account.favorite}
on:dblclick={() => loginToAccount(account.id)}>
<svelte:fragment slot="subtitle">
<pre class="uuid">{account.uuid}</pre>
</svelte:fragment>

<svelte:fragment slot="tag">
<MenuListItemTag text={account.type}/>
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Delete" icon="trash" on:click={() => removeAccount(account.id)}/>
<MenuListItemButton title="Favorite" icon={account.favorite ? "favorite-filled" : "favorite" }
on:click={() => toggleFavorite(account.id, !account.favorite)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Login" icon="play" on:click={() => loginToAccount(account.id)}/>
</svelte:fragment>
</MenuListItem>
{/each}
{/key}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addAccountModalVisible = true}/>
<IconTextButton icon="icon-plane.svg" title="Direct" on:click={() => directLoginModalVisible = true}/>
<IconTextButton icon="icon-random.svg" disabled={renderedAccounts.length === 0} title="Random"
on:click={loginToRandomAccount}/>
<IconTextButton icon="icon-refresh.svg" title="Restore" on:click={restoreSession}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => deleteScreen()}/>
</ButtonContainer>
</BottomButtonWrapper>

<style lang="scss">
.uuid {
Expand Down
127 changes: 65 additions & 62 deletions src-theme/src/routes/menu/multiplayer/Multiplayer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,73 +166,76 @@
</script>

<AddServerModal bind:visible={addServerModalVisible} on:serverAdd={refreshServers}/>

{#if currentEditServer}
<EditServerModal bind:visible={editServerModalVisible} address={currentEditServer.address}
name={currentEditServer.name} on:serverEdit={refreshServers} id={currentEditServer.id}
resourcePackPolicy={currentEditServer.resourcePackPolicy}/>
{/if}

<DirectConnectModal bind:visible={directConnectModalVisible}/>
<OptionBar>
<Search on:search={handleSearch}/>

<SwitchSetting title="Online only" bind:value={onlineOnly}/>
<Divider/>
<SwitchSetting title="Auto Config" bind:value={autoConfig} on:change={updateAutoConfigState}/>
{#if spooferConfigurable}
<WrappedSetting bind:value={spooferConfigurable} on:change={updateSpooferSettings} path="multiplayer.spoofer"/>
{/if}
{#if clientInfo && clientInfo.viaFabricPlus}
<SingleSelect title="Version" value={selectedProtocol.name} options={protocols.map(p => p.name)}
on:change={changeProtocolVersion}/>
<ButtonSetting title="ViaFabricPlus" on:click={() => openScreen("viafabricplus_protocol_selection")}/>
{:else}
<ButtonSetting title="Install ViaFabricPlus" on:click={() => browse("VIAFABRICPLUS")}/>
{/if}
</OptionBar>

<MenuList sortable={renderedServers.length === servers.length} elementCount={servers.length}
on:sort={handleServerSort}>
{#key timesSorted}
{#each renderedServers as server}
<MenuListItem imageText={server.ping > 0 ? `${server.ping}ms` : null}
imageTextBackgroundColor={getPingColor(server.ping)}
image={server.ping < 0 || !server.icon

<OptionBar>
<Search on:search={handleSearch}/>

<SwitchSetting title="Online only" bind:value={onlineOnly}/>
<Divider/>
<SwitchSetting title="Auto Config" bind:value={autoConfig} on:change={updateAutoConfigState}/>
{#if spooferConfigurable}
<WrappedSetting bind:value={spooferConfigurable} on:change={updateSpooferSettings} path="multiplayer.spoofer"/>
{/if}
{#if clientInfo && clientInfo.viaFabricPlus}
<SingleSelect title="Version" value={selectedProtocol.name} options={protocols.map(p => p.name)}
on:change={changeProtocolVersion}/>
<ButtonSetting title="ViaFabricPlus" on:click={() => openScreen("viafabricplus_protocol_selection")}/>
{:else}
<ButtonSetting title="Install ViaFabricPlus" on:click={() => browse("VIAFABRICPLUS")}/>
{/if}
</OptionBar>

<MenuList sortable={renderedServers.length === servers.length} elementCount={servers.length}
on:sort={handleServerSort}>
{#key timesSorted}
{#each renderedServers as server}
<MenuListItem imageText={server.ping > 0 ? `${server.ping}ms` : null}
imageTextBackgroundColor={getPingColor(server.ping)}
image={server.ping < 0 || !server.icon
? `${REST_BASE}/api/v1/client/resource?id=minecraft:textures/misc/unknown_server.png`
:`data:image/png;base64,${server.icon}`}
title={server.name}
on:dblclick={() => connectToServer(server.address)}>
<TextComponent allowPreformatting={true} preFormattingMonospace={false} slot="subtitle"
fontSize={18}
textComponent={server.ping <= 0 ? "§CCan't connect to server" : server.label}/>

<svelte:fragment slot="tag">
{#if server.ping > 0}
<MenuListItemTag text="{server.players.online}/{server.players.max} Players"/>
<MenuListItemTag text={server.version}/>
{/if}
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Remove" icon="trash" on:click={() => removeServer(server.id)}/>
<MenuListItemButton title="Edit" icon="pen-2" on:click={() => editServer(server)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Join" icon="play" on:click={() => connectToServer(server.address)}/>
</svelte:fragment>
</MenuListItem>
{/each}
{/key}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addServerModalVisible = true}/>
<IconTextButton icon="icon-plane.svg" title="Direct" on:click={() => directConnectModalVisible = true}/>
<IconTextButton icon="icon-refresh.svg" title="Refresh" on:click={refreshServers}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => openScreen("title")}/>
</ButtonContainer>
</BottomButtonWrapper>
title={server.name}
on:dblclick={() => connectToServer(server.address)}>
<TextComponent allowPreformatting={true} preFormattingMonospace={false} slot="subtitle"
fontSize={18}
textComponent={server.ping <= 0 ? "§CCan't connect to server" : server.label}/>

<svelte:fragment slot="tag">
{#if server.ping > 0}
<MenuListItemTag text="{server.players.online}/{server.players.max} Players"/>
<MenuListItemTag text={server.version}/>
{/if}
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Remove" icon="trash" on:click={() => removeServer(server.id)}/>
<MenuListItemButton title="Edit" icon="pen-2" on:click={() => editServer(server)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Join" icon="play" on:click={() => connectToServer(server.address)}/>
</svelte:fragment>
</MenuListItem>
{/each}
{/key}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addServerModalVisible = true}/>
<IconTextButton icon="icon-plane.svg" title="Direct" on:click={() => directConnectModalVisible = true}/>
<IconTextButton icon="icon-refresh.svg" title="Refresh" on:click={refreshServers}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => openScreen("title")}/>
</ButtonContainer>
</BottomButtonWrapper>
106 changes: 54 additions & 52 deletions src-theme/src/routes/menu/proxymanager/ProxyManager.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,6 +173,7 @@
</script>

<AddProxyModal bind:visible={addProxyModalVisible}/>

{#if currentEditProxy}
<EditProxyModal bind:visible={editProxyModalVisible} id={currentEditProxy.id}
host={currentEditProxy.host}
Expand All @@ -183,55 +184,56 @@
password={currentEditProxy.credentials?.password ?? ""}
requiresAuthentication={currentEditProxy.credentials !== undefined}/>
{/if}
<OptionBar>
<Search on:search={handleSearch}/>
<SwitchSetting title="Favorites Only" bind:value={favoritesOnly}/>
<MultiSelect title="Country" options={allCountries} bind:values={countries}/>
<MultiSelect title="Type" options={["SOCKS5", "HTTP"]} bind:values={proxyTypes}/>
</OptionBar>

<MenuList sortable={false} on:sort={handleProxySort}>
{#each renderedProxies as proxy}
<MenuListItem
image="img/flags/{(proxy.ipInfo?.country ?? 'unknown').toLowerCase()}.svg"
title="{proxy.host}:{proxy.port}"
favorite={proxy.favorite}
on:dblclick={() => connectToProxy(proxy.id)}>
<svelte:fragment slot="subtitle">
<span class="subtitle">{proxy.ipInfo?.org ?? "Unknown"}</span>
</svelte:fragment>

<svelte:fragment slot="tag">
<MenuListItemTag text={convertCountryCode(proxy.ipInfo?.country)}/>
<MenuListItemTag text={proxy.type}/>
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Delete" icon="trash" on:click={() => removeProxy(proxy.id)}/>
<MenuListItemButton title="Check" icon="check" on:click={() => checkProxy(proxy.id)}/>
<MenuListItemButton title="Favorite" icon={proxy.favorite ? "favorite-filled" : "favorite" }
on:click={() => toggleFavorite(proxy.id, !proxy.favorite)}/>
<MenuListItemButton title="Edit" icon="pen-2" on:click={() => editProxy(proxy)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Connect" icon="play" on:click={() => connectToProxy(proxy.id)}/>
</svelte:fragment>
</MenuListItem>
{/each}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addProxyModalVisible = true}/>
<IconTextButton icon="icon-clipboard.svg" title="Add Clipboard" on:click={() => fromClipboard() } />
<IconTextButton icon="icon-random.svg" disabled={renderedProxies.length === 0} title="Random"
on:click={connectToRandomProxy}/>
<IconTextButton icon="icon-disconnect.svg" disabled={!isConnectedToProxy} title="Disconnect"
on:click={disconnectFromProxy}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => deleteScreen()}/>
</ButtonContainer>
</BottomButtonWrapper>

<OptionBar>
<Search on:search={handleSearch}/>
<SwitchSetting title="Favorites Only" bind:value={favoritesOnly}/>
<MultiSelect title="Country" options={allCountries} bind:values={countries}/>
<MultiSelect title="Type" options={["SOCKS5", "HTTP"]} bind:values={proxyTypes}/>
</OptionBar>

<MenuList sortable={false} on:sort={handleProxySort}>
{#each renderedProxies as proxy}
<MenuListItem
image="img/flags/{(proxy.ipInfo?.country ?? 'unknown').toLowerCase()}.svg"
title="{proxy.host}:{proxy.port}"
favorite={proxy.favorite}
on:dblclick={() => connectToProxy(proxy.id)}>
<svelte:fragment slot="subtitle">
<span class="subtitle">{proxy.ipInfo?.org ?? "Unknown"}</span>
</svelte:fragment>

<svelte:fragment slot="tag">
<MenuListItemTag text={convertCountryCode(proxy.ipInfo?.country)}/>
<MenuListItemTag text={proxy.type}/>
</svelte:fragment>

<svelte:fragment slot="active-visible">
<MenuListItemButton title="Delete" icon="trash" on:click={() => removeProxy(proxy.id)}/>
<MenuListItemButton title="Check" icon="check" on:click={() => checkProxy(proxy.id)}/>
<MenuListItemButton title="Favorite" icon={proxy.favorite ? "favorite-filled" : "favorite" }
on:click={() => toggleFavorite(proxy.id, !proxy.favorite)}/>
<MenuListItemButton title="Edit" icon="pen-2" on:click={() => editProxy(proxy)}/>
</svelte:fragment>

<svelte:fragment slot="always-visible">
<MenuListItemButton title="Connect" icon="play" on:click={() => connectToProxy(proxy.id)}/>
</svelte:fragment>
</MenuListItem>
{/each}
</MenuList>

<BottomButtonWrapper>
<ButtonContainer>
<IconTextButton icon="icon-plus-circle.svg" title="Add" on:click={() => addProxyModalVisible = true}/>
<IconTextButton icon="icon-clipboard.svg" title="Add Clipboard" on:click={() => fromClipboard() }/>
<IconTextButton icon="icon-random.svg" disabled={renderedProxies.length === 0} title="Random"
on:click={connectToRandomProxy}/>
<IconTextButton icon="icon-disconnect.svg" disabled={!isConnectedToProxy} title="Disconnect"
on:click={disconnectFromProxy}/>
</ButtonContainer>

<ButtonContainer>
<IconTextButton icon="icon-back.svg" title="Back" on:click={() => deleteScreen()}/>
</ButtonContainer>
</BottomButtonWrapper>
Loading