2025 September MVP Build

web/app.vue → web/app/app.vue

@@ -32,6 +32,11 @@ textarea {
   @apply border-solid border-0 border-b-1 border-neutral-500;
 }
 
+input::placeholder,
+textarea::placeholder {
+  @apply text-neutral-500;
+}
+
 input[type="color"] {
   @apply w-full h-auto;
   @apply cursor-pointer;
@@ -62,6 +67,7 @@ form {
 }
 
 main {
+  @apply min-h-screen;
   @apply bg-dark-900 text-light-200;
   @apply overflow-x-hidden;
 }
@@ -109,17 +115,6 @@ textarea {
   @apply transition-opacity duration-500;
 }
 
-.primaryButton {
-  @apply flex justify-center items-center;
-  @apply border-solid border-1 border-light-200 border-rd;
-  @apply px-4 py-2 ui-text-3 transition-all;
-  @apply hover-bg-light-200 hover-text-dark-900;
-
-  [class*="i-"] {
-    @apply text-2xl;
-  }
-}
-
 .sortable-ghost {
   @apply opacity-0;
 }

web/app/components/ContextMenu.vue

@@ -0,0 +1,103 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="isVisible"
+        :style="{ top: `${y}px`, left: `${x}px` }"
+        class="contextMenu"
+        @contextmenu.prevent="isVisible = false"
+      >
+        <template v-for="(item, i) in menuItems" :key="item.label">
+          <hr
+            v-if="item.danger && i > 0 && !menuItems[i - 1]?.danger"
+            class="separator"
+          />
+          <button
+            :class="{ danger: item.danger }"
+            @click="handleItemClick(item)"
+          >
+            <span
+              v-if="item.icon"
+              :class="[item.icon, 'text-base mr-2 flex-shrink-0']"
+            ></span>
+            <span class="flex-1 text-left">{{ item.label }}</span>
+            <span v-if="item.shortcut" class="shortcut">{{
+              item.shortcut
+            }}</span>
+          </button>
+        </template>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="postcss">
+.contextMenu {
+  @apply w-52 bg-dark-900 z-99 absolute;
+  @apply border-rd border-solid border-1 border-dark-200;
+  @apply overflow-hidden;
+
+  .separator {
+    @apply border-0 border-t-1 border-solid border-dark-200 m-0;
+  }
+
+  button {
+    @apply w-full h-12 px-4 cursor-pointer transition-colors;
+    @apply flex items-center;
+    @apply border-solid border-0 border-b-1 border-dark-200;
+
+    &:last-child {
+      @apply border-b-0;
+    }
+
+    &:not(.danger) {
+      @apply hover:bg-light-200 hover:text-dark-900;
+    }
+
+    &.danger {
+      @apply text-red-500;
+      @apply hover:bg-red-500 hover:text-white;
+    }
+
+    .shortcut {
+      @apply opacity-40 ui-text-3 ml-4 flex-shrink-0;
+    }
+  }
+}
+</style>
+
+<script setup lang="ts">
+const isVisible = ref(false);
+const menuItems = ref<ContextMenuItem[]>([]);
+
+const x = ref(0);
+const y = ref(0);
+
+function handleItemClick(item: ContextMenuItem) {
+  item.action();
+
+  isVisible.value = false;
+}
+
+const openContextMenu = (event: MouseEvent, _menuItems: ContextMenuItem[]) => {
+  x.value = event.clientX + 10;
+  y.value = event.clientY + 10;
+
+  isVisible.value = true;
+  menuItems.value = _menuItems;
+};
+
+const handleOpenContextMenu = (event: Event) => {
+  const e = event as ContextMenuEvent;
+
+  openContextMenu(e.detail.event, e.detail.menuItems);
+};
+
+onMounted(() => {
+  window.addEventListener("openContextMenu", handleOpenContextMenu);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("openContextMenu", handleOpenContextMenu);
+});
+</script>

web/app/components/Modal.vue

@@ -0,0 +1,77 @@
+<template>
+  <dialog ref="modal" @close="emit('close')">
+    <div v-if="!props.isMinimal" class="modalHeader">
+      <h4>{{ props.title }}</h4>
+      <UIButton variant="ghost" size="sm" @click="close" aria-label="Close">
+        <div class="i-carbon-close"></div>
+      </UIButton>
+    </div>
+    <div class="modalBody">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="modalFooter">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</template>
+
+<style scoped lang="postcss">
+dialog {
+  @apply absolute top-1/2 left-1/2;
+  @apply translate-x-[-50%] translate-y-[-50%];
+  @apply border-2 border-dark-200 border-rd;
+  @apply bg-dark-900 text-light-200 select-none;
+  @apply min-w-[24rem];
+
+  &::backdrop {
+    @apply bg-dark-900/60;
+  }
+}
+
+dialog[open] {
+  @apply flex flex-col;
+}
+
+.modalHeader {
+  @apply flex items-center justify-between;
+  @apply px-6 h-14;
+  @apply border-solid border-0 border-b-1 border-dark-200;
+
+  h4 {
+    @apply ui-text-4 font-500;
+  }
+
+}
+
+.modalBody {
+  @apply px-6 py-8;
+}
+
+.modalFooter {
+  @apply flex items-center justify-end gap-2;
+  @apply px-6 h-14;
+  @apply border-solid border-0 border-t-1 border-dark-200;
+}
+</style>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  isMinimal?: boolean;
+}>();
+
+const modal = ref<HTMLDialogElement>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const close = () => {
+  modal.value?.close();
+};
+
+defineExpose({
+  open: () => modal.value?.showModal(),
+  close,
+});
+</script>

