@meeovi/layer-lists 1.0.2 → 1.0.4

package/README.md

@@ -0,0 +1,111 @@
+# @meeovi/layer-lists
+
+This layer provides first-class lists and task management functionality for the Alternate Framework. It's provider-driven: you can plug in different backends (Directus, memory, ATProto, etc.) without changing UI code. The default production-ready fallback is the `@meeovi/directus-client` provider.
+
+Key goals:
+- Provider-agnostic API used by the UI (`useLists()` composable).
+- Advanced task features (due dates, reminders, priority, sharing, search, archive) exposed as optional provider methods.
+- Production-ready defaults: Directus provider, health checks, graceful fallbacks.
+
+Quick start
+
+Install the layer into your project (monorepo/local install):
+
+```bash
+npm install @meeovi/layer-lists
+# also install your chosen provider (Directus example)
+npm install @meeovi/directus-client
+```
+
+Register the layer and configure the provider in your Alternate app (Directus example):
+
+```ts
+import lists from '@meeovi/layer-lists'
+
+const app = createAlternateApp({
+  config: {
+    lists: {
+      provider: 'directus',
+      directus: {
+        baseUrl: 'https://cms.example.com',
+        apiKey: process.env.DIRECTUS_KEY
+      }
+    }
+  },
+  modules: [lists]
+})
+
+await app.start()
+```
+
+Using in a Nuxt (modules) app
+
+1. Install the packages into your Nuxt app project.
+2. Add the layer module to your Nuxt alternate app bootstrap (see above).
+3. In Vue components or composables, use the `useLists()` composable the same way as in the Alternate UI:
+
+```ts
+const { listLists, createList, addItem, updateItem } = useLists()
+
+const lists = await listLists()
+await createList({ title: 'Groceries' })
+await addItem('list-id', { title: 'Buy milk', metadata: { dueDate: '2026-02-01' } })
+```
+
+Advanced features
+
+Providers may implement optional advanced methods:
+- `toggleComplete(listId, itemId, completed)`
+- `setDueDate(listId, itemId, dueDate)`
+- `setReminder(listId, itemId, reminder)`
+- `setPriority(listId, itemId, priority)`
+- `shareList(listId, userId, role)`
+- `searchItems(listId, query)`
+- `archiveList(listId)`
+
+If a provider doesn't implement these methods, the `memory` provider includes sensible defaults and the `directus` provider attempts fallbacks to existing endpoints when possible.
+
+Creating a provider
+
+Implement a `ListsProvider` and register it with `registerListsProvider(name, provider)`.
+
+Example skeleton (register at runtime):
+
+```ts
+import { registerListsProvider } from '@meeovi/layer-lists/app/composables/registry'
+
+const MyProvider = {
+  async getList(id) { /* ... */ },
+  async listLists() { /* ... */ },
+  async createList(data) { /* ... */ },
+  async addItem(listId, item) { /* ... */ },
+  // ... implement optional methods as desired
+}
+
+registerListsProvider('my-provider', MyProvider)
+```
+
+Runtime registration
+
+Other modules can register providers at runtime using `registerListsProviderRuntime(name, provider)`.
+
+Health checks
+
+Use the provided `checkListsProviderHealth()` helper to validate that the configured provider is reachable (it performs a lightweight `listLists()` call). Example:
+
+```ts
+import { checkListsProviderHealth } from '@meeovi/layer-lists/app/composables/utils/health'
+
+const healthy = await checkListsProviderHealth()
+if (!healthy) {
+  // fallback or alert
+}
+```
+
+What's next
+
+- Add server-side sync/notifications (webhooks) for reminders.
+- Add tests and CI for providers and bridges.
+- Provide an Express example wiring server-side endpoints to the Directus client.
+
+License: MIT

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@meeovi/layer-lists",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Official Lists module for the M Framework.",
   "scripts": {
+    "build": "tsc -p tsconfig.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -16,11 +17,22 @@
   "type": "module",
   "dependencies": {
     "@meeovi/api": "^1.0.1",
+    "@meeovi/core": "^1.0.3",
+    "@meeovi/directus-client": "^1.0.0",
     "@meeovi/layer-social": "^1.0.2",
     "list.js": "^2.3.1",
     "nanoid": "^5.1.6"
   },
   "devDependencies": {
     "nuxt": "^4.3.0"
-  }
-}
+  },
+  "exports": {
+    "./nuxt.config": "./nuxt.config.ts"
+  },
+  "files": [
+    "nuxt.config.ts",
+    "layers",
+    "runtime",
+    "src"
+  ]
+}

