Put line between messages from different days

[chGoodchild]

https://github.com/Pleb5/satshoot/issues/24

• [x] Branch off of testing branch instead of main
• [x] Draw a line between messages of different days and put date above the separator line - messages are alrady sorted by date by NDK
• [x] If it was within a week only display number of days ago
• [x] Use tailwindcss instead of regular css
• [ ] check looks on mobile (f12 devtools can display the responsive ui)
• [ ] Mock the solution to test with various dates

[chGoodchild]

To resolve this GitHub issue, you'll need to modify the MessageCard.svelte component and potentially the parent component that renders the list of messages. Here's a step-by-step approach:

1. Modify MessageCard.svelte:

First, let's add a prop to MessageCard.svelte to indicate if this message is the first of a new day:

export let isFirstOfDay = false;
export let daysSinceMessage = 0;

Then, add a function to format the date:

function formatDate(date: Date): string {
    const now = new Date();
    const diffTime = Math.abs(now.getTime() - date.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays <= 7) {
        return diffDays === 1 ? "Yesterday" : `${diffDays} days ago`;
    } else {
        return date.toLocaleDateString();
    }
}

Now, add the date separator above the message if it's the first of the day:

{#if isFirstOfDay}
    <div class="date-separator">
        <hr>
        <span>{formatDate(messageDate)}</span>
        <hr>
    </div>
{/if}

Add some CSS for the date separator:

<style>
    .date-separator {
        display: flex;
        align-items: center;
        margin: 1rem 0;
    }
    .date-separator hr {
        flex-grow: 1;
        border: none;
        border-top: 1px solid #ccc;
    }
    .date-separator span {
        padding: 0 10px;
        color: #888;
        font-size: 0.9em;
    }
</style>

2. Modify the parent component (likely apps/satshoot/src/routes/messages/[ticketId=event]/+page.svelte):

In the parent component where you render the list of messages, you'll need to add logic to determine if a message is the first of a new day. Here's a simplified example of how you might do this:

<script lang="ts">
    import { onMount } from 'svelte';
    import MessageCard from '$lib/components/Cards/MessageCard.svelte';
    import type { NDKEvent } from "@nostr-dev-kit/ndk";

    let messages: NDKEvent[] = [];

    onMount(async () => {
        // Fetch messages here
        // ...

        // Sort messages by date
        messages.sort((a, b) => a.created_at - b.created_at);
    });

    function isFirstMessageOfDay(index: number): boolean {
        if (index === 0) return true;
        const currentDate = new Date(messages[index].created_at * 1000);
        const previousDate = new Date(messages[index - 1].created_at * 1000);
        return currentDate.toDateString() !== previousDate.toDateString();
    }

    function getDaysSinceMessage(index: number): number {
        const messageDate = new Date(messages[index].created_at * 1000);
        const now = new Date();
        const diffTime = Math.abs(now.getTime() - messageDate.getTime());
        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    }
</script>

{#each messages as message, index}
    <MessageCard 
        {message}
        isFirstOfDay={isFirstMessageOfDay(index)}
        daysSinceMessage={getDaysSinceMessage(index)}
    />
{/each}

This approach will:

1. Sort the messages by date.
2. Check if each message is the first of a new day.
3. Calculate the number of days since the message was sent.
4. Pass this information to each MessageCard component.

The MessageCard component will then use this information to render the date separator when necessary and format the date appropriately.

These changes should resolve the GitHub issue by separating messages from different days with a line and date, and displaying the number of days ago for messages within the last week.

[chGoodchild]

Debug messages not showing:

You were saying that this is the live app at satshoot.com?  
And only the conversations are affected?
Could be the WoT not loading...
You could test it if you connect phone via usb to laptop and go to chrome://inspect
Ofc you would have to allow dev tools in android and blah blah... chatgpt :)
If you have time for this I'd be happy to get some logs from you why it doesn't load.
The app should update if you refresh 
Does it work on chrome?

[chGoodchild]

Confirmed working on commit 16654ed3c0773ee2a6c5a4b5b4e59dab8968daa0

Can't login on the testing branch commit 444cb1a2351ae4bfca2221587ca79f8494c0f6e0

[Pleb5]

Thanks! will test this solution locally then deploy to test.satshoot.com and if it works this will get into next main deploy. Good job!

[Pleb5]

yeah and dont bother with tailwind I'll convert it if I want. Fortunately svelte components apply their css only internally so it should be ok