Merge branch 'main' into feat/hidden

Author: ruibaby

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

package.json

@@ -24,9 +24,9 @@
     ]
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.1.4",
+    "@biomejs/biome": "^2.2.0",
     "@tsconfig/node18": "^18.2.4",
-    "@types/node": "^18.19.122",
+    "@types/node": "^18.19.123",
     "husky": "^9.1.7",
     "lint-staged": "^16.1.5",
     "typescript": "~5.3.3",

packages/comment-widget/package.json

@@ -38,10 +38,10 @@
     "@halo-dev/api-client": "https://pkg.pr.new/@halo-dev/api-client@7679",
     "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
-    "@tiptap/core": "^3.1.0",
-    "@tiptap/extensions": "^3.1.0",
-    "@tiptap/pm": "^3.1.0",
-    "@tiptap/starter-kit": "^3.1.0",
+    "@tiptap/core": "^3.2.0",
+    "@tiptap/extensions": "^3.2.0",
+    "@tiptap/pm": "^3.2.0",
+    "@tiptap/starter-kit": "^3.2.0",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "es-toolkit": "^1.39.9",
@@ -53,7 +53,7 @@
     "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.371",
+    "@iconify/json": "^2.2.373",
     "@lit/localize-tools": "^0.8.0",
     "@types/sanitize-html": "^2.16.0",
     "@unocss/reset": "^66.4.2",

packages/comment-widget/src/base-comment-item.ts

