118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import BackButton from "@/components/BackButton.vue"
|
|
import { usePublicNoteList } from "@/hooks/usePublicNoteList.hook"
|
|
import { slugify } from "@/utils/slugify"
|
|
import { vInfiniteScroll } from "@vueuse/components"
|
|
|
|
const { notes, isLoading, canLoadMore, onLoadMore, getAuthor } =
|
|
usePublicNoteList()
|
|
</script>
|
|
|
|
<template>
|
|
<main class="public-note-list-view">
|
|
<div class="header">
|
|
<back-button class="back-button" :fallback="{ name: 'Home' }" />
|
|
<h1>Remanso notes</h1>
|
|
</div>
|
|
<div v-if="isLoading"></div>
|
|
<div v-else>
|
|
<ul
|
|
class="list rounded-box shadow-sm"
|
|
v-infinite-scroll="[onLoadMore, { canLoadMore: () => canLoadMore }]"
|
|
>
|
|
<li v-for="note in notes" class="list-row">
|
|
<div class="list-col">
|
|
<router-link
|
|
:to="{
|
|
name: 'PublicNoteView',
|
|
params: {
|
|
did: note.did,
|
|
rkey: note.rkey,
|
|
slug: slugify(note.title),
|
|
},
|
|
}"
|
|
class="btn btn-link"
|
|
>{{ note.title }}</router-link
|
|
>
|
|
|
|
<div class="text-xs opacity-80 alias">
|
|
<router-link
|
|
v-if="getAuthor(note.did)"
|
|
:to="{
|
|
name: 'PublicNoteListByDidView',
|
|
params: { did: note.did },
|
|
}"
|
|
class="link link-hover"
|
|
>
|
|
{{ getAuthor(note.did) }}
|
|
</router-link>
|
|
|
|
<template v-if="note.publishedAt">
|
|
<span> • </span>
|
|
<span>{{
|
|
new Date(note.publishedAt).toLocaleDateString()
|
|
}}</span>
|
|
</template>
|
|
<div v-else class="skeleton h-4 w-20"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.public-note-list-view {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
|
|
.header {
|
|
margin-top: 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
h1 {
|
|
flex: 1;
|
|
text-align: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.back-button {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
|
|
.list-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
a {
|
|
display: inline;
|
|
text-align: left;
|
|
}
|
|
|
|
.alias {
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|