@open-commune/web 0.1.3

package/README.md

@@ -0,0 +1,41 @@
+# @open-commune/web
+
+The [Open Commune](https://github.com/open-commune/open-commune) application, published as a **Nuxt layer**: the admin screens, the public API routes, and the tRPC handler that binds them to [`@open-commune/core`](https://www.npmjs.com/package/@open-commune/core).
+
+It is shipped as sources, not as a bundle — a Nuxt layer is compiled by the application that extends it, and that is what lets you override any page, component or route by placing a file of the same name in your own project.
+
+## Use it as it is
+
+The published Docker image runs this layer unmodified. See the [repository](https://github.com/open-commune/open-commune) for self-hosting.
+
+## Extend it
+
+```bash
+npm install @open-commune/web
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@open-commune/web'],
+});
+```
+
+Your project then holds only what it adds. Anything you place at the same path wins over the layer:
+
+- `pages/…` — your own screens, alongside the ones the layer brings
+- `server/api/…` — extra routes, served from the same origin
+- `server/tasks/…` and `nitro.scheduledTasks` — scheduled work
+- `components/…` — override a component by name
+
+Run it with Bun: the database layer uses `bun:sqlite`, so `bun --bun nuxt dev`, not `nuxt dev`.
+
+> **Known upstream issue.** Nitro runs a layer's `scheduledTasks` twice ([nitrojs/nitro#4155](https://github.com/nitrojs/nitro/issues/4155)). Declare your cron entries in the top application, not in a layer.
+
+## Configuration
+
+Environment is validated at startup by `@open-commune/core`; see `.env.example` in the repository for the full list.
+
+## Licence
+
+AGPL-3.0-or-later.

package/app.config.ts

@@ -0,0 +1,10 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      // Sober palette while the visual identity settles; final palette is a
+      // design decision of the screen refonte.
+      primary: 'neutral',
+      neutral: 'neutral',
+    },
+  },
+})

package/app.vue

@@ -0,0 +1,13 @@
+<template>
+  <UApp :locale="fr">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+
+<script setup>
+// UApp provides the Nuxt UI overlay providers (tooltips, toasts) —
+// components using them crash without it.
+import { fr } from '@nuxt/ui/locale'
+</script>

package/assets/css/main.css

@@ -0,0 +1,13 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+/* Legacy text sizes still referenced by pre-refonte screens; drop once every
+   screen has moved to Nuxt UI components. */
+@theme {
+  --text-7xs: 0.125rem;
+  --text-6xs: 0.25rem;
+  --text-5xs: 0.375rem;
+  --text-4xs: 0.5rem;
+  --text-3xs: 0.625rem;
+  --text-2xs: 0.75rem;
+}

package/components/data/display/row/data-avatar.vue

