App mode output history UX improvements (#9285)

## Summary
- replace reka ui list with normal elements due to rekas aggressive
autoscrolling and event blocking
- rework layout to fix in progress items outside scrollable area
- extract feedback component
- avoid scroll position changing when adding new items
- add left/right keyboard navigation

## Screenshots (if applicable)
Showing fixed active items at start
<img width="1292" height="101" alt="image"
src="https://github.com/user-attachments/assets/dcd3215c-ac09-4081-b483-8631d17ca6bf"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9285-App-mode-output-history-UX-improvements-3146d73d3650819a9f97edb41db975cc)
by [Unito](https://www.unito.io)

src/components/ui/TypeformPopoverButton.vue

@@ -5,8 +5,9 @@ import { useTemplateRef } from 'vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 
-defineProps<{
+const { active = true } = defineProps<{
   dataTfWidget: string
+  active?: boolean
 }>()
 
 const feedbackRef = useTemplateRef('feedbackRef')
@@ -40,6 +41,6 @@ whenever(feedbackRef, () => {
         <i class="icon-[lucide--circle-help] size-4" />
       </Button>
     </template>
-    <div ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
+    <div v-if="active" ref="feedbackRef" data-tf-auto-resize :data-tf-widget />
   </Popover>
 </template>