From 275312b13cd409d2393b77f60294c2780ed11fff Mon Sep 17 00:00:00 2001
From: Maximilian Schleining <maximilian.schleining@agenda-software.de>
Date: Tue, 13 Aug 2024 12:22:10 +0200
Subject: [PATCH] fix(katzencore): Refactored Edit View, Mobile Editing View
 added. Improvement of Content Parsing without DOM Tree

---
 eslint.config.mjs                             |   6 +-
 src/module.ts                                 |  10 +-
 src/runtime/components/views/EditView.vue     | 855 ------------------
 src/runtime/components/views/MainView.vue     |  62 --
 .../components/views/edit/PageList.vue        | 125 +++
 .../components/views/edit/RouteView.vue       |  93 ++
 .../views/edit/overlay/ActionButtons.vue      | 136 +++
 .../views/edit/overlay/ContentEdit.vue        | 259 ++++++
 .../components/views/edit/overlay/Hover.vue   |  52 ++
 .../views/edit/popup/Deployment.vue           |  38 +
 .../components/views/edit/popup/Error.vue     |  43 +
 src/runtime/pages/KatzeCms.vue                |  65 --
 src/runtime/pages/cms/KatzeEdit.vue           | 224 +++++
 src/runtime/pages/cms/KatzeHome.vue           |  72 ++
 src/runtime/types/EditTypes.ts                |  34 +
 15 files changed, 1090 insertions(+), 984 deletions(-)
 delete mode 100644 src/runtime/components/views/EditView.vue
 delete mode 100644 src/runtime/components/views/MainView.vue
 create mode 100644 src/runtime/components/views/edit/PageList.vue
 create mode 100644 src/runtime/components/views/edit/RouteView.vue
 create mode 100644 src/runtime/components/views/edit/overlay/ActionButtons.vue
 create mode 100644 src/runtime/components/views/edit/overlay/ContentEdit.vue
 create mode 100644 src/runtime/components/views/edit/overlay/Hover.vue
 create mode 100644 src/runtime/components/views/edit/popup/Deployment.vue
 create mode 100644 src/runtime/components/views/edit/popup/Error.vue
 delete mode 100644 src/runtime/pages/KatzeCms.vue
 create mode 100644 src/runtime/pages/cms/KatzeEdit.vue
 create mode 100644 src/runtime/pages/cms/KatzeHome.vue
 create mode 100644 src/runtime/types/EditTypes.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3318554..d57c03f 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -17,5 +17,9 @@ export default createConfigForNuxt({
   },
 })
   .append(
-    // your custom flat config here...
+    {
+      rules: {
+        'vue/multi-word-component-names': 0,
+      },
+    },
   )
