From 989097f3920795fad6d9281a76b95c1be6618777 Mon Sep 17 00:00:00 2001
From: Maxim Lyubimov <52247631+mlyubimov@users.noreply.github.com>
Date: Tue, 31 Oct 2023 13:19:56 +0400
Subject: [PATCH] feature/refactor_apps_page (#44)

* refactor: Apps page on script setup

* refactor: Apps was converted to separate pages and redesigned for vue 3

* feat: Deleted old routes

---------

Co-authored-by: Maxim Lyubimov <m.lyubimov@flipperdevices.com>
---
 frontend/src/components/AppList.vue       |  308 ------
 frontend/src/components/AppPage.vue       |  443 --------
 frontend/src/components/InstalledApps.vue |  366 -------
 frontend/src/layouts/AppsLayout.vue       |  903 ++++++++++++++++
 frontend/src/pages/App.vue                |  455 ++++++++
 frontend/src/pages/Apps.vue               | 1198 +++++----------------
 frontend/src/pages/InstalledApps.vue      |  369 +++++++
 frontend/src/router/routes.js             |   12 +-
 8 files changed, 2005 insertions(+), 2049 deletions(-)
 delete mode 100644 frontend/src/components/AppList.vue
 delete mode 100644 frontend/src/components/AppPage.vue
 delete mode 100644 frontend/src/components/InstalledApps.vue
 create mode 100644 frontend/src/layouts/AppsLayout.vue
 create mode 100644 frontend/src/pages/App.vue
 create mode 100644 frontend/src/pages/InstalledApps.vue

diff --git a/frontend/src/components/AppList.vue b/frontend/src/components/AppList.vue
deleted file mode 100644
index ce7697f..0000000
--- a/frontend/src/components/AppList.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-  <div>
-    <template v-if="apps.length">
-      <div
-        class="row q-pr-md"
-        :class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
-      >
-        <q-list class="categories row" :class="$q.screen.width > 670 ? 'col-8' : 'justify-center'">
-          <div
-            :style="`opacity: ${currentCategory && currentCategory.name !== 'All apps' ? '0.5' : '1'}`"
-            style="background-color: #ebebeb; border-radius: 20px; padding: 4px 13px; cursor: pointer;"
-            class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
-            @click="currentCategory = null; $router.push('/apps')"
-          >
-            <span style="white-space: nowrap;">All apps</span>
-          </div>
-          <div
-            v-for="category in categories"
-            :key="category.name"
-            :style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
-            style="border-radius: 20px; padding: 4px 13px; cursor: pointer;"
-            class="row no-wrap items-center q-mr-md q-mb-md q-py-xs q-px-md"
-            @click="currentCategory = category;"
-          >
-            <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
-            <span style="white-space: nowrap;">{{ category.name }}</span>
-          </div>
-        </q-list>
-        <q-space v-if="$q.screen.width > 670"/>
-        <div>
-          <div class="row no-wrap justify-end text-grey-7">
-            <q-select
-              v-model="sortModel"
-              :options="sortOptions"
-              dense
-              standout="bg-primary text-white no-shadow"
-              rounded
-              style="min-width: fit-content; border-radius: 20px;"
-            />
-          </div>
-        </div>
-      </div>
-
-      <q-list class="apps full-width q-mt-sm">
-        <div
-          v-for="app in filteredSortedApps"
-          :key="app.name"
-          class="flex justify-center q-pa-none card-container"
-          style="width: fit-content"
-          :class="action.type && action.id !== app.id ? 'disabled' : ''"
-        >
-          <div
-            style="width: calc(256px + 4px + 8px)"
-            class="app-card"
-            @click="appClicked(app)"
-          >
-            <div class="screenshot q-mb-sm">
-              <img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
-            </div>
-
-            <div class="flex justify-between no-wrap" style="padding: 0 4px">
-              <div class="text-h6 ellipsis" style="flex-grow: 1;flex-basis: 179px;margin-right: 3px;">{{ app.currentVersion.name }}</div>
-              <div style="font-size: 18px; line-height: 18px;">
-                <span>
-                  <q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
-                  <span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
-                </span>
-              </div>
-            </div>
-
-            <div
-              style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
-              :style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
-            >
-              <span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
-                {{ app.currentVersion.shortDescription }}
-              </span>
-              <div class="col-shrink" style="width: 80px;">
-                <template v-if="action.type && action.id === app.id">
-                  <q-linear-progress
-                    :value="action.progress"
-                    size="32px"
-                    :color="actionColors.bar"
-                    :track-color="actionColors.track"
-                    style="width: 80px; border-radius: 5px;"
-                  >
-                    <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
-                      <div
-                        class="app-progress-label"
-                        style="font-size: 28px;"
-                      >{{ `${action.progress * 100}%` }}</div>
-                    </div>
-                  </q-linear-progress>
-                </template>
-                <q-btn
-                  v-else
-                  flat
-                  dense
-                  color="white"
-                  style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-                  :label="app.actionButton?.text"
-                  class="fit no-shadow text-pixelated"
-                  :class="app.actionButton?.class"
-                  @click="handleAction(app, app.actionButton?.text)"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </q-list>
-    </template>
-    <template v-else>
-      <div class="column items-center">
-        <q-spinner
-          color="primary"
-          size="3em"
-          class="q-mb-md"
-        ></q-spinner>
-        <p>Loading apps...</p>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-// import semver from 'semver'
-
-export default defineComponent({
-  name: 'AppList',
-  props: {
-    categories: Array,
-    apps: Array,
-    initialCategory: Object,
-    flipper: Object,
-    connected: Boolean,
-    rpcActive: Boolean,
-    action: Object
-  },
-
-  emit: ['showNotif', 'openApp', 'action', 'batchUpdate'],
-
-  setup (props, { emit }) {
-    onMounted(() => {
-      currentCategory.value = props.initialCategory
-    })
-
-    const initialCategoryRef = computed(() => props.initialCategory)
-
-    watch(initialCategoryRef, (newCategory) => {
-      currentCategory.value = newCategory
-    })
-
-    const filteredSortedApps = computed(() => {
-      let filtered
-      if (currentCategory.value) {
-        filtered = props.apps.filter(app => app.categoryId === currentCategory.value.id)
-      } else {
-        filtered = props.apps
-      }
-
-      let sortBy = '', direction = -1
-      switch (sortModel.value) {
-        case 'New Updates':
-          sortBy = 'updatedAt'
-          break
-        case 'Old Updates':
-          sortBy = 'updatedAt'
-          direction = 1
-          break
-        case 'New Releases':
-          sortBy = 'createdAt'
-          break
-        case 'Old Releases':
-          sortBy = 'createdAt'
-          direction = 1
-          break
-      }
-
-      return filtered.sort((a, b) => {
-        if (a[sortBy] >= b[sortBy]) {
-          return 1 * direction
-        }
-        return -1 * direction
-      })
-    })
-
-    const actionColors = computed(() => {
-      switch (props.action.type) {
-        case 'delete':
-          return {
-            bar: 'negative',
-            track: 'deep-orange-5'
-          }
-        case 'install':
-          return {
-            bar: 'primary',
-            track: 'orange-6'
-          }
-        default:
-          return {
-            bar: 'positive',
-            track: 'green-6'
-          }
-      }
-    })
-
-    const currentCategory = ref(null)
-    const sortOptions = [
-      'New Updates',
-      'New Releases',
-      'Old Updates',
-      'Old Releases'
-    ]
-    const sortModel = ref('New Updates')
-    const actionType = ref(null)
-
-    const appClicked = (app) => {
-      if (props.action.type) {
-        return
-      }
-      emit('openApp', app)
-    }
-
-    const handleAction = (app, value) => {
-      if (value === 'Installed') {
-        actionType.value = ''
-      } else {
-        actionType.value = value.toLowerCase()
-      }
-      emit('action', app, actionType.value)
-    }
-
-    return {
-      filteredSortedApps,
-      actionColors,
-
-      currentCategory,
-      sortOptions,
-      sortModel,
-      actionType,
-
-      appClicked,
-      handleAction
-    }
-  }
-})
-</script>
-
-<style lang="sass" scoped>
-.apps
-  display: grid
-  grid-template-columns: repeat(4, 1fr)
-  justify-items: center
-
-  .card-container
-    padding: 12px
-    border-radius: 14px
-    transition-duration: 300ms
-    cursor: pointer
-    &:hover
-      box-shadow: 0 1px 11px rgb(0 0 0 / 13%), 0 3px 6px rgb(0 0 0 / 5%), 0 3px 6px -2px rgb(0 0 0 / 8%)
-  .app-card
-    display: flex
-    flex-direction: column
-    justify-content: center
-    padding: 0
-    border-radius: 3px
-    .screenshot
-      display: flex
-      justify-content: center
-      padding: 4px
-      background-color: $primary
-      border: 2px solid #000000
-      border-radius: 6px
-      img
-        image-rendering: pixelated
-    .text-h6
-      line-height: 1.75rem
-    .desc
-      font-size: 12px
-      line-height: 15px
-
-@media (max-width: 1340px)
-  .apps
-    grid-template-columns: repeat(3, 1fr)
-
-@media (max-width: 1032px)
-  .apps
-    grid-template-columns: repeat(2, 1fr)
-
-@media (max-width: 875px)
-  .categories
-    grid-template-columns: repeat(4, 1fr)
-
-@media (max-width: 670px)
-  .categories
-    grid-template-columns: repeat(3, 1fr)
-  .apps
-    display: flex
-    flex-direction: column
-    flex-wrap: nowrap
-    align-items: center
-
-@media (max-width: 545px)
-  .categories
-    grid-template-columns: repeat(2, 1fr)
-</style>
diff --git a/frontend/src/components/AppPage.vue b/frontend/src/components/AppPage.vue
deleted file mode 100644
index 57b24e7..0000000
--- a/frontend/src/components/AppPage.vue
+++ /dev/null
@@ -1,443 +0,0 @@
-<template>
-  <div class="full-width q-pl-md">
-    <div class="row items-center q-mb-lg" :class="$q.screen.width > 670 ? 'no-wrap' : ''">
-      <div class="app-icon q-mr-md">
-        <q-img :src="app.currentVersion.iconUri" style="image-rendering: pixelated;"/>
-      </div>
-      <div :class="$q.screen.width > 350 ? 'q-mr-md' : ''">
-        <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
-        <div class="row q-gutter-md">
-          <div
-            :style="`background-color: #${category.color};`"
-            style="border-radius: 20px; padding: 4px 13px; width: fit-content;"
-            class="row no-wrap items-center q-py-xs q-px-md"
-          >
-            <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
-            <span style="white-space: nowrap;">{{ category.name }}</span>
-          </div>
-          <div class="flex items-center q-ml-md">
-            <span class="text-grey-7">Version:</span>
-            <b class="q-ml-xs">{{ app.currentVersion.version }}</b>
-          </div>
-          <div class="flex items-center q-ml-md">
-            <span class="text-grey-7" v-if="!!app.currentVersion.currentBuild">Size:</span>
-            <b class="q-ml-xs">{{ bytesToSize(app.currentVersion.currentBuild.metadata.length) }}</b>
-          </div>
-
-          <template v-if="currentStatusHint">
-            <div>
-              <q-chip
-                :color="statusHints[currentStatusHint].color"
-                :icon="statusHints[currentStatusHint].icon"
-                :label="statusHints[currentStatusHint].text"
-                class="q-my-none"
-                :clickable="!!statusHints[currentStatusHint].dialog"
-                @click="$emit('showDialog', statusHints[currentStatusHint].dialog)"
-              >
-              <q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
-                {{ statusHints[currentStatusHint].tooltip }}
-              </q-tooltip>
-              </q-chip>
-            </div>
-          </template>
-        </div>
-      </div>
-
-      <q-space />
-
-      <template v-if="action.type">
-        <q-linear-progress
-          :value="action.progress"
-          size="56px"
-          :color="actionColors.bar"
-          :track-color="actionColors.track"
-          :class="$q.screen.width > 670 ? 'q-mr-md' : 'q-my-md full-width'"
-          style="width: 188px; border-radius: 10px;"
-        >
-          <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 11px;">
-            <div
-              class="app-progress-label"
-              style="font-size: 40px;"
-            >{{ `${action.progress * 100}%` }}</div>
-          </div>
-        </q-linear-progress>
-      </template>
-      <template v-else>
-        <q-btn
-          v-if="app.isInstalled"
-          flat
-          color="negative"
-          icon="svguse:common-icons.svg#delete"
-          class="q-mr-md"
-          style="font-size: 19px;padding: 10px 12px;border-radius: 10px;border: 2px solid currentColor;"
-          @click="flags.deleteConfirmationDialog = true"
-        />
-        <q-btn
-          flat
-          color="white"
-          style="font-size: 22px; padding: 0 60px; border-radius: 10px;"
-          :label="app.actionButton.text"
-          class="no-shadow text-pixelated"
-          :class="app.actionButton.class + ' ' + ($q.screen.width > 670 ? 'q-mr-md' : 'q-my-md full-width')"
-          @click="handleAction(app.actionButton.text)"
-        />
-      </template>
-    </div>
-    <div id="carousel" class="flex">
-      <q-btn
-        flat
-        dense
-        @click="animateScroll('backward')"
-        icon="mdi-chevron-left"
-      />
-      <q-scroll-area
-        ref="scrollAreaRef"
-        :thumb-style="{ display: 'none' }"
-        style="height: 140px; max-width: 1280px; width: calc(100% - 65px);"
-        class="q-my-md no-pointer-events"
-      >
-        <div class="row no-wrap">
-          <div
-            v-for="screenshot in app.currentVersion.screenshots"
-            :key="screenshot"
-            class="q-mx-xs screenshot"
-          >
-            <img :src="screenshot" style="width: 248px" />
-          </div>
-        </div>
-      </q-scroll-area>
-      <q-btn
-        flat
-        dense
-        @click="animateScroll('forward')"
-        icon="mdi-chevron-right"
-      />
-    </div>
-    <div class="app-content column q-pr-md">
-      <div class="text-h5 q-my-sm">Description</div>
-      <q-markdown
-        no-heading-anchor-links
-        no-html
-        no-image
-        no-link
-        no-linkify
-        no-typographer
-        :src="app.currentVersion.description"
-      ></q-markdown>
-      <div class="text-h5 q-my-sm">Changelog</div>
-      <q-markdown
-        no-heading-anchor-links
-        no-html
-        no-image
-        no-link
-        no-linkify
-        no-typographer
-        :src="app.currentVersion.changelog"
-      ></q-markdown>
-      <div class="text-h6 q-my-sm">Developer</div>
-      <p>
-        <a class="text-grey-7" :href="app.currentVersion.links.manifestUri" style="text-decoration: none;">
-          <q-icon name="mdi-github" color="grey-7" size="20px"/>
-          <span class="q-ml-xs" style="text-decoration: underline;">Manifest</span>
-        </a>
-        <br />
-        <a class="text-grey-7" :href="app.currentVersion.links.sourceCode.uri" style="text-decoration: none;">
-          <q-icon name="mdi-github" color="grey-7" size="20px"/>
-          <span class="q-ml-xs" style="text-decoration: underline;">Repository</span>
-        </a>
-      </p>
-    </div>
-    <q-btn
-      no-caps
-      outline
-      color="negative"
-      icon="mdi-alert-circle-outline"
-      label="Report app"
-      class="q-mt-lg"
-      @click="flags.reportDialog = true"
-    />
-
-    <q-dialog v-model="flags.noFreeSpaceDialog">
-      <q-card class="dialog">
-        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="svguse:common-icons.svg#fw-conflict-icon" size="64px" />
-          <div class="text-h6 q-my-sm">No Free Space</div>
-          <p>There is no empty space to install this application.<br />Use archive to delete needless files.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="Open Archive"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.deleteConfirmationDialog">
-      <q-card class="dialog" style="min-width: 300px;">
-        <q-card-section class="q-pb-none">
-          <div class="text-h6">Delete this app?</div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none q-my-md text-center">
-          <div class="flex no-wrap items-center">
-            <div class="app-icon q-mr-md">
-              <q-img :src="app.currentVersion.iconUri" width="50px" style="image-rendering: pixelated;"/>
-            </div>
-            <div class="column items-start">
-              <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
-              <div class="text-grey-7"><b>v{{ app.currentVersion.version }}</b></div>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="right">
-          <q-btn
-            flat
-            text-color="dark"
-            class="q-mr-md"
-            label="Cancel"
-            v-close-popup
-          ></q-btn>
-          <q-btn
-            outline
-            color="negative"
-            label="Delete"
-            v-close-popup
-            @click="handleAction('delete')"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.reportDialog">
-      <q-card class="dialog" style="min-width: 300px;">
-        <q-card-section class="q-pb-none">
-          <div class="text-h6">Report app</div>
-        </q-card-section>
-
-        <q-card-section>
-          <q-select v-model="report.type" :options="[ 'bug', 'report' ]" label="What do you want to sumbit?" />
-        </q-card-section>
-
-        <q-card-section v-if="report.type === 'bug'">
-          Sorry, we don't provide support for third-party apps.<br />
-          You can file an issue on Github or contact the app developer.
-        </q-card-section>
-        <q-card-section v-if="report.type === 'report'">
-          <q-input
-            v-model="report.description"
-            placeholder="Describe your problem"
-            autogrow
-          />
-          <div v-if="flags.reportSubmitted" class="text-positive q-mt-md">We received your report. Thank you for the feedback!</div>
-        </q-card-section>
-
-        <q-card-section align="right">
-          <q-btn
-            flat
-            text-color="dark"
-            class="q-mr-md"
-            label="Cancel"
-            v-close-popup
-          ></q-btn>
-          <q-btn
-            v-if="!report.type || report.type === 'report'"
-            outline
-            color="primary"
-            label="Send"
-            :disabled="flags.reportSubmitted || !report.description"
-            @click="sendReport"
-          ></q-btn>
-          <q-btn
-            v-if="report.type === 'bug'"
-            outline
-            color="primary"
-            label="View on Github"
-            v-close-popup
-            :href="app.currentVersion.links.manifestUri"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-import { bytesToSize, submitAppReport } from '../util/util'
-
-export default defineComponent({
-  name: 'AppPage',
-  props: {
-    categories: Array,
-    app: Object,
-    flipper: Object,
-    connected: Boolean,
-    rpcActive: Boolean,
-    sdk: Object,
-    action: Object,
-    progress: Number
-  },
-
-  setup () {
-    return {
-      flags: ref({
-        noFreeSpaceDialog: false,
-        deleteConfirmationDialog: false,
-        reportDialog: false,
-        reportSubmitted: false
-      }),
-      category: ref({}),
-      screenshotWidth: 256 + 4 + 8 + 8,
-      position: ref(0),
-      scrollAreaRef: ref(null),
-      currentStatusHint: ref(null),
-      statusHints: ref({
-        READY: {
-          text: 'Runs on latest firmware release',
-          icon: 'mdi-check-circle-outline',
-          color: 'light-green-2'
-        },
-        BUILD_RUNNING: {
-          text: 'App is rebuilding',
-          icon: 'mdi-alert-circle-outline',
-          color: 'yellow-2',
-          tooltip: 'This may take some time, come back later'
-        },
-        FLIPPER_OUTDATED: {
-          text: 'Flipper firmware is outdated',
-          icon: 'mdi-alert-circle-outline',
-          color: 'deep-orange-2',
-          dialog: 'outdatedFirmwareDialog'
-        },
-        UNSUPPORTED_APPLICATION: {
-          text: 'Outdated app',
-          icon: 'mdi-alert-circle-outline',
-          color: 'deep-orange-2',
-          dialog: 'outdatedAppDialog'
-        },
-        UNSUPPORTED_SDK: {
-          text: 'Unsupported SDK',
-          icon: 'mdi-alert-circle-outline',
-          color: 'deep-orange-2',
-          dialog: 'outdatedFirmwareDialog'
-        }
-      }),
-      report: ref({
-        type: '',
-        description: ''
-      })
-    }
-  },
-
-  computed: {
-    actionColors () {
-      switch (this.action.type) {
-        case 'delete':
-          return {
-            bar: 'negative',
-            track: 'deep-orange-5'
-          }
-        case 'install':
-          return {
-            bar: 'primary',
-            track: 'orange-6'
-          }
-        default:
-          return {
-            bar: 'positive',
-            track: 'green-6'
-          }
-      }
-    }
-  },
-
-  methods: {
-    setCategory () {
-      this.category = this.categories.find(category => category.id === this.app.categoryId)
-    },
-
-    animateScroll (direction) {
-      const carousel = document.querySelector('#carousel')
-      const width = carousel.clientWidth - 2 * 32
-      if (direction === 'forward') {
-        this.position = this.position + this.screenshotWidth
-        if (this.position > width) {
-          this.position = width + this.screenshotWidth
-        }
-      } else if (direction === 'backward') {
-        if (this.position > width) {
-          this.position = Math.round((width + this.screenshotWidth) / this.screenshotWidth) * this.screenshotWidth
-        }
-        this.position = this.position - this.screenshotWidth
-        if (this.position < 0) {
-          this.position = 0
-        }
-      }
-      this.scrollAreaRef.setScrollPosition('horizontal', this.position, 300)
-    },
-
-    handleAction (value) {
-      if (value === 'Installed') {
-        this.actionType = ''
-      } else {
-        this.actionType = value.toLowerCase()
-      }
-      this.$emit('action', this.app, this.actionType)
-    },
-
-    bytesToSize: bytesToSize,
-
-    async sendReport () {
-      await submitAppReport(this.app.id, { description: this.report.description, description_type: this.report.type })
-      this.flags.reportSubmitted = true
-    },
-
-    start () {
-      const status = this.app.currentVersion.status
-      if (this.connected && status === 'READY') {
-        this.currentStatusHint = null
-      } else {
-        this.currentStatusHint = status
-      }
-      this.setCategory()
-    }
-  },
-
-  mounted () {
-    this.start()
-  },
-
-  updated () {
-    this.start()
-  }
-})
-</script>
-
-<style lang="sass" scoped>
-.app-icon
-  width: 70px
-  padding: 10px
-  border: 1px solid #dbdbdb
-  border-radius: 10px
-
-.screenshot
-  width: calc(256px + 4px + 8px)
-  display: flex
-  justify-content: center
-  padding: 4px
-  background-color: $primary
-  border: 2px solid #000000
-  border-radius: 6px
-  img
-    image-rendering: pixelated
-
-// Dialogs
-.dialog-close-btn
-  position: absolute
-  top: 0.5rem
-  right: 0.5rem
-</style>
diff --git a/frontend/src/components/InstalledApps.vue b/frontend/src/components/InstalledApps.vue
deleted file mode 100644
index d3cf859..0000000
--- a/frontend/src/components/InstalledApps.vue
+++ /dev/null
@@ -1,366 +0,0 @@
-<template>
-  <div class="column full-width items-end">
-    <div v-if="updatableApps.length" style="width: 140px">
-      <template v-if="batch.totalCount">
-        <q-linear-progress
-          :value="batch.doneCount / batch.totalCount + action.progress / batch.totalCount"
-          size="32px"
-          :color="actionColors.bar"
-          :track-color="actionColors.track"
-          style="border-radius: 5px;"
-        >
-          <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
-            <div
-              class="app-progress-label"
-              style="font-size: 28px;"
-            >{{ `${batch.doneCount} / ${batch.totalCount}` }}</div>
-          </div>
-        </q-linear-progress>
-      </template>
-      <q-btn
-        v-else
-        flat
-        dense
-        color="white"
-        style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-        label="Update all"
-        class="fit no-shadow text-pixelated bg-positive"
-        @click="this.$emit('batchUpdate', updatableApps);"
-      >
-        <div class="install-all-badge">{{ updatableApps.length }}</div>
-      </q-btn>
-    </div>
-
-    <div v-if="batch.failed.length" class="text-negative">
-      Update failed for
-      <span v-for="app, index in batch.failed" :key="app.id">"{{ app.currentVersion.name }}"<span v-if="batch.failed[index + 1]">, </span></span>
-    </div>
-
-    <div class="column full-width" :class="batch.totalCount ? 'disabled' : ''">
-      <div
-        v-for="app in updatableApps"
-        :key="app.currentVersion.name"
-        class="flex no-wrap items-center q-my-md"
-        :class="action.type === 'delete' && action.id === app.id ? 'disabled' : ''"
-      >
-        <div class="flex no-wrap items-center cursor-pointer" @click="appClicked(app)">
-          <div class="app-icon q-mr-md">
-            <q-img :src="app.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
-          </div>
-          <div class="col-10">
-            <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
-            <div class="text-grey-7" style="margin-right: 80px;">{{ app.currentVersion.shortDescription }}</div>
-          </div>
-        </div>
-
-        <q-space />
-
-        <div class="column items-end q-ml-md">
-          <span class="text-grey-7">Version:</span>
-          <b>{{ app.installedVersion.version }}</b>
-        </div>
-        <div class="q-ml-md" style="width: 80px;">
-          <template v-if="action.type && action.id === app.id">
-            <q-linear-progress
-              :value="action.progress"
-              size="32px"
-              :color="actionColors.bar"
-              :track-color="actionColors.track"
-              style="width: 80px; border-radius: 5px;"
-              class="q-ml-xs"
-            >
-              <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
-                <div
-                  class="app-progress-label"
-                  style="font-size: 28px;"
-                >{{ `${action.progress * 100}%` }}</div>
-              </div>
-            </q-linear-progress>
-          </template>
-          <q-btn
-            v-else
-            flat
-            dense
-            color="white"
-            style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-            label="Update"
-            class="fit no-shadow text-pixelated bg-positive"
-            @click="handleAction(app, 'update')"
-          />
-        </div>
-        <q-btn
-          flat
-          round
-          dense
-          color="negative"
-          icon="svguse:common-icons.svg#delete"
-          class="q-ml-md"
-          @click="appToDelete = app; flags.deleteConfirmationDialog = true"
-        />
-      </div>
-
-      <q-separator v-if="updatableApps.length && upToDateApps.length" class="q-my-lg" />
-
-      <div
-        v-for="app in upToDateApps"
-        :key="app.currentVersion.name"
-        class="flex no-wrap items-center q-my-md"
-        :class="action.type === 'delete' && action.id === app.id ? 'disabled' : ''"
-      >
-        <div class="flex no-wrap items-center cursor-pointer" @click="appClicked(app)">
-          <div class="app-icon q-mr-md">
-            <q-img :src="app.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
-          </div>
-          <div class="col-10">
-            <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
-            <div class="text-grey-7" style="margin-right: 80px;">{{ app.currentVersion.shortDescription }}</div>
-          </div>
-        </div>
-
-        <q-space />
-
-        <div class="column items-end q-ml-md">
-          <span class="text-grey-7">Version:</span>
-          <b>{{ app.currentVersion.version }}</b>
-        </div>
-        <div class="q-ml-md" style="width: 80px;">
-          <q-btn
-            flat
-            dense
-            color="white"
-            style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-            label="Installed"
-            class="fit no-shadow text-pixelated bg-grey-6"
-          />
-        </div>
-        <q-btn
-          flat
-          round
-          dense
-          color="negative"
-          icon="svguse:common-icons.svg#delete"
-          class="q-ml-md"
-          @click="appToDelete = app; flags.deleteConfirmationDialog = true"
-        />
-      </div>
-
-      <div
-        v-for="app in unsupportedApps"
-        :key="app.name"
-        class="flex no-wrap items-center q-my-md"
-        :class="action.type === 'delete' && action.id === app.id ? 'disabled' : ''"
-      >
-        <div class="flex no-wrap items-center cursor-pointer" @click="$router.push(`/apps/${app.id}`)">
-          <div class="app-icon q-mr-md">
-            <q-img :src="`data:image/png;base64,${app.icon}`" style="image-rendering: pixelated; width: 38px"/>
-          </div>
-          <div class="col-10">
-            <div class="flex flex-center">
-              <div class="text-h6 q-mr-sm" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.name }}</div>
-              <q-chip color="deep-orange-2" icon="mdi-alert-circle-outline" label="Outdated app" size="12px" dense class="q-px-sm"/>
-            </div>
-            <div class="text-grey-7">{{ app.installedVersion.shortDescription }}</div>
-          </div>
-        </div>
-
-        <q-space />
-
-        <div class="column items-end q-ml-md">
-          <span v-if="app.installedVersion.version" class="text-grey-7">Version:</span>
-          <b>{{ app.installedVersion.version }}</b>
-        </div>
-        <div class="q-ml-md" style="width: 80px;">
-          <q-btn
-            flat
-            dense
-            color="white"
-            style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
-            label="Installed"
-            class="fit no-shadow text-pixelated bg-grey-6"
-          />
-        </div>
-        <q-btn
-          flat
-          round
-          dense
-          color="negative"
-          icon="svguse:common-icons.svg#delete"
-          class="q-ml-md"
-          @click="appToDelete = app; flags.deleteConfirmationDialog = true"
-        />
-      </div>
-    </div>
-
-    <q-dialog v-model="flags.deleteConfirmationDialog">
-      <q-card class="dialog" style="min-width: 300px;">
-        <q-card-section class="q-pb-none">
-          <div class="text-h6">Delete this app?</div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none q-my-md text-center">
-          <div class="flex no-wrap items-center">
-            <div class="app-icon q-mr-md">
-              <template v-if="appToDelete.currentVersion">
-                <q-img :src="appToDelete.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
-              </template>
-              <template v-else>
-                <q-img :src="`data:image/png;base64,${appToDelete.icon}`" style="image-rendering: pixelated; width: 38px"/>
-              </template>
-            </div>
-            <div class="column items-start">
-              <template v-if="appToDelete.currentVersion">
-                <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ appToDelete.currentVersion.name }}</div>
-                <div class="text-grey-7"><b>v{{ appToDelete.currentVersion.version }}</b></div>
-              </template>
-              <template v-else>
-                <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ appToDelete.name }}</div>
-                <div class="text-grey-7"><b>v{{ appToDelete.installedVersion.version }}</b></div>
-              </template>
-            </div>
-          </div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="right">
-          <q-btn
-            flat
-            text-color="dark"
-            class="q-mr-md"
-            label="Cancel"
-            v-close-popup
-          ></q-btn>
-          <q-btn
-            outline
-            color="negative"
-            label="Delete"
-            v-close-popup
-            @click="handleAction(appToDelete, 'delete')"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue'
-// import semver from 'semver'
-
-export default defineComponent({
-  name: 'InstalledApps',
-  props: {
-    apps: Array,
-    flipper: Object,
-    installedApps: Array,
-    sdk: Object,
-    action: Object,
-    batch: Object
-  },
-
-  setup () {
-    return {
-      flags: ref({
-        deleteConfirmationDialog: false
-      }),
-      appToDelete: ref(null),
-      actionType: ref('')
-    }
-  },
-
-  computed: {
-    updatableApps () {
-      return this.apps.filter(app => {
-        if (app.isInstalled === true && app.installedVersion && app.currentVersion.status === 'READY') {
-          if (this.sdk.api && app.installedVersion.api !== this.sdk.api) {
-            return true
-          }
-          if (app.installedVersion.isOutdated) {
-            return true
-          }
-        }
-        return false
-      })
-    },
-
-    upToDateApps () {
-      return this.apps.filter(app => {
-        if (app.isInstalled === true && app.installedVersion) {
-          if (this.sdk.api && app.installedVersion.api !== this.sdk.api) {
-            return false
-          }
-          if (!app.installedVersion.isOutdated && app.currentVersion.status === 'READY') {
-            return true
-          }
-        }
-        return false
-      })
-    },
-
-    unsupportedApps () {
-      return this.installedApps.filter(installedApp => {
-        if (!this.apps.find(app => app.id === installedApp.id)) {
-          return true
-        }
-        return false
-      })
-    },
-
-    actionColors () {
-      switch (this.action.type) {
-        case 'delete':
-          return {
-            bar: 'negative',
-            track: 'deep-orange-5'
-          }
-        case 'install':
-          return {
-            bar: 'primary',
-            track: 'orange-6'
-          }
-        default:
-          return {
-            bar: 'positive',
-            track: 'green-6'
-          }
-      }
-    }
-  },
-
-  methods: {
-    appClicked (app) {
-      if (this.action.type) {
-        return
-      }
-      this.$emit('openApp', app)
-    },
-
-    handleAction (app, value) {
-      if (value === 'Installed') {
-        this.actionType = ''
-      } else {
-        this.actionType = value.toLowerCase()
-      }
-      this.$emit('action', app, this.actionType)
-    }
-  }
-})
-</script>
-
-<style lang="sass" scoped>
-.app-icon
-  width: 60px
-  height: 60px
-  padding: 10px
-  border: 1px solid #dbdbdb
-  border-radius: 10px
-
-.install-all-badge
-  position: relative
-  top: -1px
-  margin-left: 10px
-  padding: 3px 4px 1px 4px
-  font-size: 15px
-  line-height: 13px
-  background: #ffffffb3
-  color: $positive
-  border-radius: 3px
-</style>
diff --git a/frontend/src/layouts/AppsLayout.vue b/frontend/src/layouts/AppsLayout.vue
new file mode 100644
index 0000000..02c282b
--- /dev/null
+++ b/frontend/src/layouts/AppsLayout.vue
@@ -0,0 +1,903 @@
+<template>
+  <q-layout
+    view="hHr LpR lFf"
+    class="column items-center q-py-lg full-width"
+    :style="$q.screen.width >= 404 ? 'padding: 24px 26px; max-width: 1284px' : 'padding: 24px 6px'"
+  >
+    <q-page-container
+      class="full-width"
+    >
+      <div
+        class="apps-navbar row justify-end items-center full-width q-mb-xl"
+        :class="action.type ? 'disabled' : ''"
+      >
+        <q-icon
+          v-if="currentApp || flags.installedPage"
+          name="mdi-chevron-left"
+          size="56px"
+          class="cursor-pointer q-mr-md"
+          @click="flags.installedPage = false; router.push({ name: 'Apps' })"
+        ></q-icon>
+        <q-icon
+          v-else
+          name="svguse:common-icons.svg#apps"
+          size="56px"
+          class="q-mr-md"
+        ></q-icon>
+        <div class="text-h4 q-mr-lg">Apps</div>
+        <q-space />
+        <div
+          class="col-grow"
+          :style="$q.screen.width <= 353 ? 'margin-top: 16px; width: 100%' : 'max-width: 300px; min-width: 140px; width: 100%; margin: 0.6rem 0;'"
+        >
+          <SearchBar
+            :sdk="sdk"
+            @setCategory="setCategory"
+            @openApp="openApp"
+          />
+        </div>
+        <div class="q-ml-md" :style="$q.screen.width <= 365 ? 'margin-top: 16px' : ''">
+          <div>
+            <q-btn
+              flat
+              no-caps
+              dense
+              :color="flags.installedPage ? 'primary' : 'black'"
+              style="font-weight: 400"
+              icon="svguse:common-icons.svg#installed"
+              :stack="$q.screen.width <= 365"
+              @click="toggleInstalled"
+              label="Installed"
+            >
+              <q-badge
+                v-if="$q.screen.width > 365 && updatableAppsAmount > 0"
+                color="positive"
+                floating
+                class="outdated-badge"
+              >{{ updatableAppsAmount }}</q-badge>
+            </q-btn>
+          </div>
+          <div class="q-ml-md">
+            <q-btn
+              flat
+              no-caps
+              dense
+              color="black"
+              style="font-weight: 400"
+              icon="mdi-github"
+              label="Contribute"
+              :stack="$q.screen.width <= 365"
+              href="https://github.com/flipperdevices/flipper-application-catalog"
+            />
+          </div>
+        </div>
+      </div>
+      <router-view
+        :flipper="props.flipper"
+        :rpcActive="props.rpcActive"
+        :connected="props.connected"
+        :info="props.info"
+        :installFromFile="props.installFromFile"
+        :passedFile="props.fileToPass"
+        :categories="categories"
+        :app="currentApp"
+        :apps="apps"
+        :installedApps="installedApps"
+        :initialCategory="initialCategory"
+        :sdk="sdk"
+        :action="action"
+        :batch="batch"
+        @setRpcStatus="setRpcStatus"
+        @setInfo="setInfo"
+        @update="onUpdateStage"
+        @openFileIn="openFileIn"
+        @log="log"
+        @connect="connect"
+        @action="handleAction"
+        @openApp="openApp"
+        @batchUpdate="batchUpdate"
+        @showNotif="passNotif"
+        @showDialog="$event => flags[$event] = true"
+      />
+      <q-dialog v-model="flags.outdatedFirmwareDialogPersistent" persistent>
+        <q-card class="dialog">
+          <!--<q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>-->
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="mdi-alert-circle" color="negative" size="64px" />
+            <div class="text-h6 q-my-sm">Outdated Firmware Version</div>
+            <p>Firmware version on your Flipper is not supported.<br />Click the button below to update your device.</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="Update"
+              @click="$router.push('/')"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.outdatedFirmwareDialog">
+        <q-card class="dialog">
+          <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="mdi-alert-circle" color="negative" size="64px" />
+            <div class="text-h6 q-my-sm">Outdated Firmware Version</div>
+            <p>Firmware version on your Flipper does not support this app.<br />Click the button below to update your device.</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="Update"
+              @click="$router.push('/')"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.outdatedAppDialog">
+        <q-card class="dialog">
+          <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="mdi-alert-circle" color="negative" size="64px" />
+            <div class="text-h6 q-my-sm">Outdated app</div>
+            <p>Contact the developer to request further app support.</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="View on GitHub"
+              :href="currentApp.currentVersion.links.manifestUri"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.connectFlipperDialog">
+        <q-card class="dialog">
+          <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="mdi-alert-circle" color="primary" size="64px" />
+            <div class="text-h6 q-my-sm">Flipper disconnected</div>
+            <p>Plug in your Flipper and click the button below.</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="Connect"
+              @click="emit('connect')"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.mobileAppDialog">
+        <q-card class="dialog">
+          <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="mdi-alert-circle" color="primary" size="64px" />
+            <div class="text-h6 q-my-sm">Apps don't work in mobile browsers</div>
+            <p>Mobile browsers can't connect to Flipper, meaning you won't be able to install apps.</p>
+            <p>Get the official mobile app – it has the same features!</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="Download app"
+              href="https://flpr.app"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup>
+import { onMounted, defineProps, defineEmits, ref, computed, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { fetchCategories, fetchAppsShort, fetchAppById, fetchAppFap, fetchAppsVersions } from 'util/util'
+import asyncSleep from 'simple-async-sleep'
+import SearchBar from 'components/SearchBar.vue'
+
+const props = defineProps({
+  flipper: Object,
+  rpcActive: Boolean,
+  connected: Boolean,
+  info: Object,
+  installFromFile: Boolean,
+  fileToPass: Object
+})
+
+const emit = defineEmits(['setRpcStatus', 'setInfo', 'update', 'openFileIn', 'showNotif', 'log', 'connect'])
+
+const router = useRouter()
+const route = useRoute()
+
+const $q = useQuasar()
+const componentName = 'Apps'
+
+onMounted(() => {
+  start()
+  if ($q.platform.is.mobile) {
+    flags.value.mobileAppDialog = true
+  }
+})
+
+const flags = ref({
+  restarting: false,
+  rpcActive: false,
+  rpcToggling: false,
+  installedPage: false,
+  outdatedFirmwareDialogPersistent: false,
+  outdatedFirmwareDialog: false,
+  outdatedAppDialog: false,
+  connectFlipperDialog: false,
+  mobileAppDialog: false,
+  loadingInitial: true
+})
+
+const initialCategory = ref(null)
+const currentApp = ref(null)
+const apps = ref([])
+const installedApps = ref([])
+const categories = ref([])
+const action = ref({
+  type: '',
+  progress: 0,
+  id: ''
+})
+const batch = ref({
+  totalCount: 0,
+  doneCount: 0,
+  failed: []
+})
+const sdk = ref({
+  target: null,
+  api: null
+})
+
+const updatableAppsAmount = computed(() => {
+  return apps.value.filter(app => {
+    if (app.isInstalled === true && app.installedVersion && app.currentVersion.status === 'READY') {
+      if (sdk.value.api && app.installedVersion.api !== sdk.value.api) {
+        return true
+      }
+      if (app.installedVersion.isOutdated) {
+        return true
+      }
+    }
+    return false
+  }).length
+})
+
+const flipperReady = computed(() => flags.value.rpcActive && props.info !== null && props.info.doneReading)
+
+const handleAction = (app, actionType) => {
+  if (!props.connected) {
+    action.value.type = actionType
+    flags.value.connectFlipperDialog = true
+    setTimeout(() => {
+      action.value.type = ''
+    }, 300)
+    return
+  }
+  if (!actionType) {
+    return
+  }
+  action.value.type = actionType
+  action.value.progress = 0
+  action.value.id = app.id
+
+  switch (action.value.type) {
+    case 'install':
+      return installApp(app)
+    case 'update':
+      return updateApp(app)
+    case 'delete':
+      return deleteApp(app)
+  }
+}
+
+const installApp = async (app) => {
+  const paths = {
+    appDir: `/ext/apps/${categories.value.find(e => e.id === app.categoryId).name}`,
+    manifestDir: '/ext/apps_manifests',
+    tempDir: '/ext/.tmp/lab/'
+  }
+  await ensureCategoryPaths()
+
+  // fetch fap
+  const fap = await fetchAppFap({
+    versionId: app.currentVersion.id,
+    target: `f${props.info.firmware.target}`,
+    api: `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
+  }).catch(error => {
+    emit('showNotif', {
+      message: error.toString(),
+      color: 'negative'
+    })
+    emit('log', {
+      level: 'error',
+      message: `${componentName}: Installing app '${app.name}' (${app.alias}): ${error}`
+    })
+  })
+  if (!fap) {
+    action.value.type = ''
+    action.value.progress = 0
+    return
+  }
+  action.value.progress = 0.33
+  await asyncSleep(300)
+  emit('log', {
+    level: 'debug',
+    message: `${componentName}: Installing app '${app.name}' (${app.alias}): fetched .fap`
+  })
+
+  // generate manifest
+  function urlContentToDataUri (url) {
+    return fetch(url)
+      .then(response => response.blob())
+      .then(blob => new Promise(resolve => {
+        const reader = new FileReader()
+        reader.onload = function () { resolve(this.result) }
+        reader.readAsDataURL(blob)
+      }))
+  }
+  const dataUri = await urlContentToDataUri(app.currentVersion.iconUri)
+  const base64Icon = dataUri.split(',')[1]
+  const manifestText = `Filetype: Flipper Application Installation Manifest\r\nVersion: 1\r\nFull Name: ${app.currentVersion.name}\r\nIcon: ${base64Icon}\r\nVersion Build API: ${props.info.firmware.api.major}.${props.info.firmware.api.minor}\r\nUID: ${app.id}\r\nVersion UID: ${app.currentVersion.id}\r\nPath: ${paths.appDir}/${app.alias}.fap`
+  const manifestFile = new TextEncoder().encode(manifestText)
+  action.value.progress = 0.45
+  await asyncSleep(300)
+
+  // upload manifest to temp
+  await props.flipper.RPC('storageWrite', { path: `${paths.tempDir}/${app.id}.fim`, buffer: manifestFile })
+    .then(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: Installing app '${app.name}' (${app.alias}): uploaded manifest (temp)`
+      })
+    })
+    .catch(error => rpcErrorHandler(error, 'storageWrite'))
+  action.value.progress = 0.5
+  await asyncSleep(300)
+
+  // upload fap to temp
+  await props.flipper.RPC('storageWrite', { path: `${paths.tempDir}/${app.id}.fap`, buffer: fap })
+    .then(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: Installing app '${app.name}' (${app.alias}): uploaded .fap (temp)`
+      })
+    })
+    .catch(error => rpcErrorHandler(error, 'storageWrite'))
+  action.value.progress = 0.75
+  await asyncSleep(300)
+
+  // move manifest and fap
+  let dirList = await props.flipper.RPC('storageList', { path: paths.manifestDir })
+    .catch(error => rpcErrorHandler(error, 'storageList'))
+  const oldManifest = dirList.find(e => e.name === `${app.alias}.fim`)
+  if (oldManifest) {
+    await props.flipper.RPC('storageRemove', { path: `${paths.manifestDir}/${app.alias}.fim` })
+      .then(() => {
+        emit('log', {
+          level: 'debug',
+          message: `${componentName}: Installing app '${app.name}' (${app.alias}): removed old manifest`
+        })
+      })
+      .catch(error => rpcErrorHandler(error, 'storageRemove'))
+  }
+
+  await props.flipper.RPC('storageRename', { oldPath: `${paths.tempDir}/${app.id}.fim`, newPath: `${paths.manifestDir}/${app.alias}.fim` })
+    .then(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: Installing app '${app.name}' (${app.alias}): moved new manifest`
+      })
+    })
+    .catch(error => rpcErrorHandler(error, 'storageRename'))
+  action.value.progress = 0.8
+  await asyncSleep(300)
+
+  dirList = await props.flipper.RPC('storageList', { path: paths.appDir })
+    .catch(error => rpcErrorHandler(error, 'storageList'))
+  const oldFap = dirList.find(e => e.name === `${app.alias}.fap`)
+  if (oldFap) {
+    await props.flipper.RPC('storageRemove', { path: `${paths.appDir}/${app.alias}.fap` })
+      .then(() => {
+        emit('log', {
+          level: 'debug',
+          message: `${componentName}: Installing app '${app.name}' (${app.alias}): removed old .fap`
+        })
+      })
+      .catch(error => rpcErrorHandler(error, 'storageRemove'))
+  }
+
+  await props.flipper.RPC('storageRename', { oldPath: `${paths.tempDir}/${app.id}.fap`, newPath: `${paths.appDir}/${app.alias}.fap` })
+    .then(() => {
+      emit('log', {
+        level: 'debug',
+        message: `${componentName}: Installing app '${app.name}' (${app.alias}): moved new .fap`
+      })
+    })
+    .catch(error => rpcErrorHandler(error, 'storageRename'))
+  action.value.progress = 1
+  await asyncSleep(300)
+
+  // post-install
+  await updateInstalledApps()
+
+  action.value.type = ''
+  action.value.progress = 0
+}
+
+const updateApp = async (app) => {
+  return installApp(app)
+}
+
+const deleteApp = async (app) => {
+  const paths = {
+    appDir: '',
+    manifestDir: '/ext/apps_manifests'
+  }
+  if (app.categoryId) {
+    paths.appDir = `/ext/apps/${categories.value.find(e => e.id === app.categoryId).name}`
+  } else {
+    paths.appDir = app.path.slice(0, app.path.lastIndexOf('/'))
+    app.alias = app.path.slice(app.path.lastIndexOf('/') + 1, -4)
+  }
+
+  await ensureCategoryPaths()
+
+  // remove .fap
+  let dirList = await props.flipper.RPC('storageList', { path: paths.appDir })
+    .catch(error => rpcErrorHandler(error, 'storageList'))
+  const fap = dirList.find(e => e.name === `${app.alias}.fap`)
+  if (fap) {
+    await props.flipper.RPC('storageRemove', { path: `${paths.appDir}/${app.alias}.fap` })
+      .then(() => {
+        emit('log', {
+          level: 'debug',
+          message: `${componentName}: Deleting app '${app.name}' (${app.alias}): removed .fap`
+        })
+      })
+      .catch(error => rpcErrorHandler(error, 'storageRemove'))
+  }
+  action.value.progress = 0.5
+
+  // remove manifest
+  dirList = await props.flipper.RPC('storageList', { path: paths.manifestDir })
+    .catch(error => rpcErrorHandler(error, 'storageList'))
+  const manifest = dirList.find(e => e.name === `${app.alias}.fim`)
+  if (manifest) {
+    await props.flipper.RPC('storageRemove', { path: `${paths.manifestDir}/${app.alias}.fim` })
+      .then(() => {
+        emit('log', {
+          level: 'debug',
+          message: `${componentName}: Deleting app '${app.name}' (${app.alias}): removed manifest`
+        })
+      })
+      .catch(error => rpcErrorHandler(error, 'storageRemove'))
+  }
+  action.value.progress = 1
+
+  // post-delete
+  await updateInstalledApps()
+
+  action.value.type = ''
+  action.value.progress = 0
+}
+
+const batchUpdate = async (apps) => {
+  batch.value.totalCount = apps.length
+  batch.value.doneCount = 0
+  action.value.type = 'update'
+
+  for (const app of apps) {
+    try {
+      await updateApp(app)
+      batch.value.doneCount++
+    } catch (error) {
+      console.error(error)
+      batch.value.failed.push(app)
+    }
+  }
+  batch.value.totalCount = 0
+  batch.value.doneCount = 0
+}
+
+const setCategory = (name) => {
+  const category = categories.value.find(e => e.name === name)
+  let prefix = ''
+  if (!location.pathname.startsWith('/apps/')) {
+    prefix = 'apps/'
+  }
+  router.push(prefix + encodeURIComponent(category.name.toLowerCase().replaceAll(' ', '-')))
+}
+
+const startRpc = async () => {
+  flags.value.rpcToggling = true
+  await props.flipper.startRPCSession()
+    .catch(error => {
+      console.error(error)
+      emit('log', {
+        level: 'error',
+        message: `${componentName}: Error while starting RPC: ${error.toString()}`
+      })
+    })
+  flags.value.rpcActive = true
+  emit('setRpcStatus', true)
+  flags.value.rpcToggling = false
+  emit('log', {
+    level: 'info',
+    message: `${componentName}: RPC started`
+  })
+}
+
+// const stopRpc = async () => {
+//   flags.value.rpcToggling = true
+//   await props.flipper.setReadingMode('text', 'promptBreak')
+//   flags.value.rpcActive = false
+//   emit('setRpcStatus', false)
+//   flags.value.rpcToggling = false
+//   emit('log', {
+//     level: 'info',
+//     message: `${componentName}: RPC stopped`
+//   })
+// }
+
+const passNotif = (config) => {
+  emit('showNotif', config)
+}
+// const passLog = (config) => {
+//   emit('log', config)
+// }
+
+const rpcErrorHandler = (error, command) => {
+  error = error.toString()
+  emit('showNotif', {
+    message: `RPC error in command '${command}': ${error}`,
+    color: 'negative'
+  })
+  emit('log', {
+    level: 'error',
+    message: `${componentName}: RPC error in command '${command}': ${error}`
+  })
+}
+
+const toggleInstalled = () => {
+  if (flags.value.installedPage) {
+    flags.value.installedPage = false
+    router.push({ name: 'Apps' })
+  } else {
+    router.push({ name: 'InstalledApps' })
+  }
+}
+
+const ensureCommonPaths = async () => {
+  if (flipperReady.value) {
+    let dir = await props.flipper.RPC('storageStat', { path: '/ext/apps_manifests' })
+      .catch(error => rpcErrorHandler(error, 'storageStat'))
+    if (!dir) {
+      await props.flipper.RPC('storageMkdir', { path: '/ext/apps_manifests' })
+        .catch(error => rpcErrorHandler(error, 'storageMkdir'))
+    }
+
+    dir = await props.flipper.RPC('storageStat', { path: '/ext/.tmp' })
+      .catch(error => rpcErrorHandler(error, 'storageStat'))
+    if (!dir) {
+      await props.flipper.RPC('storageMkdir', { path: '/ext/.tmp' })
+        .catch(error => rpcErrorHandler(error, 'storageMkdir'))
+    }
+
+    dir = await props.flipper.RPC('storageStat', { path: '/ext/.tmp/lab' })
+      .catch(error => rpcErrorHandler(error, 'storageStat'))
+    if (!dir) {
+      await props.flipper.RPC('storageMkdir', { path: '/ext/.tmp/lab' })
+        .catch(error => rpcErrorHandler(error, 'storageMkdir'))
+    }
+  }
+}
+
+const ensureCategoryPaths = async () => {
+  for (const category of categories.value) {
+    const dir = await props.flipper.RPC('storageStat', { path: `/ext/apps/${category.name}` })
+      .catch(error => rpcErrorHandler(error, 'storageStat'))
+    if (!dir) {
+      await props.flipper.RPC('storageMkdir', { path: `/ext/apps/${category.name}` })
+        .catch(error => rpcErrorHandler(error, 'storageMkdir'))
+    }
+  }
+}
+
+const getInstalledApps = async () => {
+  const installed = []
+  if (flipperReady.value) {
+    const manifestsList = await props.flipper.RPC('storageList', { path: '/ext/apps_manifests' })
+      .catch(error => rpcErrorHandler(error, 'storageList'))
+    const decoder = new TextDecoder()
+    for (const file of manifestsList) {
+      const manifestFile = await props.flipper.RPC('storageRead', { path: `/ext/apps_manifests/${file.name}` })
+        .catch(error => rpcErrorHandler(error, 'storageRead'))
+      const manifest = decoder.decode(manifestFile)
+      const app = {
+        id: '',
+        name: '',
+        icon: '',
+        installedVersion: {
+          id: '',
+          api: ''
+        },
+        path: ''
+      }
+      for (const line of manifest.replaceAll('\r', '').split('\n')) {
+        const key = line.slice(0, line.indexOf(': '))
+        const value = line.slice(line.indexOf(': ') + 2)
+        switch (key) {
+          case 'UID':
+            app.id = value
+            break
+          case 'Full Name':
+            app.name = value
+            break
+          case 'Icon':
+            app.icon = value
+            break
+          case 'Version UID':
+            app.installedVersion.id = value
+            break
+          case 'Version Build API':
+            app.installedVersion.api = value
+            break
+          case 'Path':
+            app.path = value
+            break
+        }
+      }
+      installed.push(app)
+    }
+  }
+
+  const versions = await fetchAppsVersions(installed.map(app => app.installedVersion.id))
+  for (const version of versions) {
+    const app = installed.find(app => app.id === version.applicationId)
+    if (app) {
+      app.installedVersion = { ...app.installedVersion, ...version }
+    }
+  }
+  installedApps.value = installed
+}
+
+const updateInstalledApps = async (installed) => {
+  if (!installed) {
+    await getInstalledApps()
+  }
+  for (const app of apps.value) {
+    const installed = installedApps.value.find(e => e.id === app.id)
+    if (installed) {
+      app.isInstalled = true
+      app.installedVersion = installed.installedVersion
+
+      app.installedVersion.isOutdated = app.currentVersion.id !== app.installedVersion.id
+    } else {
+      app.isInstalled = false
+      app.installedVersion = null
+    }
+
+    app.actionButton = actionButton(app)
+
+    if (currentApp.value && app.id === currentApp.value.id) {
+      currentApp.value.isInstalled = app.isInstalled
+      currentApp.value.installedVersion = app.installedVersion
+      currentApp.value.actionButton = app.actionButton
+    }
+  }
+  // console.log('installed apps', installedApps.value)
+}
+
+const actionButton = (app) => {
+  if (!sdk.value.api) {
+    return { text: 'Install', class: 'bg-primary' }
+  }
+  if (app.isInstalled && app.installedVersion) {
+    if (app.installedVersion.api !== sdk.value.api) {
+      if (app.currentVersion.status === 'READY') {
+        return { text: 'Update', class: 'bg-positive' }
+      }
+      return { text: 'Installed', class: 'bg-grey-6' }
+    } else {
+      if (app.installedVersion.isOutdated) {
+        return { text: 'Update', class: 'bg-positive' }
+      } else {
+        return { text: 'Installed', class: 'bg-grey-6' }
+      }
+    }
+  }
+  return {
+    text: 'Install',
+    class: 'bg-primary'
+  }
+}
+
+const watchParams = async () => {
+  currentApp.value = null
+  initialCategory.value = null
+  const path = route.params.path
+
+  if (route.name === 'InstalledApps') {
+    flags.value.installedPage = true
+    if (!props.connected) {
+      flags.value.connectFlipperDialog = true
+    }
+    return
+  }
+  if (!path) {
+    return
+  }
+
+  flags.value.installedPage = false
+  const normalize = (string) => string.toLowerCase().replaceAll(' ', '-')
+  const category = categories.value.find(e => normalize(e.name) === normalize(path))
+  if (category) {
+    initialCategory.value = category
+  } else {
+    try {
+      const appFull = await fetchAppById(path, sdk.value)
+      if (appFull.detail && appFull.detail.status === 'error') {
+        router.push({ name: 'Apps' })
+        return
+      }
+      currentApp.value = appFull
+
+      const installed = installedApps.value.find(e => e.id === currentApp.value.id)
+
+      if (installed) {
+        currentApp.value.isInstalled = true
+        currentApp.value.installedVersion = installed.installedVersion
+
+        currentApp.value.installedVersion.isOutdated = currentApp.value.currentVersion.id !== currentApp.value.installedVersion.id
+      }
+      currentApp.value.actionButton = actionButton(currentApp.value)
+      // console.log('current app', currentApp.value)
+
+      initialCategory.value = categories.value.find(e => e.id === appFull.categoryId)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+const start = async () => {
+  flags.value.rpcActive = props.rpcActive
+  flags.value.loadingInitial = true
+  const params = {
+    limit: 500,
+    offset: 0,
+    sort_by: 'updated_at',
+    sort_order: -1,
+    is_latest_release_version: true
+  }
+  const categoryParams = {
+    limit: 500
+  }
+
+  if (props.connected) {
+    if (!flags.value.rpcActive) {
+      // if flipper is connected without active RPC session (e.g. came from CLI app)
+      await startRpc()
+      return
+    }
+    if (flipperReady.value) {
+      // when RPC session is up and device info retreived, get firmware API version and device target
+      try {
+        sdk.value.api = `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
+        sdk.value.target = `f${props.info.firmware.target}`
+
+        params.target = `f${props.info.firmware.target}`
+        params.api = `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
+        delete params.is_latest_release_version
+
+        categoryParams.target = params.target
+        categoryParams.api = params.api
+      } catch (error) {
+        flags.value.outdatedFirmwareDialogPersistent = true
+      }
+
+      await ensureCommonPaths()
+      await getInstalledApps()
+    } else {
+      return
+    }
+  } else {
+    installedApps.value = []
+    emit('connect')
+  }
+
+  categories.value = await fetchCategories(categoryParams)
+
+  await watchParams()
+  flags.value.loadingInitial = false
+
+  let newApps = [], allApps = []
+  do {
+    newApps = await fetchAppsShort(params)
+    allApps = allApps.concat(newApps)
+    if (newApps.length === params.limit) {
+      params.offset += params.limit
+    }
+  } while (newApps.length === params.limit)
+  apps.value = allApps
+
+  await updateInstalledApps(installedApps.value)
+
+  // console.log('compatible apps', apps.value)
+}
+
+watch(flipperReady, () => {
+  flags.value.connectFlipperDialog = false
+  start()
+})
+
+watch(route, async () => {
+  await watchParams()
+})
+
+const openApp = async (app) => {
+  router.push({ name: 'AppsPath', params: { path: app.alias } })
+}
+
+const log = ({ level, message }) => {
+  emit('log', { level, message })
+}
+
+const connect = (manual) => {
+  emit('connect', manual)
+}
+
+const setRpcStatus = (s) => {
+  emit('setRpcStatus', s)
+}
+
+const setInfo = (info) => {
+  emit('setInfo', info)
+}
+
+const onUpdateStage = (stage) => {
+  emit('update', stage)
+}
+
+const openFileIn = ({ path, file }) => {
+  emit('openFileIn', { path, file })
+}
+</script>
+
+<style lang="sass" scoped>
+.apps-navbar
+  div
+    display: flex
+    align-items: center
+    height: 40px
+
+.outdated-badge
+  height: 17px !important
+  position: relative
+  top: -11px
+  left: -72px
+  font-size: 10px
+  border: 1px #ffffff solid
+  border-radius: 17px
+</style>
diff --git a/frontend/src/pages/App.vue b/frontend/src/pages/App.vue
new file mode 100644
index 0000000..8cc5eab
--- /dev/null
+++ b/frontend/src/pages/App.vue
@@ -0,0 +1,455 @@
+<template>
+  <q-page class="full-width q-pl-md">
+    <template v-if="loading">
+      <div class="column items-center">
+        <q-spinner
+          color="primary"
+          size="3em"
+          class="q-mb-md"
+        ></q-spinner>
+        <p>Loading app...</p>
+      </div>
+    </template>
+    <template v-else>
+      <div class="row items-center q-mb-lg" :class="$q.screen.width > 670 ? 'no-wrap' : ''">
+        <div class="app-icon q-mr-md">
+          <q-img :src="props.app.currentVersion.iconUri" style="image-rendering: pixelated;"/>
+        </div>
+        <div :class="$q.screen.width > 350 ? 'q-mr-md' : ''">
+          <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ props.app.currentVersion.name }}</div>
+          <div class="row q-gutter-md">
+            <div
+              :style="`background-color: #${category.color};`"
+              style="border-radius: 20px; padding: 4px 13px; width: fit-content;"
+              class="row no-wrap items-center q-py-xs q-px-md"
+            >
+              <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
+              <span style="white-space: nowrap;">{{ category.name }}</span>
+            </div>
+            <div class="flex items-center q-ml-md">
+              <span class="text-grey-7">Version:</span>
+              <b class="q-ml-xs">{{ props.app.currentVersion.version }}</b>
+            </div>
+            <div class="flex items-center q-ml-md">
+              <span class="text-grey-7" v-if="!!props.app.currentVersion.currentBuild">Size:</span>
+              <b class="q-ml-xs">{{ bytesToSize(props.app.currentVersion.currentBuild.metadata.length) }}</b>
+            </div>
+
+            <template v-if="currentStatusHint">
+              <div>
+                <q-chip
+                  :color="statusHints[currentStatusHint].color"
+                  :icon="statusHints[currentStatusHint].icon"
+                  :label="statusHints[currentStatusHint].text"
+                  class="q-my-none"
+                  :clickable="!!statusHints[currentStatusHint].dialog"
+                  @click="emit('showDialog', statusHints[currentStatusHint].dialog)"
+                >
+                <q-tooltip v-if="!!statusHints[currentStatusHint].tooltip">
+                  {{ statusHints[currentStatusHint].tooltip }}
+                </q-tooltip>
+                </q-chip>
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <q-space />
+
+        <template v-if="props.action.type">
+          <q-linear-progress
+            :value="props.action.progress"
+            size="56px"
+            :color="actionColors.bar"
+            :track-color="actionColors.track"
+            :class="$q.screen.width > 670 ? 'q-mr-md' : 'q-my-md full-width'"
+            style="width: 188px; border-radius: 10px;"
+          >
+            <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 11px;">
+              <div
+                class="app-progress-label"
+                style="font-size: 40px;"
+              >{{ `${props.action.progress * 100}%` }}</div>
+            </div>
+          </q-linear-progress>
+        </template>
+        <template v-else>
+          <q-btn
+            v-if="props.app.isInstalled"
+            flat
+            color="negative"
+            icon="svguse:common-icons.svg#delete"
+            class="q-mr-md"
+            style="font-size: 19px;padding: 10px 12px;border-radius: 10px;border: 2px solid currentColor;"
+            @click="flags.deleteConfirmationDialog = true"
+          />
+          <q-btn
+            flat
+            color="white"
+            style="font-size: 22px; padding: 0 60px; border-radius: 10px;"
+            :label="props.app.actionButton.text"
+            class="no-shadow text-pixelated"
+            :class="props.app.actionButton.class + ' ' + ($q.screen.width > 670 ? 'q-mr-md' : 'q-my-md full-width')"
+            @click="handleAction(props.app.actionButton.text)"
+          />
+        </template>
+      </div>
+      <div id="carousel" class="flex">
+        <q-btn
+          flat
+          dense
+          @click="animateScroll('backward')"
+          icon="mdi-chevron-left"
+        />
+        <q-scroll-area
+          ref="scrollAreaRef"
+          :thumb-style="{ display: 'none' }"
+          style="height: 140px; max-width: 1280px; width: calc(100% - 65px);"
+          class="q-my-md no-pointer-events"
+        >
+          <div class="row no-wrap">
+            <div
+              v-for="screenshot in props.app.currentVersion.screenshots"
+              :key="screenshot"
+              class="q-mx-xs screenshot"
+            >
+              <img :src="screenshot" style="width: 248px" />
+            </div>
+          </div>
+        </q-scroll-area>
+        <q-btn
+          flat
+          dense
+          @click="animateScroll('forward')"
+          icon="mdi-chevron-right"
+        />
+      </div>
+      <div class="app-content column q-pr-md">
+        <div class="text-h5 q-my-sm">Description</div>
+        <q-markdown
+          no-heading-anchor-links
+          no-html
+          no-image
+          no-link
+          no-linkify
+          no-typographer
+          :src="props.app.currentVersion.description"
+        ></q-markdown>
+        <div class="text-h5 q-my-sm">Changelog</div>
+        <q-markdown
+          no-heading-anchor-links
+          no-html
+          no-image
+          no-link
+          no-linkify
+          no-typographer
+          :src="props.app.currentVersion.changelog"
+        ></q-markdown>
+        <div class="text-h6 q-my-sm">Developer</div>
+        <p>
+          <a class="text-grey-7" :href="props.app.currentVersion.links.manifestUri" style="text-decoration: none;">
+            <q-icon name="mdi-github" color="grey-7" size="20px"/>
+            <span class="q-ml-xs" style="text-decoration: underline;">Manifest</span>
+          </a>
+          <br />
+          <a class="text-grey-7" :href="props.app.currentVersion.links.sourceCode.uri" style="text-decoration: none;">
+            <q-icon name="mdi-github" color="grey-7" size="20px"/>
+            <span class="q-ml-xs" style="text-decoration: underline;">Repository</span>
+          </a>
+        </p>
+      </div>
+      <q-btn
+        no-caps
+        outline
+        color="negative"
+        icon="mdi-alert-circle-outline"
+        label="Report app"
+        class="q-mt-lg"
+        @click="flags.reportDialog = true"
+      />
+
+      <q-dialog v-model="flags.noFreeSpaceDialog">
+        <q-card class="dialog">
+          <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
+
+          <q-card-section class="q-pa-none q-ma-md" align="center">
+            <q-icon name="svguse:common-icons.svg#fw-conflict-icon" size="64px" />
+            <div class="text-h6 q-my-sm">No Free Space</div>
+            <p>There is no empty space to install this application.<br />Use archive to delete needless files.</p>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="center">
+            <q-btn
+              outline
+              color="primary"
+              label="Open Archive"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.deleteConfirmationDialog">
+        <q-card class="dialog" style="min-width: 300px;">
+          <q-card-section class="q-pb-none">
+            <div class="text-h6">Delete this app?</div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none q-my-md text-center">
+            <div class="flex no-wrap items-center">
+              <div class="app-icon q-mr-md">
+                <q-img :src="props.app.currentVersion.iconUri" width="50px" style="image-rendering: pixelated;"/>
+              </div>
+              <div class="column items-start">
+                <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ props.app.currentVersion.name }}</div>
+                <div class="text-grey-7"><b>v{{ props.app.currentVersion.version }}</b></div>
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="right">
+            <q-btn
+              flat
+              text-color="dark"
+              class="q-mr-md"
+              label="Cancel"
+              v-close-popup
+            ></q-btn>
+            <q-btn
+              outline
+              color="negative"
+              label="Delete"
+              v-close-popup
+              @click="handleAction('delete')"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="flags.reportDialog">
+        <q-card class="dialog" style="min-width: 300px;">
+          <q-card-section class="q-pb-none">
+            <div class="text-h6">Report app</div>
+          </q-card-section>
+
+          <q-card-section>
+            <q-select v-model="report.type" :options="[ 'bug', 'report' ]" label="What do you want to sumbit?" />
+          </q-card-section>
+
+          <q-card-section v-if="report.type === 'bug'">
+            Sorry, we don't provide support for third-party apps.<br />
+            You can file an issue on Github or contact the app developer.
+          </q-card-section>
+          <q-card-section v-if="report.type === 'report'">
+            <q-input
+              v-model="report.description"
+              placeholder="Describe your problem"
+              autogrow
+            />
+            <div v-if="flags.reportSubmitted" class="text-positive q-mt-md">We received your report. Thank you for the feedback!</div>
+          </q-card-section>
+
+          <q-card-section align="right">
+            <q-btn
+              flat
+              text-color="dark"
+              class="q-mr-md"
+              label="Cancel"
+              v-close-popup
+            ></q-btn>
+            <q-btn
+              v-if="!report.type || report.type === 'report'"
+              outline
+              color="primary"
+              label="Send"
+              :disabled="flags.reportSubmitted || !report.description"
+              @click="sendReport"
+            ></q-btn>
+            <q-btn
+              v-if="report.type === 'bug'"
+              outline
+              color="primary"
+              label="View on Github"
+              v-close-popup
+              :href="props.app.currentVersion.links.manifestUri"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+    </template>
+  </q-page>
+</template>
+
+<script setup>
+import { onUpdated, defineProps, defineEmits, ref, computed, watch } from 'vue'
+import { bytesToSize, submitAppReport } from '../util/util'
+
+const props = defineProps({
+  categories: Array,
+  app: Object,
+  flipper: Object,
+  connected: Boolean,
+  rpcActive: Boolean,
+  sdk: Object,
+  action: Object,
+  progress: Number
+})
+
+const emit = defineEmits(['action', 'showDialog'])
+
+const loading = ref(true)
+const flags = ref({
+  noFreeSpaceDialog: false,
+  deleteConfirmationDialog: false,
+  reportDialog: false,
+  reportSubmitted: false
+})
+const category = ref({})
+const screenshotWidth = 256 + 4 + 8 + 8
+const position = ref(0)
+const scrollAreaRef = ref(null)
+const currentStatusHint = ref(null)
+const statusHints = ref({
+  READY: {
+    text: 'Runs on latest firmware release',
+    icon: 'mdi-check-circle-outline',
+    color: 'light-green-2'
+  },
+  BUILD_RUNNING: {
+    text: 'App is rebuilding',
+    icon: 'mdi-alert-circle-outline',
+    color: 'yellow-2',
+    tooltip: 'This may take some time, come back later'
+  },
+  FLIPPER_OUTDATED: {
+    text: 'Flipper firmware is outdated',
+    icon: 'mdi-alert-circle-outline',
+    color: 'deep-orange-2',
+    dialog: 'outdatedFirmwareDialog'
+  },
+  UNSUPPORTED_APPLICATION: {
+    text: 'Outdated app',
+    icon: 'mdi-alert-circle-outline',
+    color: 'deep-orange-2',
+    dialog: 'outdatedAppDialog'
+  },
+  UNSUPPORTED_SDK: {
+    text: 'Unsupported SDK',
+    icon: 'mdi-alert-circle-outline',
+    color: 'deep-orange-2',
+    dialog: 'outdatedFirmwareDialog'
+  }
+})
+const report = ref({
+  type: '',
+  description: ''
+})
+
+const actionColors = computed(() => {
+  switch (props.action.type) {
+    case 'delete':
+      return {
+        bar: 'negative',
+        track: 'deep-orange-5'
+      }
+    case 'install':
+      return {
+        bar: 'primary',
+        track: 'orange-6'
+      }
+    default:
+      return {
+        bar: 'positive',
+        track: 'green-6'
+      }
+  }
+})
+
+watch(() => props.app, () => {
+  start()
+}, {
+  deep: true
+})
+
+const setCategory = () => {
+  category.value = props.categories.find(category => category.id === props.app.categoryId)
+}
+
+const animateScroll = (direction) => {
+  const carousel = document.querySelector('#carousel')
+  const width = carousel.clientWidth - 2 * 32
+  if (direction === 'forward') {
+    position.value = position.value + screenshotWidth
+    if (position.value > width) {
+      position.value = width + screenshotWidth
+    }
+  } else if (direction === 'backward') {
+    if (position.value > width) {
+      position.value = Math.round((width + screenshotWidth) / screenshotWidth) * screenshotWidth
+    }
+    position.value = position.value - screenshotWidth
+    if (position.value < 0) {
+      position.value = 0
+    }
+  }
+  scrollAreaRef.value.setScrollPosition('horizontal', position.value, 300)
+}
+
+const handleAction = (value) => {
+  let actionType
+  if (value === 'Installed') {
+    actionType = ''
+  } else {
+    actionType = value.toLowerCase()
+  }
+  emit('action', props.app, actionType)
+}
+
+const sendReport = async () => {
+  await submitAppReport(props.app.id, { description: report.value.description, description_type: report.value.type })
+  flags.value.reportSubmitted = true
+}
+
+const start = () => {
+  loading.value = false
+  const status = props.app.currentVersion.status
+  if (props.connected && status === 'READY') {
+    currentStatusHint.value = null
+  } else {
+    currentStatusHint.value = status
+  }
+  setCategory()
+}
+
+// mounted () {
+//   start()
+// }
+
+onUpdated(() => {
+  if (!loading.value) {
+    start()
+  }
+})
+</script>
+
+<style lang="sass" scoped>
+.app-icon
+  width: 70px
+  padding: 10px
+  border: 1px solid #dbdbdb
+  border-radius: 10px
+
+.screenshot
+  width: calc(256px + 4px + 8px)
+  display: flex
+  justify-content: center
+  padding: 4px
+  background-color: $primary
+  border: 2px solid #000000
+  border-radius: 6px
+  img
+    image-rendering: pixelated
+
+// Dialogs
+.dialog-close-btn
+  position: absolute
+  top: 0.5rem
+  right: 0.5rem
+</style>
diff --git a/frontend/src/pages/Apps.vue b/frontend/src/pages/Apps.vue
index 3b37151..ff614d0 100644
--- a/frontend/src/pages/Apps.vue
+++ b/frontend/src/pages/Apps.vue
@@ -1,967 +1,305 @@
 <template>
