picocrank 1.25.1 → 1.26.0

package/vue/components/NotificationPopup.vue

@@ -1,9 +1,34 @@
 <template>
-	<div
-		class="notification-popup notification show"
-		:class="popup.class"
-		role="status"
-	>
+	<div class="notification-popup" role="status">
+		<NotificationBlock
+			:type="notificationType"
+			:label="popup.label || ''"
+		>
+			<span class="notification-popup-content">
+				<span class="notification-popup-message">{{ popup.message }}</span>
+
+				<RouterLink
+					v-if="popup.linkTo && !isExternalLink"
+					:to="popup.linkTo"
+					class="notification-popup-link"
+					@click="emit('dismiss', popup.id)"
+				>
+					{{ popup.linkLabel || 'View' }}
+				</RouterLink>
+
+				<a
+					v-else-if="popup.linkTo && isExternalLink"
+					:href="popup.linkTo"
+					class="notification-popup-link"
+					target="_blank"
+					rel="noopener noreferrer"
+					@click="emit('dismiss', popup.id)"
+				>
+					{{ popup.linkLabel || 'View' }}
+				</a>
+			</span>
+		</NotificationBlock>
+
 		<button
 			type="button"
 			class="notification-popup-dismiss"
@@ -12,33 +37,6 @@
 		>
 			<HugeiconsIcon :icon="Cancel01Icon" width="1em" height="1em" />
 		</button>
-
-		<div class="notification-popup-body">
-			<p class="notification-popup-message">
-				<strong v-if="popup.label">{{ popup.label }}:</strong>
-				{{ popup.message }}
-			</p>
-
-			<RouterLink
-				v-if="popup.linkTo && !isExternalLink"
-				:to="popup.linkTo"
-				class="notification-popup-link"
-				@click="emit('dismiss', popup.id)"
-			>
-				{{ popup.linkLabel || 'View' }}
-			</RouterLink>
-
-			<a
-				v-else-if="popup.linkTo && isExternalLink"
-				:href="popup.linkTo"
-				class="notification-popup-link"
-				target="_blank"
-				rel="noopener noreferrer"
-				@click="emit('dismiss', popup.id)"
-			>
-				{{ popup.linkLabel || 'View' }}
-			</a>
-		</div>
 	</div>
 </template>
 
@@ -47,6 +45,7 @@ import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import { HugeiconsIcon } from '@hugeicons/vue'
 import { Cancel01Icon } from '@hugeicons/core-free-icons'
