Linear mode arrangement tweaks (#8853)

Planning to keep updates smaller and more contained in the interest of
collaboration and velocity
- The breadcrumb hamburger menu that provides workflow options is now
displayed in linear mode
- As part of this change, the reka-ui popover component now accepts
primvevue format MenuItems
- I prefer the format I had, but this makes transitioning stuff easier.
- The simplified linear history is moved to always be horizontal and
shown beneath previews.
- The label has been removed from the "Give Feedback" button on desktop
so it does not overlap
- The full side toolbar is displayed in linear mode
  - This is temporary,  but it gets the dead code pruned out now.
- Lays some groundwork for selecting an asset from the assets panel to
also select the item in the main linear panel
- The api `promptQueued` event can now optionally include a promptIds,
which list the ids for all jobs that were queued together as part of
that batch
- Update the max for the `number of generations` field to respect the
recently updated cloud limits

| Before | After |
| ------ | ----- |
| <img width="360" alt="before"
src="https://github.com/user-attachments/assets/e632679c-d727-4882-841b-09e99a2f81a4"
/> | <img width="360" alt="after"
src="https://github.com/user-attachments/assets/a9bcd809-c314-49bd-a479-2448d1a88456"/>|

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8853-Linear-mode-arrangement-tweaks-3066d73d365081589355ef753513900b)
by [Unito](https://www.unito.io)

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -1,6 +1,7 @@
 <template>
   <SidebarTabTemplate
     :title="isInFolderView ? '' : $t('sideToolbar.mediaAssets.title')"
+    v-bind="$attrs"
   >
     <template #alt-title>
       <div
@@ -272,6 +273,8 @@ const { activeJobsCount } = storeToRefs(queueStore)
 const executionStore = useExecutionStore()
 const settingStore = useSettingStore()
 
+const emit = defineEmits<{ assetSelected: [asset: AssetItem] }>()
+
 const activeTab = ref<'input' | 'output'>('output')
 const folderJobId = ref<string | null>(null)
 const folderExecutionTime = ref<number | undefined>(undefined)
@@ -530,6 +533,7 @@ watch(
 function handleAssetSelect(asset: AssetItem, assets?: AssetItem[]) {
   const assetList = assets ?? visibleAssets.value
   const index = assetList.findIndex((a) => a.id === asset.id)
+  emit('assetSelected', asset)
   handleAssetClick(asset, index, assetList)
 }
 

src/components/ui/Popover.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
 import {
   PopoverArrow,
   PopoverContent,
@@ -15,7 +16,7 @@ defineOptions({
 })
 
 defineProps<{
-  entries?: { label: string; action?: () => void; icon?: string }[][]
+  entries?: MenuItem[]
   icon?: string
   to?: string | HTMLElement
 }>()
@@ -40,33 +41,34 @@ defineProps<{
       >
         <slot>
           <div class="flex flex-col p-1">
-            <section
-              v-for="(entryGroup, index) in entries ?? []"
-              :key="index"
-              class="flex flex-col border-b-2 last:border-none border-border-subtle"
-            >
+            <template v-for="item in entries ?? []" :key="item.label">
               <div
-                v-for="{ label, action, icon } in entryGroup"
-                :key="label"
+                v-if="item.separator"
+                class="border-b w-full border-border-subtle"
+              />
+              <div
+                v-else
                 :class="
                   cn(
                     'flex flex-row gap-4 p-2 rounded-sm my-1',
-                    action &&
-                      'cursor-pointer hover:bg-secondary-background-hover'
+                    item.disabled
+                      ? 'opacity-50 pointer-events-none'
+                      : item.command &&
+                          'cursor-pointer hover:bg-secondary-background-hover'
                   )
                 "
                 @click="
-                  () => {
-                    if (!action) return
-                    action()
+                  (e) => {
+                    if (!item.command || item.disabled) return
+                    item.command({ originalEvent: e, item })
                     close()
                   }
                 "
               >
-                <i v-if="icon" :class="icon" />
-                {{ label }}
+                <i v-if="item.icon" :class="item.icon" />
+                {{ item.label }}
               </div>
-            </section>
+            </template>
           </div>
         </slot>
         <PopoverArrow class="fill-base-background stroke-border-subtle" />