-  <q-page
-    class="column items-center q-py-lg full-width"
-    :style="$q.screen.width >= 404 ? 'padding: 24px 26px; max-width: 1284px' : 'padding: 24px 6px'"
-  >
-    <div
-      class="apps-navbar row justify-end items-center full-width q-mb-xl"
-      :class="action.type ? 'disabled' : ''"
-    >
-      <q-icon
-        v-if="currentApp || flags.installedPage"
-        name="mdi-chevron-left"
-        size="56px"
-        class="cursor-pointer q-mr-md"
-        @click="flags.installedPage = false; router.push('/apps')"
-      ></q-icon>
-      <q-icon
-        v-else
-        name="svguse:common-icons.svg#apps"
-        size="56px"
-        class="q-mr-md"
-      ></q-icon>
-      <div class="text-h4 q-mr-lg">Apps</div>
-      <q-space />
+  <q-page>
+    <template v-if="apps.length">
       <div
-        class="col-grow"
-        :style="$q.screen.width <= 353 ? 'margin-top: 16px; width: 100%' : 'max-width: 300px; min-width: 140px; width: 100%; margin: 0.6rem 0;'"
+        class="row q-mb-lg"
+        :class="`${$q.screen.width > 670 ? 'no-wrap' : 'justify-center'} ${action.type ? 'disabled' : ''}`"
       >
-        <SearchBar
-          :sdk="sdk"
-          @setCategory="setCategory"
-          @openApp="openApp"
-        />
-      </div>
-      <div class="q-ml-md" :style="$q.screen.width <= 365 ? 'margin-top: 16px' : ''">
-        <div>
-          <q-btn
-            flat
-            no-caps
-            dense
-            :color="flags.installedPage ? 'primary' : 'black'"
-            style="font-weight: 400"
-            icon="svguse:common-icons.svg#installed"
-            :stack="$q.screen.width <= 365"
-            @click="toggleInstalled"
-            label="Installed"
+        <q-list class="row q-col-gutter-md" :class="$q.screen.width > 670 ? 'col-8 items-center' : 'justify-center q-mb-lg'">
+          <div
+            v-for="category in catalogCategories"
+            :key="category.name"
+            class="col-auto"
           >
-            <q-badge
-              v-if="$q.screen.width > 365 && updatableAppsAmount > 0"
-              color="positive"
-              floating
-              class="outdated-badge"
-            >{{ updatableAppsAmount }}</q-badge>
-          </q-btn>
-        </div>
-        <div class="q-ml-md">
-          <q-btn
-            flat
-            no-caps
-            dense
-            color="black"
-            style="font-weight: 400"
-            icon="mdi-github"
-            label="Contribute"
-            :stack="$q.screen.width <= 365"
-            href="https://github.com/flipperdevices/flipper-application-catalog"
-          />
+            <q-chip
+              class="q-ma-none"
+              :style="`background-color: #${category.color}; opacity: ${currentCategory && currentCategory.name !== category.name ? '0.5' : '1'}`"
+              clickable
+              @click="onSortApps(category)"
+            >
+              <q-icon v-if="category.iconUri" :name="`img:${category.iconUri}`" size="14px" class="q-my-xs q-mr-sm"/>
+              <span class="text-no-wrap">{{ category.name }}</span>
+            </q-chip>
+          </div>
+        </q-list>
+        <q-space v-if="$q.screen.width > 670"/>
+        <div>
+          <div class="row no-wrap justify-end text-grey-7">
+            <q-select
+              v-model="sortModel"
+              :options="sortOptions"
+              dense
+              standout="bg-primary text-white no-shadow"
+              rounded
+              style="min-width: fit-content; border-radius: 20px;"
+            />
+          </div>
         </div>
       </div>
