sprintify-ui 0.12.4 → 0.12.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -1,25 +1,33 @@
 <template>
   <div
-    class="px-3 py-2"
+    class="px-3 py-2 rounded"
     :class="[active ? 'bg-slate-100' : '']"
   >
-    <div
-      class="text-sm leading-tight"
-      :class="textClasses"
-      v-html="notification.text"
-    />
-    <BaseDisplayRelativeTime
-      v-if="notification.created_at"
-      v-slot="{ readableDate }"
-      :value="notification.created_at"
-    >
-      <p 
-        class="mt-1 text-xs text-slate-400"
-        :class="[notification.read ? 'opacity-70' : 'opacity-100']"
-      >
-        {{ readableDate }}
-      </p>
-    </BaseDisplayRelativeTime>
+    <div class="flex items-start gap-2">
+      <span
+        class="mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full bg-red-500"
+        :class="[notification.read ? 'invisible' : '']"
+      />
+      <div class="min-w-0 flex-1">
+        <div
+          class="text-sm leading-tight"
+          :class="textClasses"
+          v-html="notification.text"
+        />
+        <BaseDisplayRelativeTime
+          v-if="notification.created_at"
+          v-slot="{ readableDate }"
+          :tooltip="false"
+          :value="notification.created_at"
+        >
+          <p
+            class="mt-1 text-xs text-slate-500"
+          >
+            {{ readableDate }}
+          </p>
+        </BaseDisplayRelativeTime>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -33,9 +41,7 @@ const props = defineProps<{
 }>();
 
 const textClasses = computed(() => {
-  return props.notification.read ?
-    'text-slate-500' :
-    "text-black font-medium before:bg-red-500 before:inline-block before:rounded-full before:mr-1 before:relative before:-top-px before:h-2 before:w-2 before:content-['']";
+  return props.notification.read ? 'text-slate-900' : 'text-slate-900 font-medium';
 });
 
 </script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -131,6 +131,12 @@ export default {
           text: "You have a new message",
           created_at: DateTime.now().minus({ second: 1 }).toISO(),
         },
+        {
+          id: "3",
+          text: "Please verify your email address",
+          created_at: DateTime.now().minus({ second: 1000 }).toISO(),
+          read: true,
+        },
         {
           id: "2",
           text: "Your inbox is now full. Please empty your inbox before it goes bang.",

package/src/components/BaseTipTap.vue

@@ -6,7 +6,7 @@
       noMargin ? 'tip-tap-no-margin' : ''
     ]"
   >
-    <div class="px-1 py-1 border-b flex items-center">
+    <div class="px-1 py-1 border-b flex flex-wrap items-center">
       <template
         v-for="action in filteredActions"
         :key="action.name"
@@ -126,7 +126,8 @@
 
     <div
       class="bg-white p-5"
-      :class="[disabled ? 'cursor-not-allowed opacity-80' : '']"
+      :class="[disabled ? 'cursor-not-allowed opacity-80' : 'cursor-text']"
+      @click="focusEditor"
     >
       <editor-content
         v-if="editor"
@@ -271,6 +272,20 @@ function pickImage() {
   imageInput.value?.click();
 }
 
+function focusEditor(event: MouseEvent) {
+  if (props.disabled || !editor) {
+    return;
+  }
+
+  const target = event.target as HTMLElement;
+
+  if (target.closest('.ProseMirror')) {
+    return;
+  }
+
+  editor.chain().focus('end').run();
+}
+
 const highlightColors = [
   '#BBF7D0',
   '#BFDBFE',