diff --git a/src/module.ts b/src/module.ts
index 875fda3..73dd146 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -126,7 +126,12 @@ export default defineNuxtModule<ModuleOptions>({
           {
             name: 'katze-cms',
             path: '/cms',
-            file: resolver.resolve('runtime/pages/KatzeCms.vue'),
+            file: resolver.resolve('runtime/pages/cms/KatzeHome.vue'),
+          },
+          {
+            name: 'katze-cms-edit',
+            path: '/cms/edit',
+            file: resolver.resolve('runtime/pages/cms/KatzeEdit.vue'),
           },
           {
             name: 'katze-cms-login',
@@ -168,6 +173,9 @@ export default defineNuxtModule<ModuleOptions>({
     await addComponentsDir({
       path: resolver.resolve('runtime/components/ui'),
     })
+    await addComponentsDir({
+      path: resolver.resolve('runtime/components/views'),
+    })
   },
 })
 
diff --git a/src/runtime/components/views/EditView.vue b/src/runtime/components/views/EditView.vue
deleted file mode 100644
index 5700ba6..0000000
--- a/src/runtime/components/views/EditView.vue
+++ /dev/null
@@ -1,855 +0,0 @@
-<script setup lang="ts">
-import { EditorContent, useEditor } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import Highlight from '@tiptap/extension-highlight'
-import Placeholder from '@tiptap/extension-placeholder'
-import { Extension } from '@tiptap/core'
-import type { RouteComponent } from 'vue-router'
-import { ComponentType, type KatzenUIComponent, useUiStore } from '../../stores/UiStore'
-import type { ImageContent } from '../../composables/useUiComponents'
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, shallowRef, useCookie, watch } from '#imports'
-import { useAsyncData, useRouter } from '#app'
-
-const DisableEnter = Extension.create({
-  addKeyboardShortcuts() {
-    return {
-      'Enter': () => {
-        return currentSelectedComponent.value?.type == ComponentType.Text
-      },
-      'Shift-Enter': () => {
-        return currentSelectedComponent.value?.type == ComponentType.Text
-      },
-      'Cmd-Enter': () => {
-        return currentSelectedComponent.value?.type == ComponentType.Text
-      },
-      'Ctrl-Enter': () => {
-        return currentSelectedComponent.value?.type == ComponentType.Text
-      },
-    }
-  },
-})
-
-const router = useRouter()
-const routes = router.options.routes
-const filteredRoutes = computed((): Route[] => {
-  const filteredRoutes = routes.filter(route => (route.name !== 'katze-cms' && route.name !== 'katze-cms-login'))
-  return filteredRoutes.map(route => ({
-    name: route.name?.toString() || route.path,
-    path: route.path,
-    component: route.component,
-  }))
-})
-type Lazy<T> = () => Promise<T>
-interface Route {
-  name: string
-  path: string
-  component: Lazy<RouteComponent> | RouteComponent | undefined | null
-}
-
-const selectedRoute = ref<Route>({
-  name: '',
-  path: '',
-  component: undefined,
-})
-
-const Route = shallowRef<unknown>(undefined)
-
-const hoverPosition = ref<HTMLElement | null>(null)
-const routeWrapper = ref<HTMLElement | null>(null)
-
-const hoveredElement = ref<HTMLElement | null>(null)
-const selectedElement = ref<HTMLElement | null>(null)
-
-const currentSelectedKey = ref<string | undefined>(undefined)
-const currentSelectedComponent = ref<KatzenUIComponent | undefined>(undefined)
-
-const selectedImage = ref<string | undefined>(undefined)
-
-watch(selectedRoute, async () => {
-  const route = selectedRoute.value
-  if (route.path && route.component) {
-    // if route component is not a function wrap it in a function
-    let implementation: Lazy<RouteComponent>
-    if (typeof route.component === 'function') {
-      implementation = route.component as Lazy<RouteComponent>
-    }
-    else {
-      implementation = async () => route.component as RouteComponent
-    }
-    Route.value = defineAsyncComponent(implementation)
-  }
-  selectedElement.value = null
-})
-
-onMounted(
-  // add mutation observer to routeWrapper
-  () => {
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          // find all elements
-          const elements = routeWrapper.value?.querySelectorAll('*[kat-e]')
-
-          if (elements) {
-            elements.forEach((element: Element) => {
-              if (!(element instanceof HTMLElement)) {
-                return
-              }
-              element.addEventListener('mouseover', () => {
-                hoveredElement.value = element
-              })
-              element.addEventListener('mouseleave', () => {
-                hoveredElement.value = null
-              })
-              element.removeAttribute('href')
-              element.removeAttribute('target')
-              element.addEventListener('click', (event) => {
-                if (selectedElement.value === element) {
-                  return
-                }
-                selectedElement.value = element
-
-                // cancel click event
-                event.preventDefault()
-                event.stopPropagation()
-                event.stopImmediatePropagation()
-
-                const attribute = selectedElement.value.getAttribute('kat-e')
-                if (attribute) {
-                  const component = uiStore.getComponents(attribute)
-                  if (component) {
-                    currentSelectedKey.value = attribute
-                    currentSelectedComponent.value = component
-
-                    if (component.type === ComponentType.Image) {
-                      const content = component.content as ImageContent || { src: '', alt: '' }
-                      editor.value?.commands.setContent(content.alt)
-                      selectedImage.value = content.src
-                    }
-                    else {
-                      if (component.type === ComponentType.Text) {
-                        editor.value?.commands.setContent(component.content as string)
-                      }
-                      else if (component.type === ComponentType.RichText) {
-                        const parser = new DOMParser()
-                        const dom = parser.parseFromString(component.content as string, 'text/html')
-                        const pTags = dom.querySelectorAll('span')
-                        const newDom = document.createElement('body')
-                        pTags.forEach((pTag) => {
-                          const p = document.createElement('p')
-                          p.innerHTML = pTag.innerHTML
-                          newDom.appendChild(p)
-                        })
-                        editor.value?.commands.setContent(newDom.innerHTML as string)
-                      }
-                    }
-                  }
-                }
-                event.stopPropagation()
-                event.preventDefault()
-              })
-            })
-          }
-        }
-      })
-    })
-
-    observer.observe(routeWrapper.value as Node, {
-      childList: true,
-      subtree: true,
-    })
-
-    window.addEventListener('resize', resizeListener)
-    resizeListener()
-  },
-)
-
-const resizeListener = () => {
-  viewPortHeight.value = window.innerHeight
-  viewPortWidth.value = window.innerWidth
-
-  const container = document.querySelector('body')
-  if (container) {
-    const containerWidth = container.clientWidth
-    isMobile.value = containerWidth < 768
-  }
-}
-
-onUnmounted(() => {
-  window.removeEventListener('resize', resizeListener)
-})
-
-watch(hoveredElement, () => {
-  const updatePosition = () => {
-    if (hoverPosition.value && hoveredElement.value) {
-      const elementPositionAbsolute = hoveredElement.value.getBoundingClientRect()
-      hoverPosition.value.style.top = `${elementPositionAbsolute.top}px`
-      hoverPosition.value.style.left = `${elementPositionAbsolute.left}px`
-      hoverPosition.value.style.width = `${elementPositionAbsolute.width}px`
-      hoverPosition.value.style.height = `${elementPositionAbsolute.height}px`
-    }
-  }
-  if (hoverPosition.value && hoveredElement.value) {
-    updatePosition()
-    window.addEventListener('resize', updatePosition)
-    window.addEventListener('scroll', updatePosition)
-  }
-  else if (!hoveredElement.value && hoverPosition.value) {
-    hoverPosition.value.removeAttribute('style')
-    window.removeEventListener('resize', updatePosition)
-    window.removeEventListener('scroll', updatePosition)
-  }
-})
-
-defineEmits(['openHomePage'])
-
-const editor = useEditor({
-  content: '',
-  editorProps: {
-    attributes: {
-      class: 'focus:outline-none py-4',
-    },
-  },
-  extensions: [StarterKit.configure(), Placeholder.configure({
-    placeholder: ({ node }) => {
-      if (node.type.name === 'heading') {
-        return 'What’s the title?'
-      }
-
-      return 'Write something …'
-    },
-  },
-  ),
-  Highlight.configure({
-    HTMLAttributes: {
-      class: 'hightlight-text',
-    },
-  }),
-  DisableEnter,
-  ],
-  onUpdate({ editor }) {
-    if (currentSelectedKey.value) {
-      const html = editor.getHTML()
-      const dom = new DOMParser().parseFromString(html, 'text/html')
-      const text = dom.body.textContent || ''
-
-      if (currentSelectedComponent.value?.type === ComponentType.RichText) {
-        console.log(html)
-        const newDom = document.createElement('body')
-        const pTags = dom.querySelectorAll('p')
-        pTags.forEach((pTag, index) => {
-          const span = document.createElement('span')
-          span.innerHTML = pTag.innerHTML
-          newDom.appendChild(span)
-          if (index !== pTags.length - 1) {
-            const br = document.createElement('br')
-            newDom.appendChild(br)
-          }
-        })
-        uiStore.updateUiContent(currentSelectedKey.value, newDom.innerHTML)
-      }
-      else if (currentSelectedComponent.value?.type === ComponentType.Text) {
-        uiStore.updateUiContent(currentSelectedKey.value, text)
-      }
-      else if (currentSelectedComponent.value?.type === ComponentType.Image) {
-        const content = currentSelectedComponent.value.content as ImageContent || { src: '', alt: '' }
-        uiStore.updateUiContent(currentSelectedKey.value, {
-          src: content.src,
-          alt: text,
-        })
-      }
-    }
-  },
-
-})
-
-const uiStore = useUiStore()
-
-interface MenuEntry {
-  name: string
-  click: () => void
-  active: () => boolean
-}
-
-const menuEntries: MenuEntry[] = [
-  {
-    name: 'Bold',
-    click: () => { editor.value?.chain().focus().toggleBold().run() },
-    active: () => editor.value?.isActive('bold') || false,
-  },
-  {
-    name: 'Italic',
-    click: () => { editor.value?.chain().focus().toggleItalic().run() },
-    active: () => editor.value?.isActive('italic') || false,
-  },
-  {
-    name: 'Strike',
-    click: () => { editor.value?.chain().focus().toggleStrike().run() },
-    active: () => editor.value?.isActive('strike') || false,
-  },
-  {
-    name: 'Highlight',
-    click: () => { editor.value?.chain().focus().toggleHighlight().run() },
-    active: () => editor.value?.isActive('highlight') || false,
-  },
-]
-
-interface SaveResponse {
-  success: boolean
-}
-
-const saveState = ref({
-  loading: false,
-  success: false,
-  failed: false,
-})
-
-const hasSaveState = computed(() => saveState.value.loading || saveState.value.success || saveState.value.failed)
-
-const saveUiContent = async () => {
-  saveState.value.loading = true
-  const uiContent = uiStore.getUiContent()
-  const token = useCookie('token')
-  const data: SaveResponse = await $fetch('/content-cms', {
-    method: 'POST',
-    body: {
-      token: token.value,
-      content: uiContent,
-      action: 'save',
-    },
-  })
-  saveState.value.loading = false
-  saveState.value.success = data.success
-  saveState.value.failed = !data.success
-
-  setTimeout(() => {
-    saveState.value.success = false
-    saveState.value.failed = false
-  }, 2000)
-}
-
-interface PublishResponse {
-  success: boolean
-  missingDeployHookURL?: boolean
-}
-
-const publishPopup = ref(false)
-
-const publishState = ref({
-  loading: false,
-  success: false,
-  failed: false,
-})
-
-const hasPublishState = computed(() => publishState.value.loading || publishState.value.success || publishState.value.failed)
-
-const deployContent = async () => {
-  publishPopup.value = false
-
-  publishState.value.loading = true
-  const token = useCookie('token')
-  console.log('deploy')
-  const data: PublishResponse = await $fetch('/content-cms', {
-    method: 'POST',
-    body: {
-      token: token.value,
-      action: 'deploy',
-    },
-  })
-  publishState.value.loading = false
-  publishState.value.success = data.success
-  publishState.value.failed = !data.success
-
-  if (data.missingDeployHookURL) {
-    errorPopup.value = true
-    errorMessages.value.push('You need to set a deploy hook URL in the environment variables to publish the content.')
-    errorMessages.value.push('If you\'re running the project locally, you can restart the server manually.')
-  }
-
-  setTimeout(() => {
-    publishState.value.success = false
-    publishState.value.failed = false
-  }, 2000)
-}
-
-const errorPopup = ref(false)
-const errorMessages = ref<string[]>([])
-
-const closeErrorPopup = () => {
-  errorPopup.value = false
-  errorMessages.value = []
-}
-
-interface ImageListResponse {
-  body: {
-    images: string[]
-  }
-}
-
-const { data: imageResponse } = useAsyncData(async () => await $fetch<ImageListResponse>('/content-cms', {
-  method: 'POST',
-  body: {
-    token: useCookie('token').value,
-    action: 'imageList',
-  },
-}), {
-  default: (): ImageListResponse => ({
-    body: {
-      images: [],
-    },
-  }),
-})
-
-// if the images are not 9 in total, add empty strings to the array
-const fillEmptySpace = computed((): string[] => {
-  const rest = 9 - imageResponse.value.body.images.length
-  if (rest > 0) {
-    return Array.from({ length: rest }).fill('') as string[]
-  }
-
-  // if not 3 last images, fill with empty strings
-  const mod = imageResponse.value.body.images.length % 3
-  if (mod > 0) {
-    return Array.from({ length: 3 - mod }).fill('') as string[]
-  }
-
-  return []
-})
-
-watch(selectedImage, () => {
-  if (selectedImage.value && currentSelectedKey.value) {
-    const content = currentSelectedComponent.value?.content as ImageContent || { src: '', alt: '' }
-    uiStore.updateUiContent(currentSelectedKey.value, {
-      src: selectedImage.value,
-      alt: content.alt,
-    })
-  }
-})
-
-const mobileView = ref(false)
-const viewPortHeight = ref(0)
-const viewPortWidth = ref(0)
-
-watch(mobileView, () => {
-  if (mobileView.value) {
-    // set meta viewport width to 768px
-    // find if meta[name=viewport] exists if not create it
-    const metaViewport = document.querySelector('meta[name=viewport]')
-    if (metaViewport) {
-      metaViewport.setAttribute('content', 'width=768, initial-scale=1')
-    }
-    else {
-      const meta = document.createElement('meta')
-      meta.name = 'viewport'
-      meta.content = 'width=768'
-      document.head.appendChild(meta)
-    }
-  }
-  else {
-    // set meta viewport width to device-width
-    // find if meta[name=viewport] exists if not create it
-    const metaViewport = document.querySelector('meta[name=viewport]')
-    if (metaViewport) {
-      metaViewport.setAttribute('content', 'width=device-width, initial-scale=1')
-    }
-    else {
-      const meta = document.createElement('meta')
-      meta.name = 'viewport'
-      meta.content = 'width=device-width'
-      document.head.appendChild(meta)
-    }
-  }
-})
-
-const openList = ref(false)
-
-const isMobile = ref(false)
-</script>
-
-<template>
-  <div class="h-screen w-full flex flex-row">
-    <div
-      v-if="isMobile && !openList"
-      class="fixed top-0 left-0 z-50 bg-amber-50 w-24 h-12 flex flex-row items-center justify-center"
-    >
-      <img
-        src="../../assets/icons/edit.svg"
-        class="size-6 cursor-pointer"
-        alt="menu"
-        @click="openList = true"
-      >
-    </div>
-
-    <div
-      class="w-full h-full bg-amber-50 flex flex-col"
-      :class="{ '!w-52': (Route!==undefined && !mobileView) || (Route!==undefined && isMobile && openList),
-                '!w-0': Route!==undefined && isMobile && !openList }"
-    >
-      <div class="flex flex-row gap-2">
-        <div
-          class="flex flex-row gap-2 justify-center p-2 m-4 border-black border-2 rounded hover:drop-shadow cursor-pointer transition-all"
-          :class="{ 'mr-0': isMobile }"
-          @click="$emit('openHomePage')"
-        >
-          <img
-            src="../../assets/icons/back_arrow.svg"
-            class="size-6"
-            alt="arrow_back"
-          >
-          <p
-            class="font-mono font-bold uppercase"
-          >
-            Back to Menu
-          </p>
-        </div>
-        <div
-          v-if="isMobile"
-          class="p-2 m-4 ml-0 border-black border-2 rounded hover:drop-shadow cursor-pointer transition-all flex justify-center items-center"
-          @click="openList = false"
-        >
-          <img
-            src="../../assets/icons/close.svg"
-            class="size-6"
-            alt="close"
-          >
-        </div>
-      </div>
-
-      <div class="flex flex-col items-center justify-center">
-        <h2 class="font-mono text-xl uppercase font-bold m-0 p-0">
-          Edit Pages
-        </h2>
-      </div>
-      <!--  grid when no route is selected -->
-      <div
-        class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-10 flex-col gap-2 h-full my-2 overflow-y-auto w-full items-start justify-start px-2"
-        :class="{ '[&>*]:max-w-96': Route === undefined, '!flex': Route !== undefined }"
-      >
-        <div
-          v-for="route in filteredRoutes"
-          :key="route.path"
-          class="w-full px-2 py-1 border-black border-2 rounded hover:bg-black/10 hover:animate-pulse cursor-pointer"
-          :class="{ 'border-purple-400': selectedRoute.path === route.path }"
-          @click="selectedRoute = route"
-        >
-          <p class="text-black opacity-50 uppercase text-sm font-mono">
-            {{ route.path }}
-          </p>
-          <p class="text-black uppercase font-bold font-mono">
-            {{ route.name }}
-          </p>
-        </div>
-      </div>
-    </div>
-    <div
-      ref="routeWrapper"
-      class="flex-1 bg-slate-50 relative w-0 flex justify-center items-center"
-      :class="{ '!w-full': Route }"
-    >
-      <!-- mobile size: width: 768px height: 1024px -->
-      <div
-        class="size-full bg-gray-300"
-        :class="mobileView?['max-w-[390px]', 'max-h-[844px]']:[]"
-      >
-        <div class="size-full bg-white overflow-y-scroll route-container">
-          <Route
-            v-if="Route"
-            :component="Route"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- hover overlay -->
-    <div class="absolute inset-0 opacity-50 select-none touch-none pointer-events-none ontop">
-      <div
-        ref="hoverPosition"
-        class="absolute z-20 -top-full -left-full bg-red-400/20 border-2 rounded border-red-500"
-      />
-    </div>
-
-    <!-- selected overlay -->
-    <div
-      v-if="selectedElement"
-      class="absolute inset-0 select-none touch-none pointer-events-none flex justify-center items-center ontop"
-    >
-      <div class="relative z-40  flex flex-col pointer-events-auto bg-white p-5 border-black border-2 rounded max-w-96 w-full">
-        <div class="flex flex-row items-center mb-6">
-          <p class="font-mono font-bold uppercase">
-            Change Element Value
-          </p>
-          <img
-            src="../../assets/icons/close.svg"
-            class="size-6 ml-auto cursor-pointer"
-            alt="close"
-            @click="selectedElement=null; currentSelectedKey=undefined"
-          >
-        </div>
-
-        <div
-          v-if="editor && currentSelectedComponent?.type === ComponentType.RichText"
-          class="bg-white mb-2 border-b-2 border-black/10 pb-2"
-        >
-          <div class="flex flex-row flex-wrap gap-2">
-            <button
-              v-for="(entry, index) in menuEntries"
-              :key="index"
-              :class="entry.active()?'bg-amber-50':''"
-              class="border border-b-2 p-0.5 border-black rounded "
-              @click="entry.click"
-            >
-              {{ entry.name }}
-            </button>
-          </div>
-        </div>
-        <!-- IMAGE CHOOSER / UPLOAD -->
-
-        <template v-if="currentSelectedComponent?.type === ComponentType.Image">
-          <div class="flex flex-col items-center">
-            <div class="h-72 w-72 grid grid-cols-3 grid-flow-row overflow-y-auto justify-center items-center">
-              <div
-                v-for="(image, index) in imageResponse.body.images"
-                :key="index"
-                class="w-full aspect-square"
-              >
-                <img
-                  :src="image"
-                  class="object-cover size-full hover:drop-shadow cursor-pointer border-2 border-transparent
-                contain-inline-size hover:border-purple-400 transition-colors duration-300 rounded"
-                  alt="image"
-                  :class="{ 'border-yellow-500': selectedImage === image, 'animate-pulse': selectedImage === image }"
-                  @click="selectedImage = image"
-                >
-              </div>
-              <div
-                v-for="(k, i) in fillEmptySpace"
-                :key="k+i"
-                class="w-full contain-inline-size cursor-not-allowed rounded border-2 border-transparent aspect-square"
-              >
-                <div class="bg-gray-100 size-full" />
-              </div>
-            </div>
-          </div>
-          <p class="font-mono font-bold">
-            ALT:
-          </p>
-        </template>
-
-        <!-- TEXT INPUT -->
-        <EditorContent
-          class="size-full max-h-72 overflow-y-auto border-b-2 border-black"
-          :editor="editor"
-        />
-      </div>
-    </div>
-
-    <!-- Save Button -->
-    <div class="fixed flex gap-2 bottom-0 right-0 m-4 ontop">
-      <button
-        class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
-        title="Save Changes"
-        :class="{ '!text-black': hasSaveState,
-                  'bg-white': hasSaveState }"
-        @click="saveUiContent"
-      >
-        <img
-          src="../../assets/icons/disk.svg"
-          class="size-4 transition-all duration-300"
-          :class="{ invert: !hasSaveState }"
-          alt="loading"
-        >
-        <span
-          class="transition-all duration-300 w-0 ml-0"
-          :class="{ '!w-4': hasSaveState,
-                    '!ml-2': hasSaveState }"
-        >
-          <template v-if="saveState.loading">
-            <img
-              src="../../assets/icons/loading.svg"
-              class="size-4 animate-spin"
-              alt="loading"
-            >
-          </template>
-          <template v-if="saveState.success">
-            <img
-              src="../../assets/icons/check.svg"
-              class="size-4"
-              alt="check"
-            >
-          </template>
-          <template v-if="saveState.failed">
-            <img
-              src="../../assets/icons/fail.svg"
-              class="size-4"
-              alt="fail"
-            >
-          </template>
-        </span>
-      </button>
-
-      <!-- publish button -->
-      <button
-        class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
-        title="Deploy Content"
-        :class="{ '!text-black': hasPublishState,
-                  'bg-white': hasPublishState }"
-        @click="publishPopup = true"
-      >
-        <img
-          src="../../assets/icons/publish.svg"
-          class="size-4 transition-all duration-300"
-          :class="{ invert: !hasPublishState }"
-          alt="loading"
-        >
-        <span
-          class="transition-all duration-300 w-0 ml-0"
-          :class="{ '!w-4': hasPublishState,
-                    '!ml-2': hasPublishState }"
-        >
-          <template v-if="publishState.loading">
-            <img
-              src="../../assets/icons/loading.svg"
-              class="size-4 animate-spin"
-              alt="loading"
-            >
-          </template>
-          <template v-if="publishState.success">
-            <img
-              src="../../assets/icons/check.svg"
-              class="size-4"
-              alt="check"
-            >
-          </template>
-          <template v-if="publishState.failed">
-            <img
-              src="../../assets/icons/fail.svg"
-              class="size-4"
-              alt="fail"
-            >
-          </template>
-        </span>
-      </button>
-
-      <button
-        class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
-        :title="mobileView?'Switch to Desktop View':'Switch to Mobile View'"
-        @click="mobileView = !mobileView"
-      >
-        <img
-          v-if="mobileView"
-          src="../../assets/icons/phone.svg"
-          class="size-4 transition-all duration-300 invert"
-          :class="{ invert: mobileView }"
-          alt="phone"
-        >
-        <img
-          v-else
-          src="../../assets/icons/desktop.svg"
-          class="size-4 transition-all duration-300 invert"
-          :class="{ invert: mobileView }"
-          alt="desktop"
-        >
-      </button>
-    </div>
-
-    <!-- publish popup -->
-    <div
-      v-if="publishPopup"
-      class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
-    >
-      <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
-        <p class="font-mono font-bold uppercase">
-          Deploy Content
-        </p>
-        <p class="font-mono">
-          Are you sure you want to publish the changes?
-        </p>
-        <p class="font-mono">
-          This will trigger a rebuild of the website.
-        </p>
-        <div class="flex flex-row gap-5 font-mono">
-          <button
-            class="bg-black text-white px-5 py-3 rounded-2xl"
-            @click="deployContent"
-          >
-            Deploy
-          </button>
-          <button
-            class="bg-red-500 text-white px-5 py-3 rounded-2xl"
-            @click="publishPopup = false"
-          >
-            Cancel
-          </button>
-        </div>
-      </div>
-    </div>
-    <!-- error popup -->
-    <div
-      v-if="errorPopup"
-      class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
-    >
-      <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
-        <p class="font-mono font-bold uppercase flex flex-row">
-          Something went wrong
-          <img
-            src="../../assets/icons/fail.svg"
-            class="size-6 ml-auto cursor-pointer"
-            alt="close"
-            @click="closeErrorPopup"
-          >
-        </p>
-        <div class="flex flex-col items-center gap-2 max-w-96">
-          <p
-            v-for="(message, index) in errorMessages"
-            :key="index"
-            class="font-mono"
-          >
-            {{ message }}
-          </p>
-          <button
-            class="bg-black text-white px-5 py-3 rounded-2xl max-w-56 w-full"
-            @click="closeErrorPopup"
-          >
-            Close
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.overflow-y-auto {
-  scrollbar-width: thin;
-}
-
-*[data-placeholder]::before {
-  color: #ccc;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  pointer-events: none;
-}
-
-.ontop {
-  z-index: 1000;
-}
-
-.route-container *[kat-e] {
-  min-height: 24px;
-  min-width: 24px;
-  position: relative;
-}
-
-.route-container *[kat-e]:before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  border: 2px dashed rgb(255 207 207 / 85%);
-}
-</style>
diff --git a/src/runtime/components/views/MainView.vue b/src/runtime/components/views/MainView.vue
deleted file mode 100644
index e35662c..0000000
--- a/src/runtime/components/views/MainView.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { ref } from '#imports'
-
-const userMenuOpen = ref(false)
-
-defineEmits(['logout', 'openEditPage'])
-</script>
-
-<template>
-  <div class="flex flex-col h-screen w-full">
-    <div class="flex flex-row w-full relative">
-      <img
-        src="../../assets/icons/person_settings.svg"
-        class="size-10 p-2 transition-all drop-shadow cursor-alias relative z-40"
-        alt="CMS-Katze"
-        @click="userMenuOpen = !userMenuOpen"
-      >
-
-      <div
-
-        class="absolute w-52 border-black border-b-2 border-r-2 rounded-br-xl flex flex-col gap-5 font-mono h-0 overflow-hidden transition-all duration-300 z-10"
-        :class="{ 'h-auto': userMenuOpen, 'pt-10': userMenuOpen, 'pb-2': userMenuOpen, 'border-transparent': !userMenuOpen }"
-      >
-        <p
-          class="text-red-400 drop-shadow hover:animate-pulse cursor-pointer"
-          @click="$emit('logout')"
-        >
-          Logout
-        </p>
-      </div>
-    </div>
-    <div class="flex flex-col items-center justify-center h-full">
-      <img
-        src="../../assets/logo.svg"
-        class="h-60"
-        alt="CMS-Katze"
-      >
-
-      <div class="flex flex-row gap-5">
-        <div
-          class="flex flex-col items-center group/button cursor-zoom-in "
-          @click="$emit('openEditPage')"
-        >
-          <div class="size-32 rounded border-black border-2 group-hover/button:animate-pulse p-4">
-            <img
-              src="../../assets/icons/edit.svg"
-              class="size-full p-2 transition-all drop-shadow group-hover/button:scale-90"
-              alt="CMS-Katze"
-            >
-          </div>
-          <p class="font-bold uppercase font-mono leading-5">
-            Edit Pages
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/src/runtime/components/views/edit/PageList.vue b/src/runtime/components/views/edit/PageList.vue
new file mode 100644
index 0000000..ecac836
--- /dev/null
+++ b/src/runtime/components/views/edit/PageList.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, defineProps } from 'vue'
+import type { Route } from '../../../types/EditTypes'
+import { computed, watch } from '#imports'
+import { useRouter } from '#app'
+
+// COMPOSABLE
+const router = useRouter()
+
+// PROPS & EMITS
+const props = defineProps(
+  {
+    isMobile: Boolean,
+    selectedRoute: {
+      type: Object as () => Route,
+      required: true,
+    },
+  },
+)
+defineEmits(['selectRoute'])
+
+// VARIABLES
+const isSidebarOpen = ref(false) // for mobile devices
+const routes = router.options.routes
+
+// COMPUTED
+const isRouteSelected = computed(() => props.selectedRoute.path !== '')
+const filteredRoutes = computed((): Route[] => {
+  const filteredRoutes = routes.filter(route => (!route.name?.toString().startsWith('katze-cms')))
+  return filteredRoutes.map(route => ({
+    name: route.name?.toString() || route.path,
+    path: route.path,
+    component: route.component,
+  }))
+})
+
+// WATCHERS
+watch(() => props.selectedRoute, () => {
+  if (isSidebarOpen.value) {
+    isSidebarOpen.value = false
+  }
+})
+</script>
+
+<template>
+  <div
+    v-if="isMobile && !isSidebarOpen && isRouteSelected"
+    class="fixed top-0 left-0 z-50 bg-amber-50 w-12 h-12 flex flex-row items-center justify-center border-2 border-black rounded-br-xl"
+  >
+    <img
+      src="../../../assets/icons/edit.svg"
+      class="size-6 cursor-pointer"
+      alt="menu"
+      @click="isSidebarOpen = true"
+    >
+  </div>
+
+  <div
+    class="w-full h-full bg-amber-50 flex flex-col"
+    :class="{ '!w-52': (isRouteSelected && !isMobile) || (isRouteSelected && isMobile && isSidebarOpen),
+              '!w-0': isRouteSelected && isMobile && !isSidebarOpen,
+              'fixed top-0 left-0 h-full z-40 overflow-hidden': isMobile }"
+  >
+    <div class="flex flex-row justify-center items-center">
+      <NuxtLink
+        class="flex flex-row gap-2 justify-center p-2 m-4 border-black border-2 rounded hover:drop-shadow cursor-pointer transition-all"
+        :class="isMobile?'w-full':''"
+        to="/cms/"
+      >
+        <img
+          src="../../../assets/icons/back_arrow.svg"
+          class="size-6"
+          alt="arrow_back"
+        >
+        <p
+          v-if="!isMobile"
+          class="font-mono font-bold uppercase"
+        >
+          Back to Menu
+        </p>
+      </NuxtLink>
+      <div
+        v-if="isMobile && isRouteSelected"
+        class="p-2 m-4 ml-0 border-black border-2 rounded hover:drop-shadow cursor-pointer transition-all flex justify-center items-center"
+        @click="isSidebarOpen = false"
+      >
+        <img
+          src="../../../assets/icons/close.svg"
+          class="size-6"
+          alt="close"
+        >
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center justify-center">
+      <h2 class="font-mono text-xl uppercase font-bold m-0 p-0">
+        Edit Pages
+      </h2>
+    </div>
+    <!--  grid when no route is selected -->
+    <div
+      class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-10 flex-col gap-2 h-full my-2 overflow-y-auto w-full items-start justify-start px-2"
+      :class="[isRouteSelected ? '!flex' : '[&>*]:max-w-96']"
+    >
+      <div
+        v-for="route in filteredRoutes"
+        :key="route.path"
+        class="w-full px-2 py-1 border-black border-2 rounded hover:bg-black/10 hover:animate-pulse cursor-pointer"
+        :class="{ 'border-purple-400': selectedRoute.path === route.path }"
+        @click="$emit('selectRoute', route)"
+      >
+        <p class="text-black opacity-50 uppercase text-sm font-mono">
+          {{ route.path }}
+        </p>
+        <p class="text-black uppercase font-bold font-mono">
+          {{ route.name }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/RouteView.vue b/src/runtime/components/views/edit/RouteView.vue
new file mode 100644
index 0000000..082ebc6
--- /dev/null
+++ b/src/runtime/components/views/edit/RouteView.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { onMounted, ref } from '#imports'
+
+// PROPS & EMITS
+defineProps({
+  routeComponent: Object,
+  emulateMobile: Boolean,
+})
+
+const emit = defineEmits(['hoverElement', 'selectKey'])
+
+// ELEMENTS
+const routeWrapper = ref<HTMLElement | null>(null)
+
+// HOOKS
+onMounted(
+  () => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          // find all kat-e elements
+          const elements = routeWrapper.value?.querySelectorAll('*[kat-e]')
+          if (elements) {
+            elements.forEach((element: Element) => {
+              if (!(element instanceof HTMLElement)) {
+                return
+              }
+              // if a element remove all events but not when attribute ghost is set
+              if (element.tagName.toUpperCase() === 'A' && !element.hasAttribute('ghost')) {
+                const newElement = element.cloneNode(true) as HTMLElement
+                newElement.setAttribute('ghost', '')
+                element.replaceWith(newElement)
+                return
+              }
+              if (element.hasAttribute('listening')) {
+                return
+              }
+              element.addEventListener('mouseover', () => {
+                console.log('hover')
+                emit('hoverElement', element)
+              })
+              element.addEventListener('mouseleave', () => {
+                emit('hoverElement', undefined)
+              })
+              element.addEventListener('click', (event) => {
+                // cancel click event
+                event.preventDefault()
+                event.stopPropagation()
+                event.stopImmediatePropagation()
+
+                const attribute = element.getAttribute('kat-e')
+                if (attribute) {
+                  emit('selectKey', attribute)
+                }
+                event.stopPropagation()
+                event.preventDefault()
+              })
+              element.setAttribute('listening', '')
+            })
+          }
+        }
+      })
+    })
+
+    observer.observe(routeWrapper.value as Node, {
+      childList: true,
+      subtree: true,
+    })
+  },
+)
+</script>
+
+<template>
+  <div
+    ref="routeWrapper"
+    class="flex-1 bg-slate-50 relative w-0 flex justify-center items-center"
+    :class="{ '!w-full': routeComponent }"
+  >
+    <!-- mobile size: width: 768px height: 1024px -->
+    <div
+      class="size-full bg-gray-300"
+      :class="emulateMobile?['max-w-[390px]', 'max-h-[844px]']:[]"
+    >
+      <div class="size-full bg-white overflow-y-scroll route-container">
+        <routeComponent v-if="routeComponent" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/overlay/ActionButtons.vue b/src/runtime/components/views/edit/overlay/ActionButtons.vue
new file mode 100644
index 0000000..3f48b54
--- /dev/null
+++ b/src/runtime/components/views/edit/overlay/ActionButtons.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed } from '#imports'
+import type { RequestState } from '~/src/runtime/types/EditTypes'
+
+// PROPS & EMITS
+const props = defineProps({
+  emulateMobile: Boolean,
+  isMobile: Boolean,
+  saveState: {
+    type: Object as () => RequestState,
+    required: true,
+  },
+  publishState: {
+    type: Object as () => RequestState,
+    required: true,
+  },
+})
+defineEmits(['toggleEmulateMobile', 'saveContent', 'deployChanges'])
+
+// COMPUTED
+const hasSaveState = computed(() => props.saveState.loading || props.saveState.success || props.saveState.failed)
+const hasPublishState = computed(() => props.publishState.loading || props.publishState.success || props.publishState.failed)
+</script>
+
+<template>
+  <div class="fixed flex gap-2 bottom-0 right-0 m-4 ontop">
+    <button
+      class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+      title="Save Changes"
+      :class="{ '!text-black': hasSaveState,
+                'bg-white': hasSaveState }"
+      @click="$emit('saveContent')"
+    >
+      <img
+        src="../../../../assets/icons/disk.svg"
+        class="size-4 transition-all duration-300"
+        :class="{ invert: !hasSaveState }"
+        alt="loading"
+      >
+      <span
+        class="transition-all duration-300 w-0 ml-0"
+        :class="{ '!w-4': hasSaveState,
+                  '!ml-2': hasSaveState }"
+      >
+        <template v-if="saveState.loading">
+          <img
+            src="../../../../assets/icons/loading.svg"
+            class="size-4 animate-spin"
+            alt="loading"
+          >
+        </template>
+        <template v-if="saveState.success">
+          <img
+            src="../../../../assets/icons/check.svg"
+            class="size-4"
+            alt="check"
+          >
+        </template>
+        <template v-if="saveState.failed">
+          <img
+            src="../../../../assets/icons/fail.svg"
+            class="size-4"
+            alt="fail"
+          >
+        </template>
+      </span>
+    </button>
+
+    <!-- publish button -->
+    <button
+      class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+      title="Deploy Content"
+      :class="{ '!text-black': hasPublishState,
+                'bg-white': hasPublishState }"
+      @click="$emit('deployChanges')"
+    >
+      <img
+        src="../../../../assets/icons/publish.svg"
+        class="size-4 transition-all duration-300"
+        :class="{ invert: !hasPublishState }"
+        alt="loading"
+      >
+      <span
+        class="transition-all duration-300 w-0 ml-0"
+        :class="{ '!w-4': hasPublishState,
+                  '!ml-2': hasPublishState }"
+      >
+        <template v-if="publishState.loading">
+          <img
+            src="../../../../assets/icons/loading.svg"
+            class="size-4 animate-spin"
+            alt="loading"
+          >
+        </template>
+        <template v-if="publishState.success">
+          <img
+            src="../../../../assets/icons/check.svg"
+            class="size-4"
+            alt="check"
+          >
+        </template>
+        <template v-if="publishState.failed">
+          <img
+            src="../../../../assets/icons/fail.svg"
+            class="size-4"
+            alt="fail"
+          >
+        </template>
+      </span>
+    </button>
+
+    <button
+      v-if="!isMobile"
+      class="relative bg-black text-white px-5 py-3 rounded-2xl transition-all flex items-center justify-center border-2 border-black"
+      :title="emulateMobile?'Switch to Desktop View':'Switch to Mobile View'"
+      @click="$emit('toggleEmulateMobile')"
+    >
+      <img
+        v-if="emulateMobile"
+        src="../../../../assets/icons/phone.svg"
+        class="size-4 transition-all duration-300 invert"
+        alt="phone"
+      >
+      <img
+        v-else
+        src="../../../../assets/icons/desktop.svg"
+        class="size-4 transition-all duration-300 invert"
+        alt="desktop"
+      >
+    </button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/overlay/ContentEdit.vue b/src/runtime/components/views/edit/overlay/ContentEdit.vue
new file mode 100644
index 0000000..a7b29da
--- /dev/null
+++ b/src/runtime/components/views/edit/overlay/ContentEdit.vue
@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import Placeholder from '@tiptap/extension-placeholder'
+import Highlight from '@tiptap/extension-highlight'
+import { Extension } from '@tiptap/core'
+import type { KatzenUIComponent } from '../../../../stores/UiStore'
+import { ComponentType, useUiStore } from '../../../../stores/UiStore'
+import type { ImageListResponse, MenuEntry } from '../../../../types/EditTypes'
+import { computed, type ImageContent, ref, useCookie, watch } from '#imports'
+import { useAsyncData } from '#app'
+
+// COMPOSABLE
+const uiStore = useUiStore()
+
+// PROPS & EMITS
+const props = defineProps({
+  selectedKey: {
+    type: String,
+  },
+})
+
+defineEmits(['close'])
+
+// VARIABLES
+const selectedComponent = ref<KatzenUIComponent | undefined>(undefined)
+const selectedImage = ref<string | undefined>(undefined)
+
+// EDITOR
+const editor = useEditor({
+  content: '',
+  editorProps: {
+    attributes: {
+      class: 'focus:outline-none py-4',
+    },
+  },
+  extensions: [
+    StarterKit.configure(),
+    Placeholder.configure({
+      placeholder: ({ node }) => (node.type.name === 'heading' ? 'What’s the title?' : 'Write something …'),
+    }),
+    Highlight.configure({
+      HTMLAttributes: {
+        class: 'highlight-text',
+      },
+    }),
+    Extension.create({
+      addKeyboardShortcuts() {
+        const isTextType = () => selectedComponent.value?.type === ComponentType.Text
+        return {
+          'Enter': isTextType,
+          'Shift-Enter': isTextType,
+          'Cmd-Enter': isTextType,
+          'Ctrl-Enter': isTextType,
+        }
+      },
+    }),
+  ],
+  onUpdate({ editor }) {
+    if (!props.selectedKey || !selectedComponent.value) return
+
+    const html = editor.getHTML()
+    const dom = new DOMParser().parseFromString(html, 'text/html')
+    const text = dom.body.textContent || ''
+    const { type, content } = selectedComponent.value
+
+    switch (type) {
+      case ComponentType.RichText: {
+        const spans = Array.from(dom.querySelectorAll('p'))
+          .map(pTag => `<span>${pTag.innerHTML}</span>`)
+          .join('<br/>')
+        uiStore.updateUiContent(props.selectedKey, spans)
+        break
+      }
+      case ComponentType.Text:
+        uiStore.updateUiContent(props.selectedKey, text)
+        break
+      case ComponentType.Image: {
+        const { src } = content as ImageContent || { src: '', alt: '' }
+        uiStore.updateUiContent(props.selectedKey, { src, alt: text })
+        break
+      }
+      default:
+        break
+    }
+  },
+})
+
+// WATCHERS
+watch(() => props.selectedKey, (value) => {
+  if (!value) return
+
+  const component = uiStore.getComponents(value)
+  if (!component) return
+
+  selectedComponent.value = component
+
+  const { type, content } = component
+
+  switch (type) {
+    case ComponentType.Image: {
+      const imageContent = content as ImageContent || { src: '', alt: '' }
+      editor.value?.commands.setContent(imageContent.alt)
+      selectedImage.value = imageContent.src
+      break
+    }
+    case ComponentType.Text: {
+      editor.value?.commands.setContent(content as string)
+      break
+    }
+    case ComponentType.RichText: {
+      const parser = new DOMParser()
+      const dom = parser.parseFromString(content as string, 'text/html')
+      const paragraphs = Array.from(dom.querySelectorAll('span'))
+        .map(pTag => `<p>${pTag.innerHTML}</p>`)
+        .join('')
+      editor.value?.commands.setContent(paragraphs)
+      break
+    }
+    default:
+      break // Optional: Handle unexpected component types
+  }
+})
+
+watch(selectedImage, () => {
+  if (selectedImage.value && props.selectedKey) {
+    const content = selectedComponent.value?.content as ImageContent || { src: '', alt: '' }
+    uiStore.updateUiContent(props.selectedKey, {
+      src: selectedImage.value,
+      alt: content.alt,
+    })
+  }
+})
+
+// ASYNC DATA
+const { data: imageResponse } = useAsyncData(async () => await $fetch<ImageListResponse>('/content-cms', {
+  method: 'POST',
+  body: {
+    token: useCookie('token').value,
+    action: 'imageList',
+  },
+}), {
+  default: (): ImageListResponse => ({
+    body: {
+      images: [],
+    },
+  }),
+})
+
+// COMPUTED
+const fillEmptySpace = computed((): string[] => {
+  const rest = 9 - imageResponse.value.body.images.length
+  if (rest > 0) {
+    return Array.from({ length: rest }).fill('') as string[]
+  }
+
+  // if not 3 last images, fill with empty strings
+  const mod = imageResponse.value.body.images.length % 3
+  if (mod > 0) {
+    return Array.from({ length: 3 - mod }).fill('') as string[]
+  }
+
+  return []
+})
+
+// OPTIONS
+const formattingOptions = [
+  { name: 'Bold', command: 'toggleBold' },
+  { name: 'Italic', command: 'toggleItalic' },
+  { name: 'Strike', command: 'toggleStrike' },
+  { name: 'Highlight', command: 'toggleHighlight' },
+]
+
+const menuEntries: MenuEntry[] = formattingOptions.map(({ name, command }) => ({
+  name,
+  click: () => editor.value?.chain().focus()[command]()?.run(),
+  active: () => editor.value?.isActive(command) || false,
+}))
+</script>
+
+<template>
+  <div
+    v-if="selectedKey"
+    class="absolute inset-0 select-none touch-none pointer-events-none flex justify-center items-center ontop"
+  >
+    <div class="relative z-40  flex flex-col pointer-events-auto bg-white p-5 border-black border-2 rounded max-w-96 w-full">
+      <div class="flex flex-row items-center mb-6">
+        <p class="font-mono font-bold uppercase">
+          Change Element Value
+        </p>
+        <img
+          src="../../../../assets/icons/close.svg"
+          class="size-6 ml-auto cursor-pointer"
+          alt="close"
+          @click="$emit('close')"
+        >
+      </div>
+
+      <div
+        v-if="editor && selectedComponent?.type === ComponentType.RichText"
+        class="bg-white mb-2 border-b-2 border-black/10 pb-2"
+      >
+        <div class="flex flex-row flex-wrap gap-2">
+          <button
+            v-for="(entry, index) in menuEntries"
+            :key="index"
+            :class="entry.active()?'bg-amber-50':''"
+            class="border border-b-2 p-0.5 border-black rounded "
+            @click="entry.click"
+          >
+            {{ entry.name }}
+          </button>
+        </div>
+      </div>
+      <!-- IMAGE CHOOSER / UPLOAD -->
+
+      <template v-if="selectedComponent?.type === ComponentType.Image">
+        <div class="flex flex-col items-center">
+          <div class="h-72 w-72 grid grid-cols-3 grid-flow-row overflow-y-auto justify-center items-center">
+            <div
+              v-for="(image, index) in imageResponse.body.images"
+              :key="index"
+              class="w-full aspect-square"
+            >
+              <img
+                :src="image"
+                class="object-cover size-full hover:drop-shadow cursor-pointer border-2 border-transparent
+                contain-inline-size hover:border-purple-400 transition-colors duration-300 rounded"
+                alt="image"
+                :class="{ 'border-yellow-500': selectedImage === image, 'animate-pulse': selectedImage === image }"
+                @click="selectedImage = image"
+              >
+            </div>
+            <div
+              v-for="(k, i) in fillEmptySpace"
+              :key="k+i"
+              class="w-full contain-inline-size cursor-not-allowed rounded border-2 border-transparent aspect-square"
+            >
+              <div class="bg-gray-100 size-full" />
+            </div>
+          </div>
+        </div>
+        <p class="font-mono font-bold">
+          ALT:
+        </p>
+      </template>
+
+      <!-- TEXT INPUT -->
+      <EditorContent
+        class="size-full max-h-72 overflow-y-auto border-b-2 border-black"
+        :editor="editor"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/overlay/Hover.vue b/src/runtime/components/views/edit/overlay/Hover.vue
new file mode 100644
index 0000000..017af19
--- /dev/null
+++ b/src/runtime/components/views/edit/overlay/Hover.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref, watch } from '#imports'
+
+// PROPS
+const props = defineProps({
+  hoveredElement: {
+    type: Object as () => HTMLElement | undefined,
+  },
+})
+
+// ELEMENTS
+const hoverPosition = ref<HTMLElement | null>(null)
+
+// WATCHERS
+watch(() => props.hoveredElement, () => {
+  if (!hoverPosition.value) return
+  const updatePosition = () => {
+    if (hoverPosition.value && props.hoveredElement) {
+      const elementPositionAbsolute = props.hoveredElement.getBoundingClientRect()
+      hoverPosition.value.style.top = `${elementPositionAbsolute.top}px`
+      hoverPosition.value.style.left = `${elementPositionAbsolute.left}px`
+      hoverPosition.value.style.width = `${elementPositionAbsolute.width}px`
+      hoverPosition.value.style.height = `${elementPositionAbsolute.height}px`
+    }
+  }
+  const routeContainer = document.querySelector('.route-container')
+  if (!routeContainer) return
+  if (props.hoveredElement) {
+    updatePosition()
+    window.addEventListener('resize', updatePosition)
+    routeContainer.addEventListener('scroll', updatePosition)
+  }
+  else {
+    hoverPosition.value.removeAttribute('style')
+    window.removeEventListener('resize', updatePosition)
+    routeContainer.removeEventListener('scroll', updatePosition)
+  }
+})
+</script>
+
+<template>
+  <div class="absolute inset-0 opacity-50 select-none touch-none pointer-events-none ontop">
+    <div
+      ref="hoverPosition"
+      class="absolute z-20 -top-full -left-full bg-red-400/20 border-2 rounded border-red-500"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/popup/Deployment.vue b/src/runtime/components/views/edit/popup/Deployment.vue
new file mode 100644
index 0000000..3d39050
--- /dev/null
+++ b/src/runtime/components/views/edit/popup/Deployment.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// EMITS
+defineEmits(['deploy', 'close'])
+</script>
+
+<template>
+  <div class="fixed inset-0 bg-black/50 flex justify-center items-center ontop">
+    <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
+      <p class="font-mono font-bold uppercase">
+        Deploy Content
+      </p>
+      <p class="font-mono">
+        Are you sure you want to publish the changes?
+      </p>
+      <p class="font-mono">
+        This will trigger a rebuild of the website.
+      </p>
+      <div class="flex flex-row gap-5 font-mono">
+        <button
+          class="bg-black text-white px-5 py-3 rounded-2xl"
+          @click="$emit('deploy')"
+        >
+          Deploy
+        </button>
+        <button
+          class="bg-red-500 text-white px-5 py-3 rounded-2xl"
+          @click="$emit('close')"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/components/views/edit/popup/Error.vue b/src/runtime/components/views/edit/popup/Error.vue
new file mode 100644
index 0000000..4e3ba2b
--- /dev/null
+++ b/src/runtime/components/views/edit/popup/Error.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// PROPS & EMITS
+defineProps({
+  messages: Array,
+})
+defineEmits(['close'])
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 bg-black/50 flex justify-center items-center ontop"
+  >
+    <div class="bg-white p-5 rounded border-black border-2 flex flex-col gap-5">
+      <p class="font-mono font-bold uppercase flex flex-row">
+        Something went wrong
+        <img
+          src="../../../../assets/icons/fail.svg"
+          class="size-6 ml-auto cursor-pointer"
+          alt="fail"
+        >
+      </p>
+      <div class="flex flex-col items-center gap-2 max-w-96">
+        <p
+          v-for="(message, index) in messages"
+          :key="index"
+          class="font-mono"
+        >
+          {{ message }}
+        </p>
+        <button
+          class="bg-black text-white px-5 py-3 rounded-2xl max-w-56 w-full"
+          @click="$emit('close')"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/pages/KatzeCms.vue b/src/runtime/pages/KatzeCms.vue
deleted file mode 100644
index fb4073f..0000000
--- a/src/runtime/pages/KatzeCms.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import MainView from '../components/views/MainView.vue'
-import EditView from '../components/views/EditView.vue'
-import { setFetchedContent } from '../composables/useUiComponents'
-import { definePageMeta, onMounted, ref, useCookie, useRouter } from '#imports'
-
-definePageMeta({
-  layout: 'cms-layout',
-})
-
-const router = useRouter()
-const currentView = ref<'MainView' | 'EditView'>('MainView')
-
-const logout = () => {
-  const tokenCookie = useCookie('token')
-  tokenCookie.value = ''
-  router.push('/katze-login')
-}
-
-onMounted(async () => {
-  const tokenCookie = useCookie('token')
-  if (!tokenCookie.value) {
-    return
-  }
-  const token = tokenCookie.value
-
-  interface ContentCmsResponse {
-    success: boolean
-    body?: {
-      content: Record<string, string>
-    }
-  }
-  const response = await $fetch('/content-cms', {
-    method: 'POST',
-    body: {
-      token,
-      action: 'get',
-    },
-  },
-  ) as ContentCmsResponse
-
-  if (response.success && response.body) {
-    setFetchedContent(response.body.content)
-  }
-})
-</script>
-
-<template>
-  <div class="min-h-screen w-full flex flex-col justify-center items-center bg-amber-50">
-    <template v-if="currentView === 'MainView'">
-      <MainView
-        @logout="logout"
-        @open-edit-page="currentView = 'EditView'"
-      />
-    </template>
-
-    <template v-else-if="currentView === 'EditView'">
-      <EditView @open-home-page="currentView = 'MainView'" />
-    </template>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
diff --git a/src/runtime/pages/cms/KatzeEdit.vue b/src/runtime/pages/cms/KatzeEdit.vue
new file mode 100644
index 0000000..8053e8b
--- /dev/null
+++ b/src/runtime/pages/cms/KatzeEdit.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { RouteComponent } from 'vue-router'
+import type { ContentCmsResponse, Route, Lazy, ApiResponse } from '../../types/EditTypes'
+import {
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  setFetchedContent,
+  shallowRef,
+  useCookie,
+  useUiStore,
+  watch,
+} from '#imports'
+
+// COMPOSABLE
+const uiStore = useUiStore()
+
+// VARIABLES
+const isMobile = ref(false) // has the user device a mobile device
+const selectedRoute = ref<Route>({
+  name: '',
+  path: '',
+  component: undefined,
+})
+const RouteComponent = shallowRef<unknown>(undefined)
+const hoveredElement = ref<Element | undefined>(undefined)
+const selectedKey = ref<string | undefined>(undefined)
+/* Mobile Emulation */
+const emulateMobile = ref(false)
+/* RequestStates */
+const saveState = ref({ loading: false, success: false, error: false })
+const publishState = ref({ loading: false, success: false, error: false })
+/* PopupStates */
+const deployPopup = ref(false)
+const errorPopup = ref(false)
+const errorMessages = ref<string[]>([])
+
+// HOOKS
+onMounted(async () => {
+  const tokenCookie = useCookie('token')
+  if (tokenCookie.value) {
+    const response = await $fetch('/content-cms', {
+      method: 'POST',
+      body: {
+        token: tokenCookie.value,
+        action: 'get',
+      },
+    },
+    ) as ContentCmsResponse
+    if (response.success && response.body) {
+      setFetchedContent(response.body.content)
+    }
+  }
+  window.addEventListener('resize', onResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+})
+
+// EVENTS
+const onResize = () => {
+  if (import.meta.server) return
+  const container = document.querySelector('body')
+  if (container) {
+    const containerWidth = container.clientWidth
+    isMobile.value = containerWidth < 768
+  }
+}
+onResize()
+
+// METHODS
+const saveContentToStorage = async () => {
+  saveState.value.loading = true
+  const uiContent = uiStore.getUiContent()
+  const token = useCookie('token')
+  const data: ApiResponse = await $fetch('/content-cms', {
+    method: 'POST',
+    body: {
+      token: token.value,
+      content: uiContent,
+      action: 'save',
+    },
+  })
+  saveState.value = { loading: false, success: data.success, error: !data.success }
+  setTimeout(() => {
+    saveState.value = { loading: false, success: false, error: false }
+  }, 2000)
+}
+
+const deployContent = async () => {
+  deployPopup.value = false
+  publishState.value.loading = true
+  const token = useCookie('token')
+  const data: ApiResponse = await $fetch('/content-cms', {
+    method: 'POST',
+    body: {
+      token: token.value,
+      action: 'deploy',
+    },
+  })
+  publishState.value = { loading: false, success: data.success, error: !data.success }
+  if (data.missingDeployHookURL) {
+    errorPopup.value = true
+    errorMessages.value.push('You need to set a deploy hook URL in the config to publish the content.')
+    errorMessages.value.push('If you\'re running the project locally, you can restart the server manually.')
+  }
+  setTimeout(() => {
+    publishState.value = { loading: false, success: false, error: false }
+  }, 2000)
+}
+
+const closeErrorPopup = () => {
+  errorPopup.value = false
+  errorMessages.value = []
+}
+
+// WATCHERS
+watch(selectedRoute, async () => {
+  const route = selectedRoute.value
+  if (route.path && route.component) {
+    // if route component is not a function wrap it in a function
+    let implementation: Lazy<RouteComponent>
+    if (typeof route.component === 'function') {
+      implementation = route.component as Lazy<RouteComponent>
+    }
+    else {
+      implementation = async () => route.component as RouteComponent
+    }
+    RouteComponent.value = defineAsyncComponent(implementation)
+  }
+  selectedKey.value = undefined
+})
+</script>
+
+<template>
+  <div class="min-h-screen w-full flex flex-col justify-center items-center bg-amber-50 katze-edit-view">
+    <div class="h-screen w-full flex flex-row">
+      <EditPageList
+        :is-mobile="isMobile"
+        :selected-route="selectedRoute"
+        @select-route="selectedRoute = $event"
+      />
+
+      <EditRouteView
+        :route-component="RouteComponent"
+        :emulate-mobile="emulateMobile"
+        @hover-element="hoveredElement = $event"
+        @select-key="selectedKey = $event"
+      />
+
+      <!-- hover overlay -->
+      <EditOverlayHover :hovered-element="hoveredElement" />
+
+      <!-- content edit overlay -->
+      <EditOverlayContentEdit
+        :selected-key="selectedKey"
+        @close="selectedKey = undefined"
+      />
+
+      <!-- action buttons overlay -->
+      <EditOverlayActionButtons
+        :emulate-mobile="emulateMobile"
+        :is-mobile="isMobile"
+        :save-state="saveState"
+        :publish-state="publishState"
+        @toggle-emulate-mobile="emulateMobile = !emulateMobile"
+        @save-content="saveContentToStorage"
+        @deploy-changes="deployPopup=true"
+      />
+
+      <!-- publish popup -->
+      <EditPopupDeployment
+        v-if="deployPopup"
+        @close="deployPopup = false"
+        @deploy="deployContent"
+      />
+
+      <!-- error popup -->
+      <EditPopupError
+        v-if="errorPopup"
+        :messages="errorMessages"
+        @close="closeErrorPopup"
+      />
+    </div>
+  </div>
+</template>
+
+<style>
+.katze-edit-view .ontop {
+  z-index: 1000;
+}
+
+.katze-edit-view .overflow-y-auto, .katze-edit-view .overflow-y-scroll {
+  scrollbar-width: thin;
+}
+
+.katze-edit-view *[data-placeholder]::before {
+  color: #ccc;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+.katze-edit-view .route-container *[kat-e] {
+  min-height: 24px;
+  min-width: 24px;
+  position: relative;
+}
+
+.katze-edit-view .route-container *[kat-e]:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  border: 2px dashed rgb(255 207 207 / 85%);
+}
+</style>
diff --git a/src/runtime/pages/cms/KatzeHome.vue b/src/runtime/pages/cms/KatzeHome.vue
new file mode 100644
index 0000000..02e4eed
--- /dev/null
+++ b/src/runtime/pages/cms/KatzeHome.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { definePageMeta, ref, useCookie, useRouter } from '#imports'
+
+definePageMeta({
+  layout: 'cms-layout',
+})
+
+const router = useRouter()
+const userMenuOpen = ref(false)
+
+const logout = () => {
+  const tokenCookie = useCookie('token')
+  tokenCookie.value = ''
+  router.push('/katze-login')
+}
+</script>
+
+<template>
+  <div class="min-h-screen w-full flex flex-col justify-center items-center bg-amber-50">
+    <div class="flex flex-col h-screen w-full">
+      <div class="flex flex-row w-full relative">
+        <img
+          src="../../assets/icons/person_settings.svg"
+          class="size-10 p-2 transition-all drop-shadow cursor-alias relative z-40"
+          alt="CMS-Katze"
+          @click="userMenuOpen = !userMenuOpen"
+        >
+
+        <div
+
+          class="absolute w-52 border-black border-b-2 border-r-2 rounded-br-xl flex flex-col gap-5 font-mono h-0 overflow-hidden transition-all duration-300 z-10"
+          :class="userMenuOpen?['h-auto', 'pt-10', 'pb-2']:['border-transparent']"
+        >
+          <p
+            class="text-red-400 drop-shadow hover:animate-pulse cursor-pointer"
+            @click="logout"
+          >
+            Logout
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-col items-center justify-center h-full">
+        <img
+          src="../../assets/logo.svg"
+          class="h-60"
+          alt="CMS-Katze"
+        >
+        <div class="flex flex-row gap-5">
+          <NuxtLink
+            class="flex flex-col items-center group/button cursor-zoom-in "
+            to="/cms/edit/"
+          >
+            <div class="size-32 rounded border-black border-2 group-hover/button:animate-pulse p-4">
+              <img
+                src="../../assets/icons/edit.svg"
+                class="size-full p-2 transition-all drop-shadow group-hover/button:scale-90"
+                alt="Edit"
+              >
+            </div>
+            <p class="font-bold uppercase font-mono leading-5">
+              Edit Pages
+            </p>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/runtime/types/EditTypes.ts b/src/runtime/types/EditTypes.ts
new file mode 100644
index 0000000..ad0247f
--- /dev/null
+++ b/src/runtime/types/EditTypes.ts
@@ -0,0 +1,34 @@
+import type { RouteComponent } from 'vue-router'
+
+export type Lazy<T> = () => Promise<T>
+export interface ContentCmsResponse {
+  success: boolean
+  body?: {
+    content: Record<string, string>
+  }
+}
+export interface Route {
+  name: string
+  path: string
+  component: Lazy<RouteComponent> | RouteComponent | undefined | null
+}
+export interface MenuEntry {
+  name: string
+  click: () => void
+  active: () => boolean
+}
+export interface ImageListResponse {
+  body: {
+    images: string[]
+  }
+}
+export interface RequestState {
+  loading: boolean
+  success: boolean
+  failed: boolean
+}
+
+export interface ApiResponse {
+  success: boolean
+  missingDeployHookURL?: boolean
+}