From e5a5463b634d06b7a21aba0dbcc960a9354d686a Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Wed, 25 Sep 2024 22:29:05 +0800
Subject: [PATCH] :sparkles: Basic sticker & pack overview [skip ci]

---
 components/LocaleSelect.vue               | 28 +++++++
 components/creator/stickers/DataTable.vue | 97 +++++++++++++++++++++++
 layouts/creator-hub.vue                   | 56 +++++++++++++
 layouts/default.vue                       | 28 +------
 layouts/dev-portal.vue                    | 26 +-----
 pages/creator/index.vue                   | 24 ++++++
 pages/creator/stickers/index.vue          | 89 +++++++++++++++++++++
 pages/dev/bots/index.vue                  |  1 +
 pages/dev/bots/new.vue                    |  1 +
 pages/dev/index.vue                       |  3 +-
 pages/users/me.vue                        |  2 +-
 11 files changed, 304 insertions(+), 51 deletions(-)
 create mode 100644 components/LocaleSelect.vue
 create mode 100644 components/creator/stickers/DataTable.vue
 create mode 100644 layouts/creator-hub.vue
 create mode 100644 pages/creator/index.vue
 create mode 100644 pages/creator/stickers/index.vue

diff --git a/components/LocaleSelect.vue b/components/LocaleSelect.vue
new file mode 100644
index 0000000..75c9130
--- /dev/null
+++ b/components/LocaleSelect.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-menu>
+    <template v-slot:activator="{ props }">
+      <v-btn
+        size="small"
+        icon="mdi-translate"
+        v-bind="props"
+      />
+    </template>
+    <v-list>
+      <v-list-item
+        class="w-48"
+        density="compact"
+        v-for="item in locales"
+        :key="item.code"
+        :value="item.code"
+        :active="locale == item.code"
+        @click.prevent.stop="setLocale(item.code)"
+      >
+        <v-list-item-title>{{ item.name }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script lang="ts" setup>
+const { locale, locales, setLocale } = useI18n()
+</script>
diff --git a/components/creator/stickers/DataTable.vue b/components/creator/stickers/DataTable.vue
new file mode 100644
index 0000000..184b735
--- /dev/null
+++ b/components/creator/stickers/DataTable.vue
@@ -0,0 +1,97 @@
+<template>
+  <v-data-table-server
+    density="compact"
+    :headers="dataDefinitions.stickers"
+    :items="stickers"
+    :items-length="pagination.stickers.total"
+    :loading="reverting.stickers"
+    v-model:items-per-page="pagination.stickers.pageSize"
+    @update:options="readStickers"
+    item-value="id"
+  >
+    <template v-slot:item="{ item }: { item: any }">
+      <tr>
+        <td>{{ item.id }}</td>
+        <td>
+          <v-img
+            cover
+            aspect-ratio="1"
+            width="28"
+            height="28"
+            color="grey-lighten-2"
+            rounded="sm"
+            :src="`${config.public.solarNetworkApi}/cgi/uc/attachments/${item.attachment.rid}`"
+          >
+            <template v-slot:placeholder>
+              <div class="d-flex align-center justify-center fill-height">
+                <v-progress-circular
+                  size="x-small"
+                  width="3"
+                  color="grey-lighten-4"
+                  indeterminate
+                ></v-progress-circular>
+              </div>
+            </template>
+          </v-img>
+        </td>
+        <td>{{ item.name }}</td>
+        <td>{{ props.packPrefix + item.alias }}</td>
+        <td>
+
+        </td>
+      </tr>
+    </template>
+  </v-data-table-server>
+</template>
+
+<script setup lang="ts">
+import { solarFetch } from "~/utils/request"
+
+const config = useRuntimeConfig()
+
+const props = defineProps<{ packId: number, packPrefix?: string }>()
+
+const error = ref<null | string>(null)
+
+const dataDefinitions: { [id: string]: any[] } = {
+  stickers: [
+    { align: "start", key: "id", title: "ID" },
+    { align: "start", key: "attachment", title: "Texture" },
+    { align: "start", key: "name", title: "Name" },
+    { align: "start", key: "alias", title: "Alias" },
+    { align: "start", key: "actions", title: "Actions", sortable: false },
+  ],
+}
+
+const stickers = ref<any>([])
+
+const reverting = reactive({ stickers: false })
+const pagination = reactive({
+  stickers: { page: 1, pageSize: 5, total: 0 },
+})
+
+async function readStickers({ page, itemsPerPage }: { page?: number; itemsPerPage?: number }) {
+  if (itemsPerPage) pagination.stickers.pageSize = itemsPerPage
+  if (page) pagination.stickers.page = page
+
+  reverting.stickers = true
+  const res = await solarFetch(
+    "/cgi/uc/stickers?" +
+    new URLSearchParams({
+      pack: props.packId.toString(),
+      take: pagination.stickers.pageSize.toString(),
+      offset: ((pagination.stickers.page - 1) * pagination.stickers.pageSize).toString(),
+    }),
+  )
+  if (res.status !== 200) {
+    error.value = await res.text()
+  } else {
+    const data = await res.json()
+    stickers.value = data["data"]
+    pagination.stickers.total = data["count"]
+  }
+  reverting.stickers = false
+}
+
+onMounted(() => readStickers({}))
+</script>
diff --git a/layouts/creator-hub.vue b/layouts/creator-hub.vue
new file mode 100644
index 0000000..6209143
--- /dev/null
+++ b/layouts/creator-hub.vue
@@ -0,0 +1,56 @@
+<template>
+  <v-app-bar flat color="primary" scroll-behavior="hide" scroll-threshold="800">
+    <v-container fluid class="mx-auto d-flex align-center justify-center px-8">
+      <v-tooltip>
+        <template #activator="{ props }">
+          <div @click="openDrawer = !openDrawer" v-bind="props" class="cursor-pointer">
+            <v-img class="me-4 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
+          </div>
+        </template>
+        Open / close drawer
+      </v-tooltip>
+
+      <nuxt-link to="/dev" exact>
+        <h2 class="mt-1">Creator Hub</h2>
+      </nuxt-link>
+
+      <v-spacer></v-spacer>
+
+      <locale-select />
+      <user-menu />
+    </v-container>
+  </v-app-bar>
+
+  <v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
+    <v-list density="compact" nav color="primary">
+      <v-list-item title="Back" prepend-icon="mdi-arrow-left" to="/" exact />
+    </v-list>
+
+    <v-divider class="border-opacity-50 my-1" />
+
+    <v-list density="compact" nav color="primary">
+      <v-list-item title="Stickers" prepend-icon="mdi-sticker-emoji" to="/creator/stickers" exact />
+    </v-list>
+
+    <v-divider class="border-opacity-50 mb-4 mt-1" />
+
+    <copyright no-centered service="capital" class="px-5" />
+
+    <footer-links class="px-5 mt-3" />
+  </v-navigation-drawer>
+
+  <v-main>
+    <slot />
+  </v-main>
+</template>
+
+<script setup lang="ts">
+import Logo from "../assets/logo-w-shadow.png"
+
+const { t } = useI18n()
+const openDrawer = ref(false)
+
+useHead({
+  titleTemplate: "%s | Solsynth Creator Hub"
+})
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index a1f9aad..ea05f68 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -17,29 +17,7 @@
 
       <v-spacer></v-spacer>
 
-      <v-menu>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            size="small"
-            icon="mdi-translate"
-            v-bind="props"
-          />
-        </template>
-        <v-list>
-          <v-list-item
-            class="w-48"
-            density="compact"
-            v-for="item in locales"
-            :key="item.code"
-            :value="item.code"
-            :active="locale == item.code"
-            @click.prevent.stop="setLocale(item.code)"
-          >
-            <v-list-item-title>{{ item.name }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
+      <locale-select />
       <user-menu />
     </v-container>
   </v-app-bar>
@@ -56,7 +34,7 @@
 
     <v-list density="compact" nav color="primary">
       <v-list-item title="Developer Portal" prepend-icon="mdi-code-tags" to="/dev" exact />
-      <v-list-item title="Creator Hub" prepend-icon="mdi-pencil" disabled exact />
+      <v-list-item title="Creator Hub" prepend-icon="mdi-pencil" to="/creator" exact />
     </v-list>
 
     <v-divider class="border-opacity-50 mb-4 mt-0.5" />
@@ -74,7 +52,7 @@
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
 
-const { locale, locales, setLocale, t } = useI18n()
+const {  t } = useI18n()
 
 const openDrawer = ref(false)
 </script>
diff --git a/layouts/dev-portal.vue b/layouts/dev-portal.vue
index 057ebe1..e4e4fa6 100644
--- a/layouts/dev-portal.vue
+++ b/layouts/dev-portal.vue
@@ -16,29 +16,7 @@
 
       <v-spacer></v-spacer>
 
-      <v-menu>
-        <template v-slot:activator="{ props }">
-          <v-btn
-            size="small"
-            icon="mdi-translate"
-            v-bind="props"
-          />
-        </template>
-        <v-list>
-          <v-list-item
-            class="w-48"
-            density="compact"
-            v-for="item in locales"
-            :key="item.code"
-            :value="item.code"
-            :active="locale == item.code"
-            @click.prevent.stop="setLocale(item.code)"
-          >
-            <v-list-item-title>{{ item.name }}</v-list-item-title>
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
+      <locale-select />
       <user-menu />
     </v-container>
   </v-app-bar>
@@ -69,7 +47,7 @@
 <script setup lang="ts">
 import Logo from "../assets/logo-w-shadow.png"
 
-const { locale, locales, setLocale, t } = useI18n()
+const { t } = useI18n()
 const openDrawer = ref(false)
 
 useHead({
diff --git a/pages/creator/index.vue b/pages/creator/index.vue
new file mode 100644
index 0000000..accfe04
--- /dev/null
+++ b/pages/creator/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <v-container fluid class="h-[calc(100vh-80px)] flex flex-col justify-center items-center text-center">
+    <v-icon icon="mdi-brush" size="64" />
+    <div class="text-2xl">Hello, creator!</div>
+    <div class="max-w-[320px]">Switch page using navigator above to get start creating contents on Solar Network.</div>
+
+    <div class="text-xs font-mono text-grey mt-5">
+      @{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, "0") }}
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "creator-hub",
+  middleware: ["auth"],
+})
+
+useHead({
+  title: "Landing",
+})
+
+const auth = useUserinfo()
+</script>
diff --git a/pages/creator/stickers/index.vue b/pages/creator/stickers/index.vue
new file mode 100644
index 0000000..a2a156b
--- /dev/null
+++ b/pages/creator/stickers/index.vue
@@ -0,0 +1,89 @@
+<template>
+  <v-container class="px-12">
+    <div class="flex justify-between items-center mt-5">
+      <div class="flex items-end gap-2">
+        <h1 class="text-2xl">Stickers & packs</h1>
+      </div>
+
+      <div class="flex gap-2">
+        <v-btn
+          color="primary"
+          text="New"
+          append-icon="mdi-plus"
+          variant="tonal"
+          to="/dev/bots/new"
+        />
+      </div>
+    </div>
+
+    <div class="mt-5">
+      <v-expansion-panels>
+        <v-expansion-panel
+          v-for="item in data"
+          :key="'sticker-pack#'+item.id"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <p>{{ item.name }}</p>
+              <v-chip size="x-small" class="font-mono" rounded color="primary">#{{ item.id }}</v-chip>
+            </div>
+          </template>
+
+          <template #text>
+            <v-row>
+              <v-col cols="12">
+                <p><b>Description</b></p>
+                <p>{{ item.description }}</p>
+              </v-col>
+              <v-col cols="12" md="6" lg="4">
+                <p><b>Pack Prefix</b></p>
+                <v-code class="font-mono mt-0.5 px-3 w-fit">
+                  <span v-if="item.prefix.length == 0"><i>no prefix</i></span>
+                  <span v-else>{{ item.prefix }}</span>
+                </v-code>
+              </v-col>
+              <v-col cols="12">
+                <p><b>Stickers</b></p>
+                <v-card variant="outlined" class="mx-[-0.5ch] mt-1">
+                  <creator-stickers-data-table :pack-id="item.id" :pack-prefix="item.prefix" />
+                </v-card>
+              </v-col>
+            </v-row>
+          </template>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </div>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "creator-hub",
+  middleware: ["auth"],
+})
+
+useHead({
+  title: "Stickers",
+})
+
+const loading = ref(false)
+const error = ref<null | string>(null)
+
+const data = ref<any[]>([])
+
+async function readPacks() {
+  loading.value = true
+
+  const resp = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
+  if (resp.status != 200) {
+    error.value = await resp.text()
+  } else {
+    const out = await resp.json()
+    data.value.push(...out["data"])
+  }
+
+  loading.value = false
+}
+
+onMounted(() => readPacks())
+</script>
diff --git a/pages/dev/bots/index.vue b/pages/dev/bots/index.vue
index 1a2c63d..9e7fc87 100644
--- a/pages/dev/bots/index.vue
+++ b/pages/dev/bots/index.vue
@@ -99,6 +99,7 @@ import { solarFetch } from "~/utils/request"
 
 definePageMeta({
   layout: "dev-portal",
+  middleware: ["auth"],
 })
 
 useHead({
diff --git a/pages/dev/bots/new.vue b/pages/dev/bots/new.vue
index f86425d..fbe5221 100644
--- a/pages/dev/bots/new.vue
+++ b/pages/dev/bots/new.vue
@@ -61,6 +61,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: "dev-portal",
+  middleware: ["auth"],
 })
 
 useHead({
diff --git a/pages/dev/index.vue b/pages/dev/index.vue
index e814f6f..f3ff50b 100644
--- a/pages/dev/index.vue
+++ b/pages/dev/index.vue
@@ -5,7 +5,7 @@
     <div class="max-w-[320px]">Switch page using navigator above to get start developing with Solar Network.</div>
 
     <div class="text-xs font-mono text-grey mt-5">
-      @{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, '0') }}
+      @{{ auth.userinfo?.name }} · {{ auth.userinfo?.id.toString().padStart(8, "0") }}
     </div>
   </v-container>
 </template>
@@ -13,6 +13,7 @@
 <script setup lang="ts">
 definePageMeta({
   layout: "dev-portal",
+  middleware: ["auth"],
 })
 
 useHead({
diff --git a/pages/users/me.vue b/pages/users/me.vue
index 75fcbea..c4b2418 100644
--- a/pages/users/me.vue
+++ b/pages/users/me.vue
@@ -32,7 +32,7 @@
             </v-card-text>
           </v-card>
 
-          <v-card class="w-28 aspect-square cursor-not-allowed" disabled>
+          <v-card class="w-28 aspect-square cursor-not-allowed" to="/creator">
             <v-card-text class="flex flex-col justify-center items-center text-center h-full">
               <v-icon icon="mdi-pencil" size="32" />
               <span class="text-sm mt-1.75">Creator Hub</span>