WIP - improvements on front end

frontend/components/AppSidebar.vue

@@ -95,7 +95,7 @@ const menuItems = [
               <Collapsible v-else as-child :default-open="false" class="group/collapsible">
                 <SidebarMenuItem>
                   <CollapsibleTrigger as-child>
-                    <SidebarMenuButton tooltip="{item.title}">
+                    <SidebarMenuButton :tooltip="item.title">
                       <component :is="item.icon" />
                       <span>{{ item.title }}</span>
                       <ChevronRight

frontend/layouts/default.vue

@@ -28,7 +28,7 @@ const breadcrumbs = computed(() => {
     <AppSidebar />
     <SidebarInset>
       <header
-        class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b"
+        class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
       >
         <div class="flex items-center gap-2 px-4">
           <SidebarTrigger class="-ml-1" />
@@ -58,9 +58,56 @@ const breadcrumbs = computed(() => {
           </Breadcrumb>
         </div>
       </header>
-      <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+      <div class="layout-slot-container flex flex-1 flex-col gap-4 p-4 pt-0">
         <slot />
       </div>
     </SidebarInset>
   </SidebarProvider>
 </template>
+
+<style scoped>
+.layout-slot-container {
+  position: relative;
+  background-color: #ffffff;
+  overflow: hidden;
+  background-image: linear-gradient(to bottom, #DFDBE5 0%, rgba(223, 219, 229, 0) 100%);
+  background-size: 100% 150px;
+  background-repeat: no-repeat;
+}
+
+.layout-slot-container::before,
+.layout-slot-container::after {
+  content: '';
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: 100%;
+  height: 150px;
+  pointer-events: none;
+  background-image: linear-gradient(to bottom, rgba(156, 146, 172, 0.55) 0%, rgba(156, 146, 172, 0) 100%);
+  -webkit-mask-image: url("~/assets/images/pattern.svg");
+  -webkit-mask-repeat: repeat;
+  -webkit-mask-size: 600px 600px;
+  mask-image: url("~/assets/images/pattern.svg");
+  mask-repeat: repeat;
+  mask-size: 600px 600px;
+  z-index: 0;
+}
+
+/* Crisp pattern that fades out */
+.layout-slot-container::before {
+  opacity: 1;
+}
+
+/* Slightly shifted, blurred layer to create a “blur into white” effect */
+.layout-slot-container::after {
+  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+  -webkit-mask-image: none;
+  mask-image: none;
+  opacity: 1;
+}
+
+.layout-slot-container > * {
+  position: relative;
+  z-index: 1;
+}
+</style>

frontend/pages/setup/apps/index.vue

@@ -69,7 +69,7 @@
               v-for="app in apps"
               :key="app.id"
               :to="`/setup/apps/${app.slug}`"
-              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card"
+              class="p-6 border rounded-lg hover:border-primary transition-colors bg-card bg-background shadow-md"
             >
               <h3 class="text-xl font-semibold mb-2">{{ app.label }}</h3>
               <p class="text-sm text-muted-foreground mb-4">