@@ -0,0 +1,23 @@
+<template>
+  <avatar-circular
+    :place-holder="name"
+    :media="media"
+    :organization="organization"
+    size="sm"
+  />
+</template>
+
+<script setup>
+import avatarCircular from '~/components/elements/avatars/avatar-circular'
+
+const $props = defineProps({
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const organization = computed(() => $props.value._id)
+const name = computed(() => $props.value.name)
+const media = computed(() => $props.value.logo)
+</script>

package/components/data/display/row/data-badge.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <badge
+      :title="badgeTitle"
+      :color="badgeColor"
+      :dot="false"
+      :border="true"
+      @click="$emitters('click')"
+    />
+  </div>
+</template>
+
+<script setup>
+import badge from '~/components/elements/badges/badge'
+
+// Prepare emitters
+const $emitters = defineEmits(['click'])
+
+// Prepare props
+const $props = defineProps({
+  color: {
+    type: String,
+    default: '#e5e7eb'
+  },
+  value: {
+    type: [String, Object],
+    default: ''
+  }
+})
+
+// Prepare computed
+const badgeTitle = computed(() => typeof $props.value === 'object' ? $props.value.name : $props.value)
+const badgeColor = computed(() => typeof $props.value === 'object' ? $props.value.color :$props.color)
+</script>

package/components/data/display/row/data-color.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="h-5 w-5 rounded-full max-w-xs" :style="`background-color: ${value}`" @click="$emit('click')">
+    &#8203;
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DataColor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>

package/components/data/display/row/data-display-badge-publish-status.vue

@@ -0,0 +1,29 @@
+<template>
+  <badge :title="badgeTitle" :color="badgeColor" border dot />
+</template>
+
+<script setup>
+import badge from '~/components/elements/badges/badge'
+
+// Prepare constants
+const PUBLICATION_STATUSES = [
+  { label: 'Brouillon', color: '#e5e7eb', option: 'draft' },
+  { label: 'A valider', color: '#facc15', option: 'waiting' },
+  { label: 'Prêt', color: '#60a5fa', option: 'ready' },
+  { label: 'Programmé', option: 'scheduled' },
+  { label: 'Publié', color: '#34d399', option: 'published' }
+]
+
+// Prepare props
+const $props = defineProps({
+  status: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare computed
+const correspondingStatus = computed(() => PUBLICATION_STATUSES.find(({ option }) => option === $props.status))
+const badgeTitle = computed(() => correspondingStatus.value?.label)
+const badgeColor = computed(() => correspondingStatus.value?.color)
+</script>

package/components/data/display/row/data-label.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <badge
+      v-for="({ _id, title, color, icon }) in records"
+      :key="_id"
+      :title="title"
+      :color="color"
+      :icon="icon"
+      @click="$emitters('click', title)"
+    />
+  </div>
+</template>
+
+<script setup>
+import badge from '~/components/elements/badges/badge'
+
+const { Record } = useModels()
+
+// Prepare emitters
+const $emitters = defineEmits(['click'])
+
+// Prepare props
+const $props = defineProps({
+  value: {
+    type: [String, Array],
+    default: () => []
+  }
+})
+
+// Prepare computed
+const records = computed(() => {
+  if (!Array.isArray($props.value)) {
+    return [Record.onRetrieve(Record.repo.find($props.value))]
+  }
+  return Record.repo.find($props.value).map(Record.onRetrieve)
+})
+</script>

package/components/data/display/row/data-last-update.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="text-right space-y-1">
+    <div v-if="inline" class="inline-flex items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span class="text-gray-500 text-sm">
+        Modifié {{ updatedAtFromNow }}, par
+      </span>
+      <avatar-with-text :user="updatedBy" prefix="@" no-avatar disabled />
+    </div>
+    <div v-else>
+      <avatar-with-text :user="updatedBy" disabled class="space-x-2" />
+      <div class="flex items-center justify-end space-x-1">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <span class="text-gray-500 text-xs">
+          {{ updatedAtFromNow }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DateTime } from 'luxon'
+import avatarWithText from '~/components/elements/avatars/avatar-with-text'
+
+// Prepare props
+const $props = defineProps({
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Prepare computed
+const updatedBy = computed(() => $props.value?.updatedBy || {})
+const updatedAtFromNow = computed(() => DateTime.fromISO($props.value?.updatedAt).setLocale('fr').toRelative())
+</script>

package/components/data/display/row/data-spacer.vue

@@ -0,0 +1,4 @@
+<template>
+  <div class="w-full flex-grow">
+  </div>
+</template>

package/components/data/display/row/data-summary.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex flex-col space-y-1 py-1 items-start justify-center text-sm cursor-pointer" @click="$emit('click')">
+    <data-display-badge-publish-status :status="status" class="sm:hidden" />
+    <div class="flex items-center space-x-2">
+      <!-- max-w borné (upgrade-admin-nuxt4) : truncate = nowrap, un titre long
+           dictait la largeur max-content de la colonne (table-auto). -->
+      <p class="font-normal xs:w-60 truncate sm:min-w-0 sm:max-w-xl">
+        {{ title }}
+      </p>
+      <data-display-badge-publish-status :status="status" class="hidden sm:inline-flex" />
+    </div>
+    <!-- Bornée (upgrade-admin-nuxt4) : une description longue étirait la
+         colonne au-delà de l'écran (table-auto suit la largeur du contenu). -->
+    <p class="hidden sm:block font-light text-gray-500 max-w-xl line-clamp-2 break-words">
+      {{ description }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import DataDisplayBadgePublishStatus from '~/components/data/display/row/data-display-badge-publish-status'
+import badge from '~/components/elements/badges/badge'
+
+// Prepare props
+const $props = defineProps({
+  titleKey: {
+    type: String,
+    default: 'title'
+  },
+  descriptionKey: {
+    type: String,
+    default: 'description'
+  },
+  value: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+// Prepare computed
+const title = computed(() => $props.value[$props.titleKey])
+const description = computed(() => $props.value[$props.descriptionKey])
+const status = computed(() => $props.value.status)
+</script>

package/components/data/display/row/data-text.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="text-sm cursor-pointer max-w-sm" @click="$emit('click')">
+    {{ value }}
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  value: {
+    type: String,
+    default: ''
+  }
+})
+</script>

package/components/data/display/row/data-toggle.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="inline-flex">
+    <input-toggle :value="value" @change="$emit('change', $event)" />
+  </div>
+</template>
+
+<script setup>
+import inputToggle from '~/components/forms/inputs/input-toggle'
+
+defineProps({
+  value: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

package/components/data/display/row.vue

@@ -0,0 +1,111 @@
+<template>
+  <li class="w-full inline-flex items-center justify-start hover:bg-gray-50 cursor-pointer" @click.self="_handleClick">
+    <div
+      v-for="({ property, component, componentOptions, nestedValue = true, alignRight = false, alignLeft = false, grow = false }) in headers"
+      :key="property"
+      :class="{
+        'flex-grow': grow,
+        'text-right': alignRight,
+        'text-left': alignLeft
+      }"
+      class="px-4 py-1"
+    >
+      <data-avatar
+        v-if="component === 'data-avatar'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <data-text
+        v-if="component === 'data-text'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <data-badge
+        v-if="component === 'data-badge'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <data-label
+        v-if="component === 'data-label'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <data-spacer
+        v-if="component === 'data-spacer'"
+        v-bind="componentOptions"
+      />
+      <data-last-update
+        v-if="component === 'data-last-update'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <!-- <data-color v-if="component === 'data-color'" v-bind="componentOptions" :value="nestedValue ? item[property] : item" class="hidden lg:block" /> -->
+      <data-summary
+        v-if="component === 'data-summary'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        @click="_handleClick"
+      />
+      <data-toggle
+        v-if="component === 'data-toggle'"
+        v-bind="componentOptions"
+        :value="nestedValue ? item[property] : item"
+        class="item-self-end"
+        @change="$emit(property, { ...item, [property]: $event })"
+      />
+      <dropdown-dots
+        v-else-if="component === 'actions'"
+        v-bind="componentOptions"
+        @action="$emit($event, item)"
+      />
+    </div>
+  </li>
+</template>
+
+<script setup>
+import dataBadge from '~/components/data/display/row/data-badge'
+// import dataColor from '~/components/data/display/row/data-color'
+import dropdownDots from '~/components/elements/dropdowns/dots'
+import dataLabel from '~/components/data/display/row/data-label'
+import dataLastUpdate from '~/components/data/display/row/data-last-update'
+import dataSummary from '~/components/data/display/row/data-summary'
+import dataSpacer from '~/components/data/display/row/data-spacer'
+import dataAvatar from '~/components/data/display/row/data-avatar'
+import dataText from '~/components/data/display/row/data-text'
+import dataToggle from '~/components/data/display/row/data-toggle'
+
+// Prepare emit
+const $router = useRouter()
+const $emit = defineEmits(['click', 'update', 'remove', 'fetch-more', 'usage'])
+
+// Prepare props
+const $props = defineProps({
+  displayHeader: {
+    type: Boolean,
+    default: false
+  },
+  headers: {
+    type: Array,
+    default: () => []
+  },
+  item: {
+    type: Object,
+    default: () => ({})
+  },
+  to: {
+    type: String,
+    default: ''
+  }
+})
+
+// Prepare methods
+const _handleClick = () => {
+  console.log('routing to', $props.to)
+  $props.to ? $router.replace($props.to) : $emit('click')
+}
+</script>

package/components/data/lists/data-list.vue

@@ -0,0 +1,85 @@
+<template>
+  <ul :class="gridDensity" class="grid gap-2 w-full">
+    <li
+      v-for="({ children, ...item }, i) in groupedItems"
+      :key="`group-item-${item[itemValue]}`"
+      :class="{ 'col-span-full': children?.length }"
+    >
+      <!-- [list]item-by slot -->
+      <slot name="item" v-bind="{ item, isFirst: i === 0, isLast: i === groupedItems.length - 1 }">
+        {{ item }}
+      </slot>
+
+      <!-- [list]item-child slot -->
+      <ul v-if="children?.length" :class="gridDensityChidren" class="grid w-full">
+        <li v-for="(itemChild, j) in children" :key="`item-${itemChild[itemValue]}`">
+          <slot name="item-child" v-bind="{ item: itemChild, isFirst: j === 0, isLast: j === children.length - 1 }">
+            {{ itemChild }}
+          </slot>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+// Prepare constants
+const GRID_PRESETS = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-1 sm:grid-cols-2',
+  3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',
+  4: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
+  5: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
+}
+
+// Prepare props
+const $props = defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemKey: {
+    type: String,
+    default: ''
+  },
+  itemValue: {
+    type: String,
+    default: 'value'
+  },
+  groupBy: {
+    type: String,
+    default: ''
+  },
+  density: {
+    type: Number,
+    default: 5,
+    enums: [1, 2, 3, 4, 5]
+  },
+  densityChildren: {
+    type: Number,
+    default: 5,
+    enums: [1, 2, 3, 4, 5]
+  }
+})
+
+// Prepare computed
+const gridDensity = computed(() => GRID_PRESETS[$props.density])
+const gridDensityChidren = computed(() => GRID_PRESETS[$props.densityChildren])
+const groupedItems = computed(() => {
+  if ($props.groupBy) {
+    const _items = new Map()
+    for (const item of $props.items) {
+      const group = item[$props.groupBy]
+      if (group) {
+        const parent = $props.items.find(({ [$props.itemValue]: check }) => check === group)
+        if (!_items.has(parent)) {
+          _items.set(parent, [])
+        }
+        _items.get(parent).push(item)
+      }
+    }
+    return Array.from(_items, ([parent, children]) => ({ ...parent, children }))
+  }
+  return $props.items
+})
+</script>