packages/theme/src/pages/Index.vue (2)

2-35: Add a title and close button to improve dialog UX.

The dialog is missing:

1. A title/header (e.g., "Create New Post" or "Submit Feedback")
2. An explicit close/cancel button

Add a title to the dialog:

 <Dialog v-model:open="showDialog">
+  <template #title>
+    Submit Feedback
+  </template>
   <l-text

If your Dialog component supports a close button, consider adding:

   <template #footer>
+    <Button
+      type="secondary"
+      @click="showDialog = false"
+    >
+      Cancel
+    </Button>
     <Button

---

37-45: Consider hiding the button when the user lacks create permissions.

The "Submit Feedback" button is always visible, but if the user lacks post:create permission, clicking it opens a dialog with disabled inputs. This creates a confusing experience.

Consider conditionally rendering the button:

- <div class="flex justify-center mb-8">
+ <div v-if="!createPostPermissionDisabled" class="flex justify-center mb-8">
    <Button

Alternatively, show a helpful message when permissions are missing:

  <div class="flex justify-center mb-8">
    <Button
        type="primary"
        data-test="open-post-dialog-button"
+       :disabled="createPostPermissionDisabled"
+       :title="createPostPermissionDisabled ? 'You need permission to create posts' : ''"
        @click="showDialog = true"
      >
        Submit Feedback
    </Button>
  </div>

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

packages/theme/src/App.vue (1)

151-163: Consider more robust extension detection for edge cases.

The current extension check using .endsWith() may not handle URLs with query parameters or fragments correctly (e.g., /icon.svg?v=123). For a more robust implementation, consider extracting the pathname before checking the extension.

🔎 Proposed enhancement

 link: [
   {
     rel: "icon",
     type: () => {
       const icon = settingsStore.get.icon || "/logchimp.svg";
-      if (icon.endsWith(".svg")) return "image/svg+xml";
-      if (icon.endsWith(".png")) return "image/png";
-      if (icon.endsWith(".ico")) return "image/x-icon";
+      const pathname = icon.split('?')[0].split('#')[0];
+      if (pathname.endsWith(".svg")) return "image/svg+xml";
+      if (pathname.endsWith(".png")) return "image/png";
+      if (pathname.endsWith(".ico")) return "image/x-icon";
       return "image/svg+xml";
     },
     href: () => settingsStore.get.icon || "/logchimp.svg",
   },
 ],

packages/theme/src/pages/Index.vue (1)

189-194: Consider adding title length validation.

While the empty title check is present, there's no validation for maximum title length. Long titles might cause UI issues or exceed database constraints.

🔎 Optional enhancement

 async function submitPost() {
   if (!title.value) {
     title.error.show = true;
     title.error.message = "You forgot to enter a post title";
     return;
   }
+  
+  if (title.value.length > 200) {
+    title.error.show = true;
+    title.error.message = "Title must be 200 characters or less";
+    return;
+  }

   loading.value = true;

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro