feat: media picker and image removal

web/src/components/MediaToolbar.vue

@@ -2,12 +2,10 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import type { MediaCounts } from '@/composables/useMedia'
 import type { MediaControls, MediaFilter, MediaSort, MediaView } from '@/lib/mediaQuery'
+import { UNDERLINE_TAB_TRIGGER } from '@/lib/tabStyles'
 
 const SEARCH_DEBOUNCE_MS = 120
 
-const TAB_TRIGGER =
-	'h-9 px-0 py-0 data-[state=inactive]:text-toned in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:bottom-0 in-[[data-slot=list]:not(:has([data-slot=indicator]))]:data-[state=active]:after:h-0.5 max-md:h-11 max-md:text-[0.9375rem]'
-
 const SORT_LABELS: Record<MediaSort, string> = {
 	newest: 'Newest',
 	oldest: 'Oldest',
@@ -107,7 +105,7 @@ const sortItems = computed(() =>
 			class="order-2 md:order-none md:-mb-px md:flex-1"
 			:ui="{
 				list: 'gap-5 border-b-0 p-0 max-md:border-b',
-				trigger: TAB_TRIGGER,
+				trigger: UNDERLINE_TAB_TRIGGER,
 			}"
 		>
 			<template #default="{ item }">