diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index 9c93bea..a7f5b76 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -8,17 +8,18 @@
openmenu(e, i)">
-
+
{{ sourceObj.contacts[event.contact].name }}
openmenu(e, i)">
-
+
@@ -54,6 +55,7 @@ const props = defineProps<{
sourceItem: number;
thread: number;
baseUrl: string;
+ highlighted?: number;
}>();
const sourceObj = computed(() => sources.value[props.source]);
@@ -62,12 +64,28 @@ const threadItem = computed(() => item.value.threads[props.thread]);
const message = ref("");
const messageInput = ref();
+const highlightedEvent = ref();
-function sendMessage() {
+function getClasses(index: number) {
+ let classes = 'message px-2 py-1 flex items-center rounded-2xl';
+ classes += ' ' + getRoundedCornersClasses(threadItem.value, sourceObj.value.selfContact, index);
+ if (props.highlighted === index) {
+ classes += ' animate-ping highlight';
+ }
+ return classes;
+}
+
+watch(highlightedEvent, element => {
+ element[0]?.scrollIntoView();
+})
+
+function sendMessage(e: Event) {
if (message.value.trim() === "") {
return;
}
+ e.preventDefault();
+
threadItem.value.timeline.push({
type: "message",
contact: sourceObj.value.selfContact,
@@ -245,4 +263,9 @@ function createToDo(event: number) {
.mr-13 {
margin-right: 3.25rem;
}
+
+.highlight {
+ animation-delay: .5s;
+ animation-iteration-count: 1;
+}
diff --git a/src/components/pages/Source.vue b/src/components/pages/Source.vue
index 95a8268..ac2dcc5 100644
--- a/src/components/pages/Source.vue
+++ b/src/components/pages/Source.vue
@@ -12,11 +12,13 @@
{{ threadTitle }}
-
+
+
+
@@ -37,6 +39,11 @@ const route = useRoute();
const router = useRouter();
const baseUrl = computed(() => `/source/${route.params.source}`);
+const highlightedEvent = computed(() => {
+ let event = route.params.event;
+ event = Array.isArray(event) ? event[0] : event;
+ return event ? parseInt(event) : undefined;
+});
const sourceId = computed(() => parseInt(deArray(route.params.source)));
const source = computed(() => sources.value[sourceId.value]);
diff --git a/src/main.ts b/src/main.ts
index 234473b..fe04a90 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [
{ path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo, name: 'todo' },
{ path: '/snoozed/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Snoozed, name: 'snoozed' },
{ path: '/low/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: LowPriority, name: 'low' },
- { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?', component: Source, name: 'source' },
+ { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?/:event(\\d+)?', component: Source, name: 'source' },
{ path: '/unsorted/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Unsorted, name: 'unsorted' },
];
diff --git a/src/utils.tsx b/src/utils.tsx
index 296ff02..efb8f21 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -193,7 +193,7 @@ export function parseString(message: string) {
if (referencedMessage.type === "message") {
parts.push(
{ referencedMessage.message }
-
+
goto message
);