@@ -9,6 +9,8 @@ import { consume } from '@lit/context';
 import { configMapDataContext } from './context';
 import type { ConfigMapData } from './types';
 import './comment-content';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 
 export class BaseCommentItem extends LitElement {
   @property({ type: String })
@@ -48,25 +50,27 @@ export class BaseCommentItem extends LitElement {
         <user-avatar
           src="${this.userAvatar || ''}"
           alt="${this.userDisplayName || ''}"
-          href=${this.userWebsite}
+          href=${ifDefined(this.userWebsite)}
         ></user-avatar>
       </div>
       <div class="item-main flex-[1_1_auto] min-w-0 w-full">
         <div class="item-meta flex items-center gap-2 flex-wrap">
-          ${
-            this.userWebsite
-              ? html`<a
+          ${when(
+            this.userWebsite,
+            () => html`
+              <a
                 class="item-author font-medium text-sm text-text-1 hover:underline"
                 target="_blank"
-                href=${this.userWebsite}
+                href=${ifDefined(this.userWebsite)}
                 rel="noopener noreferrer"
               >
                 ${this.userDisplayName}
-              </a>`
-              : html`<span class="item-author font-medium text-sm text-text-1">${this.userDisplayName}</span>`
-          }
-          
-          ${this.ua && this.configMapData?.basic.showCommenterDevice ? html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>` : ''}
+              </a>
+              `,
+            () => html`
+              <span class="item-author font-medium text-sm text-text-1">${this.userDisplayName}</span>
+              `
+          )}
 
 
           ${
@@ -78,17 +82,14 @@ export class BaseCommentItem extends LitElement {
               </div>`
               : ''
           }
-          
 
+          ${when(this.ua && this.configMapData?.basic.showCommenterDevice, () => html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>`)}
+          
           <time class="item-meta-info text-xs text-text-3" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
           </time>
 
-          ${
-            !this.approved
-              ? html`<div class="item-meta-info text-xs text-text-3">${msg('Reviewing')}</div>`
-              : ''
-          }
+          ${when(!this.approved, () => html`<div class="item-meta-info text-xs text-text-3">${msg('Reviewing')}</div>`)}
         </div>
 
         <div class="item-content mt-2.5 space-y-2.5"><slot name="pre-content"></slot><comment-content .content=${this.content}></comment-content></div>

packages/comment-widget/src/base-form.ts

@@ -20,10 +20,10 @@ import type { ToastManager } from './lit-toast';
 import baseStyles from './styles/base';
 import type { ConfigMapData } from './types';
 import './comment-editor';
+import { when } from 'lit/directives/when.js';
 import { ofetch } from 'ofetch';
 import type { CommentEditor } from './comment-editor';
 import { cleanHtml } from './utils/html';
-import './base-tooltip';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -154,14 +154,11 @@ export class BaseForm extends LitElement {
 
   renderAccountInfo() {
     return html`<div class="form-account flex items-center gap-2">
-      ${
-        this.currentUser?.spec.avatar
-          ? html`
-            <div class="form-account-avatar avatar">
-              <img src=${this.currentUser.spec.avatar} class="size-full object-cover" />
-            </div>`
-          : ''
-      }
+      ${when(
+        this.currentUser?.spec.avatar,
+        () => html`<div class="form-account-avatar avatar"><img src=${this.currentUser?.spec.avatar || ''} class="size-full object-cover" /></div>
+          `
+      )}
       <span class="form-account-name text-base text-text-1 font-semibold">
         ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name}
       </span>
@@ -198,9 +195,11 @@ export class BaseForm extends LitElement {
     return html`
       <form class="form w-full flex flex-col gap-4" @submit="${this.onSubmit}">
         <comment-editor ${ref(this.editorRef)} .placeholder=${this.configMapData?.editor?.placeholder}></comment-editor>
-        ${
-          !this.currentUser && this.allowAnonymousComments
-            ? html`<div class="form-inputs grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
+
+        ${when(
+          !this.currentUser && this.allowAnonymousComments,
+          () => html`
+            <div class="form-inputs grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
               <input
                 name="displayName"
                 value=${this.customAccount.displayName}
@@ -225,45 +224,41 @@ export class BaseForm extends LitElement {
                 class="input"
               />
               <a tabindex="-1" href=${this.loginUrl} rel="nofollow" class="form-login-link text-text-3 hover:text-text-1 text-xs transition-all select-none">${msg('(Or login)')}</a>
-            </div>`
-            : ''
-        }
+            </div>
+          `
+        )}
 
         <div class="form__footer">
           ${this.currentUser ? this.renderAccountInfo() : ''}
-          ${
-            !this.currentUser && !this.allowAnonymousComments
-              ? html`<button
+          ${when(
+            !this.currentUser && !this.allowAnonymousComments,
+            () => html`
+              <button
                 @click=${this.handleOpenLoginPage}
                 class="form-login text-xs text-text-3 hover:text-text-1 px-3 transition-all py-2 rounded-base border border-muted-3 opacity-100 hover:border-muted-4 hover:opacity-70 border-solid"
                 type="button"
                 tabindex="-1"
               >
                 ${msg('Login')}
-              </button> `
-              : ''
-          }
+              </button>
+              `
+          )}
           <div class="form-actions justify-end flex gap-3 flex-wrap items-center">
-
-            ${
+            ${when(
               !this.hidePrivateCheckbox &&
-              this.configMapData?.basic.enablePrivateComment
-                ? html`
-                  <div class="flex items-center gap-2">
-                    <input id="hidden" name="hidden" type="checkbox" />
-                    <label for="hidden" class="text-xs select-none text-text-3 hover:text-text-1 transition-all">${msg('Private')}</label>
-                    <base-tooltip content=${this.currentUser ? msg('Currently logged in. After selecting the private option, comments will only be visible to yourself and the site administrator.') : msg('You are currently anonymous. After selecting the private option, the comment will only be visible to the site administrator.')}>
-                      <i class="i-mingcute:information-line size-3.5 text-text-3 block"></i>
-                    </base-tooltip>
-                  </div>
-                `
-                : ''
-            }
-            
-
-            ${
-              this.showCaptcha && this.captcha
-                ? html`
+                this.configMapData?.basic.enablePrivateComment,
+              () => html`<div class="flex items-center gap-2">
+                      <input id="hidden" name="hidden" type="checkbox" />
+                      <label for="hidden" class="text-xs select-none text-text-3 hover:text-text-1 transition-all">${msg('Private')}</label>
+                      <base-tooltip content=${this.currentUser ? msg('Currently logged in. After selecting the private option, comments will only be visible to yourself and the site administrator.') : msg('You are currently anonymous. After selecting the private option, the comment will only be visible to the site administrator.')}>
+                        <i class="i-mingcute:information-line size-3.5 text-text-3 block"></i>
+                      </base-tooltip>
+                    </div>`
+            )}
+
+            ${when(
+              this.showCaptcha && this.captcha,
+              () => html`
                   <div class="form-captcha gap-2 flex items-center">
                     <img
                       @click=${this.handleFetchCaptcha}
@@ -278,20 +273,20 @@ export class BaseForm extends LitElement {
                       class="input "
                     />
                   </div>
-                `
-                : ''
-            }
+              `
+            )}
 
             <button
               .disabled=${this.submitting}
               type="submit"
               class="form-submit outline-none focus:shadow-input h-12 text-sm inline-flex border border-primary-1 border-solid items-center justify-center gap-2 bg-primary-1 text-white px-3 rounded-base hover:opacity-80 transition-all"
             >
-              ${
-                this.submitting
-                  ? html`<icon-loading></icon-loading>`
-                  : html`<i class="i-mingcute-send-line size-5" aria-hidden="true"></i>`
-              }
+              ${when(
+                this.submitting,
+                () => html`<icon-loading></icon-loading>`,
+                () =>
+                  html`<i class="i-mingcute-send-line size-5" aria-hidden="true"></i>`
+              )}
               ${msg('Submit')}
             </button>
           </div>

packages/comment-widget/src/comment-editor.ts

@@ -7,6 +7,8 @@ import './emoji-button';
 import contentStyles from './styles/content.css?inline';
 import './comment-editor-skeleton';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
 import baseStyles from './styles/base';
 import { cleanHtml } from './utils/html';
 
@@ -169,7 +171,8 @@ export class CommentEditor extends LitElement {
   }
 
   protected override render() {
-    return html` ${this.loading ? html`<comment-editor-skeleton></comment-editor-skeleton>` : ''}
+    return html`
+      ${when(this.loading, () => html`<comment-editor-skeleton></comment-editor-skeleton>`)}
       <div
         class="border rounded-base border-solid border-muted-1 focus-within:border-primary-1 focus-within:shadow-input transition-all"
         ?hidden=${this.loading}
@@ -203,8 +206,8 @@ export class CommentEditor extends LitElement {
       return html`
         <li>
           <div
-            aria-label=${item.displayName?.()}
-            title=${item.displayName?.()}
+            aria-label=${ifDefined(item.displayName?.())}
+            title=${ifDefined(item.displayName?.())}
             @click=${() => item.run?.(editor)}
             role="button"
             class="size-7 hover:bg-muted-3 active:bg-muted-2 ${isActive ? 'bg-muted-3 text-text-1' : 'text-text-3 hover:text-text-1'} rounded-base flex items-center justify-center cursor-pointer transition-all"

packages/comment-widget/src/comment-item.ts

@@ -8,6 +8,7 @@ import './base-comment-item';
 import { consume } from '@lit/context';
 import { msg } from '@lit/localize';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
 import { ofetch } from 'ofetch';
 import { getPolicyInstance } from './avatar/avatar-policy';
 import type { CommentReplies } from './comment-replies';
@@ -124,11 +125,13 @@ export class CommentItem extends LitElement {
     >
       <button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
         <div class="icon-button-icon">
-        ${
-          this.upvoted
-            ? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`
-            : html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
-        }
+        ${when(
+          this.upvoted,
+          () =>
+            html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`,
+          () =>
+            html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
+        )}
         </div>
         <span class="icon-button-text">${`${this.upvoteCount || 0}`}</span>
       </button>
@@ -145,38 +148,39 @@ export class CommentItem extends LitElement {
             <span class="icon-button-text">${this.comment?.status?.visibleReplyCount || 0}</span>
           </button>`
       }
-      ${
-        this.configMapData?.basic.withReplies
-          ? html`
+
+      ${when(
+        this.configMapData?.basic.withReplies,
+        () => html`
           <button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}" aria-label=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}>
             <div class="icon-button-icon ">
               <i slot="icon" class="i-tabler:message-circle-plus size-4" aria-hidden="true"></i>
             </div>
             <span class="icon-button-text">${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}</span>
-          </button>`
-          : ''
-      }
+          </button>
+          `
+      )}
 
       <div slot="footer">
-        ${
-          this.showReplyForm
-            ? html`<div class="mt-2">
+        ${when(
+          this.showReplyForm,
+          () => html`
+            <div class="mt-2">
               <reply-form
                 @reload=${this.onReplyCreated}
                 .comment=${this.comment}
               ></reply-form>
-            </div>`
-            : ''
-        }
-        ${
-          this.showReplies
-            ? html`<comment-replies
+            </div>
+          `
+        )}
+        ${when(
+          this.showReplies,
+          () => html`<comment-replies
               ${ref(this.commentRepliesRef)}
               .comment="${this.comment}"
               .showReplyForm=${this.showReplyForm}
             ></comment-replies>`
-            : ``
-        }
+        )}
       </div>
     </base-comment-item>`;
   }