package/app/components/features/archived.vue

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
-            <div class="container">
-                <div class="row justify-content-center">
-                    <div class="col-12 content-head">
-                        <div class="mbr-section-head mb-5">
-                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
-                                <strong>My Archived Lists</strong>
-                            </h4>
-
-                            <div class="row">
-                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in archived" :key="list.id">
-                                    <listCard :list="list" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script setup>
-    import {
-        ref
-    } from 'vue'
-    import listCard from '~/components/related/list.vue'
-    import {
-        useUserStore
-    } from '#auth/app/stores/user'
-
-    const userStore = useUserStore()
-    const userDisplayName = computed(() => {
-        return userStore.user?.name || userStore.user?.username || 'User'
-    })
-
-    const model = ref(null)
-
-    const {
-        $directus,
-        $readItems
-    } = useNuxtApp()
-
-        const {
-        data: archived
-    } = await useAsyncData('archived', () => {
-        return $directus.request($readItems('lists', {
-            filter: {
-                user: {
-                    _eq: userDisplayName.value,
-                },
-                status: {
-                    _eq: "Archived",
-                }
-            },
-        }))
-    })
-
-    useHead({
-        title: 'My Archived Lists - Meeovi Tasks'
-    })
-</script>

package/app/components/features/bookmarks.vue

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
-            <div class="container">
-                <div class="row justify-content-center">
-                    <div class="col-12 content-head">
-                        <div class="mbr-section-head mb-5">
-                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
-                                <strong>My Bookmarks</strong>
-                            </h4>
-
-                            <div class="row">
-                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="bookmark in bookmarks" :key="bookmark.id">
-                                    <bookmarkCard :bookmark="bookmark" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script setup>
-    import {
-        ref
-    } from 'vue'
-    import bookmarkCard from '~/components/related/bookmark.vue'
-    import {
-        useUserStore
-    } from '#auth/app/stores/user'
-
-    const userStore = useUserStore()
-    const userDisplayName = computed(() => {
-        return userStore.user?.name || userStore.user?.username || 'User'
-    })
-
-    const model = ref(null)
-
-    const {
-        $directus,
-        $readItems
-    } = useNuxtApp()
-
-        const {
-        data: bookmarks
-    } = await useAsyncData('bookmarks', () => {
-        return $directus.request($readItems('lists', {
-            filter: {
-                creator: {
-                    _eq: userDisplayName.value,
-                },
-                type: {
-                    _eq: "bookmark",
-                }
-            },
-        }))
-    })
-
-    useHead({
-        title: 'My Bookmarks Lists - Meeovi Tasks'
-    })
-</script>

package/app/components/features/lists.vue

@@ -1,61 +0,0 @@
-<template>
-    <div>
-        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
-            <div class="container">
-                <div class="row justify-content-center">
-                    <div class="col-12 content-head">
-                        <div class="mbr-section-head mb-5">
-                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
-                                <strong>My Lists</strong>
-                            </h4>
-
-                            <div class="row">
-                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in myLists" :key="list.id">
-                                    <listCard :list="list" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script setup>
-    import {
-        ref
-    } from 'vue'
-    import listCard from '~/components/related/list.vue'
-    import {
-        useUserStore
-    } from '#auth/app/stores/user'
-
-    const userStore = useUserStore()
-    const userDisplayName = computed(() => {
-        return userStore.user?.name || userStore.user?.username || 'User'
-    })
-
-    const model = ref(null)
-
-    const {
-        $directus,
-        $readItems
-    } = useNuxtApp()
-
-        const {
-        data: myLists
-    } = await useAsyncData('myLists', () => {
-        return $directus.request($readItems('lists', {
-            filter: {
-                user: {
-                    _eq: userDisplayName.value,
-                }
-            },
-        }))
-    })
-
-    useHead({
-        title: 'My Lists - Meeovi Tasks'
-    })
-</script>

