@raclettejs/core 0.1.17 → 0.1.19

package/services/frontend/src/core/lib/eggs/snow.ts

@@ -7,11 +7,13 @@ export default () => {
 
   // This function allows you to turn on and off the snow
   const toggle_snow = () => {
-    const check_box = document.getElementById("toggle_snow")
+    const check_box = document.getElementById(
+      "toggle_snow",
+    ) as HTMLInputElement | null
     const snowEl = document.getElementById("snow")
 
     if (snowEl) {
-      snowEl.style.display = check_box.checked ? "block" : "none"
+      snowEl.style.display = check_box?.checked ? "block" : "none"
     }
   }
 
@@ -29,87 +31,74 @@ export default () => {
       const randomDuration = 8 + Math.random() * 15 // Duration between 8-23s
       const randomDelay = Math.random() * 10 // Delay between 0-10s
       const randomOpacity = 0.3 + Math.random() * 0.7 // Opacity between 0.3-1
-      const randomAnimation = Math.floor(Math.random() * 5) + 1 // Choose from 5 animations
+      const randomAnimation = Math.floor(Math.random() * 3) + 1 // Choose from 3 animations
 
-      snowflake.style.setProperty("--start-x", `${randomX}vw`)
-      snowflake.style.setProperty("--scale", randomScale)
+      snowflake.style.setProperty("--start-x", `${randomX}%`)
+      snowflake.style.setProperty("--scale", randomScale.toString())
       snowflake.style.setProperty("--duration", `${randomDuration}s`)
       snowflake.style.setProperty("--delay", `${randomDelay}s`)
-      snowflake.style.setProperty("--opacity", randomOpacity)
+      snowflake.style.setProperty("--opacity", randomOpacity.toString())
       snowflake.style.setProperty("--animation-name", `fall-${randomAnimation}`)
 
       fragment.appendChild(snowflake)
     }
 
-    document.getElementById("snow").appendChild(fragment)
+    document.getElementById("snow")?.appendChild(fragment)
   }
 
