fix: app library post release (#7211)

* fix: fixed height on modal * fix: conditional auto padding being applied on user avatars * feat: allow ungrouped to be dragged * feat: add drag handle to resize num items in jump in * qa * feat: add context menu submenus * feat: hook up icon editing in sub menu * fix: breadcrumb and sidebar not matching * fix: bring back signal icon for ping and players online * feat: add compact mode for library * smaller checkmark * pnpm prepr * feat: bring back loader/game version sort * add loader symbols * refactor: compact mode with sync'd app settings * pnpm prepr * move loaders up * qa * feat: exclude loaders from randomizing
2026-08-25 00:55:25 +00:00 · 2026-08-20 19:30:42 +00:00
parent 52e055b20f
commit a85b8eed3f
41 changed files with 1727 additions and 435 deletions
@@ -8,7 +8,7 @@
 			circle: circle,
 			detecting: !hasDetectedCorners,
 			'no-shadow': noShadow,
-			padded: hasTransparentCorners,
+			padded: hasTransparentCorners && !circle && !disableConditionalIconPadding,
 			raised: raised,
 			pixelated: pixelated,
 		}"
@@ -72,6 +72,7 @@ const props = withDefaults(
 		size?: string
 		circle?: boolean
 		noShadow?: boolean
+		disableConditionalIconPadding?: boolean
 		loading?: 'eager' | 'lazy'
 		raised?: boolean
 		tintBy?: string | null
@@ -82,6 +83,7 @@ const props = withDefaults(
 		size: '2rem',
 		circle: false,
 		noShadow: false,
+		disableConditionalIconPadding: false,
 		loading: 'eager',
 		raised: false,
 		tintBy: null,
@@ -0,0 +1,97 @@
+import { CopyIcon, FolderOpenIcon, PlayIcon, SettingsIcon, TrashIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { fn } from 'storybook/test'
+import { nextTick, onMounted, ref } from 'vue'
+
+import ContextMenu from '../../../../../apps/app-frontend/src/components/ui/context-menu/index.vue'
+import type { ContextMenuOption } from '../../../../../apps/app-frontend/src/components/ui/context-menu/types'
+
+const options: ContextMenuOption[] = [
+	{ name: 'play', color: 'primary' },
+	{
+		name: 'copy',
+		children: [{ name: 'copy_name' }, { name: 'copy_path' }, { name: 'copy_id' }],
+	},
+	{ name: 'open_folder' },
+	{ type: 'divider' },
+	{ name: 'settings' },
+	{ name: 'delete', color: 'danger' },
+]
+
+const meta = {
+	title: 'App/Context Menu',
+	component: ContextMenu,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	args: {
+		onMenuClosed: fn(),
+		onOptionClicked: fn(),
+	},
+	render: (args) => ({
+		components: {
+			ContextMenu,
+			CopyIcon,
+			FolderOpenIcon,
+			PlayIcon,
+			SettingsIcon,
+			TrashIcon,
+		},
+		setup() {
+			const contextMenu = ref<InstanceType<typeof ContextMenu>>()
+			const target = ref<HTMLElement>()
+			const item = { id: 'storybook-instance', name: 'Storybook Instance' }
+
+			function openMenu(event: MouseEvent) {
+				contextMenu.value?.showMenu(event, item, options)
+			}
+
+			onMounted(() => {
+				nextTick(() => {
+					const rect = target.value?.getBoundingClientRect()
+					openMenu(
+						new MouseEvent('contextmenu', {
+							clientX: (rect?.left ?? 80) + 80,
+							clientY: (rect?.top ?? 80) + 80,
+						}),
+					)
+				})
+			})
+
+			return { args, contextMenu, openMenu, target }
+		},
+		template: /*html*/ `
+			<div
+				ref="target"
+				style="box-sizing: border-box; min-height: 100vh; padding: 5rem; background: var(--color-bg); color: var(--color-text-primary);"
+				@contextmenu.prevent.stop="openMenu"
+			>
+				<div style="max-width: 32rem; border: 1px dashed var(--color-divider); border-radius: var(--radius-lg); padding: 2rem;">
+					<p style="margin: 0; color: var(--color-text-secondary);">
+						Right-click anywhere in this panel to reopen the menu.
+					</p>
+				</div>
+
+				<ContextMenu
+					ref="contextMenu"
+					@menu-closed="args.onMenuClosed"
+					@option-clicked="args.onOptionClicked"
+				>
+					<template #play><PlayIcon /> Play</template>
+					<template #copy><CopyIcon /> Copy</template>
+					<template #copy_name><CopyIcon /> Copy name</template>
+					<template #copy_path><CopyIcon /> Copy path</template>
+					<template #copy_id> <CopyIcon /> Copy ID</template>
+					<template #open_folder><FolderOpenIcon /> Open folder</template>
+					<template #settings><SettingsIcon /> Settings</template>
+					<template #delete><TrashIcon /> Delete</template>
+				</ContextMenu>
+			</div>
+		`,
+	}),
+} satisfies Meta<typeof ContextMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}