-    </div>
-    <template v-if="flags.installedPage">
-      <InstalledApps
-        :apps="apps"
-        :flipper="flipper"
-        :action="action"
-        :batch="batch"
-        :installedApps="installedApps"
-        :sdk="sdk"
-        @showNotif="passNotif"
-        @openApp="openApp"
-        @action="handleAction"
-        @batchUpdate="batchUpdate"
-      />
-    </template>
-    <template v-else-if="!currentApp">
-      <AppList
-        :categories="categories"
-        :apps="apps"
-        :initialCategory="initialCategory"
-        :flipper="flipper"
-        :connected="connected"
-        :rpcActive="rpcActive"
-        :action="action"
-        @showNotif="passNotif"
-        @openApp="openApp"
-        @action="handleAction"
-        @batchUpdate="batchUpdate"
-      />
+
+      <q-list class="apps full-width q-mt-sm">
+        <div
+          v-for="app in filteredSortedApps"
+          :key="app.name"
+          class="flex justify-center q-pa-none card-container"
+          style="width: fit-content"
+          :class="action.type && action.id !== app.id ? 'disabled' : ''"
+        >
+          <div
+            style="width: calc(256px + 4px + 8px)"
+            class="app-card"
+            @click="appClicked(app)"
+          >
+            <div class="screenshot q-mb-sm">
+              <img :src="app.currentVersion.screenshots[0]" style="width: 256px" />
+            </div>
+
+            <div class="flex justify-between no-wrap" style="padding: 0 4px">
+              <div class="text-h6 ellipsis" style="flex-grow: 1;flex-basis: 179px;margin-right: 3px;">{{ app.currentVersion.name }}</div>
+              <div style="font-size: 18px; line-height: 18px;">
+                <span>
+                  <q-icon :name="`img:${categories.find(e => e.id === app.categoryId).iconUri}`" size="14px" class="q-mr-sm"/>
+                  <span style="font-size: 13px">{{ categories.find(e => e.id === app.categoryId).name }}</span>
+                </span>
+              </div>
+            </div>
+
+            <div
+              style="display: grid;grid-template-columns: 1fr auto;padding-left: 4px;align-items: end;"
+              :style="`padding-right: ${action.type && action.id === app.id ? 0 : 4}px`"
+            >
+              <span class="col-shrink desc text-grey-7" style="margin-bottom: 2px;max-height: 30px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
+                {{ app.currentVersion.shortDescription }}
+              </span>
+              <div class="col-shrink" style="width: 80px;">
+                <template v-if="action.type && action.id === app.id">
+                  <q-linear-progress
+                    :value="action.progress"
+                    size="32px"
+                    :color="actionColors.bar"
+                    :track-color="actionColors.track"
+                    style="width: 80px; border-radius: 5px;"
+                  >
+                    <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
+                      <div
+                        class="app-progress-label"
+                        style="font-size: 28px;"
+                      >{{ `${action.progress * 100}%` }}</div>
+                    </div>
+                  </q-linear-progress>
+                </template>
+                <q-btn
+                  v-else
+                  flat
+                  dense
+                  color="white"
+                  style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+                  :label="app.actionButton?.text"
+                  class="fit no-shadow text-pixelated"
+                  :class="app.actionButton?.class"
+                  @click="handleAction(app, app.actionButton?.text)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </q-list>
     </template>
     <template v-else>