package/app/components/features/starred.vue

@@ -1,64 +0,0 @@
-<template>
-    <div>
-        <section data-bs-version="5.1" class="features4 start cid-v0Her0Ajsb" id="features04-1">
-            <div class="container">
-                <div class="row justify-content-center">
-                    <div class="col-12 content-head">
-                        <div class="mbr-section-head mb-5">
-                            <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2">
-                                <strong>My Starred Lists</strong>
-                            </h4>
-
-                            <div class="row">
-                                <div class="item features-image col-12 col-md-6 col-lg-4" v-for="list in starred" :key="list.id">
-                                    <listCard :list="list" />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    </div>
-</template>
-
-<script setup>
-    import {
-        ref
-    } from 'vue'
-    import listCard from '~/components/related/list.vue'
-    import {
-        useUserStore
-    } from '#auth/app/stores/user'
-
-    const userStore = useUserStore()
-    const userDisplayName = computed(() => {
-        return userStore.user?.name || userStore.user?.username || 'User'
-    })
-
-    const model = ref(null)
-
-    const {
-        $directus,
-        $readItems
-    } = useNuxtApp()
-
-        const {
-        data: starred
-    } = await useAsyncData('starred', () => {
-        return $directus.request($readItems('lists', {
-            filter: {
-                user: {
-                    _eq: userDisplayName.value,
-                },
-                favorite: {
-                    _eq: "yes",
-                }
-            },
-        }))
-    })
-
-    useHead({
-        title: 'My Starred Lists - Meeovi Tasks'
-    })
-</script>

package/app/components/lists/ListItemCard.vue

@@ -1,190 +0,0 @@
-<template>
-  <v-card class="list-item-card" :class="`item-type-${item.content.type}`">
-    <!-- Media Item -->
-    <div v-if="item.content.type === 'media'">
-      <v-img
-        :src="item.content.thumbnail || '/default-media.png'"
-        height="200"
-        cover
-      >
-        <div class="d-flex align-end fill-height">
-          <v-chip color="primary" size="small" class="ma-2">
-            {{ item.content.media_type }}
-          </v-chip>
-        </div>
-      </v-img>
-      
-      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
-      <v-card-subtitle v-if="item.content.metadata?.artist">
-        {{ item.content.metadata.artist }}
-      </v-card-subtitle>
-    </div>
-
-    <!-- Bookmark Item -->
-    <div v-else-if="item.content.type === 'bookmark'">
-      <v-card-title class="d-flex align-center">
-        <v-img
-          :src="item.content.favicon || '/default-favicon.png'"
-          width="16"
-          height="16"
-          class="me-2"
-        />
-        <span class="text-truncate">{{ item.content.title }}</span>
-      </v-card-title>
-      
-      <v-card-text>
-        <p class="text-body-2 text-truncate">{{ item.content.description }}</p>
-        <div class="d-flex align-center mt-2">
-          <v-chip
-            v-for="tag in item.content.tags?.slice(0, 2)"
-            :key="tag"
-            size="x-small"
-            class="me-1"
-          >
-            {{ tag }}
-          </v-chip>
-          <v-chip
-            v-if="item.content.read"
-            color="success"
-            size="x-small"
-            variant="outlined"
-          >
-            Read
-          </v-chip>
-        </div>
-      </v-card-text>
-    </div>
-
-    <!-- Product/Wishlist Item -->
-    <div v-else-if="item.content.type === 'product'">
-      <v-img
-        :src="item.content.image || '/default-product.png'"
-        height="200"
-        cover
-      >
-        <div class="d-flex align-end fill-height">
-          <v-chip
-            :color="getPriorityColor(item.content.priority)"
-            size="small"
-            class="ma-2"
-          >
-            {{ item.content.priority }}
-          </v-chip>
-        </div>
-      </v-img>
-      
-      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
-      <v-card-subtitle v-if="item.content.price">
-        ${{ item.content.price }}
-      </v-card-subtitle>
-    </div>
-
-    <!-- Default Item -->
-    <div v-else>
-      <v-img
-        v-if="item.content.image"
-        :src="item.content.image"
-        height="200"
-        cover
-      />
-      
-      <v-card-title class="text-truncate">{{ item.content.title }}</v-card-title>
-      <v-card-text v-if="item.content.description">
-        <p class="text-body-2">{{ item.content.description }}</p>
-      </v-card-text>
-    </div>
-
-    <!-- Actions -->
-    <v-card-actions>
-      <v-btn
-        v-if="item.content.url"
-        :href="item.content.url"
-        target="_blank"
-        variant="text"
-        size="small"
-        prepend-icon="mdi-open-in-new"
-      >
-        Open
-      </v-btn>
-      
-      <v-spacer />
-      
-      <v-menu>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            icon="mdi-dots-vertical"
-            variant="text"
-            size="small"
-            v-bind="props"
-          />
-        </template>
-        
-        <v-list>
-          <v-list-item @click="$emit('edit', item)">
-            <template v-slot:prepend>
-              <v-icon icon="mdi-pencil" />
-            </template>
-            <v-list-item-title>Edit</v-list-item-title>
-          </v-list-item>
-          
-          <v-divider />
-          
-          <v-list-item @click="$emit('delete', item.id)" class="text-error">
-            <template v-slot:prepend>
-              <v-icon icon="mdi-delete" color="error" />
-            </template>
-            <v-list-item-title>Delete</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-    </v-card-actions>
-  </v-card>
-</template>
-
-<script setup>
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true
-  },
-  listType: {
-    type: String,
-    required: true
-  }
-})
-
-const emit = defineEmits(['edit', 'delete'])
-
-const getPriorityColor = (priority) => {
-  const colors = {
-    low: 'blue',
-    medium: 'orange',
-    high: 'red'
-  }
-  return colors[priority] || 'grey'
-}
-</script>
-
-<style scoped>
-.list-item-card {
-  height: 100%;
-  transition: all 0.2s ease;
-}
-
-.list-item-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.item-type-media {
-  border-left: 4px solid rgb(var(--v-theme-purple));
-}
-
-.item-type-bookmark {
-  border-left: 4px solid rgb(var(--v-theme-orange));
-}
-
-.item-type-product {
-  border-left: 4px solid rgb(var(--v-theme-pink));
-}
-</style>