+import NotificationBlock from './NotificationBlock.vue'
 
 const props = defineProps({
 	popup: {
@@ -57,6 +56,8 @@ const props = defineProps({
 
 const emit = defineEmits(['dismiss'])
 
+const notificationType = computed(() => props.popup.class || 'info')
+
 const isExternalLink = computed(() =>
 	typeof props.popup.linkTo === 'string' && /^https?:\/\//.test(props.popup.linkTo)
 )
@@ -67,30 +68,32 @@ const isExternalLink = computed(() =>
 	position: relative;
 	width: min(22rem, calc(100vw - 2rem));
 	margin: 0;
-	padding: 0.75rem 2.25rem 0.75rem 0.75rem;
-	cursor: default;
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color) 60%, transparent);
 }
 
-.notification-popup-message {
+.notification-popup :deep(.notification) {
 	margin: 0;
 }
 
-.notification-popup-body {
+.notification-popup-content {
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
 
+.notification-popup-message {
+	display: block;
+}
+
 .notification-popup-link {
-	color: inherit;
+	color: var(--link-color);
 	font-weight: bold;
 	text-decoration: underline;
 	align-self: flex-start;
 }
 
 .notification-popup-link:hover {
-	opacity: 0.85;
+	text-decoration-thickness: 2px;
 }
 
 .notification-popup-dismiss {
@@ -106,13 +109,13 @@ const isExternalLink = computed(() =>
 	border: 0;
 	border-radius: 0.35rem;
 	background: transparent;
-	color: inherit;
+	color: var(--text-color);
 	cursor: pointer;
 	opacity: 0.75;
 }
 
 .notification-popup-dismiss:hover {
 	opacity: 1;
-	background: rgba(0, 0, 0, 0.08);
+	background: var(--hover-background-color);
 }
 </style>

package/vue/components/QuickSearch.vue

@@ -547,14 +547,14 @@ defineExpose({
   width: min(32rem, calc(100vw - 2rem));
   max-width: 32rem;
   padding: 0;
-  border: 1px solid var(--border-color, #d7d7d7);
-  background: var(--standout-bg-color, #fff);
+  border: 1px solid var(--quick-search-border);
+  background: var(--quick-search-dialog-bg);
   /* Dialog is rendered under <header>, so do not inherit header's white text */
-  color: var(--text-color, #334155);
+  color: var(--quick-search-dialog-fg);
 }
 
 .quick-search-dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--quick-search-backdrop);
 }
 
 .dialog-body {
@@ -573,23 +573,22 @@ defineExpose({
 .search-input {
   width: 100%;
   padding: 0.75em 2.25em 0.75em 0.75em;
-  border: 1px solid var(--border-color, #d7d7d7);
+  border: 1px solid var(--quick-search-border);
   border-radius: 0.4em;
   font-size: 1rem;
-  outline: none;
-  background-color: #fff;
-  color: var(--text-color, #334155);
+  background-color: var(--quick-search-input-bg);
+  color: var(--quick-search-input-fg);
 }
 
-.search-input:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.search-input:focus-visible {
+  outline: 2px solid var(--quick-search-focus-outline);
+  outline-offset: 2px;
 }
 
 .search-icon {
   position: absolute;
   right: 0.75rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   pointer-events: none;
   display: inline-flex;
 }
@@ -606,12 +605,13 @@ defineExpose({
 
 .search-status {
   margin: 0;
+  color: var(--quick-search-muted-fg);
 }
 
 .search-results {
   max-height: min(20rem, 50vh);
   overflow-y: auto;
-  border: 1px solid var(--border-color, #e1e5e9);
+  border: 1px solid var(--quick-search-border);
   border-radius: 0.4em;
 }
 
@@ -620,7 +620,7 @@ defineExpose({
   align-items: center;
   padding: 0.75rem 1rem;
   cursor: pointer;
-  border-bottom: 1px solid var(--border-color, #f3f4f6);
+  border-bottom: 1px solid var(--quick-search-border);
 }
 
 .search-result-item:last-child {
@@ -629,8 +629,8 @@ defineExpose({
 
 .search-result-item:hover,
 .search-result-item.active {
-  background-color: var(--hover-background-color);
-  color: var(--hover-text-color);
+  background-color: var(--quick-search-hover-bg);
+  color: var(--quick-search-hover-fg);
 }
 
 .result-content {
@@ -645,20 +645,20 @@ defineExpose({
 
 .result-description {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   margin-bottom: 0.25rem;
 }
 
 .result-category {
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--quick-search-subtle-fg);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .result-icon {
   margin-right: 0.75rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   flex-shrink: 0;
   display: inline-flex;
 }
@@ -668,7 +668,7 @@ defineExpose({
   flex-direction: column;
   align-items: center;
   padding: 1.5rem 1rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   text-align: center;
 }
 
@@ -682,35 +682,9 @@ defineExpose({
 }
 
 mark {
-  background-color: var(--karma-important, #fef3c7);
+  background-color: var(--quick-search-highlight-bg);
   color: inherit;
   padding: 0;
   border-radius: 2px;
 }
-
-html[data-theme="dark"] {
-  .quick-search-dialog {
-    color: #f9fafb;
-  }
-
-  .search-input {
-    background-color: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-
-  .search-icon,
-  .result-description,
-  .result-category,
-  .result-icon,
-  .no-results-content,
-  .search-status {
-    color: #9ca3af;
-  }
-
-  .search-input:focus {
-    border-color: #60a5fa;
-    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
-  }
-}
 </style>

package/vue/components/RadioGroup.vue

@@ -147,7 +147,7 @@ function select(option) {
 }
 
 .radio-group label:has(input:focus-visible) {
-	outline: 2px solid black;
+	outline: 2px solid var(--radio-group-focus-outline);
 	outline-offset: 2px;
 	z-index: 2;
 }
@@ -155,8 +155,8 @@ function select(option) {
 /* Beat Femtocrank's gray .radio-group focus/hover when the option is selected. */
 .radio-group label:has(input:checked):hover,
 .radio-group label:has(input:checked:focus-visible) {
-	background-color: #3a6f3a;
-	color: white;
+	background-color: var(--radio-group-checked-hover-bg);
+	color: var(--radio-group-checked-hover-fg);
 }
 
 .radio-group.disabled {
@@ -185,7 +185,7 @@ function select(option) {
 
 .radio-group label.disabled:has(input:focus-visible),
 .radio-group.disabled label:has(input:focus-visible) {
-	outline: 2px solid black;
+	outline: 2px solid var(--radio-group-focus-outline);
 	outline-offset: 2px;
 }
 </style>

package/vue/components/ReadOnlyTextArea.vue

@@ -144,7 +144,7 @@ async function copy() {
 		await navigator.clipboard.writeText(text)
 		markCopied()
 		emit('copy', text)
-	} catch (error) {
+	} catch (_error) {
 		try {
 			textareaRef.value?.select()
 			document.execCommand('copy')

package/vue/components/SidebarNavLink.vue

@@ -121,7 +121,7 @@ a.active {
 	width: 0.5rem;
 	height: 0.5rem;
 	border-radius: 50%;
-	background: var(--indicator-color, #dc3545);
+	background: var(--karma-bad-tint);
 	flex-shrink: 0;
 }
 
@@ -129,8 +129,8 @@ a.active {
 	min-width: 1.25rem;
 	padding: 0.1rem 0.4rem;
 	border-radius: 999px;
-	background: var(--indicator-color, #dc3545);
-	color: #fff;
+	background: var(--karma-bad-tint);
+	color: var(--text-color);
 	font-size: 0.75em;
 	font-weight: 600;
 	line-height: 1.2;

package/vue/components/Table.vue

@@ -37,27 +37,24 @@
 						v-if="showColumnOptionsButton"
 						class="actions table-column-options-header"
 					>
-						<div class="table-column-options-header-content">
-							<span v-if="activeLayoutLabel" class="table-layout-label">{{ activeLayoutLabel }}</span>
-							<span class="actions-menu-trigger">
-								<button
-									ref="columnOptionsButtonRef"
-									type="button"
-									aria-haspopup="dialog"
-									aria-label="Column options"
-									:aria-expanded="columnOptionsOpen ? 'true' : 'false'"
-									@click="openColumnOptions"
-								>
-									<HugeiconsIcon
-										:icon="LayoutGridIcon"
-										width="0.95em"
-										height="0.95em"
-										:strokeWidth="2"
-										aria-hidden="true"
-									/>
-								</button>
-							</span>
-						</div>
+						<span class="actions-menu-trigger">
+							<button
+								ref="columnOptionsButtonRef"
+								type="button"
+								aria-haspopup="dialog"
+								aria-label="Column options"
+								:aria-expanded="columnOptionsOpen ? 'true' : 'false'"
+								@click.stop="openColumnOptions"
+							>
+								<HugeiconsIcon
+									:icon="LayoutGridIcon"
+									width="0.95em"
+									height="0.95em"
+									:strokeWidth="2"
+									aria-hidden="true"
+								/>
+							</button>
+						</span>
 					</th>
 				</tr>
 			</thead>
@@ -71,7 +68,12 @@
 					<td
 						v-for="(header, cellIndex) in visibleHeaders"
 						:key="header.key || cellIndex"
-						:class="[cellClasses(header), header.class]"
+						:colspan="bodyColumnColspan(cellIndex) || undefined"
+						:class="[
+							cellClasses(header),
+							header.class,
+							isLastColumnWithOptions(cellIndex) ? 'table-last-column-with-options' : null,
+						]"
 					>
 						<slot
 							v-if="slots[`cell-${header.key}`]"
@@ -89,11 +91,6 @@
 							{{ row[header.key] }}
 						</span>
 					</td>
-					<td
-						v-if="showColumnOptionsButton"
-						class="actions table-column-options-cell"
-						aria-hidden="true"
-					/>
 				</tr>
 			</tbody>
 		</table>
@@ -135,6 +132,7 @@
 		:column-keys="resolvedColumnOrder"
 		:visible-keys="visibleColumnKeys"
 		:column-priorities="resolvedColumnPriorities"
+		:default-column-priorities="defaultColumnPriorities"
 		:filters="activeFilters"
 		:rows="props.data"
 		:table-id="props.tableId"
@@ -161,11 +159,9 @@ import TableColumnFilterPopover from './TableColumnFilterPopover.vue'
 import TableColumnOptionsPopover from './TableColumnOptionsPopover.vue'
 import { useLongPress } from '../composables/useLongPress.js'
 import {
-	applyFilters,
 	buildSelectOptions,
 	cloneColumnFilterEntries,
 	cloneFilters,
-	countActiveFilters,
 	isColumnFiltered,
 	isFilterEntryActive,
 	normalizeColumnFilterEntries,
@@ -186,6 +182,10 @@ import {
 	sanitizePresetState,
 	layoutStatesEqual,
 } from '../composables/tableColumnPresets.js'
+import {
+	defaultColumnPriorityForIndex,
+	isValidColPriority,
+} from '../composables/tableColumnPriorities.js'
 
 const DEFAULT_PAGE_SIZE = 10
 
@@ -231,6 +231,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	responsiveColumns: {
+		type: Boolean,
+		default: true,
+	},
 	stickyCols: {
 		type: Number,
 		default: null,
@@ -286,6 +290,8 @@ const emit = defineEmits([
 	'column-order-change',
 	'update:columnPriorities',
 	'column-priorities-change',
+	'update:layoutLabel',
+	'layout-label-change',
 ])
 
 const attrs = useAttrs()
@@ -368,6 +374,18 @@ const showColumnOptionsButton = computed(() =>
 	props.columnOptions && manageableColumnKeys.value.length > 0,
 )
 
+function isLastVisibleColumn(index) {
+	return index === visibleHeaders.value.length - 1
+}
+
+function isLastColumnWithOptions(index) {
+	return showColumnOptionsButton.value && isLastVisibleColumn(index)
+}
+
+function bodyColumnColspan(index) {
+	return isLastColumnWithOptions(index) ? 2 : null
+}
+
 function isHeaderHidden(header) {
 	if (header.hidden) {
 		return true
@@ -386,9 +404,13 @@ const visibleColumnKeys = computed(() =>
 		.map((header) => header.key),
 )
 
-function defaultColumnPriority(header) {
-	return isValidColPriority(header?.colPriority) ? header.colPriority : null
-}
+const hasHorizontalScroll = computed(() =>
+	props.horizontalScroll || (props.stickyCols >= 1 && props.stickyCols <= 3),
+)
+
+const useResponsiveColumns = computed(() =>
+	props.responsiveColumns && !hasHorizontalScroll.value,
+)
 
 function resolvedColumnPriority(header) {
 	if (!header?.key) {
@@ -404,9 +426,35 @@ function resolvedColumnPriority(header) {
 		return isValidColPriority(override) ? override : null
 	}
 
-	return defaultColumnPriority(header)
+	if (!useResponsiveColumns.value) {
+		return null
+	}
+
+	const index = visibleHeaders.value.findIndex((item) => item.key === header.key)
+	if (index < 0) {
+		return null
+	}
+
+	return defaultColumnPriorityForIndex(header, index, useResponsiveColumns.value)
 }
 
+const defaultColumnPriorities = computed(() => {
+	if (!useResponsiveColumns.value) {
+		return Object.fromEntries(
+			visibleHeaders.value
+				.filter((header) => isValidColPriority(header?.colPriority))
+				.map((header) => [header.key, header.colPriority]),
+		)
+	}
+
+	return Object.fromEntries(
+		visibleHeaders.value.flatMap((header, index) => {
+			const priority = defaultColumnPriorityForIndex(header, index, true)
+			return isValidColPriority(priority) ? [[header.key, priority]] : []
+		}),
+	)
+})
+
 const resolvedColumnPriorities = computed(() =>
 	Object.fromEntries(
 		manageableColumnKeys.value.map((key) => {
@@ -420,10 +468,6 @@ const hasColPriorities = computed(() =>
 	orderedHeaders.value.some((header) => isValidColPriority(resolvedColumnPriority(header))),
 )
 
-const hasHorizontalScroll = computed(() =>
-	props.horizontalScroll || (props.stickyCols >= 1 && props.stickyCols <= 3),
-)
-
 const needsTableWrapper = computed(() => hasColPriorities.value || hasHorizontalScroll.value)
 
 const tableWrapperClasses = computed(() => {
@@ -528,10 +572,6 @@ const queryParams = computed(() => {
 	return params
 })
 
-function isValidColPriority(priority) {
-	return Number.isInteger(priority) && priority >= 1 && priority <= 5
-}
-
 function colPriorityClass(priority) {
 	return isValidColPriority(priority) ? `col-priority-${priority}` : null
 }
@@ -1105,6 +1145,11 @@ const activeLayoutLabel = computed(() => {
 	return 'Custom'
 })
 
+function emitLayoutLabelChange(label) {
+	emit('update:layoutLabel', label)
+	emit('layout-label-change', label)
+}
+
 function loadDeveloperDefaults() {
 	setFilters({})
 	sortBy.value = null
@@ -1313,6 +1358,10 @@ watch(
 	{ deep: true },
 )
 
+watch(activeLayoutLabel, (label) => {
+	emitLayoutLabelChange(label)
+}, { immediate: true })
+
 watch(sortedItems, () => {
 	if (!isRemote.value) {
 		page.value = 1
@@ -1356,6 +1405,11 @@ onBeforeUnmount(() => {
 		clearTimeout(fetchDebounceTimer.value)
 	}
 })
+
+defineExpose({
+	layoutLabel: activeLayoutLabel,
+	loadDeveloperDefaults,
+})
 </script>
 
 <style scoped>
@@ -1414,7 +1468,7 @@ tbody tr.row-clickable {
 	min-height: 6rem;
 	padding: 2rem 1rem;
 	text-align: center;
-	color: var(--text-muted, #666);
+	color: var(--table-muted-fg);
 }
 
 .table-empty-state.loading {
@@ -1436,48 +1490,26 @@ tbody tr.row-clickable {
 	gap: 0.75rem;
 	padding: 2rem 1rem;
 	text-align: center;
-	color: var(--text-muted, #666);
+	color: var(--table-muted-fg);
 }
 
 .table-filtered-empty-message {
 	margin: 0;
 }
 
-th.table-column-options-header,
-td.table-column-options-cell {
+th.table-column-options-header {
 	padding-right: 1rem;
 	text-align: right;
 	vertical-align: middle;
-}
-
-th.table-column-options-header {
 	width: auto;
 	min-width: 2.5rem;
 	max-width: none;
 	white-space: nowrap;
 }
 
-td.table-column-options-cell {
-	width: 2.5rem;
-	min-width: 2.5rem;
-	max-width: 2.5rem;
-}
-
-.table-column-options-header-content {
-	display: inline-flex;
-	align-items: center;
-	justify-content: flex-end;
-	gap: 0.5rem;
-	width: 100%;
-}
-
-.table-layout-label {
-	font-size: 0.85rem;
-	color: var(--text-muted, #666);
-	max-width: 10rem;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+td.table-last-column-with-options {
+	padding-right: 1rem;
+	vertical-align: middle;
 }
 
 th.table-column-options-header .actions-menu-trigger {
@@ -1486,24 +1518,20 @@ th.table-column-options-header .actions-menu-trigger {
 	flex: 0 0 auto;
 }
 
-.table-scroll th.table-column-options-header,
-.table-scroll td.table-column-options-cell {
+.table-scroll {
+	min-width: 0;
+	max-width: 100%;
+	contain: inline-size;
+}
+
+.table-scroll th.table-column-options-header {
 	position: sticky;
 	right: 0;
-	z-index: 1;
+	z-index: 2;
 	background-color: var(--table-sticky-bg);
 	box-shadow: -1px 0 0 var(--border-color);
 }
 
-.table-scroll thead th.table-column-options-header {
-	z-index: 2;
-}
-
-.table-scroll table.row-hover tbody tr:hover td.table-column-options-cell,
-.table-scroll table.row-hover tbody tr:focus-within td.table-column-options-cell {
-	background-color: var(--table-sticky-hover-bg);
-}
-
 th.actions .actions-menu-trigger button {
 	display: inline-flex;
 	align-items: center;