-      <AppPage
-        :categories="categories"
-        :app="currentApp"
-        :flipper="flipper"
-        :connected="connected"
-        :rpcActive="rpcActive"
-        :action="action"
-        @showNotif="passNotif"
-        @action="handleAction"
-        @showDialog="$event => flags[$event] = true"
-      />
+      <div class="column items-center">
+        <q-spinner
+          color="primary"
+          size="3em"
+          class="q-mb-md"
+        ></q-spinner>
+        <p>Loading apps...</p>
+      </div>
     </template>
-
-    <q-dialog v-model="flags.outdatedFirmwareDialogPersistent" persistent>
-      <q-card class="dialog">
-        <!--<q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>-->
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="mdi-alert-circle" color="negative" size="64px" />
-          <div class="text-h6 q-my-sm">Outdated Firmware Version</div>
-          <p>Firmware version on your Flipper is not supported.<br />Click the button below to update your device.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="Update"
-            @click="$router.push('/')"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.outdatedFirmwareDialog">
-      <q-card class="dialog">
-        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="mdi-alert-circle" color="negative" size="64px" />
-          <div class="text-h6 q-my-sm">Outdated Firmware Version</div>
-          <p>Firmware version on your Flipper does not support this app.<br />Click the button below to update your device.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="Update"
-            @click="$router.push('/')"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.outdatedAppDialog">
-      <q-card class="dialog">
-        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="mdi-alert-circle" color="negative" size="64px" />
-          <div class="text-h6 q-my-sm">Outdated app</div>
-          <p>Contact the developer to request further app support.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="View on GitHub"
-            :href="currentApp.currentVersion.links.manifestUri"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.connectFlipperDialog">
-      <q-card class="dialog">
-        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="mdi-alert-circle" color="primary" size="64px" />
-          <div class="text-h6 q-my-sm">Flipper disconnected</div>
-          <p>Plug in your Flipper and click the button below.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="Connect"
-            @click="$emit('connect')"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <q-dialog v-model="flags.mobileAppDialog">
-      <q-card class="dialog">
-        <q-btn icon="close" flat round dense v-close-popup class="dialog-close-btn"/>
-
-        <q-card-section class="q-pa-none q-ma-md" align="center">
-          <q-icon name="mdi-alert-circle" color="primary" size="64px" />
-          <div class="text-h6 q-my-sm">Apps don't work in mobile browsers</div>
-          <p>Mobile browsers can't connect to Flipper, meaning you won't be able to install apps.</p>
-          <p>Get the official mobile app – it has the same features!</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          <q-btn
-            outline
-            color="primary"
-            label="Download app"
-            href="https://flpr.app"
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>
-    <!--<q-dialog v-model="flags.TOSDialog">
-      <q-card class="dialog">
-        <q-card-section>
-          <div class="text-h6">Terms of Service</div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none">
-          <p>You accept our full Terms of Service by pressing Agree button.</p>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none text-center">
-          <a href="" class="text-dark" style="text-decoration: none">
-            <q-icon name="svguse:common-icons.svg#link" style="position: relative; top: -2px; left: -2px"/>
-            Open Full Terms of Service
-          </a>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none flex justify-between">
-          <q-btn
-            outline
-            color="primary"
-            label="Reject"
-            v-close-popup
-          ></q-btn>
-          <q-btn
-            unelevated
-            color="primary"
-            label="Agree"
-            v-close-popup
-          ></q-btn>
-        </q-card-section>
-      </q-card>
-    </q-dialog>-->
   </q-page>
 </template>
 