package/app/components/lists/add-bookmark.vue

@@ -1,52 +0,0 @@
-<template>
-  <v-row justify="center">
-    <v-dialog v-model="dialog" :scrim="false" transition="dialog-bottom-transition">
-      <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" class="rightAddBtn">
-          <v-icon start icon="fas:fa fa-plus"></v-icon>Create a Bookmark
-        </v-btn>
-      </template>
-      <v-card class="b-1">
-        <v-card-title>
-          <h3>Create New Bookmark</h3>
-        </v-card-title>
-
-        <v-card-text>
-          <div v-if="formError" class="error">{{ formError }}</div>
-          <div v-else-if="formSuccess" class="success">{{ formSuccess }}</div>
-          <form @submit.prevent="submitForm">
-            <DirectusFormElement v-for="field in websiteFields" :key="field.field" :field="field" v-model="form[field.field]" />
-            <v-btn type="submit">Submit</v-btn>
-          </form>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </v-row>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import DirectusFormElement from '#shared/app/components/ui/forms/DirectusFormElement.vue'
-import { useDirectusForm } from '../../composables/globals/useDirectusForm'
-
-const dialog = ref(false)
-const { $directus, $readFieldsByCollection } = useNuxtApp()
-
-const { data, error } = await useAsyncData('websites', async () => {
-  return $directus.request($readFieldsByCollection('websites'))
-})
-
-// guard against undefined/null data.value and empty arrays
-if (error.value || data.value == null || (data.value?.length ?? 0) === 0) {
-  console.error(error)
-  throw createError({
-    statusCode: 404,
-    statusMessage: 'Bookmark not found'
-  })
-}
-
-const websiteFields = data
-
-// use composable for form handling (validation, submit, provide context)
-const { form, formError, formSuccess, submitForm } = useDirectusForm('websites', websiteFields, { clearOnSuccess: true, closeDialogRef: dialog })
-</script>