🗑️ Clean up layouts

components/creator/stickers/DataTable.vue

@@ -5,13 +5,11 @@
     </v-alert>
   </v-expand-transition>
 
-  <v-data-table-server
+  <v-data-table
     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"
   >
@@ -74,23 +72,24 @@
             <template v-slot:default="{ isActive }">
               <v-card :title="`Delete sticker #${item.id}?`">
                 <v-card-text>
-                  This action will delete this sticker, all content used it will no longer show your sticker.
+                  This action will delete this sticker, all content used it will no longer show your sticker. But the
-                  But the attachment will still exists.
+                  attachment will still exists.
                 </v-card-text>
 
                 <v-card-actions>
                   <v-spacer></v-spacer>
 
-                  <v-btn
+                  <v-btn text="Cancel" color="grey" @click="isActive.value = false"></v-btn>
-                    text="Cancel"
-                    color="grey"
-                    @click="isActive.value = false"
-                  ></v-btn>
 
                   <v-btn
                     text="Delete"
                     color="error"
-                    @click="() => { deleteSticker(item); isActive.value = false }"
+                    @click="
+                      () => {
+                        deleteSticker(item)
+                        isActive.value = false
+                      }
+                    "
                   />
                 </v-card-actions>
               </v-card>
@@ -99,7 +98,7 @@
         </td>
       </tr>
     </template>
-  </v-data-table-server>
+  </v-data-table>
 </template>
 
 <script setup lang="ts">
@@ -108,7 +107,7 @@ import { solarFetch } from "~/utils/request"
 const config = useRuntimeConfig()
 const { t } = useI18n()
 
-const props = defineProps<{ packId: number, packPrefix?: string }>()
+const props = defineProps<{ packId: number; packPrefix?: string }>()
 
 const error = ref<null | string>(null)
 
@@ -125,34 +124,20 @@ const dataDefinitions: { [id: string]: any[] } = {
 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
 
+async function readStickers() {
   reverting.stickers = true
-  const res = await solarFetch(
+  const res = await solarFetch("/cgi/uc/stickers/packs/" + props.packId)
-    "/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"]
+    stickers.value = data["stickers"]
-    pagination.stickers.total = data["count"]
   }
   reverting.stickers = false
 }
 
-onMounted(() => readStickers({}))
+onMounted(() => readStickers())
 
 const submitting = ref(false)
 
@@ -165,7 +150,7 @@ async function deleteSticker(item: any) {
   if (res.status !== 200) {
     error.value = await res.text()
   } else {
-    await readStickers({})
+    await readStickers()
   }
 
   submitting.value = false

layouts/creator-hub.vue

@@ -1,17 +1,10 @@
 <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>
+      <v-app-bar-nav-icon @click="openDrawer = !openDrawer" />
-        <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>
+      <nuxt-link to="/creator" exact>
-        <h2 class="mt-1">Creator Hub</h2>
+        <h2>Creator Hub</h2>
       </nuxt-link>
 
       <v-spacer></v-spacer>
@@ -45,12 +38,10 @@
 </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"
+  titleTemplate: "%s | Solsynth Creator Hub",
 })
 </script>

layouts/dev-portal.vue

@@ -1,17 +1,10 @@
 <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-container fluid class="mx-auto d-flex align-center justify-center pr-8">
-      <v-tooltip>
+      <v-app-bar-nav-icon @click="openDrawer = !openDrawer" />
-        <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">Developer Portal</h2>
+        <h2>Developer Portal</h2>
       </nuxt-link>
 
       <v-spacer></v-spacer>
@@ -51,6 +44,6 @@ const { t } = useI18n()
 const openDrawer = ref(false)
 
 useHead({
-  titleTemplate: "%s | Solsynth Dev Portal"
+  titleTemplate: "%s | Solsynth Dev Portal",
 })
 </script>

pages/creator/stickers/index.vue

@@ -6,13 +6,7 @@
       </div>
 
       <div class="flex gap-2">
-        <v-btn
+        <v-btn color="primary" text="New" append-icon="mdi-plus" variant="tonal" to="/creator/stickers/new" />
-          color="primary"
-          text="New"
-          append-icon="mdi-plus"
-          variant="tonal"
-          to="/creator/stickers/new"
-        />
       </div>
     </div>
 
@@ -24,10 +18,7 @@
 
     <div class="mt-5">
       <v-expansion-panels>
-        <v-expansion-panel
+        <v-expansion-panel v-for="item in data" :key="'sticker-pack#' + item.id">
-          v-for="item in data"
-          :key="'sticker-pack#'+item.id"
-        >
           <template #title>
             <div class="flex items-center gap-2">
               <p>{{ item.name }}</p>
@@ -87,16 +78,17 @@
                         <v-card-actions>
                           <v-spacer></v-spacer>
 
-                          <v-btn
+                          <v-btn text="Cancel" color="grey" @click="isActive.value = false"></v-btn>
-                            text="Cancel"
-                            color="grey"
-                            @click="isActive.value = false"
-                          ></v-btn>
 
                           <v-btn
                             text="Delete"
                             color="error"
-                            @click="() => { deletePack(item); isActive.value = false }"
+                            @click="
+                              () => {
+                                deletePack(item)
+                                isActive.value = false
+                              }
+                            "
                           />
                         </v-card-actions>
                       </v-card>
@@ -131,6 +123,7 @@ useHead({
 })
 
 const { t } = useI18n()
+const ua = useUserinfo()
 
 const loading = ref(false)
 const error = ref<null | string>(null)
@@ -140,7 +133,7 @@ const data = ref<any[]>([])
 async function readPacks() {
   loading.value = true
 
-  const res = await solarFetch(`/cgi/uc/stickers/packs?take=10&offset=${data.value.length}`)
+  const res = await solarFetch(`/cgi/uc/stickers/packs?take=10&author=${ua.userinfo?.id}&offset=${data.value.length}`)
   if (res.status != 200) {
     error.value = await res.text()
   } else {