-<script>
-import { computed, defineComponent, onMounted, ref, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import SearchBar from 'components/SearchBar.vue'
-import AppList from 'components/AppList.vue'
-import AppPage from 'components/AppPage.vue'
-import InstalledApps from 'components/InstalledApps.vue'
-import { fetchCategories, fetchAppsShort, fetchAppById, fetchAppFap, fetchAppsVersions } from '../util/util'
-import asyncSleep from 'simple-async-sleep'
-import { useQuasar } from 'quasar'
-
-export default defineComponent({
-  name: 'Apps',
-
-  props: {
-    flipper: Object,
-    connected: Boolean,
-    rpcActive: Boolean,
-    info: Object
-  },
-
-  components: {
-    SearchBar,
-    AppList,
-    AppPage,
-    InstalledApps
-  },
-
-  setup (props, { emit }) {
-    const $q = useQuasar()
-    const componentName = 'Apps'
-
-    onMounted(() => {
-      start()
-      if ($q.platform.is.mobile) {
-        flags.value.mobileAppDialog = true
-      }
-    })
-
-    const router = useRouter()
-    const route = useRoute()
-
-    const flags = ref({
-      restarting: false,
-      rpcActive: false,
-      rpcToggling: false,
-      installedPage: false,
-      outdatedFirmwareDialogPersistent: false,
-      outdatedFirmwareDialog: false,
-      outdatedAppDialog: false,
-      connectFlipperDialog: false,
-      mobileAppDialog: false,
-      loadingInitial: true
-    })
-
-    const initialCategory = ref(null)
-    const currentApp = ref(null)
-    const apps = ref([])
-    const installedApps = ref([])
-    const categories = ref([])
-    const action = ref({
-      type: '',
-      progress: 0,
-      id: ''
-    })
-    const batch = ref({
-      totalCount: 0,
-      doneCount: 0,
-      failed: []
-    })
-    const sdk = ref({
-      target: null,
-      api: null
-    })
-
-    const updatableAppsAmount = computed(() => {
-      return apps.value.filter(app => {
-        if (app.isInstalled === true && app.installedVersion && app.currentVersion.status === 'READY') {
-          if (sdk.value.api && app.installedVersion.api !== sdk.value.api) {
-            return true
-          }
-          if (app.installedVersion.isOutdated) {
-            return true
-          }
-        }
-        return false
-      }).length
-    })
-
-    const flipperReady = computed(() => flags.value.rpcActive && props.info !== null && props.info.doneReading)
-
-    const handleAction = (app, actionType) => {
-      if (!props.connected) {
-        action.value.type = actionType
-        flags.value.connectFlipperDialog = true
-        setTimeout(() => {
-          action.value.type = ''
-        }, 300)
-        return
-      }
-      if (!actionType) {
-        return
-      }
-      action.value.type = actionType
-      action.value.progress = 0
-      action.value.id = app.id
-
-      switch (action.value.type) {
-        case 'install':
-          return installApp(app)
-        case 'update':
-          return updateApp(app)
-        case 'delete':
-          return deleteApp(app)
-      }
-    }
-
-    const installApp = async (app) => {
-      const paths = {
-        appDir: `/ext/apps/${categories.value.find(e => e.id === app.categoryId).name}`,
-        manifestDir: '/ext/apps_manifests',
-        tempDir: '/ext/.tmp/lab/'
-      }
-      await ensureCategoryPaths()
-
-      // fetch fap
-      const fap = await fetchAppFap({
-        versionId: app.currentVersion.id,
-        target: `f${props.info.firmware.target}`,
-        api: `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
-      }).catch(error => {
-        emit('showNotif', {
-          message: error.toString(),
-          color: 'negative'
-        })
-        emit('log', {
-          level: 'error',
-          message: `${componentName}: Installing app '${app.name}' (${app.alias}): ${error}`
-        })
-      })
-      if (!fap) {
-        action.value.type = ''
-        action.value.progress = 0
-        return
-      }
-      action.value.progress = 0.33
-      await asyncSleep(300)
-      emit('log', {
-        level: 'debug',
-        message: `${componentName}: Installing app '${app.name}' (${app.alias}): fetched .fap`
-      })
-
-      // generate manifest
-      function urlContentToDataUri (url) {
-        return fetch(url)
-          .then(response => response.blob())
-          .then(blob => new Promise(resolve => {
-            const reader = new FileReader()
-            reader.onload = function () { resolve(this.result) }
-            reader.readAsDataURL(blob)
-          }))
-      }
-      const dataUri = await urlContentToDataUri(app.currentVersion.iconUri)
-      const base64Icon = dataUri.split(',')[1]
-      const manifestText = `Filetype: Flipper Application Installation Manifest\r\nVersion: 1\r\nFull Name: ${app.currentVersion.name}\r\nIcon: ${base64Icon}\r\nVersion Build API: ${props.info.firmware.api.major}.${props.info.firmware.api.minor}\r\nUID: ${app.id}\r\nVersion UID: ${app.currentVersion.id}\r\nPath: ${paths.appDir}/${app.alias}.fap`
-      const manifestFile = new TextEncoder().encode(manifestText)
-      action.value.progress = 0.45
-      await asyncSleep(300)
-
-      // upload manifest to temp
-      await props.flipper.RPC('storageWrite', { path: `${paths.tempDir}/${app.id}.fim`, buffer: manifestFile })
-        .then(() => {
-          emit('log', {
-            level: 'debug',
-            message: `${componentName}: Installing app '${app.name}' (${app.alias}): uploaded manifest (temp)`
-          })
-        })
-        .catch(error => rpcErrorHandler(error, 'storageWrite'))
-      action.value.progress = 0.5
-      await asyncSleep(300)
-
-      // upload fap to temp
-      await props.flipper.RPC('storageWrite', { path: `${paths.tempDir}/${app.id}.fap`, buffer: fap })
-        .then(() => {
-          emit('log', {
-            level: 'debug',
-            message: `${componentName}: Installing app '${app.name}' (${app.alias}): uploaded .fap (temp)`
-          })
-        })
-        .catch(error => rpcErrorHandler(error, 'storageWrite'))
-      action.value.progress = 0.75
-      await asyncSleep(300)
-
-      // move manifest and fap
-      let dirList = await props.flipper.RPC('storageList', { path: paths.manifestDir })
-        .catch(error => rpcErrorHandler(error, 'storageList'))
-      const oldManifest = dirList.find(e => e.name === `${app.alias}.fim`)
-      if (oldManifest) {
-        await props.flipper.RPC('storageRemove', { path: `${paths.manifestDir}/${app.alias}.fim` })
-          .then(() => {
-            emit('log', {
-              level: 'debug',
-              message: `${componentName}: Installing app '${app.name}' (${app.alias}): removed old manifest`
-            })
-          })
-          .catch(error => rpcErrorHandler(error, 'storageRemove'))
-      }
-
-      await props.flipper.RPC('storageRename', { oldPath: `${paths.tempDir}/${app.id}.fim`, newPath: `${paths.manifestDir}/${app.alias}.fim` })
-        .then(() => {
-          emit('log', {
-            level: 'debug',
-            message: `${componentName}: Installing app '${app.name}' (${app.alias}): moved new manifest`
-          })
-        })
-        .catch(error => rpcErrorHandler(error, 'storageRename'))
-      action.value.progress = 0.8
-      await asyncSleep(300)
-
-      dirList = await props.flipper.RPC('storageList', { path: paths.appDir })
-        .catch(error => rpcErrorHandler(error, 'storageList'))
-      const oldFap = dirList.find(e => e.name === `${app.alias}.fap`)
-      if (oldFap) {
-        await props.flipper.RPC('storageRemove', { path: `${paths.appDir}/${app.alias}.fap` })
-          .then(() => {
-            emit('log', {
-              level: 'debug',
-              message: `${componentName}: Installing app '${app.name}' (${app.alias}): removed old .fap`
-            })
-          })
-          .catch(error => rpcErrorHandler(error, 'storageRemove'))
-      }
-
-      await props.flipper.RPC('storageRename', { oldPath: `${paths.tempDir}/${app.id}.fap`, newPath: `${paths.appDir}/${app.alias}.fap` })
-        .then(() => {
-          emit('log', {
-            level: 'debug',
-            message: `${componentName}: Installing app '${app.name}' (${app.alias}): moved new .fap`
-          })
-        })
-        .catch(error => rpcErrorHandler(error, 'storageRename'))
-      action.value.progress = 1
-      await asyncSleep(300)
-
-      // post-install
-      await updateInstalledApps()
-
-      action.value.type = ''
-      action.value.progress = 0
-    }
-
-    const updateApp = async (app) => {
-      return installApp(app)
-    }
-
-    const deleteApp = async (app) => {
-      const paths = {
-        appDir: '',
-        manifestDir: '/ext/apps_manifests'
-      }
-      if (app.categoryId) {
-        paths.appDir = `/ext/apps/${categories.value.find(e => e.id === app.categoryId).name}`
-      } else {
-        paths.appDir = app.path.slice(0, app.path.lastIndexOf('/'))
-        app.alias = app.path.slice(app.path.lastIndexOf('/') + 1, -4)
-      }
-
-      await ensureCategoryPaths()
-
-      // remove .fap
-      let dirList = await props.flipper.RPC('storageList', { path: paths.appDir })
-        .catch(error => rpcErrorHandler(error, 'storageList'))
-      const fap = dirList.find(e => e.name === `${app.alias}.fap`)
-      if (fap) {
-        await props.flipper.RPC('storageRemove', { path: `${paths.appDir}/${app.alias}.fap` })
-          .then(() => {
-            emit('log', {
-              level: 'debug',
-              message: `${componentName}: Deleting app '${app.name}' (${app.alias}): removed .fap`
-            })
-          })
-          .catch(error => rpcErrorHandler(error, 'storageRemove'))
-      }
-      action.value.progress = 0.5
-
-      // remove manifest
-      dirList = await props.flipper.RPC('storageList', { path: paths.manifestDir })
-        .catch(error => rpcErrorHandler(error, 'storageList'))
-      const manifest = dirList.find(e => e.name === `${app.alias}.fim`)
-      if (manifest) {
-        await props.flipper.RPC('storageRemove', { path: `${paths.manifestDir}/${app.alias}.fim` })
-          .then(() => {
-            emit('log', {
-              level: 'debug',
-              message: `${componentName}: Deleting app '${app.name}' (${app.alias}): removed manifest`
-            })
-          })
-          .catch(error => rpcErrorHandler(error, 'storageRemove'))
-      }
-      action.value.progress = 1
-
-      // post-delete
-      await updateInstalledApps()
-
-      action.value.type = ''
-      action.value.progress = 0
-    }
-
-    const batchUpdate = async (apps) => {
-      batch.value.totalCount = apps.length
-      batch.value.doneCount = 0
-      action.value.type = 'update'
-
-      for (const app of apps) {
-        try {
-          await updateApp(app)
-          batch.value.doneCount++
-        } catch (error) {
-          console.error(error)
-          batch.value.failed.push(app)
-        }
-      }
-      batch.value.totalCount = 0
-      batch.value.doneCount = 0
-    }
-
-    const setCategory = (name) => {
-      const category = categories.value.find(e => e.name === name)
-      let prefix = ''
-      if (!location.pathname.startsWith('/apps/')) {
-        prefix = 'apps/'
-      }
-      router.push(prefix + encodeURIComponent(category.name.toLowerCase().replaceAll(' ', '-')))
-    }
-
-    const startRpc = async () => {
-      flags.value.rpcToggling = true
-      await props.flipper.startRPCSession()
-        .catch(error => {
-          console.error(error)
-          emit('log', {
-            level: 'error',
-            message: `${componentName}: Error while starting RPC: ${error.toString()}`
-          })
-        })
-      flags.value.rpcActive = true
-      emit('setRpcStatus', true)
-      flags.value.rpcToggling = false
-      emit('log', {
-        level: 'info',
-        message: `${componentName}: RPC started`
-      })
-    }
-
-    const stopRpc = async () => {
-      flags.value.rpcToggling = true
-      await props.flipper.setReadingMode('text', 'promptBreak')
-      flags.value.rpcActive = false
-      emit('setRpcStatus', false)
-      flags.value.rpcToggling = false
-      emit('log', {
-        level: 'info',
-        message: `${componentName}: RPC stopped`
-      })
-    }
-
-    const passNotif = (config) => {
-      emit('showNotif', config)
-    }
-    const passLog = (config) => {
-      emit('log', config)
-    }
-
-    const rpcErrorHandler = (error, command) => {
-      error = error.toString()
-      emit('showNotif', {
-        message: `RPC error in command '${command}': ${error}`,
-        color: 'negative'
-      })
-      emit('log', {
-        level: 'error',
-        message: `${componentName}: RPC error in command '${command}': ${error}`
-      })
-    }
-
-    const toggleInstalled = () => {
-      if (flags.value.installedPage) {
-        flags.value.installedPage = false
-        router.push('/apps')
-      } else {
-        router.push('/apps/installed')
-      }
-    }
-
-    const ensureCommonPaths = async () => {
-      if (flipperReady.value) {
-        let dir = await props.flipper.RPC('storageStat', { path: '/ext/apps_manifests' })
-          .catch(error => rpcErrorHandler(error, 'storageStat'))
-        if (!dir) {
-          await props.flipper.RPC('storageMkdir', { path: '/ext/apps_manifests' })
-            .catch(error => rpcErrorHandler(error, 'storageMkdir'))
-        }
-
-        dir = await props.flipper.RPC('storageStat', { path: '/ext/.tmp' })
-          .catch(error => rpcErrorHandler(error, 'storageStat'))
-        if (!dir) {
-          await props.flipper.RPC('storageMkdir', { path: '/ext/.tmp' })
-            .catch(error => rpcErrorHandler(error, 'storageMkdir'))
-        }
+<script setup>
+import { onMounted, defineProps, defineEmits, ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  categories: Array,
+  apps: Array,
+  initialCategory: Object,
+  flipper: Object,
+  connected: Boolean,
+  rpcActive: Boolean,
+  action: Object
+})
 
-        dir = await props.flipper.RPC('storageStat', { path: '/ext/.tmp/lab' })
-          .catch(error => rpcErrorHandler(error, 'storageStat'))
-        if (!dir) {
-          await props.flipper.RPC('storageMkdir', { path: '/ext/.tmp/lab' })
-            .catch(error => rpcErrorHandler(error, 'storageMkdir'))
-        }
-      }
-    }
+const emit = defineEmits(['showNotif', 'openApp', 'action', 'batchUpdate'])
 
-    const ensureCategoryPaths = async () => {
-      for (const category of categories.value) {
-        const dir = await props.flipper.RPC('storageStat', { path: `/ext/apps/${category.name}` })
-          .catch(error => rpcErrorHandler(error, 'storageStat'))
-        if (!dir) {
-          await props.flipper.RPC('storageMkdir', { path: `/ext/apps/${category.name}` })
-            .catch(error => rpcErrorHandler(error, 'storageMkdir'))
-        }
-      }
-    }
+onMounted(() => {
+  currentCategory.value = props.initialCategory
+})
 
-    const getInstalledApps = async () => {
-      const installed = []
-      if (flipperReady.value) {
-        const manifestsList = await props.flipper.RPC('storageList', { path: '/ext/apps_manifests' })
-          .catch(error => rpcErrorHandler(error, 'storageList'))
-        const decoder = new TextDecoder()
-        for (const file of manifestsList) {
-          const manifestFile = await props.flipper.RPC('storageRead', { path: `/ext/apps_manifests/${file.name}` })
-            .catch(error => rpcErrorHandler(error, 'storageRead'))
-          const manifest = decoder.decode(manifestFile)
-          const app = {
-            id: '',
-            name: '',
-            icon: '',
-            installedVersion: {
-              id: '',
-              api: ''
-            },
-            path: ''
-          }
-          for (const line of manifest.replaceAll('\r', '').split('\n')) {
-            const key = line.slice(0, line.indexOf(': '))
-            const value = line.slice(line.indexOf(': ') + 2)
-            switch (key) {
-              case 'UID':
-                app.id = value
-                break
-              case 'Full Name':
-                app.name = value
-                break
-              case 'Icon':
-                app.icon = value
-                break
-              case 'Version UID':
-                app.installedVersion.id = value
-                break
-              case 'Version Build API':
-                app.installedVersion.api = value
-                break
-              case 'Path':
-                app.path = value
-                break
-            }
-          }
-          installed.push(app)
-        }
-      }
+const initialCategoryRef = computed(() => props.initialCategory)
 
-      const versions = await fetchAppsVersions(installed.map(app => app.installedVersion.id))
-      for (const version of versions) {
-        const app = installed.find(app => app.id === version.applicationId)
-        if (app) {
-          app.installedVersion = { ...app.installedVersion, ...version }
-        }
-      }
-      installedApps.value = installed
-    }
+watch(initialCategoryRef, (newCategory) => {
+  currentCategory.value = newCategory
+})
 
-    const updateInstalledApps = async (installed) => {
-      if (!installed) {
-        await getInstalledApps()
-      }
-      for (const app of apps.value) {
-        const installed = installedApps.value.find(e => e.id === app.id)
-        if (installed) {
-          app.isInstalled = true
-          app.installedVersion = installed.installedVersion
+const catalogCategories = computed(() => {
+  return [{
+    // id:"64971d0f6617ba37a4bc79b3"
+    // priority:0
+    name: 'All apps',
+    color: 'EBEBEB'
+  }, ...props.categories]
+})
 
-          app.installedVersion.isOutdated = app.currentVersion.id !== app.installedVersion.id
-        } else {
-          app.isInstalled = false
-          app.installedVersion = null
-        }
+const filteredSortedApps = computed(() => {
+  let filtered
+  if (currentCategory.value) {
+    filtered = props.apps.filter(app => app.categoryId === currentCategory.value.id)
+  } else {
+    filtered = props.apps
+  }
 
-        app.actionButton = actionButton(app)
+  let sortBy = '', direction = -1
+  switch (sortModel.value) {
+    case 'New Updates':
+      sortBy = 'updatedAt'
+      break
+    case 'Old Updates':
+      sortBy = 'updatedAt'
+      direction = 1
+      break
+    case 'New Releases':
+      sortBy = 'createdAt'
+      break
+    case 'Old Releases':
+      sortBy = 'createdAt'
+      direction = 1
+      break
+  }
 
-        if (currentApp.value && app.id === currentApp.value.id) {
-          currentApp.value.isInstalled = app.isInstalled
-          currentApp.value.installedVersion = app.installedVersion
-        }
-      }
-      console.log('installed apps', installedApps.value)
+  return filtered.sort((a, b) => {
+    if (a[sortBy] >= b[sortBy]) {
+      return 1 * direction
     }
+    return -1 * direction
+  })
+})
 
-    const actionButton = (app) => {
-      if (!sdk.value.api) {
-        return { text: 'Install', class: 'bg-primary' }
-      }
-      if (app.isInstalled && app.installedVersion) {
-        if (app.installedVersion.api !== sdk.value.api) {
-          if (app.currentVersion.status === 'READY') {
-            return { text: 'Update', class: 'bg-positive' }
-          }
-          return { text: 'Installed', class: 'bg-grey-6' }
-        } else {
-          if (app.installedVersion.isOutdated) {
-            return { text: 'Update', class: 'bg-positive' }
-          } else {
-            return { text: 'Installed', class: 'bg-grey-6' }
-          }
-        }
-      }
+const actionColors = computed(() => {
+  switch (props.action.type) {
+    case 'delete':
       return {
-        text: 'Install',
-        class: 'bg-primary'
+        bar: 'negative',
+        track: 'deep-orange-5'
       }
-    }
-
-    const watchParams = async () => {
-      currentApp.value = null
-      initialCategory.value = null
-      const path = route.params.path
-      if (!path) {
-        return
-      }
-      if (path === 'installed') {
-        flags.value.installedPage = true
-        if (!props.connected) {
-          flags.value.connectFlipperDialog = true
-        }
-        return
-      }
-
-      flags.value.installedPage = false
-      const normalize = (string) => string.toLowerCase().replaceAll(' ', '-')
-      const category = categories.value.find(e => normalize(e.name) === normalize(path))
-      if (category) {
-        initialCategory.value = category
-      } else {
-        try {
-          const appFull = await fetchAppById(path, sdk.value)
-          if (appFull.detail && appFull.detail.status === 'error') {
-            router.push('/apps')
-            return
-          }
-          currentApp.value = appFull
-
-          const installed = installedApps.value.find(e => e.id === currentApp.value.id)
-          if (installed) {
-            currentApp.value.isInstalled = true
-            currentApp.value.installedVersion = installed.installedVersion
-
-            currentApp.value.installedVersion.isOutdated = currentApp.value.currentVersion.id !== currentApp.value.installedVersion.id
-          }
-          currentApp.value.actionButton = actionButton(currentApp.value)
-          console.log('current app', currentApp.value)
-
-          initialCategory.value = categories.value.find(e => e.id === appFull.categoryId)
-        } catch (error) {
-          console.error(error)
-        }
-      }
-    }
-
-    const start = async () => {
-      flags.value.rpcActive = props.rpcActive
-      flags.value.loadingInitial = true
-      const params = {
-        limit: 500,
-        offset: 0,
-        sort_by: 'updated_at',
-        sort_order: -1,
-        is_latest_release_version: true
-      }
-      const categoryParams = {
-        limit: 500
+    case 'install':
+      return {
+        bar: 'primary',
+        track: 'orange-6'
       }
-
-      if (props.connected) {
-        if (!flags.value.rpcActive) {
-          // if flipper is connected without active RPC session (e.g. came from CLI app)
-          await startRpc()
-          return
-        }
-        if (flipperReady.value) {
-          // when RPC session is up and device info retreived, get firmware API version and device target
-          try {
-            sdk.value.api = `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
-            sdk.value.target = `f${props.info.firmware.target}`
-
-            params.target = `f${props.info.firmware.target}`
-            params.api = `${props.info.firmware.api.major}.${props.info.firmware.api.minor}`
-            delete params.is_latest_release_version
-
-            categoryParams.target = params.target
-            categoryParams.api = params.api
-          } catch (error) {
-            flags.value.outdatedFirmwareDialogPersistent = true
-          }
-
-          await ensureCommonPaths()
-          await getInstalledApps()
-        } else {
-          return
-        }
-      } else {
-        installedApps.value = []
-        emit('connect')
+    default:
+      return {
+        bar: 'positive',
+        track: 'green-6'
       }
+  }
+})
 
-      categories.value = await fetchCategories(categoryParams)
-
-      await watchParams()
-      flags.value.loadingInitial = false
-
-      let newApps = [], allApps = []
-      do {
-        newApps = await fetchAppsShort(params)
-        allApps = allApps.concat(newApps)
-        if (newApps.length === params.limit) {
-          params.offset += params.limit
-        }
-      } while (newApps.length === params.limit)
-      apps.value = allApps
-      await updateInstalledApps(props.installedApps)
-
-      console.log('compatible apps', apps.value)
-    }
-
-    watch(flipperReady, () => {
-      flags.value.connectFlipperDialog = false
-      start()
-    })
-
-    watch(route, async (to, from) => {
-      await watchParams()
-    })
-
-    const openApp = async (app) => {
-      router.push({ name: 'AppsPath', params: { path: app.alias } })
-    }
-
-    return {
-      componentName,
-
-      flags,
-      router,
-      initialCategory,
-      currentApp,
-      apps,
-      installedApps,
-      categories,
-      action,
-      batch,
-      sdk,
+const currentCategory = ref(null)
+const sortOptions = [
+  'New Updates',
+  'New Releases',
+  'Old Updates',
+  'Old Releases'
+]
+const sortModel = ref('New Updates')
+const actionType = ref(null)
+
+const appClicked = (app) => {
+  if (props.action.type) {
+    return
+  }
+  emit('openApp', app)
+}
+
+const handleAction = (app, value) => {
+  if (value === 'Installed') {
+    actionType.value = ''
+  } else {
+    actionType.value = value.toLowerCase()
+  }
+  emit('action', app, actionType.value)
+}
 
-      updatableAppsAmount,
+// const router = useRouter()
+const onSortApps = (category) => {
+  if (category.name === 'All apps') {
+    currentCategory.value = null
 
-      handleAction,
-      installApp,
-      updateApp,
-      deleteApp,
-      batchUpdate,
-      setCategory,
-      startRpc,
-      stopRpc,
-      passNotif,
-      passLog,
-      rpcErrorHandler,
-      toggleInstalled,
-      ensureCommonPaths,
-      ensureCategoryPaths,
-      getInstalledApps,
-      updateInstalledApps,
-      actionButton,
-      openApp
-    }
+    return
   }
-})
+
+  currentCategory.value = category
+}
 </script>
 
 <style lang="sass" scoped>
