hogumathi-app/templates/partial/tweets-timeline.html

<script src="{{ url_for('.static', filename='tweets-ui.js') }}"></script>
<script>

{% if notes_app_url %}
var notesAppUrl = {{ notes_app_url | tojson }}
{% endif %}

	if (!window['dataset']) {
		window.dataset = {
			items: [],
			update: function (items) {
				dataset.items = dataset.items.concat(items);
			}
		}
	}
</script>

<ul id="tweets" class="tweets w-75 center z-0">

{% for tweet in tweets %}

<li class="tweet w-100 dt {% if tweet.is_marked %}marked{% endif %}">
<script>
	dataset.update([
		{{ tweet | tojson }}
	]);

</script>


	{% if tweet.retweeted_by %}
	<div class="dt-row moon-gray">
		<p class="dtc w-10 tr pa1">RT</p>
		<p class="dtc w-90"><a class="moon-gray" href="{{ tweet.retweeted_by_url }}">{{ tweet.retweeted_by }} Retweeted</a></p>
	</div>
	{% endif %}
	<div class="dt-row">
		{% include "partial/timeline-tweet.html" %}
		
		
	</div>
	<div class="dt-row">
		<div class="dtc"></div>
		<div class="dtc ">
		
		
		<p class="tweet-actions-box">
		
		<a href="{{ url_for('.get_tweet_html', tweet_id=tweet.id, view='replies') }}">replies</a>
		|
		{% if show_thread_controls %}
		<a href="{{ url_for('.get_tweet_html', tweet_id=tweet.conversation_id, view='thread') }}">author thread</a>
		|
		<a href="{{ url_for('.get_tweet_html', tweet_id=tweet.conversation_id, view='conversation') }}">full convo</a>
		|
		{% endif %}
		{% if twitter_user %}
		<a hx-post="{{ url_for('.post_tweet_retweet', tweet_id=tweet.id) }}">retweet</a>
		|
		{% endif %}
		{% if twitter_user or mastodon_user %}
		<a hx-post="{{ url_for('.post_tweet_bookmark', tweet_id=tweet.id, me=me) }}">bookmark</a>
		[
		<a hx-delete="{{url_for('.delete_tweet_bookmark', tweet_id=tweet.id, me=me)}}">-</a>
		]
		|
		{% endif %}
		<a class="tweet-action copy-formatted" href="javascript:copyTweetToClipboard('{{ tweet.id }}')">copy formatted</a>
		{% if notes_app_url %}
		|
		<a class="tweet-action swipe-to-note" href="javascript:swipeTweetToNotesApp('{{ tweet.id }}')">swipe to note</a>
		{% endif %}
		</p>
		</div>
	</div>
	

	</li>

{% endfor %}



{% if query.next_data_url %}

	<li style="height: 50px; vertical-align: middle"
		hx-get="{{ query.next_data_url }}"
		hx-trigger="revealed"
		hx-swap="outerHTML"
		hx-select="ul#tweets > li"
		>
		<center style="height: 100%">

		<span class="js-only">
		Loading more tweets...
		</span>

		<script>
			var profileDataEl = document.querySelector('#profile-data');
			
			if (window['dataset'] && profileDataEl) {
				profileDataEl.innerHTML = dataset.items.filter(i => 'public_metrics' in i).map(i => i.public_metrics.like_count).join(', ');
			}


		</script>
		</center>
	</li>
	
{% elif query.next_page_url %}
	<li style="height: 50px; vertical-align: middle"
		>
		<center style="height: 100%">
		<a href="{{ query.next_page_url }}">
		Go to Next Page
		</a>
		
		<script>
			var profileDataEl = document.querySelector('#profile-data');
			
			if (window['dataset'] && profileDataEl) {
				profileDataEl.innerHTML = dataset.items.filter(i => 'public_metrics' in i).map(i => i.public_metrics.like_count).join(', ');
			}


		</script>
		</center>
	
	</li>
	
{% endif %}

</ul>