App mode mobile redesign (#9047)

Reworks the app mode display for mobile devices. Adds multiple bottom
tabs that can be swiped between.


![AnimateDiff_00005](https://github.com/user-attachments/assets/e1c928ff-dd52-4f4c-83a6-c351c4711e62)

To be handled in followup PRs
- Nicer error display
- Support for even smaller screens
- UX improvements for the 'Outputs' pane
  - Was postponed to minimize conflicts with non-mobile development.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9047-App-mode-mobile-redesign-30e6d73d365081388e4adea4df886522)
by [Unito](https://www.unito.io)

---------

Co-authored-by: GitHub Action <action@github.com>

src/components/common/DropdownItem.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { MenuItem } from 'primevue/menuitem'
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from 'reka-ui'
+import { useI18n } from 'vue-i18n'
+import { toValue } from 'vue'
+
+const { t } = useI18n()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
+</script>
+<template>
+  <DropdownMenuSeparator
+    v-if="item.separator"
+    class="h-[1px] bg-border-subtle m-1"
+  />
+  <DropdownMenuSub v-else-if="item.items">
+    <DropdownMenuSubTrigger
+      :class="itemClass"
+      :disabled="toValue(item.disabled) ?? !item.items?.length"
+    >
+      {{ item.label }}
+      <i class="ml-auto icon-[lucide--chevron-right]" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuSubContent
+        :class="contentClass"
+        :side-offset="2"
+        :align-offset="-5"
+      >
+        <DropdownItem
+          v-for="(subitem, index) in item.items"
+          :key="toValue(subitem.label) ?? index"
+          :item="subitem"
+          :item-class
+          :content-class
+        />
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+  <DropdownMenuItem
+    v-else
+    :class="itemClass"
+    :disabled="toValue(item.disabled) ?? !item.command"
+    @select="item.command?.({ originalEvent: $event, item })"
+  >
+    <i class="size-5" :class="item.icon" />
+    {{ item.label }}
+    <div
+      v-if="item.new"
+      class="ml-auto bg-primary-background rounded-full text-xxs font-bold px-1 flex leading-none items-center"
+      v-text="t('contextMenu.new')"
+    />
+  </DropdownMenuItem>
+</template>