Deploy 20240804

Merge pull request #156 from Cytoid/dev

app.vue

@@ -1,14 +1,4 @@
 <script setup lang="ts">
-// auth
-onMounted(() => {
-  nextTick(async () => {
-    if (import.meta.client) {
-      const { init } = useAuth()
-      await init().catch(() => null)
-    }
-  })
-})
-
 useHead({
   titleTemplate(title) {
     return title || 'Cytoid'
@@ -23,7 +13,7 @@ useHead({
 </script>
 
 <template>
-  <div class="w-full h-full">
+  <div class="size-full">
     <NuxtLayout>
       <VitePwaManifest />
 

components/Base/Card.vue

@@ -10,29 +10,29 @@ const [defineBaseCardBody, BaseCardBody] = createReusableTemplate()
 </script>
 
 <template>
-  <div class="card min-w-84 max-h-60 bg-base-100 flex flex-col">
+  <div class="min-w-84 card flex max-h-60 flex-col bg-base-100">
     <defineBaseCardBody>
-      <div class="base-card w-full flex-1 bg-image-loading">
-        <div class="absolute h-full w-full card overflow-hidden flex">
+      <div class="base-card bg-image-loading w-full flex-1">
+        <div class="card absolute flex size-full overflow-hidden">
           <div
             class="base-card-bg flex-1 bg-cover bg-center transition-all"
             :style="`background-image: url(&quot;${cover}&quot;)`"
           >
-            <div class="base-card-bg-cover bg-black/60 transition h-full w-full" />
+            <div class="base-card-bg-cover size-full bg-black/60 transition" />
           </div>
         </div>
-        <div class="absolute h-full w-full">
-          <div class="h-full w-full p-3 flex flex-col">
+        <div class="absolute size-full">
+          <div class="flex size-full flex-col p-3">
             <slot />
           </div>
         </div>
       </div>
     </defineBaseCardBody>
 
-    <NuxtLink v-if="to" :to="to" class="flex-1 flex">
+    <NuxtLink v-if="to" :to="to" class="flex flex-1">
       <BaseCardBody />
     </NuxtLink>
-    <div v-else class="flex-1 flex">
+    <div v-else class="flex flex-1">
       <BaseCardBody />
     </div>
   </div>

components/Base/ConfirmDialog.vue

@@ -21,7 +21,7 @@ function quickConfirm() {
       }"
     >
       <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">
+        <h3 class="mb-4 text-lg font-bold">
           <slot name="title" />
         </h3>
 
@@ -31,10 +31,10 @@ function quickConfirm() {
         <input
           v-model="confirmed"
           type="text"
-          class="input input-bordered w-full mt-4"
+          class="input input-bordered mt-4 w-full"
         >
         <div class="modal-action">
-          <button class="btn btn-neutral btn-square" @click="onCancel">
+          <button class="btn btn-square btn-neutral" @click="onCancel">
             <Icon name="mdi:close" size="18" />
           </button>
           <button

components/Base/ItemInput.vue

@@ -116,16 +116,16 @@ function stringToTags(text: string) {
 
 <template>
   <div v-if="advancedMode">
-    <div class="w-full mb-2">
+    <div class="mb-2 w-full">
       <BaseItemInputItemConetent
         v-for="item in advancedPreviewItems" :key="item"
         :name="getItemName(item)"
         :value="item"
         :verified="getVerified(item)"
       />
     </div>
-    <div class="w-full flex gap-2">
-      <div class="flex-1 join join-vertical">
+    <div class="flex w-full gap-2">
+      <div class="join join-vertical flex-1">
         <button class="btn btn-primary join-item" :disabled="!advancedEdited" @click="saveAdvancedMode">
           <Icon name="mdi:check" size="24" />
         </button>
@@ -137,7 +137,7 @@ function stringToTags(text: string) {
     </div>
   </div>
   <div v-else>
-    <div class="w-full mb-2">
+    <div class="mb-2 w-full">
       <BaseItemInputItemConetent
         v-for="item in items" :key="item"
         :name="getItemName(item)"
@@ -146,11 +146,11 @@ function stringToTags(text: string) {
         :verified="getVerified(item)"
       />
     </div>
-    <div class="w-full flex flex-col sm:flex-row gap-2">
-      <div class="flex-1 flex relative">
-        <div ref="commonInputDom" class="flex-1 join flex">
+    <div class="flex w-full flex-col gap-2 sm:flex-row">
+      <div class="relative flex flex-1">
+        <div ref="commonInputDom" class="join flex flex-1">
           <input
-            v-model="tmpText" class="input input-bordered join-item flex-1"
+            v-model="tmpText" class="input join-item input-bordered flex-1"
             @keyup.enter="addTmpTextToItem"
             @keydown.delete.ctrl="removeLastItem"
             @click="showSuggestion = true"

components/Base/ItemInput/ItemConetent.vue

@@ -36,15 +36,15 @@ function remove() {
 <template>
   <DefineItemContentBody>
     <div
-      class="badge badge-lg m-1 pr-1 badge-neutral"
+      class="badge badge-neutral badge-lg m-1 pr-1"
       :class="{
         'bg-error/25': verified === false,
         'bg-success/25': verified === true,
         'bg-warning/25': verified === null,
       }"
     >
       {{ stateInfo }} {{ name }}
-      <button class="btn btn-ghost btn-xs btn-circle ml-1" :disabled="removeItem === undefined" @click="remove">
+      <button class="btn btn-circle btn-ghost btn-xs ml-1" :disabled="removeItem === undefined" @click="remove">
         <Icon name="mdi:close" size="16" />
       </button>
     </div>

components/Base/ItemInput/SuggestionBox.vue

@@ -11,14 +11,14 @@ function getName(item: string) {
 </script>
 
 <template>
-  <div class="absolute -bottom-2 h-0 w-full z-20">
+  <div class="absolute -bottom-2 z-20 h-0 w-full">
     <div
-      class="bg-base-200 w-full shadow-xl rounded-lg"
+      class="w-full rounded-lg bg-base-200 shadow-xl"
     >
       <div class="p-2">
         <button
           v-for="item, i in suggestion" :key="i"
-          class="badge badge-lg badge-neutral m-1"
+          class="badge badge-neutral badge-lg m-1"
           @click="selectSuggestion(item)"
         >
           {{ getName(item) }}

components/Base/ItemSelect.vue

@@ -13,7 +13,7 @@ const item = defineModel<string | null>({ required: true })
       <label
         v-if="icon"
         :for="props.id"
-        class="join-item btn"
+        class="btn join-item"
         :class="{
           'btn-neutral': !item,
           'btn-success': item && (verified || verified === ''),
@@ -26,7 +26,7 @@ const item = defineModel<string | null>({ required: true })
       <input
         :id="props.id"
         v-model="item" type="text"
-        class="join-item input input-bordered flex-1 w-full"
+        class="input join-item input-bordered w-full flex-1"
       >
     </div>
     <label v-if="item" class="label">

components/Base/ShowCase.vue

@@ -12,41 +12,41 @@ const isScrolled = computed(() => x.value > 0)
 </script>
 
 <template>
-  <div class="card bg-base-100 w-full md:flex md:flex-row">
-    <div class="relative card md:min-w-[20rem] md:w-80">
-      <div class="absolute h-full w-full card overflow-hidden flex">
+  <div class="card w-full bg-base-100 md:flex md:flex-row">
+    <div class="card relative md:w-80 md:min-w-80">
+      <div class="card absolute flex size-full overflow-hidden">
         <div
           class="flex-1 bg-cover bg-center transition-all"
           :style="`background-image: url(&quot;${cover}&quot;)`"
         >
-          <div class="bg-black/60 transition h-full w-full" />
+          <div class="size-full bg-black/60 transition" />
         </div>
       </div>
 
-      <div class="h-fit w-full flex-1 flex z-10">
-        <div class="h-full w-full p-3 flex-1 flex flex-col">
+      <div class="z-10 flex h-fit w-full flex-1">
+        <div class="flex size-full flex-1 flex-col p-3">
           <slot name="desperation" />
           <div class="flex-1" />
           <slot name="subDesperation" />
         </div>
       </div>
     </div>
 
-    <div class="overflow-hidden mx-2 relative">
+    <div class="relative mx-2 overflow-hidden">
       <div ref="showcaseItemOuterBox" class="overflow-x-auto">
-        <div class="showcase-items flex flex-row w-fit gap-1">
+        <div class="showcase-items flex w-fit flex-row gap-1">
           <slot />
-          <NuxtLink v-if="more" :to="more" class="more-btn w-20 flex flex-col gap-4 items-center justify-center">
+          <NuxtLink v-if="more" :to="more" class="more-btn flex w-20 flex-col items-center justify-center gap-4">
             <button class="btn btn-circle btn-primary">
               <Icon name="mdi:chevron-right" size="24" />
             </button>
             {{ $t('general.more_btn') }}
           </NuxtLink>
         </div>
       </div>
-      <div v-show="!isScrolled" class="absolute right-0 top-0 h-full w-24 flex items-center justify-end bg-gradient-to-r from-transparent to-gray-900/75">
+      <div v-show="!isScrolled" class="absolute right-0 top-0 flex h-full w-24 items-center justify-end bg-gradient-to-r from-transparent to-gray-900/75">
         <div class="aspect-square w-8 -rotate-90">
-          <Icon name="mdi:chevron-down" class="h-full w-full animate-bounce" />
+          <Icon name="mdi:chevron-down" class="size-full animate-bounce" />
         </div>
       </div>
     </div>

components/Captcha.vue

@@ -59,15 +59,15 @@ function onErrorFn(errorStr: string) {
           'modal-open': lock && token === '',
         }"
       >
-        <div class="modal-box w-fit flex flex-col gap-4">
-          <h3 class="font-bold text-lg">
+        <div class="modal-box flex w-fit flex-col gap-4">
+          <h3 class="text-lg font-bold">
             Turnstile
           </h3>
           <div class="w-fit">
             <NuxtTurnstile
               ref="turnstile"
               v-model="token"
-              class="rounded-xl overflow-hidden bg-image-loading"
+              class="bg-image-loading overflow-hidden rounded-xl"
               style="width: 300px; height: 65px;"
               data-appearance="interaction-only"
               :options="{

components/Collection/Card.vue

@@ -32,7 +32,7 @@ const collection = computed(() => parseFragment(CollectionCardData, props.collec
     :to="{ name: 'collections-id', params: { id: collection.uid } }"
     :cover="collection.cover?.thumbnail ?? undefined"
   >
-    <div class="px-2 w-full flex flex-row items-center">
+    <div class="flex w-full flex-row items-center px-2">
       <div>
         <UserAvatar
           v-if="collection.owner"
@@ -50,12 +50,12 @@ const collection = computed(() => parseFragment(CollectionCardData, props.collec
     </div>
     <div class="flex-1" />
 
-    <div class="px-2 w-full flex flex-row">
+    <div class="flex w-full flex-row px-2">
       <div class="w-full">
         <h2 class="card-title block truncate">
           {{ collection.title }}
         </h2>
-        <h2 v-if="collection.slogan" class="text-neutral-content opacity-80 truncate">
+        <h2 v-if="collection.slogan" class="truncate text-neutral-content opacity-80">
           {{ collection.slogan }}
         </h2>
       </div>

components/Collection/DeleteConfirm.vue

@@ -25,7 +25,7 @@ interface ConfirmCollectionData {
       {{ $t('studio.level_delete_confirm_title', { name: collection.title }) }}
     </template>
 
-    <div class="w-full flex flex-col gap-2">
+    <div class="flex w-full flex-col gap-2">
       <I18nT keypath="studio.level_delete_confirm_content1" tag="p">
         <strong class="font-bold"> {{ collection.title }} </strong>
       </I18nT>

components/Collection/ShowCase.vue

@@ -37,22 +37,22 @@ const collection = computed(() => parseFragment(CollectionShowCaseData, props.co
     class="mt-4"
   >
     <template #desperation>
-      <div class="px-2 py-1 w-full flex flex-row items-center">
+      <div class="flex w-full flex-row items-center px-2 py-1">
         <div class="w-full">
           <h2 class="card-title block truncate">
             <NuxtLink :to="{ name: 'collections-id', params: { id: collection.uid } }">
               {{ collection.title }}
             </NuxtLink>
           </h2>
-          <h2 class="text-neutral-content opacity-80 truncate">
+          <h2 class="truncate text-neutral-content opacity-80">
             {{ collection.slogan }}
           </h2>
         </div>
       </div>
     </template>
 
     <template #subDesperation>
-      <div class="px-2 w-full flex flex-row items-center">
+      <div class="flex w-full flex-row items-center px-2">
         <div>
           <UserAvatar
             v-if="collection.owner"

components/Collection/VisibilityConfirm.vue

@@ -45,7 +45,7 @@ interface ConfirmCollectionData {
       </template>
     </template>
 
-    <div class="w-full flex flex-col gap-2">
+    <div class="flex w-full flex-col gap-2">
       <template v-if="type === ResourceState.Public">
         <p>
           {{ $t('studio.level_visibility_public_title') }}

components/Comment/Content.vue

@@ -38,12 +38,12 @@ function afterPost(newPost: CommentResponse) {
       <UserAuthor :size="12" :avatar="post.owner.avatar.small" :uid="post.owner.uid" class="h-12" />
     </div>
     <div
-      class="flex-1 overflow-hidden card bg-base-100 min-h-16" :class="{
+      class="card min-h-16 flex-1 overflow-hidden bg-base-100" :class="{
         'shadow-xl': !lite,
       }"
     >
       <div class="card-body p-6">
-        <div class="flex justify-start items-center text-sm font-bold">
+        <div class="flex items-center justify-start text-sm font-bold">
           <UserAvatar
             v-if="lite" :avatar="post.owner.avatar.small" :uid="post.owner.uid" :name="post.owner.name ?? post.owner.uid"
             :transparent="true"
@@ -58,8 +58,8 @@ function afterPost(newPost: CommentResponse) {
             {{ dateFromNow(post.date) }}
           </span>
         </div>
-        <p class="pl-4 break-words prose" v-html="useMarked(post.content)" />
-        <div class="flex card-actions">
+        <p class="prose break-words pl-4" v-html="useMarked(post.content)" />
+        <div class="card-actions flex">
           <template v-if="replyCount">
             <button v-if="!showMore" class="btn btn-ghost btn-sm" @click="showMore = true">
               <Icon name="material-symbols:keyboard-arrow-down" class="mr-4" size="24" />
@@ -79,8 +79,8 @@ function afterPost(newPost: CommentResponse) {
           <CommentCreate :parent-id="post.id" :category="category" :thread="thread" :verify="verify" :after-post="afterPost" />
         </template>
         <template v-if="showMore">
-          <div class="border-solid border-l-8 border-gray-600" />
-          <CommentContent v-for="_post in data" :key="_post.id" :category="category" :thread="thread" :post="_post" :verify="verify" :lite="true" class="border-solid border-l-2 border-gray-600" />
+          <div class="border-l-8 border-solid border-gray-600" />
+          <CommentContent v-for="_post in data" :key="_post.id" :category="category" :thread="thread" :post="_post" :verify="verify" :lite="true" class="border-l-2 border-solid border-gray-600" />
         </template>
       </div>
     </div>

components/Comment/Create.vue

@@ -62,21 +62,21 @@ async function sendPost() {
       <UserAuthor :size="12" :avatar="user ? avatarURL(user.id) : undefined" :uid="user?.uid" class="h-12" />
     </div>
     <div
-      class="flex-1 overflow-hidden card bg-base-100 min-h-16"
+      class="card min-h-16 flex-1 overflow-hidden bg-base-100"
       :class="{
         'shadow-xl': !small,
       }"
     >
       <div class="card-body p-6">
-        <div v-if="isLogin && user && small" class="flex justify-start text-sm font-bold mb-1">
+        <div v-if="isLogin && user && small" class="mb-1 flex justify-start text-sm font-bold">
           <UserAvatar :avatar="avatarURL(user.id)" :uid="user.uid" :name="user.name ?? user.uid" :transparent="true" />
         </div>
         <textarea v-model="post" class="textarea textarea-primary h-48" :disabled="!isLogin" />
         <div class="card-actions justify-end pt-2">
-          <button v-if="isLogin" class="btn btn-sm btn-secondary" :disabled="post.length === 0 || loading" @click="sendPost">
+          <button v-if="isLogin" class="btn btn-secondary btn-sm" :disabled="post.length === 0 || loading" @click="sendPost">
             {{ $t('general.comment_post') }}
           </button>
-          <button v-else class="btn btn-sm btn-warning" @click="toLogin()">
+          <button v-else class="btn btn-warning btn-sm" @click="toLogin()">
             {{ $t('general.login_btn') }}
           </button>
         </div>