web/app/components/UI/Button.vue

@@ -0,0 +1,66 @@
+<template>
+  <button :type="type" :class="[variant, size]" :disabled="disabled">
+    <slot />
+  </button>
+</template>
+
+<style scoped lang="postcss">
+button {
+  @apply flex justify-center items-center gap-2;
+  @apply bg-transparent border-rd transition-all ui-text-3;
+
+  [class*="i-"] {
+    @apply ui-text-4;
+  }
+
+  &:disabled {
+    @apply opacity-50 pointer-events-none;
+  }
+}
+
+.primary {
+  @apply border-solid border-1 border-light-200;
+  @apply hover:bg-light-200 hover:text-dark-900;
+  @apply active:opacity-80;
+}
+
+.ghost {
+  @apply text-light-200/60 hover:bg-light-200/8 hover:text-light-200;
+  @apply active:opacity-80;
+}
+
+.danger {
+  @apply border-solid border-1 border-red-500 text-red-500;
+  @apply hover:bg-red-500 hover:text-white;
+  @apply active:opacity-80;
+}
+
+.sm {
+  @apply px-3 py-1.5;
+}
+
+.md {
+  @apply px-4 py-2;
+}
+
+.lg {
+  @apply px-6 py-3;
+}
+</style>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    variant?: "primary" | "ghost" | "danger";
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+  }>(),
+  {
+    variant: "primary",
+    size: "md",
+    disabled: false,
+    type: "button",
+  },
+);
+</script>

web/components/atelier/Header.vue → web/app/components/atelier/Header.vue

@@ -1,10 +1,10 @@
 <template>
   <header class="atelier-header">
-    <NuxtLink class="border-r" to="/atelier">
+    <NuxtLink class="header-btn border-r" to="/atelier">
       <div class="i-carbon-switcher"></div>
     </NuxtLink>
     <input type="text" maxlength="30" v-model.lazy="title" />
-    <button @click="modal?.open()">
+    <button class="header-btn" @click="modal?.open()">
       <div class="i-carbon-run"></div>
     </button>
     <Modal ref="modal" title="Presentation mode">
@@ -15,7 +15,7 @@
             <div class="whitespace"></div>
             <p>Your regular presentation experience.</p>
           </div>
-          <button type="submit" class="primaryButton">Confirm</button>
+          <UIButton type="submit">Confirm</UIButton>
         </div>
         <div class="divider">
           <span>OR</span>
@@ -26,7 +26,7 @@
             <div class="whitespace"></div>
             <p>Audience can join the presentation, and interact with you.</p>
           </div>
-          <button class="primaryButton disabled">Confirm</button>
+          <UIButton :disabled="true">Confirm</UIButton>
         </div>
       </form>
     </Modal>
@@ -39,17 +39,12 @@
   @apply bg-dark-500 h-20;
   @apply border-solid border-0 border-b-2 border-dark-200;
 
-  a,
-  button {
-    @apply h-full flex items-center transition-colors;
-    @apply hover-bg-light-200 hover-text-dark-500;
+  .header-btn {
+    @apply h-full w-20 flex items-center justify-center transition-colors;
+    @apply hover:bg-light-200 hover:text-dark-500;
 
     [class*="i-"] {
-      @apply ui-text-5 w-[80px];
-    }
-
-    &:first-child {
-      @apply w-[80px];
+      @apply ui-text-5;
     }
   }
 
@@ -68,7 +63,7 @@
       }
 
       button {
-        @apply h-auto! text-sm w-1/2 mx-auto;
+        @apply w-1/2 mx-auto;
       }
     }
 
@@ -118,11 +113,11 @@ const title = computed({
   },
 });
 
-function onSubmit() {
+async function onSubmit() {
   modal.value?.close();
 
   selectedNode.value = null;
 
-  navigateTo(`/live/${useRoute().params.id}`);
+  await navigateTo(`/live/${useRoute().params.id}`);
 }
 </script>

web/components/atelier/inspector/view/Hierarchy.vue → web/app/components/atelier/inspector/view/Hierarchy.vue

@@ -32,15 +32,15 @@
             </option>
           </select>
         </Field>
-        <button
+        <UIButton
           type="submit"
-          :class="{ disabled: !meta.valid }"
-          class="primaryButton w-full text-sm mt-10"
+          size="sm"
+          :disabled="!meta.valid"
+          class="w-full mt-10"
         >
           Confirm
-        </button>
-        <div v-if="error" class="whitespace"></div>
-        <p v-if="error" class="text-center text-red-500">ERROR: {{ error }}</p>
+        </UIButton>
+        <p v-if="error" class="text-center text-red-500 mt-6">ERROR: {{ error }}</p>
       </form>
     </Modal>
   </AtelierInspectorView>