@edgedev/create-edge-app 1.1.25 → 1.1.26

package/edge/components/sideBar.vue

@@ -0,0 +1,288 @@
+<script setup>
+import { useAttrs } from 'vue'
+import { useRoute } from 'vue-router'
+import {
+  Sidebar,
+  useSidebar,
+} from '@/components/ui/sidebar'
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  settingsTitle: {
+    type: String,
+    default: '',
+  },
+  organizationTitle: {
+    type: String,
+    default: 'Organization(s)',
+  },
+  menuItems: {
+    type: Array,
+    default: () => [],
+  },
+  settingsMenuItems: {
+    type: Array,
+    default: () => [],
+  },
+  singleOrg: {
+    type: Boolean,
+    default: false,
+  },
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  contentClasses: {
+    type: String,
+    default: '',
+  },
+  footerClasses: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: String,
+    default: 'icon',
+  },
+  showRail: {
+    type: Boolean,
+    default: true,
+  },
+  showSettingsSection: {
+    type: Boolean,
+    default: true,
+  },
+  groupLabelClasses: {
+    type: String,
+    default: '',
+  },
+  buttonClasses: {
+    type: String,
+    default: '',
+  },
+  hideLogout: {
+    type: Boolean,
+    default: false,
+  },
+  iconClasses: {
+    type: String,
+    default: '',
+  },
+})
+
+const edgeFirebase = inject('edgeFirebase')
+
+const attrs = useAttrs()
+
+const DEV_TAP_TARGET = 7
+const DEV_TAP_WINDOW_MS = 2000
+const DEV_OVERRIDE_KEY = 'edgeDevOverride'
+const devTapTimes = ref([])
+const devOverride = ref(false)
+
+onMounted(() => {
+  try {
+    devOverride.value = localStorage.getItem(DEV_OVERRIDE_KEY) === '1'
+    edgeGlobal.edgeState.devOverride = devOverride.value
+  } catch (error) {
+    console.warn('dev override read failed', error)
+  }
+})
+
+const toggleDevOverride = () => {
+  devOverride.value = !devOverride.value
+  edgeGlobal.edgeState.devOverride = devOverride.value
+  try {
+    if (devOverride.value) {
+      localStorage.setItem(DEV_OVERRIDE_KEY, '1')
+    } else {
+      localStorage.removeItem(DEV_OVERRIDE_KEY)
+    }
+  } catch (error) {
+    console.warn('dev override write failed', error)
+  }
+}
+
+const handleDevTap = () => {
+  const now = Date.now()
+  devTapTimes.value = devTapTimes.value.filter(time => now - time <= DEV_TAP_WINDOW_MS)
+  devTapTimes.value.push(now)
+  if (devTapTimes.value.length >= DEV_TAP_TARGET) {
+    devTapTimes.value = []
+    toggleDevOverride()
+  }
+}
+
+watch(() => props.modelValue, (newValue) => {
+  setOpen(newValue)
+})
+
+const {
+  state: sidebarState,
+  toggleSidebar: sidebarToggle,
+  open: sidebarOpen,
+  setOpen: sidebarSetOpen,
+  setOpenMobile: sidebarSetOpenMobile,
+  isMobile: sidebarIsMobile,
+} = useSidebar()
+
+edgeGlobal.edgeState.sidebar = useSidebar()
+
+// Sidebar props:
+// variant: 'sidebar' | 'floating'
+// collapsible: 'offcanvas' | 'icon' | 'none' | 'slack' | 'submenu'
+// side: 'left' | 'right'
+
+// https://ui.shadcn.com/docs/components/sidebar
+
+const collapsible = computed(() => {
+  if (props.collapsible === 'slack') {
+    if (sidebarIsMobile.value) {
+      return 'offcanvas'
+    }
+    return 'none'
+  }
+  if (props.collapsible === 'submenu') {
+    if (sidebarIsMobile.value) {
+      return 'offcanvas'
+    }
+    return 'none'
+  }
+  return props.collapsible
+})
+
+const styleOverrides = computed(() => {
+  const styles = {}
+
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    styles['--sidebar-width'] = '97px'
+    styles['--sidebar-width-icon'] = '97px'
+  }
+
+  return styles
+})
+
+const route = useRoute()
+
+const submenu = computed(() => {
+  // Direct match on top-level item
+  let match = props.menuItems.find(item => item.to === route.path)
+
+  // Exact match on a submenu item
+  if (!match) {
+    match = props.menuItems.find(item =>
+      item.submenu?.some(sub => sub.to === route.path),
+    )
+  }
+
+  // Match route starting with submenu.to (e.g., dynamic routes like /blocks/abc)
+  if (!match) {
+    match = props.menuItems.find(item =>
+      item.submenu?.some(sub => route.path.startsWith(`${sub.to}/`)),
+    )
+  }
+
+  // Fallback: match route starting with top-level item.to
+  if (!match) {
+    match = props.menuItems.find(item =>
+      route.path.startsWith(`${item.to}/`),
+    )
+  }
+
+  return match?.submenu || []
+})
+
+const isDev = computed(() => {
+  return process.dev || devOverride.value
+})
+
+const isAdmin = computed(() => {
+  return edgeGlobal.isAdminGlobal(edgeFirebase).value
+})
+
+const subMenuItems = (items) => {
+  console.log('submenu items', items)
+  return items
+    .filter(item => edgeGlobal.allowMenuItem(item, isAdmin.value))
+    .map(item => ({
+      ...item,
+      submenu: Array.isArray(item.submenu)
+        ? item.submenu.filter(subItem => edgeGlobal.allowMenuItem(subItem, isAdmin.value))
+        : item.submenu,
+    }))
+}
+</script>
+
+<template>
+  <div class="flex h-full">
+    <!-- Primary Sidebar -->
+    <Sidebar :style="styleOverrides" side="left" v-bind="attrs" :collapsible="collapsible">
+      <SidebarHeader :class="props.headerClasses" @click="handleDevTap">
+        <div v-if="isDev" :class="edgeGlobal.edgeState.isEmulator ? 'bg-yellow-500' : 'bg-red-500'" class="text-xs text-white px-0 text-center ">
+          {{ edgeGlobal.edgeState.isEmulator ? 'Emulator' : '! Production !' }}
+        </div>
+        <slot name="header" :side-bar-state="sidebarState" />
+      </SidebarHeader>
+      <slot name="content">
+        <edge-side-bar-content
+          v-bind="props"
+        />
+      </slot>
+      <SidebarFooter :class="props.footerClasses">
+        <slot name="footer" :side-bar-state="sidebarState" />
+      </SidebarFooter>
+      <SidebarRail v-if="props.showRail && props.collapsible !== 'slack'">
+        <slot name="rail" :side-bar-state="sidebarState" />
+      </SidebarRail>
+    </Sidebar>
+
+    <!-- Submenu Sidebar -->
+    <Transition name="slide-submenu">
+      <Sidebar
+        v-if="subMenuItems(submenu).length > 0 && !sidebarIsMobile"
+        side="left"
+        :collapsible="collapsible"
+        class="border-solid border-r w-[60px]"
+      >
+        <edge-side-bar-content
+          :menu-items="submenu"
+          :submenu="true"
+          :collapsible="props.collapsible"
+          :show-settings-section="false"
+          :header-classes="props.headerClasses"
+          :content-classes="props.contentClasses"
+          :footer-classes="props.footerClasses"
+          :group-label-classes="props.groupLabelClasses"
+          :button-classes="`gap-0 h-[52px] ${props.buttonClasses}`"
+          :icon-classes="props.iconClasses"
+          :hide-logout="props.hideLogout"
+          class="mt-4"
+        />
+      </Sidebar>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.slide-submenu-enter-active, .slide-submenu-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.slide-submenu-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.slide-submenu-enter-to {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-submenu-leave-from {
+  transform: translateX(0);
+  opacity: 1;
+}
+.slide-submenu-leave-to {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+</style>

package/edge/components/sideBarContent.vue

@@ -0,0 +1,268 @@
+<script setup>
+import {
+  useSidebar,
+} from '@/components/ui/sidebar'
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  submenu: {
+    type: Boolean,
+    default: false,
+  },
+  settingsTitle: {
+    type: String,
+    default: '',
+  },
+  organizationTitle: {
+    type: String,
+    default: 'Organization(s)',
+  },
+  singleOrg: {
+    type: Boolean,
+    default: false,
+  },
+  menuItems: {
+    type: Array,
+    default: () => [],
+  },
+  settingsMenuItems: {
+    type: Array,
+    default: () => [],
+  },
+  headerClasses: {
+    type: String,
+    default: '',
+  },
+  contentClasses: {
+    type: String,
+    default: '',
+  },
+  footerClasses: {
+    type: String,
+    default: '',
+  },
+  collapsible: {
+    type: String,
+    default: 'icon',
+  },
+  showRail: {
+    type: Boolean,
+    default: true,
+  },
+  showSettingsSection: {
+    type: Boolean,
+    default: true,
+  },
+  groupLabelClasses: {
+    type: String,
+    default: '',
+  },
+  buttonClasses: {
+    type: String,
+    default: '',
+  },
+  hideLogout: {
+    type: Boolean,
+    default: false,
+  },
+  iconClasses: {
+    type: String,
+    default: '',
+  },
+})
+
+const config = useRuntimeConfig()
+
+const {
+  state: sidebarState,
+  isMobile: sidebarIsMobile,
+} = useSidebar()
+
+const sidebarMenuItemClasses = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return 'justify-center flex w-full'
+  }
+  return ''
+})
+
+const sideBarMenuButtonClasses = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return `w-full h-[78px] rounded-[0px] flex flex-col items-center justify-center ${props.buttonClasses}`
+  }
+  return ''
+})
+
+const sideBarButtonStyles = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return {
+      padding: '0 !important',
+      width: 'auto !important',
+      height: 'auto !important',
+    }
+  }
+  return {}
+})
+
+const sideBarIconClasses = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return `!w-5 !h-5${props.iconClasses ? ` ${props.iconClasses}` : ''}`
+  }
+  return `${props.iconClasses ? ` ${props.iconClasses}` : ''}`
+})
+
+const sidebarGroupClasses = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return 'px-0 pt-0'
+  }
+  return ''
+})
+
+const sidebarMenuClasses = computed(() => {
+  if (props.collapsible === 'slack' && !sidebarIsMobile.value) {
+    return 'gap-0'
+  }
+  return ''
+})
+
+const isSlack = computed(() => {
+  if (sidebarIsMobile.value) {
+    return false
+  }
+  return props.collapsible === 'slack'
+})
+
+const edgeFirebase = inject('edgeFirebase')
+
+const route = useRoute()
+const router = useRouter()
+const goTo = (path) => {
+  console.log(path)
+  edgeGlobal.edgeState.sidebar.toggleSidebar()
+  router.push(path)
+}
+
+const currentRoutePath = computed(() => {
+  return route.fullPath.endsWith('/') ? route.fullPath.slice(0, -1) : route.fullPath
+})
+const isAdmin = computed(() => {
+  return edgeGlobal.isAdminGlobal(edgeFirebase).value
+})
+const menuItems = computed(() => {
+  return props.menuItems
+    .filter(item => edgeGlobal.allowMenuItem(item, isAdmin.value))
+    .map(item => ({
+      ...item,
+      submenu: Array.isArray(item.submenu)
+        ? item.submenu.filter(subItem => edgeGlobal.allowMenuItem(subItem, isAdmin.value))
+        : item.submenu,
+    }))
+})
+
+onMounted(() => {
+})
+
+const processedMenuItems = computed(() => {
+  if (!sidebarIsMobile.value)
+    return menuItems.value
+
+  return menuItems.value.flatMap((item) => {
+    const base = [{ ...item, isSub: false }]
+    if (Array.isArray(item.submenu) && item.submenu.length) {
+      const subItems = item.submenu.map(sub => ({
+        ...sub,
+        isSub: true,
+        parentTo: item.to,
+      }))
+      return [...base, ...subItems]
+    }
+    return base
+  })
+})
+</script>
+
+<template>
+  <SidebarContent class="gap-0" :class="props.contentClasses">
+    <slot name="content" :side-bar-state="sidebarState">
+      <SidebarGroup class="pb-0" :class="sidebarGroupClasses">
+        <SidebarGroupLabel v-if="props.title" :class="props.groupLabelClasses">
+          {{ props.title }}
+        </SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu :class="sidebarMenuClasses">
+            <slot name="menu">
+              <SidebarMenuItem v-for="item in processedMenuItems" :key="item.title" :class="sidebarMenuItemClasses">
+                <div
+                  class="flex flex-col items-center w-full"
+                  :class="item.isSub && sidebarIsMobile ? 'pl-6' : ''"
+                >
+                  <SidebarMenuButton
+                    type="button"
+                    :is-active="currentRoutePath.startsWith(item.to) || (item.submenu && item.submenu.some(sub => currentRoutePath.startsWith(sub.to)))"
+                    :tooltip="item.title"
+                    :class="sideBarMenuButtonClasses"
+                    @click.prevent="goTo(item.to)"
+                  >
+                    <component :is="item.icon" class="[stroke-width:1]" :class="sideBarIconClasses" />
+                    <span v-if="!isSlack">{{ item.title }}</span>
+                    <span v-else :class="submenu ? 'text-[10px]' : 'text-xs'">{{ item.title }}</span>
+                  </SidebarMenuButton>
+                </div>
+              </SidebarMenuItem>
+            </slot>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+      <SidebarGroup class="pt-0" :class="sidebarGroupClasses">
+        <SidebarGroupLabel v-if="props.settingsTitle && props.settingsMenuItems.length > 0" :class="props.groupLabelClasses">
+          {{ props.settingsTitle }}
+        </SidebarGroupLabel>
+        <SidebarGroupContent>
+          <SidebarMenu :class="sidebarMenuClasses">
+            <SidebarMenuItem v-for="item in props.settingsMenuItems" :key="item.title" :class="sidebarMenuItemClasses">
+              <div class="flex flex-col items-center w-full">
+                <SidebarMenuButton
+                  type="button"
+                  :is-active="currentRoutePath.startsWith(item.to)"
+                  :tooltip="item.title"
+                  :class="sideBarMenuButtonClasses"
+                  :style="sideBarButtonStyles"
+                  @click.prevent="goTo(item.to)"
+                >
+                  <component :is="item.icon" class="[stroke-width:1]" :class="sideBarIconClasses" />
+                  <span v-if="!isSlack">{{ item.title }}</span>
+                  <span v-else class="text-xs">{{ item.title }}</span>
+                </SidebarMenuButton>
+              </div>
+            </SidebarMenuItem>
+            <template v-if="props.showSettingsSection">
+              <SidebarMenuItem :class="sidebarMenuItemClasses">
+                <edge-user-menu class="w-full" :single-org="props.singleOrg" :title="props.organizationTitle">
+                  <template #trigger>
+                    <div class="flex flex-col items-center w-full">
+                      <SidebarMenuButton type="button" :is-active="currentRoutePath.startsWith('/app/account')" :class="sideBarMenuButtonClasses" tooltip="Settings">
+                        <Settings2 :class="sideBarIconClasses" class="[stroke-width:1]" />
+                        <span v-if="!isSlack">Settings</span>
+                        <span v-else class="text-xs">Settings</span>
+                      </SidebarMenuButton>
+                    </div>
+                  </template>
+                </edge-user-menu>
+              </SidebarMenuItem>
+              <SidebarMenuItem v-if="!props.hideLogout" :class="sidebarMenuItemClasses">
+                <div class="flex flex-col items-center w-full">
+                  <SidebarMenuButton type="button" :class="sideBarMenuButtonClasses" tooltip="Logout" @click.prevent="edgeGlobal.edgeLogOut(edgeFirebase)">
+                    <LogOut :class="sideBarIconClasses" class="[stroke-width:1]" />
+                    <span v-if="!isSlack">Logout</span>
+                    <span v-else class="text-xs">Logout</span>
+                  </SidebarMenuButton>
+                </div>
+              </SidebarMenuItem>
+            </template>
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </slot>
+  </SidebarContent>
+</template>

package/edge/components/sidebarProvider.vue

@@ -0,0 +1,33 @@
+<script setup>
+const props = defineProps({
+  collapsible: {
+    type: String,
+    default: 'icon',
+  },
+  enableNestedMenu: {
+    type: Boolean,
+    default: false,
+  },
+})
+const styleOverrides = computed(() => {
+  if (props.collapsible === 'slack' && props.enableNestedMenu) {
+    return {
+      '--sidebar-width': '300px',
+      '--sidebar-width-icon': '80px',
+    }
+  }
+  return null
+})
+</script>
+
+<template>
+  <SidebarProvider :style="styleOverrides">
+    <slot
+      :collapsible="props.collapsible"
+    />
+  </SidebarProvider>
+</template>
+
+<style>
+
+</style>

package/edge/components/tooltip.vue

@@ -0,0 +1,16 @@
+<script setup>
+
+</script>
+
+<template>
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p><slot name="content" /></p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>