-.apps-navbar
-  div
+.apps
+  display: grid
+  grid-template-columns: repeat(4, 1fr)
+  justify-items: center
+
+  .card-container
+    padding: 12px
+    border-radius: 14px
+    transition-duration: 300ms
+    cursor: pointer
+    &:hover
+      box-shadow: 0 1px 11px rgb(0 0 0 / 13%), 0 3px 6px rgb(0 0 0 / 5%), 0 3px 6px -2px rgb(0 0 0 / 8%)
+  .app-card
+    display: flex
+    flex-direction: column
+    justify-content: center
+    padding: 0
+    border-radius: 3px
+    .screenshot
+      display: flex
+      justify-content: center
+      padding: 4px
+      background-color: $primary
+      border: 2px solid #000000
+      border-radius: 6px
+      img
+        image-rendering: pixelated
+    .text-h6
+      line-height: 1.75rem
+    .desc
+      font-size: 12px
+      line-height: 15px
+
+@media (max-width: 1340px)
+  .apps
+    grid-template-columns: repeat(3, 1fr)
+
+@media (max-width: 1032px)
+  .apps
+    grid-template-columns: repeat(2, 1fr)
+
+@media (max-width: 875px)
+  .categories
+    grid-template-columns: repeat(4, 1fr)
+
+@media (max-width: 670px)
+  .categories
+    grid-template-columns: repeat(3, 1fr)
+  .apps
     display: flex