-  // Optimized CSS with reusable animations and CSS custom properties
+  // Optimized CSS with GPU acceleration and simplified animations
   const createOptimizedCSS = () => {
     const css = `
       #snow {
         position: fixed;
         top: 0;
         left: 0;
-        width: 100%;
-        height: 100%;
+        right: 0;
+        bottom: 0;
         pointer-events: none;
         z-index: 1000;
+        overflow: hidden;
       }
 
       .snowflake {
         position: absolute;
+        top: -10px;
         width: 8px;
         height: 8px;
         background: white;
         border-radius: 50%;
-        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
+        
+        /* GPU acceleration - critical for performance */
         will-change: transform;
+        transform: translateZ(0);
+        backface-visibility: hidden;
+        
+        /* Simplified glow effect - much lighter than drop-shadow filter */
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
         
         /* Use CSS custom properties for individual variations */
         left: var(--start-x);
         opacity: var(--opacity);
-        transform: scale(var(--scale));
         animation: var(--animation-name) var(--duration) var(--delay) linear infinite;
       }
 
-      /* 5 different falling patterns for variety */
+      /* Simplified to 3 falling patterns - uses only transform for best performance */
       @keyframes fall-1 {
-        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
-        25% { transform: translateY(25vh) translateX(10px) scale(var(--scale)); }
-        50% { transform: translateY(50vh) translateX(-5px) scale(var(--scale)); }
-        75% { transform: translateY(75vh) translateX(8px) scale(var(--scale)); }
-        100% { transform: translateY(100vh) translateX(0) scale(var(--scale)); }
+        to { 
+          transform: translateY(100vh) translateX(20px) scale(var(--scale)) translateZ(0);
+        }
       }
 
       @keyframes fall-2 {
-        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
-        30% { transform: translateY(30vh) translateX(-15px) scale(var(--scale)); }
-        60% { transform: translateY(60vh) translateX(10px) scale(var(--scale)); }
-        100% { transform: translateY(100vh) translateX(-5px) scale(var(--scale)); }
+        to { 
+          transform: translateY(100vh) translateX(-20px) scale(var(--scale)) translateZ(0);
+        }
       }
 
       @keyframes fall-3 {
-        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
-        20% { transform: translateY(20vh) translateX(5px) scale(var(--scale)); }
-        40% { transform: translateY(40vh) translateX(-10px) scale(var(--scale)); }
-        70% { transform: translateY(70vh) translateX(15px) scale(var(--scale)); }
-        100% { transform: translateY(100vh) translateX(0) scale(var(--scale)); }
-      }
-
-      @keyframes fall-4 {
-        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
-        35% { transform: translateY(35vh) translateX(20px) scale(var(--scale)); }
-        65% { transform: translateY(65vh) translateX(-8px) scale(var(--scale)); }
-        100% { transform: translateY(100vh) translateX(12px) scale(var(--scale)); }
-      }
-
-      @keyframes fall-5 {
-        0% { transform: translateY(-10px) translateX(0) scale(var(--scale)); }
-        15% { transform: translateY(15vh) translateX(-5px) scale(var(--scale)); }
-        45% { transform: translateY(45vh) translateX(12px) scale(var(--scale)); }
-        80% { transform: translateY(80vh) translateX(-7px) scale(var(--scale)); }
-        100% { transform: translateY(100vh) translateX(3px) scale(var(--scale)); }
+        to { 
+          transform: translateY(100vh) translateX(0px) scale(var(--scale)) translateZ(0);
+        }
       }
     `
 
@@ -142,7 +131,7 @@ export default () => {
     } else {
       // Remove existing snow
       snowEl.remove()
-      // Optionally remove styles as well
+      // Remove styles as well
       const styles = document.getElementById("snow-styles")
       if (styles) {
         styles.remove()

package/services/frontend/src/core/lib/eventWhitelist.ts

@@ -6,19 +6,9 @@
  * change of state, others represent a request addressed to a specific actor,
  * e.g. 'asks the http client to get x'
  *
- * @TODO
- * - find clear naming policy
- * - use speaking event names, even though they are longer
- * - distinguish between a information and request (e.g. store_dispatch is a request to the store)
  */
-const legacyEventWhitelist = [
-  "socket_joinRoom",
-  "socket_leaveRoom",
-  "socket_dataUpdated",
-  "ui_setupProject",
-  "ui_addToSnackBar",
-]
-const eventWhitelist = legacyEventWhitelist.concat([
+
+const eventWhitelist = [
   "forms/init",
   "forms/validate",
   "widgets/reset/workingState",
@@ -27,7 +17,8 @@ const eventWhitelist = legacyEventWhitelist.concat([
   "socket/data/update",
   "socket/join/room",
   "socket/leave/room",
-])
+  "backend/error",
+]
 const eventWildcards = [
   "query_deleted",
   "store_actionResolved",

package/services/frontend/src/core/main.ts

@@ -159,12 +159,18 @@ const generateLoginCallback =
           success: true,
           token: token,
           redirect: () => {
+            const params = new URLSearchParams(window.location.search)
+            const redirect = params.get("redirect") || ""
             // If we're in the same origin, we keep the history
             if (
               _callbackUrl.startsWith(window.location.origin) ||
               _callbackUrl.startsWith("/")
             ) {
-              window.location.href = _callbackUrl
+              if (redirect.length && redirect.startsWith("/:")) {
+                window.location.href = _callbackUrl + redirect
+              } else {
+                window.location.reload()
+              }
             } else {
               // Otherwise do a full page reload to the callback URL
               window.location.replace(_callbackUrl)

package/services/frontend/src/orchestrator/LoginApp.vue

@@ -52,7 +52,6 @@ const onSubmitLogin = async (loginPayload: {
 }) => {
   if (props.loginMethod) {
     const { success, message, redirect } = await props.loginMethod(loginPayload)
-
     if (success) {
       redirect?.()
     } else if (message) {

package/services/frontend/src/orchestrator/ProductOrchestrator.vue

@@ -11,6 +11,7 @@
       :order="-10"
       v-if="availableInterfaces.indexOf('topBar') > -1"
       id="appAppbar"
+      ref="appAppbar"
       color="topbar-bg"
       density="compact"
       flat
@@ -38,7 +39,8 @@
 
         <img v-if="logoExists" class="tw:h-[40px]" :src="logoSrc" alt="Logo" />
       </div>
-
+      <v-spacer />
+      <AppBarMenu />
       <v-spacer />
 
       <DevIndicator v-if="isDevelopment" />
@@ -60,7 +62,7 @@
     />
 
     <!-- Main content -->
-    <v-main class="tw:flex tw:flex-col">
+    <v-main class="tw:flex tw:flex-col" id="appMainContent">
       <div class="tw:w-full tw-h-1 tw:top-[49px]">
         <v-progress-linear
           :height="2"
@@ -80,6 +82,7 @@
           slot-type="page"
           :slot-layout="slotLayout"
           @scroll.passive="onScroll($event)"
+          :max-height="availableComponentHeight"
         />
 
         <v-empty-state
@@ -98,6 +101,7 @@
       <v-footer
         :order="-1"
         color="footer-bg"
+        ref="appFooter"
         border-thin
         v-if="configService.getPleaseLetUsAdvertiseOurselves()"
         class="tw:items-center tw:text-center tw:flex tw:flex-col tw:border-t-1 tw:grow-0! tw:mt-auto"
@@ -123,7 +127,15 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, computed, defineAsyncComponent } from "vue"
+import {
+  onMounted,
+  onUnmounted,
+  useTemplateRef,
+  ref,
+  watch,
+  computed,
+  defineAsyncComponent,
+} from "vue"
 import UserNotifications from "./components/menu/UserNotifications.vue"
 import PageNavigation from "./components/navigation/PageNavigationSidebar.vue"
 import snackbarStack from "./components/snackbar/SnackStack.vue"
@@ -142,6 +154,9 @@ import { isDevelopmentMode } from "@racletteCore/helpers/devMode"
 import useDragAndDrop from "./composables/useDragAndDrop"
 import { useCurrentComposition } from "./composables"
 import WidgetsLayoutLoader from "./components/composition/WidgetsLayoutLoader.vue"
+import AppBarMenu from "./components/menu/AppBarMenu.vue"
+import { useWindowSize } from "@vueuse/core"
+const { height: windowHeight } = useWindowSize()
 
 useTitle(`raclette - ${configService.getApplicationTitle()}`)
 const route = useRoute()
@@ -154,6 +169,22 @@ useRouteState()
 const { isDraggingOrResizingAnything } = useDragAndDrop()
 const { widgetsLayout, slotLayout } = useCurrentComposition()
 
+const appAppbarRef = useTemplateRef("appAppbar")
+const appFooterRef = useTemplateRef("appFooter")
+const availableComponentHeight = ref(0)
+
+const updateAvailableHeight = () => {
+  const appbarHeight = appAppbarRef.value?.offsetHeight || 0
+  const appFooterHeight = appFooterRef.value?.offsetHeight || 0
+  const progressBarHeight = 2 // Progress bar height
+  const borderAndPadding = 8 // Border and padding buffer
+  availableComponentHeight.value =
+    windowHeight.value -
+    appbarHeight -
+    appFooterHeight -
+    progressBarHeight -
+    borderAndPadding
+}
 const showWelcomeScreen = computed(() => {
   const isDynamicPage = route.name === "app.space.page"
   let hasPageIdParameter = Boolean(route.params.pageId?.length)
@@ -170,7 +201,7 @@ const WelcomeScreenComponent = defineAsyncComponent({
     template: `
       <div class="tw:flex tw:items-center tw:justify-center tw:h-full tw:text-center tw:p-8">
         <div>
-          <h1 class="tw:text-4xl tw:font-bold tw:mb-4 tw:text-gray-800">Welcome to Raclette</h1>
+          <h1 class="tw:text-4xl tw:font-bold tw:mb-4 tw:text-gray-800">Welcome to racletteJS</h1>
           <p class="tw:text-gray-600 tw:text-lg">Get started by selecting a page from the navigation.</p>
         </div>
       </div>
@@ -232,8 +263,12 @@ onMounted(async () => {
   logoExists.value = await checkImageExists(logoSrc.value)
   // check if we have a message from checkToken to display as a snackbar
   loginUserNotifications()
+  updateAvailableHeight()
+  window.addEventListener("resize", updateAvailableHeight)
+})
+onUnmounted(() => {
+  window.removeEventListener("resize", updateAvailableHeight)
 })
-
 watch(theme, () => {
   setTheme(theme.value)
 })

package/services/frontend/src/orchestrator/components/composition/CompositionOverlay.vue

@@ -1,11 +1,12 @@
 <template>
   <DefaultModal v-model="showModal">
-    <div class="tw:p-5 tw:h-full">
+    <div class="tw:p-5 tw:h-full" ref="appCompositionOverlay">
       <WidgetsLayoutLoader
         v-if="widgetsLayout"
         :widgets-layout="widgetsLayout"
         :slot-layout="slotLayout"
         slot-type="modal"
+        :max-height="availableComponentHeight"
       />
     </div>
   </DefaultModal>
@@ -14,10 +15,13 @@
 <script setup lang="ts">
 import { DefaultModal, WidgetsLayoutLoader } from "@racletteOrchestrator"
 import useCurrentComposition from "@racletteOrchestrator/composables/useCurrentComposition"
-import { computed } from "vue"
+import { computed, useTemplateRef } from "vue"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 import { DEFAULT_MODAL_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
-
+const appCompositionOverlayRef = useTemplateRef("appCompositionOverlay")
+const availableComponentHeight = computed(
+  () => appCompositionOverlayRef?.value?.offsetHeight || 400,
+)
 const { widgetsLayout, slotLayout } = useCurrentComposition(
   DEFAULT_MODAL_SLOT_NAME,
 )

package/services/frontend/src/orchestrator/components/composition/WidgetsLayoutLoader.vue

@@ -59,7 +59,6 @@
                     v-if="slot.widget"
                     :is="getSlotWidget(slot.widget)"
                     :uuid="slot.widget.uuid"
-                    class="tw:h-full"
                     :class="[
                       hasSpacing &&
                       widgetStates[slot.widget.uuid].config
@@ -91,16 +90,20 @@ import type { WidgetBase } from "@racletteCore/store/types"
 import { watch, ref, h, computed, type Component } from "vue"
 import { widgetLoader } from "@racletteOrchestrator/helpers/widgetLoader"
 import { useDisplay } from "vuetify"
-import { useWindowSize } from "@vueuse/core"
 import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
 import useRouteState from "@racletteOrchestrator/composables/useRouteState"
 
-const props = defineProps<{
-  widgetsLayout: Composition["widgetsLayout"]
-  slotType: String
-  slotLayout: String
-}>()
-
+const props = withDefaults(
+  defineProps<{
+    widgetsLayout: Composition["widgetsLayout"]
+    slotType: string
+    slotLayout: string
+    maxHeight?: number
+  }>(),
+  {
+    maxHeight: 0,
+  },
+)
 const { compositionSlots } = useRouteState()
 
 const currentRouteConfig = computed(() =>
@@ -131,7 +134,6 @@ const rowClasses = computed(() => {
 })
 
 const { mdAndDown } = useDisplay()
-const { height: windowHeight } = useWindowSize()
 
 const { state: widgetStates } = useStateSubscriber("widgets")
 const routeParams = computed(() => {
@@ -152,26 +154,12 @@ const routeParams = computed(() => {
 // Create a reactive key that changes when widgetsLayout changes
 const gridKey = ref(0)
 
-// Calculate available height for widgets
-const availableHeight = computed(() => {
-  // this is really just a simplified approach for now
-
-  // TODO: this needs to be more dynamic
-  const appBarHeight = 48 // Vuetify compact app bar height
-  const progressBarHeight = 2 // Progress bar height
-  const borderAndPadding = 8 // Border and padding buffer
-
-  const calculated =
-    windowHeight.value - appBarHeight - progressBarHeight - borderAndPadding
-  return calculated
-})
-
 // Calculate max height per widget based on grid layout
 const maxWidgetHeight = computed(() => {
   // Always set max height to the calculated available screen height (with buffer)
   // Later we should determine a max value based on other widgets in each row, so this value will be different across rows and columns
 
-  return Math.min(availableHeight.value, 2400)
+  return Math.min(props.maxHeight, 2400)
 })
 
 const widgetComponentCache = new Map<string, Component>()

package/services/frontend/src/orchestrator/components/input/SimpleSearchInput.vue

@@ -1,11 +1,11 @@
 <template>
   <v-text-field
     ref="search-input"
-    v-model="model"
+    v-model="workingString"
     clearable
     :autofocus="autoFocus"
     density="compact"
-    :label="$t('core.search_input')"
+    :label="label || $t('core.search_input')"
     prepend-inner-icon="mdi-magnify"
     flat
     hide-details
@@ -14,12 +14,15 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef, onMounted } from "vue"
+import { useTemplateRef, onMounted, computed } from "vue"
 import { awaitTime } from "@racletteCore/lib/dataHelper"
+import { debounceHelper } from "@raclettejs/core/frontend"
+const debounce = debounceHelper()
 
 const props = withDefaults(
   defineProps<{
     autoFocus?: boolean
+    label?: string
   }>(),
   {
     autoFocus: false,
@@ -30,7 +33,16 @@ const model = defineModel({
   type: String,
   required: true,
 })
-
+const workingString = computed({
+  get() {
+    return model.value
+  },
+  set(newVal) {
+    debounce(() => {
+      model.value = newVal
+    })
+  },
+})
 const input = useTemplateRef("search-input")
 
 onMounted(async () => {

package/services/frontend/src/orchestrator/components/menu/AppBarMenu.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="tw:h-full tw:flex tw-items-stretchc" ref="appAppbarMenu">
+    <template v-for="item in pageNavigation.appBarItems" :key="item.route">
+      <v-tab
+        :key="locale"
+        v-if="item.slotType !== 'inline'"
+        :disabled="activeRouteName === item.route || !item.route"
+        :active="activeRouteName === item.route"
+        :value="item.route || ''"
+        color="primary"
+        class="nav-link tw:h-full tw-flex tw-items-center tw-justify-center"
+        link
+        @click="navigate(item)"
+        :prepend-icon="item.icon"
+        :text="item.title"
+      />
+      <template v-else>
+        <template v-if="item.icon || item.title">
+          <v-tab
+            class="tw:h-full tw-flex tw-items-stretch"
+            :color="floatingWindow.visible ? 'primary' : 'none'"
+            @click="openFloatingWindow(item)"
+            ><v-icon>{{ item.icon || "mdi-window-restore" }}</v-icon
+            >{{ item.title }}</v-tab
+          >
+        </template>
+        <div v-else class="tw:h-full tw-flex tw-items-stretch">
+          <WidgetsLayoutLoader
+            v-if="compositions[item.compositionId]"
+            :widgets-layout="compositions[item.compositionId].widgetsLayout"
+            slot-type="inline"
+            :slot-layout="compositions[item.compositionId].slotLayout"
+            :max-height="availableComponentHeight"
+          />
+        </div>
+      </template>
+    </template>
+
+    <!-- Floating Window -->
+    <teleport to="body">
+      <div
+        v-if="floatingWindow.visible"
+        :style="{
+          position: 'fixed',
+          left: floatingWindow.x + 'px',
+          top: floatingWindow.y + 'px',
+          zIndex: 9999,
+          cursor: isDragging ? 'grabbing' : 'grab',
+        }"
+        @mousedown="startDrag"
+        class="tw:select-none"
+      >
+        <v-card min-width="400" max-width="800" elevation="8">
+          <v-card-title
+            class="d-flex justify-space-between align-center bg-primary"
+          >
+            <span>{{ floatingWindow.item?.title || "Widget" }}</span>
+            <v-btn
+              icon="mdi-close"
+              size="small"
+              variant="text"
+              @click.stop="closeFloatingWindow"
+            ></v-btn>
+          </v-card-title>
+          <v-card-text class="pa-4">
+            <WidgetsLayoutLoader
+              v-if="
+                floatingWindow.item &&
+                compositions[floatingWindow.item.compositionId]
+              "
+              :max-height="800"
+              :widgets-layout="
+                compositions[floatingWindow.item.compositionId].widgetsLayout
+              "
+              slot-type="inline"
+              :slot-layout="
+                compositions[floatingWindow.item.compositionId].slotLayout
+              "
+            />
+          </v-card-text>
+        </v-card>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef, reactive, ref } from "vue"
+import { useRouter } from "vue-router"
+import useRouteState from "@racletteOrchestrator/composables/useRouteState"
+import usePageNavigation, {
+  type NavigationItem,
+} from "@racletteOrchestrator/composables/usePageNavigation"
+import WidgetsLayoutLoader from "../composition/WidgetsLayoutLoader.vue"
+import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
+import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"
+
+const appAppbarMenuRef = useTemplateRef("appAppbarMenu")
+const availableComponentHeight = computed(
+  () => appAppbarMenuRef?.value?.offsetHeight || 48,
+)
+const { state: pageNavigation } = usePageNavigation()
+const { state: compositions } = useStateSubscriber("compositions")
+const router = useRouter()
+const { getCompositionLinkForSlotName } = useRouteState()
+const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)
+
+const activeRouteName = computed(() => {
+  const currentRoute = router.currentRoute.value
+  const pageCompositionLinkValue = currentPageRoute?.value?.slotValue
+
+  if (currentRoute.name === "app.space.page") {
+    return pageCompositionLinkValue || currentRoute.params.pageId
+  }
+
+  return pageCompositionLinkValue || currentRoute.name
+})
+
+// Floating window state
+const floatingWindow = reactive({
+  visible: false,
+  x: 100,
+  y: 100,
+  item: null as NavigationItem | null,
+})
+
+const isDragging = ref(false)
+const dragOffset = reactive({ x: 0, y: 0 })
+
+const openFloatingWindow = (item: NavigationItem) => {
+  if (floatingWindow.item) return closeFloatingWindow()
+  floatingWindow.item = item
+  floatingWindow.visible = true
+  // Center the window on screen
+  floatingWindow.x = (window.innerWidth - 400) / 2
+  floatingWindow.y = (window.innerHeight - 300) / 2
+}
+
+const closeFloatingWindow = () => {
+  floatingWindow.visible = false
+  floatingWindow.item = null
+}
+
+const startDrag = (e: MouseEvent) => {
+  // Don't drag if clicking on close button or other interactive elements
+  if ((e.target as HTMLElement).closest(".v-btn")) {
+    return
+  }
+
+  isDragging.value = true
+  dragOffset.x = e.clientX - floatingWindow.x
+  dragOffset.y = e.clientY - floatingWindow.y
+
+  let rafPending = false
+  let lastEvent: MouseEvent
+
+  const onMouseMove = (e: MouseEvent) => {
+    lastEvent = e
+    if (!rafPending) {
+      rafPending = true
+      requestAnimationFrame(() => {
+        rafPending = false
+        if (isDragging.value) {
+          floatingWindow.x = lastEvent.clientX - dragOffset.x
+          floatingWindow.y = lastEvent.clientY - dragOffset.y
+        }
+      })
+    }
+  }
+
+  const onMouseUp = () => {
+    isDragging.value = false
+    document.removeEventListener("mousemove", onMouseMove)
+    document.removeEventListener("mouseup", onMouseUp)
+  }
+
+  document.addEventListener("mousemove", onMouseMove)
+  document.addEventListener("mouseup", onMouseUp)
+}
+
+const navigate = (item: NavigationItem) => {
+  item.navigateTo()
+}
+</script>