+    flex-direction: column
+    flex-wrap: nowrap
     align-items: center
-    height: 40px
 
-.outdated-badge
-  height: 17px !important
-  position: relative
-  top: -11px
-  left: -72px
-  font-size: 10px
-  border: 1px #ffffff solid
-  border-radius: 17px
+@media (max-width: 545px)
+  .categories
+    grid-template-columns: repeat(2, 1fr)
 </style>
diff --git a/frontend/src/pages/InstalledApps.vue b/frontend/src/pages/InstalledApps.vue
new file mode 100644
index 0000000..d5c2450
--- /dev/null
+++ b/frontend/src/pages/InstalledApps.vue
@@ -0,0 +1,369 @@
+<template>
+  <q-page class="column full-width">
+    <template v-if="!props.installedApps.length">
+      <div class="column items-center">
+        <q-spinner
+          color="primary"
+          size="3em"
+          class="q-mb-md"
+        ></q-spinner>
+        <p>Loading installed app...</p>
+      </div>
+    </template>
+    <template v-else>
+      <div v-if="updatableApps.length" style="width: 140px">
+        <template v-if="props.batch.totalCount">
+          <q-linear-progress
+            :value="props.batch.doneCount / props.batch.totalCount + props.action.progress / props.batch.totalCount"
+            size="32px"
+            :color="actionColors.bar"
+            :track-color="actionColors.track"
+            style="border-radius: 5px;"
+          >
+            <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
+              <div
+                class="app-progress-label"
+                style="font-size: 28px;"
+              >{{ `${props.batch.doneCount} / ${props.batch.totalCount}` }}</div>
+            </div>
+          </q-linear-progress>
+        </template>
+        <q-btn
+          v-else
+          flat
+          dense
+          color="white"
+          style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+          label="Update all"
+          class="fit no-shadow text-pixelated bg-positive"
+          @click="emit('batchUpdate', updatableApps);"
+        >
+          <div class="install-all-badge">{{ updatableApps.length }}</div>
+        </q-btn>
+      </div>
+
+      <div v-if="props.batch.failed.length" class="text-negative">
+        Update failed for
+        <span v-for="app, index in props.batch.failed" :key="app.id">"{{ app.currentVersion.name }}"<span v-if="props.batch.failed[index + 1]">, </span></span>
+      </div>
+
+      <div class="column full-width" :class="props.batch.totalCount ? 'disabled' : ''">
+        <div
+          v-for="app in updatableApps"
+          :key="app.currentVersion.name"
+          class="flex no-wrap items-center q-my-md"
+          :class="props.action.type === 'delete' && props.action.id === app.id ? 'disabled' : ''"
+        >
+          <div class="flex no-wrap items-center cursor-pointer" @click="appClicked(app)">
+            <div class="app-icon q-mr-md">
+              <q-img :src="app.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
+            </div>
+            <div class="col-10">
+              <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
+              <div class="text-grey-7" style="margin-right: 80px;">{{ app.currentVersion.shortDescription }}</div>
+            </div>
+          </div>
+
+          <q-space />
+
+          <div class="column items-end q-ml-md">
+            <span class="text-grey-7">Version:</span>
+            <b>{{ app.installedVersion.version }}</b>
+          </div>
+          <div class="q-ml-md" style="width: 80px;">
+            <template v-if="props.action.type && props.action.id === app.id">
+              <q-linear-progress
+                :value="props.action.progress"
+                size="32px"
+                :color="actionColors.bar"
+                :track-color="actionColors.track"
+                style="width: 80px; border-radius: 5px;"
+                class="q-ml-xs"
+              >
+                <div class="absolute-full flex flex-center" style="border: 2px solid; border-radius: 5px;">
+                  <div
+                    class="app-progress-label"
+                    style="font-size: 28px;"
+                  >{{ `${props.action.progress * 100}%` }}</div>
+                </div>
+              </q-linear-progress>
+            </template>
+            <q-btn
+              v-else
+              flat
+              dense
+              color="white"
+              style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+              label="Update"
+              class="fit no-shadow text-pixelated bg-positive"
+              @click="handleAction(app, 'update')"
+            />
+          </div>
+          <q-btn
+            flat
+            round
+            dense
+            color="negative"
+            icon="svguse:common-icons.svg#delete"
+            class="q-ml-md"
+            @click="appToDelete = app; flags.deleteConfirmationDialog = true"
+          />
+        </div>
+
+        <q-separator v-if="updatableApps.length && upToDateApps.length" class="q-my-lg" />
+
+        <div
+          v-for="app in upToDateApps"
+          :key="app.currentVersion.name"
+          class="flex no-wrap items-center q-my-md"
+          :class="props.action.type === 'delete' && props.action.id === app.id ? 'disabled' : ''"
+        >
+          <div class="flex no-wrap items-center cursor-pointer" @click="appClicked(app)">
+            <div class="app-icon q-mr-md">
+              <q-img :src="app.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
+            </div>
+            <div class="col-10">
+              <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.currentVersion.name }}</div>
+              <div class="text-grey-7" style="margin-right: 80px;">{{ app.currentVersion.shortDescription }}</div>
+            </div>
+          </div>
+
+          <q-space />
+
+          <div class="column items-end q-ml-md">
+            <span class="text-grey-7">Version:</span>
+            <b>{{ app.currentVersion.version }}</b>
+          </div>
+          <div class="q-ml-md" style="width: 80px;">
+            <q-btn
+              flat
+              dense
+              color="white"
+              style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+              label="Installed"
+              class="fit no-shadow text-pixelated bg-grey-6"
+            />
+          </div>
+          <q-btn
+            flat
+            round
+            dense
+            color="negative"
+            icon="svguse:common-icons.svg#delete"
+            class="q-ml-md"
+            @click="appToDelete = app; flags.deleteConfirmationDialog = true"
+          />
+        </div>
+
+        <div
+          v-for="app in unsupportedApps"
+          :key="app.name"
+          class="flex no-wrap items-center q-my-md"
+          :class="props.action.type === 'delete' && props.action.id === app.id ? 'disabled' : ''"
+        >
+          <div class="flex no-wrap items-center cursor-pointer" @click="$router.push(`/apps/${app.id}`)">
+            <div class="app-icon q-mr-md">
+              <q-img :src="`data:image/png;base64,${app.icon}`" style="image-rendering: pixelated; width: 38px"/>
+            </div>
+            <div class="col-10">
+              <div class="flex flex-center">
+                <div class="text-h6 q-mr-sm" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ app.name }}</div>
+                <q-chip color="deep-orange-2" icon="mdi-alert-circle-outline" label="Outdated app" size="12px" dense class="q-px-sm"/>
+              </div>
+              <div class="text-grey-7">{{ app.installedVersion.shortDescription }}</div>
+            </div>
+          </div>
+
+          <q-space />
+
+          <div class="column items-end q-ml-md">
+            <span v-if="app.installedVersion.version" class="text-grey-7">Version:</span>
+            <b>{{ app.installedVersion.version }}</b>
+          </div>
+          <div class="q-ml-md" style="width: 80px;">
+            <q-btn
+              flat
+              dense
+              color="white"
+              style="margin-left: 5px; padding: 0; border-radius: 5px; font-size: 16px; line-height: 16px;"
+              label="Installed"
+              class="fit no-shadow text-pixelated bg-grey-6"
+            />
+          </div>
+          <q-btn
+            flat
+            round
+            dense
+            color="negative"
+            icon="svguse:common-icons.svg#delete"
+            class="q-ml-md"
+            @click="appToDelete = app; flags.deleteConfirmationDialog = true"
+          />
+        </div>
+      </div>
+
+      <q-dialog v-model="flags.deleteConfirmationDialog">
+        <q-card class="dialog" style="min-width: 300px;">
+          <q-card-section class="q-pb-none">
+            <div class="text-h6">Delete this app?</div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none q-my-md text-center">
+            <div class="flex no-wrap items-center">
+              <div class="app-icon q-mr-md">
+                <template v-if="appToDelete.currentVersion">
+                  <q-img :src="appToDelete.currentVersion.iconUri" style="image-rendering: pixelated; width: 38px"/>
+                </template>
+                <template v-else>
+                  <q-img :src="`data:image/png;base64,${appToDelete.icon}`" style="image-rendering: pixelated; width: 38px"/>
+                </template>
+              </div>
+              <div class="column items-start">
+                <template v-if="appToDelete.currentVersion">
+                  <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ appToDelete.currentVersion.name }}</div>
+                  <div class="text-grey-7"><b>v{{ appToDelete.currentVersion.version }}</b></div>
+                </template>
+                <template v-else>
+                  <div class="text-h6" style="line-height: 1.5em; margin-bottom: 0.25rem;">{{ appToDelete.name }}</div>
+                  <div class="text-grey-7"><b>v{{ appToDelete.installedVersion.version }}</b></div>
+                </template>
+              </div>
+            </div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none" align="right">
+            <q-btn
+              flat
+              text-color="dark"
+              class="q-mr-md"
+              label="Cancel"
+              v-close-popup
+            ></q-btn>
+            <q-btn
+              outline
+              color="negative"
+              label="Delete"
+              v-close-popup
+              @click="handleAction(appToDelete, 'delete')"
+            ></q-btn>
+          </q-card-section>
+        </q-card>
+      </q-dialog>
+    </template>
+  </q-page>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, ref, computed } from 'vue'
+// import semver from 'semver'
+
+const props = defineProps({
+  apps: Array,
+  flipper: Object,
+  installedApps: Array,
+  sdk: Object,
+  action: Object,
+  batch: Object
+})
+
+const emit = defineEmits(['openApp', 'action', 'batchUpdate'])
+
+const flags = ref({
+  deleteConfirmationDialog: false
+})
+const appToDelete = ref(null)
+const actionType = ref('')
+
+const updatableApps = computed(() => {
+  return props.apps.filter(app => {
+    if (app.isInstalled === true && app.installedVersion && app.currentVersion.status === 'READY') {
+      if (props.sdk.api && app.installedVersion.api !== props.sdk.api) {
+        return true
+      }
+      if (app.installedVersion.isOutdated) {
+        return true
+      }
+    }
+    return false
+  })
+})
+
+const upToDateApps = computed(() => {
+  return props.apps.filter(app => {
+    if (app.isInstalled === true && app.installedVersion) {
+      if (props.sdk.api && app.installedVersion.api !== props.sdk.api) {
+        return false
+      }
+      if (!app.installedVersion.isOutdated && app.currentVersion.status === 'READY') {
+        return true
+      }
+    }
+    return false
+  })
+})
+
+const unsupportedApps = computed(() => {
+  return props.installedApps.filter(installedApp => {
+    if (!props.apps.find(app => app.id === installedApp.id)) {
+      return true
+    }
+    return false
+  })
+})
+
+const actionColors = computed(() => {
+  switch (props.action.type) {
+    case 'delete':
+      return {
+        bar: 'negative',
+        track: 'deep-orange-5'
+      }
+    case 'install':
+      return {
+        bar: 'primary',
+        track: 'orange-6'
+      }
+    default:
+      return {
+        bar: 'positive',
+        track: 'green-6'
+      }
+  }
+})
+
+const appClicked = (app) => {
+  if (props.action.type) {
+    return
+  }
+  emit('openApp', app)
+}
+
+const handleAction = (app, value) => {
+  if (value === 'Installed') {
+    actionType.value = ''
+  } else {
+    actionType.value = value.toLowerCase()
+  }
+  emit('action', app, actionType.value)
+}
+</script>
+
+<style lang="sass" scoped>
+.app-icon
+  width: 60px
+  height: 60px
+  padding: 10px
+  border: 1px solid #dbdbdb
+  border-radius: 10px
+
+.install-all-badge
+  position: relative
+  top: -1px
+  margin-left: 10px
+  padding: 3px 4px 1px 4px
+  font-size: 15px
+  line-height: 13px
+  background: #ffffffb3
+  color: $positive
+  border-radius: 3px
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 5196683..96649f1 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -11,8 +11,16 @@ const routes = [
     path: '/apps',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { name: 'Apps', path: '', component: () => import('pages/Apps.vue') },
-      { name: 'AppsPath', path: ':path', component: () => import('pages/Apps.vue') }
+      {
+        name: 'AppsLayout',
+        path: '',
+        component: () => import('layouts/AppsLayout.vue'),
+        children: [
+          { name: 'Apps', path: '', component: () => import('pages/Apps.vue') },
+          { name: 'InstalledApps', path: 'installed', component: () => import('pages/InstalledApps.vue') },
+          { name: 'AppsPath', path: ':path', component: () => import('pages/App.vue') }
+        ]
+      }
     ]
   },
   {