zaire/campfire
1
0
Fork 0
forked from blisstown/campfire
Code Pull requests Activity

restructure for sveltekit

Browse source
This commit is contained in:
ari melody 2024-06-29 10:46:27 +01:00
parent 7deea47857
commit 9ef27fd2a2
Signed by: ari
GPG key ID: CF99829C92678188
73 changed files with 469 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

134
src/lib/ui/Button.svelte Normal file
View file

@ -0,0 +1,134 @@
<script>
import { play_sound } from '../sound.js';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let active = false;
export let filled = false;
export let disabled = false;
export let centered = false;
export let label = undefined;
export let sound = "default";
export let href = false;
let classes = [];
if (active) classes = ["active"];
if (filled) classes = ["filled"];
if (disabled) classes = ["disabled"];
if (centered) classes.push("centered");
function click() {
if (href) {
location = href;
return;
}
if (disabled) return;
play_sound(sound);
dispatch('click');
}
</script>
<button
type="button"
class={classes.join(' ')}
title={label}
aria-label={label}
on:click={() => click()}>
<slot/>
</button>
<style>
button {
/* min-width: 64px; */
width: 100%;
height: 54px;
padding: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
text-align: left;
border-radius: 8px;
border-width: 2px;
border-style: solid;
background-color: var(--bg-700);
color: var(--text);
border-color: transparent;
transition-property: border-color, background-color, color;
transition-timing-function: ease-out;
transition-duration: .1s;
cursor: pointer;
}
button.centered {
text-align: center;
justify-content: center;
}
button:hover {
background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
}
button:active {
background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
}
button.active {
background-color: var(--bg-600);
color: var(--accent);
border-color: var(--accent);
text-shadow: 0px 2px 32px var(--accent);
}
button.active:hover {
color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
border-color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
background-color: color-mix(in srgb, var(--bg-600), var(--accent) 10%);
}
button.active:active {
color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
border-color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
background-color: color-mix(in srgb, var(--bg-600), var(--bg-800) 10%);
}
button.filled {
background-color: var(--accent);
color: var(--bg-800);
border-color: transparent;
}
button.filled:hover {
color: color-mix(in srgb, var(--bg-800), white 10%);
background-color: color-mix(in srgb, var(--accent), white 20%);
}
button.filled:active {
color: color-mix(in srgb, var(--bg-800), black 10%);
background-color: color-mix(in srgb, var(--accent), black 20%);
}
button.disabled {
background-color: var(--bg-700);
color: var(--text);
opacity: .5;
border-color: transparent;
cursor: initial;
}
button.disabled:hover {
}
button.disabled:active {
}
</style>

24
src/lib/ui/Error.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
export let msg = "";
export let trace = "";
</script>
<div class="error">
{#if msg}
<p class="msg">{@html msg}</p>
{/if}
{#if trace}
<pre class="trace">{trace}</pre>
{/if}
<slot></slot>
</div>
<style>
.error {
margin-top: 16px;
padding: 20px 32px;
border: 1px solid #8884;
border-radius: 16px;
background-color: var(--bg1);
}
</style>

132
src/lib/ui/Feed.svelte Normal file
View file

@ -0,0 +1,132 @@
<script>
import Button from './Button.svelte';
import Post from './post/Post.svelte';
import Error from './Error.svelte';
import { Client } from '../client/client.js';
import { parsePost } from '../client/api.js';
import { get } from 'svelte/store';
let params = new URLSearchParams(location.search);
let client = get(Client.get());
let posts = [];
let loading = false;
let focus_post_id = location.pathname.startsWith("/post/") ? location.pathname.substring(6) : false;
let error;
async function getTimeline() {
if (loading) return; // no spamming!!
loading = true;
let timeline_data;
if (posts.length === 0) timeline_data = await client.getTimeline()
else timeline_data = await client.getTimeline(posts[posts.length - 1].id);
if (!timeline_data) {
console.error(`Failed to retrieve timeline.`);
loading = false;
return;
}
for (let i in timeline_data) {
const post_data = timeline_data[i];
const post = await parsePost(post_data, 1, false);
if (!post) {
if (post === null || post === undefined) {
if (post_data.id) {
console.warn("Failed to parse post #" + post_data.id);
} else {
console.warn("Failed to parse post:");
console.warn(post_data);
}
}
continue;
}
posts = [...posts, post];
}
loading = false;
}
async function getPost(post_id) {
loading = true;
const post_data = await client.getPost(post_id);
if (!post_data) {
console.error(`Failed to retrieve post ${post_id}.`);
loading = false;
return;
}
const post = await parsePost(post_data, 10, true);
posts = [post];
for (let i in post.replies) {
posts = [...posts, post.replies[i]];
}
loading = false;
}
if (focus_post_id) {
getPost(focus_post_id);
} else {
getTimeline();
document.addEventListener("scroll", event => {
if (!loading && window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
getTimeline();
}
});
}
</script>
<header>
<h1>Home</h1>
<nav>
<Button centered active>Home</Button>
<Button centered disabled>Local</Button>
<Button centered disabled>Federated</Button>
</nav>
</header>
<div id="feed">
{#if posts.length <= 0}
<div class="throb">
<span>just a moment...</span>
</div>
{/if}
{#each posts as post}
<Post post_data={post} focused={post.id === focus_post_id} />
{/each}
</div>
<style>
header {
margin: 16px 0 8px 0;
display: flex;
flex-direction: row;
}
header h1 {
font-size: 1.5em;
}
nav {
margin-left: auto;
display: flex;
flex-direction: row;
gap: 8px;
}
#feed {
margin-bottom: 20vh;
}
.throb {
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
</style>

280
src/lib/ui/Navigation.svelte Normal file
View file

@ -0,0 +1,280 @@
<script>
import Logo from '../../img/spacesocial-logo.svg';
import Button from './Button.svelte';
import Feed from './Feed.svelte';
import { Client } from '../client/client.js';
import { play_sound } from '../sound.js';
let client = false;
Client.get().subscribe(c => {
client = c;
});
let notification_count = 0;
if (notification_count > 99) notification_count = "99+";
function goTimeline() {
location = "/";
}
function log_out() {
if (!confirm("This will log you out. Are you sure?")) return;
client.logout().then(() => {
location = "/";
});
}
</script>
<div id="navigation">
<header id="instance-header"> <!-- style={`background-image: url(${banner_url})`}> -->
<!-- <img src={icon_url} class="instance-icon" height="92px" aria-hidden="true"> -->
<div class="instance-icon instance-icon-mask" style={`mask-image: url(${Logo})`} height="92px" aria-hidden="true">
<!-- <img src={Logo} class="instance-icon" height="92px" aria-hidden="true"> -->
</header>
<div id="nav-items">
<Button label="Timeline" on:click={() => goTimeline()} active>🖼️ Timeline</Button>
<Button label="Notifications" disabled>
🔔 Notifications
{#if notification_count}
<span class="notification-count">{notification_count}</span>
{/if}
</Button>
<Button label="Explore" disabled>🌍 Explore</Button>
<Button label="Lists" disabled>🗒️ Lists</Button>
<div class="flex-row">
<Button centered label="Favourites" disabled>⭐</Button>
<Button centered label="Bookmarks" disabled>🔖</Button>
<Button centered label="Hashtags" disabled>#</Button>
</div>
<Button filled label="Post" disabled>✏️ Post</Button>
</div>
{#if (client.user)}
<div id="account-items">
<div class="flex-row">
<Button centered label="Profile information" disabled>ℹ️</Button>
<Button centered label="Settings" disabled>⚙️</Button>
<Button centered label="Log out" on:click={() => log_out()}>🚪</Button>
</div>
<div id="account-button">
<img src={client.user.avatar_url} class="account-avatar" height="64px" aria-hidden="true" on:click={() => play_sound()}>
<div class="account-name" aria-hidden="true">
<span class="nickname" title={client.user.nickname}>{client.user.nickname}</span>
<span class="username" title={`@${client.user.username}@${client.user.host}`}>
{`@${client.user.username}@${client.user.host}`}
</span>
</div>
<!-- <button class="settings" aria-label={`Account: ${client.user.username}@${client.user.host}`} on:click={() => play_sound()}>🔧</button> -->
</div>
</div>
{/if}
<span class="version">
space social v{APP_VERSION}
<br>
<ul>
<li><a href="https://git.arimelody.me/ari/spacesocial-client">source</a></li>
</ul>
</span>
</div>
<style>
#navigation {
display: flex;
flex-direction: column;
position: fixed;
top: 16px;
width: 300px;
height: calc(100vh - 32px);
border-radius: 8px;
background-color: var(--bg-800);
}
#instance-header {
width: 100%;
height: 172px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
background-position: center;
background-size: cover;
background-color: var(--bg-600);
background-image: linear-gradient(to top, var(--bg-800), var(--bg-600));
}
.instance-icon {
height: 92px;
border-radius: 8px;
}
.instance-icon-mask {
width: 80%;
margin: auto;
background-color: var(--text);
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-origin: border-box;
-webkit-mask-origin: border-box;
}
#nav-items {
margin-bottom: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.notification-count {
position: relative;
transform: translate(22px, -16px);
min-width: 12px;
height: 28px;
padding: 0 8px;
display: flex;
justify-content: center;
align-items: center;
text-align: right;
border-radius: 8px;
font-weight: 700;
color: var(--bg-1000);
background-color: var(--accent);
box-shadow: 0 0 32px color-mix(in srgb, transparent, var(--accent) 100%);
}
#account-items {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.version {
margin-bottom: 16px;
font-style: italic;
font-size: .9em;
opacity: .6;
text-align: center;
}
.version ul {
margin: 0;
padding: 0;
display: flex;
gap: 8px;
justify-content: center;
list-style: none;
}
.version ul li {
margin: 0;
}
.version ul li:not(:first-child):before {
content: '•';
margin-right: 8px;
color: inherit;
opacity: .7;
}
.version a {
color: inherit;
text-decoration: none;
opacity: .7;
}
.version a:hover {
text-decoration: underline;
}
#account-button {
width: calc(100% - 16px);
height: 48px;
padding: 8px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
background-color: var(--bg-700);
color: var(--text);
border-color: transparent;
transition-property: border-color, background-color, color;
transition-timing-function: ease-out;
transition-duration: .1s;
cursor: pointer;
}
.account-avatar {
width: 48px;
height: 48px;
border-radius: 8px;
transition: transform .1s ease-out, box-shadow .2s;
}
.account-avatar:hover {
transform: scale(1.05);
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
}
.account-avatar:active {
transform: scale(.95);
box-shadow: 0 0 16px var(--bg-1000);
}
.account-name {
/* width: 152px; */
display: flex;
flex-direction: column;
gap: 2px;
}
.username, .nickname {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: .8em;
}
.username {
opacity: .8;
font-size: .65em;
}
.settings {
width: 32px;
height: 32px;
padding: none;
border: none;
font-size: inherit;
font-family: inherit;
background: none;
border-radius: 8px;
transition: background-color .1s;
}
.settings:hover {
background-color: color-mix(in srgb, var(--bg-700), var(--text) 15%);
}
.settings:active {
background-color: color-mix(in srgb, var(--bg-700), var(--bg-1000) 30%);
}
.flex-row {
display: flex;
flex-direction: row;
gap: 8px;
}
</style>

39
src/lib/ui/Widgets.svelte Normal file
View file

@ -0,0 +1,39 @@
<div id="widgets">
<input type="text" id="search" placeholder="🔍 Search">
</div>
<style>
#widgets {
position: fixed;
top: 16px;
width: 300px;
height: calc(100vh - 32px);
display: flex;
flex-direction: column;
gap: 8px;
}
#search {
padding: 16px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, transparent, var(--accent) 25%);
background-color: var(--bg-800);
font-family: inherit;
font-weight: 600;
font-size: inherit;
color: var(--text);
transition: box-shadow .2s;
}
#search::placeholder {
opacity: .8;
}
#search:focus {
outline: none;
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
}
</style>

91
src/lib/ui/post/ActionButton.svelte Normal file
View file

@ -0,0 +1,91 @@
<script>
import { play_sound } from '../../sound.js';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let type = "action";
export let label = "Action";
export let title = label;
export let count = 0;
export let active = false;
export let disabled = false;
export let sound = "default";
function click() {
if (disabled) return;
play_sound(sound);
dispatch('click');
}
</script>
<button
type="button"
class={[
type,
active ? "active" : "",
disabled ? "disabled" : "",
].join(' ')}
aria-label="{label}"
title="{title}"
on:click={click}>
<span class="icon">
<slot/>
</span>
{#if count}
<span class="count">{count}</span>
{/if}
</button>
<style>
button {
height: 32px;
padding: 6px 8px;
display: flex;
flex-direction: row;
gap: 4px;
font-family: inherit;
font-size: 1em;
background: none;
color: inherit;
border: none;
border-radius: 8px;
transition: background-color .1s, color .1s;
cursor: pointer;
}
button.active {
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
color: var(--bg-1000);
}
button:not(.disabled):hover {
background-color: var(--bg-600);
color: var(--text);
}
button:not(.disabled):active {
background-color: var(--bg-1000);
color: var(--text);
}
button.disabled {
opacity: .5;
cursor: initial;
}
.icon {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.count {
opacity: .5;
}
button:hover .count {
opacity: 1;
}
</style>

230
src/lib/ui/post/Body.svelte Normal file
View file

@ -0,0 +1,230 @@
<script>
export let post;
let rich_text;
post.rich_text().then(res => {rich_text = res});
let open_warned = false;
</script>
<div class="post-body">
{#if post.warning}
<button class="post-warning" on:click|stopPropagation={() => { open_warned = !open_warned }}>
<strong>
{post.warning}
<span class="warning-instructions">
{#if !open_warned}
(click to reveal)
{:else}
(click to hide)
{/if}
</span>
</strong>
</button>
{/if}
{#if !post.warning || open_warned}
{#if post.text}
<span class="post-text">{@html rich_text}</span>
{/if}
<div class="post-media-container" data-count={post.files.length}>
{#each post.files as file}
<div class="post-media {file.type}" on:click|stopPropagation={null}>
{#if file.type === "image"}
<a href={file.url} target="_blank">
<img src={file.url} alt={file.description} title={file.description} height="200" loading="lazy" decoding="async">
</a>
{:else if file.type === "video"}
<video controls height="200">
<source src={file.url} alt={file.description} title={file.description} type={file.url.endsWith('.mp4') ? 'video/mp4' : 'video/webm'}>
<p>{file.description} &ensp; <a href={file.url}>[link]</a></p>
<!-- <media src={file.url} alt={file.description} loading="lazy" decoding="async"> -->
</video>
{/if}
</div>
{/each}
</div>
{#if post.boost && post.text}
<p class="post-warning"><strong>this is quoting a post! quotes are not supported yet.</strong></p>
<!-- TODO: quotes support -->
{/if}
{/if}
</div>
<style>
.post-body {
margin-top: 10px;
}
.post-warning {
width: 100%;
margin-bottom: 10px;
padding: 4px 8px;
--warn-bg: color-mix(in srgb, var(--bg-700), var(--accent) 1%);
background: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
font-family: inherit;
font-size: inherit;
color: inherit;
text-align: left;
border: none;
border-radius: 8px;
cursor: pointer;
outline-color: var(--warn-bg);
transition: outline .05s, box-shadow .05s;
}
.post-warning:hover {
outline: 1px solid var(--warn-bg);
box-shadow: 0 0 8px var(--warn-bg);
}
.post-warning .warning-instructions {
font-weight: normal;
opacity: .5;
}
.post-text {
line-height: 1.2em;
word-wrap: break-word;
}
.post-text :global(.emoji) {
position: relative;
top: 6px;
margin-top: -10px;
height: 24px!important;
}
.post-text :global(blockquote) {
margin: .4em 0;
padding: .1em 0 .1em 1em;
border-left: 4px solid #8888;
}
.post-text :global(blockquote span) {
opacity: .5;
}
.post-text :global(code) {
font-size: 1.2em;
}
.post-text :global(pre:has(code)) {
margin: 8px 0;
padding: 8px;
display: block;
overflow-x: scroll;
border-radius: 8px;
background-color: #080808;
color: var(--accent);
}
.post-text :global(pre code) {
margin: 0;
}
.post-text :global(a) {
color: var(--accent);
}
.post-text :global(a.mention) {
color: inherit;
font-weight: 600;
padding: 3px 6px;
background: var(--bg-700);
border-radius: 6px;
text-decoration: none;
}
.post-text :global(a.mention:hover) {
text-decoration: underline;
}
.post-text :global(a.hashtag) {
background-color: transparent;
padding: 0;
font-style: italic;
}
.post-text :global(.mention-avatar) {
position: relative;
top: 4px;
height: 20px;
margin-right: 4px;
border-radius: 4px;
}
.post-media-container {
max-height: 540px;
margin: 16px 0 4px 0;
display: grid;
grid-gap: 8px;
}
.post-media-container[data-count="1"] {
grid-template-rows: 1fr;
}
.post-media-container[data-count="2"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.post-media-container[data-count="3"] {
grid-template-columns: 1fr .5fr;
grid-template-rows: 1fr 1fr;
}
.post-media-container[data-count="4"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.post-media {
border-radius: 12px;
background-color: #000;
overflow: hidden;
}
.post-media a {
width: 100%;
height: 100%;
display: block;
cursor: zoom-in;
}
.post-media img,
.post-media video {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.post-media-container > :nth-child(1) {
grid-column: 1/2;
grid-row: 1/2;
}
.post-media-container[data-count="3"] > :nth-child(1) {
grid-row: 1/3;
}
.post-media-container > :nth-child(2) {
grid-column: 2/2;
grid-row: 1/2;
}
.post-media-container > :nth-child(3) {
grid-column: 1/2;
grid-row: 2/2;
}
.post-media-container[data-count="3"] > :nth-child(3) {
grid-column: 2/2;
grid-row: 2/2;
}
.post-media-container > :nth-child(4) {
grid-column: 2/2;
grid-row: 2/2;
}
</style>

52
src/lib/ui/post/BoostContext.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
import { parseText as parseEmojis } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
export let post;
let time_string = post.created_at.toLocaleString();
</script>
<div class="post-context">
<span class="post-context-icon">🔁</span>
<span class="post-context-action">
<a href={post.user.url} target="_blank">{@html parseEmojis(post.user.rich_name)}</a> boosted this post.
</span>
<span class="post-context-time">
<time title="{time_string}">{short_time(post.created_at)}</time>
{#if post.visibility !== "public"}
<span class="post-visibility">({post.visibility})</span>
{/if}
</span>
</div>
<style>
.post-context {
margin-bottom: 8px;
padding-left: 58px;
display: flex;
flex-direction: row;
align-items: center;
font-weight: 600;
color: var(--text);
opacity: .8;
transition: opacity .1s;
}
.post-context-icon {
margin-right: 4px;
}
.post-context a,
.post-context a:visited {
color: inherit;
text-decoration: none;
}
.post-context a:hover {
text-decoration: underline;
}
.post-context-time {
margin-left: auto;
}
</style>

182
src/lib/ui/post/Post.svelte Normal file
View file

@ -0,0 +1,182 @@
<script>
import BoostContext from './BoostContext.svelte';
import ReplyContext from './ReplyContext.svelte';
import PostHeader from './PostHeader.svelte';
import Body from './Body.svelte';
import ReactionButton from './ReactionButton.svelte';
import ActionButton from './ActionButton.svelte';
import { parseOne as parseEmoji } from '../../emoji.js';
import { play_sound } from '../../sound.js';
import { onMount } from 'svelte';
import { get } from 'svelte/store';
import { Client } from '../../client/client.js';
import * as api from '../../client/api.js';
export let post_data;
export let focused = false;
let post_context = undefined;
let post = post_data;
let is_boost = false;
if (post_data.boost) {
is_boost = true;
post_context = post_data;
post = post_data.boost;
}
function gotoPost() {
location = `/post/${post.id}`;
}
async function toggleBoost() {
let client = get(Client.get());
let data;
if (post.boosted)
data = await client.unboostPost(post.id);
else
data = await client.boostPost(post.id);
if (!data) {
console.error(`Failed to boost post ${post.id}`);
return;
}
post.boosted = data.boosted;
post.boost_count = data.reblogs_count;
}
async function toggleFavourite() {
let client = get(Client.get());
let data;
if (post.favourited)
data = await client.unfavouritePost(post.id);
else
data = await client.favouritePost(post.id);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
}
async function toggleReaction(reaction) {
if (reaction.name.includes('@')) return;
let client = get(Client.get());
let data;
if (reaction.me)
data = await client.unreactPost(post.id, reaction.name);
else
data = await client.reactPost(post.id, reaction.name);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
}
let el;
onMount(() => {
if (focused) {
window.scrollTo(0, el.scrollHeight - 700);
}
});
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
</script>
<div class="post-container" aria-label={aria_label} bind:this={el}>
{#if post.reply}
<ReplyContext post={post.reply} />
{/if}
{#if is_boost && !post_context.text}
<BoostContext post={post_context} />
{/if}
<article class={"post" + (focused ? " focused" : "")} on:click={!focused ? gotoPost() : null}>
<PostHeader post={post} />
<Body post={post} />
<footer class="post-footer">
<div class="post-reactions" on:click|stopPropagation>
{#each post.reactions as reaction}
<ReactionButton
type="reaction"
on:click={() => toggleReaction(reaction)}
bind:active={reaction.me}
bind:count={reaction.count}
disabled={reaction.name.includes('@')}
title={reaction.name}
label="">
{#if reaction.url}
<img src={reaction.url} class="emoji" height="20" title={reaction.name} alt={reaction.name}>
{:else}
{reaction.name}
{/if}
</ReactionButton>
{/each}
</div>
<div class="post-actions" on:click|stopPropagation>
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
<ActionButton type="react" label="React" disabled>😃</ActionButton>
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
</div>
</footer>
</article>
</div>
<style>
.post-container {
width: 700px;
max-width: 700px;
margin-bottom: 8px;
padding: 16px;
display: flex;
flex-direction: column;
border-radius: 8px;
background-color: var(--bg-800);
transition: background-color .1s;
}
.post-container:hover {
background-color: color-mix(in srgb, var(--bg-800), black 5%);
}
.post-container:hover :global(.post-context) {
opacity: 1;
}
.post:not(.focused) {
cursor: pointer;
}
.post.focused {
padding: 16px;
margin: -16px;
border-radius: 8px;
border: 1px solid color-mix(in srgb, transparent, var(--accent) 20%);
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 20%);
}
:global(.post-reactions) {
width: fit-content;
display: flex;
flex-direction: row;
gap: 4px;
}
:global(.post-actions) {
width: fit-content;
margin-top: 8px;
display: flex;
flex-direction: row;
gap: 2px;
}
.post-container :global(.emoji) {
height: 20px;
}
</style>

107
src/lib/ui/post/PostHeader.svelte Normal file
View file

@ -0,0 +1,107 @@
<script>
import { parseText as parseEmojis } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
export let post;
export let reply = undefined;
let time_string = post.created_at.toLocaleString();
</script>
<div class={"post-header-container" + (reply ? " reply" : "")}>
<a href={post.user.url} target="_blank" class="post-avatar-container">
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
</a>
<header class="post-header">
<div class="post-user-info">
<a href={post.user.url} target="_blank" class="name">{@html post.user.rich_name}</a>
<span class="username">{post.user.mention}</span>
</div>
<div class="post-info">
<a href={post.url} target="_blank" class="created-at">
<time title={time_string}>{short_time(post.created_at)}</time>
{#if post.visibility !== "public"}
<br>
<span class="post-visibility">{post.visibility}</span>
{/if}
</a>
</div>
</header>
</div>
<style>
.post-header-container {
width: 100%;
display: flex;
flex-direction: row;
}
.post-header-container.reply {
width: calc(100% + 60px);
margin-left: -60px;
}
.post-header-container a,
.post-header-container a:visited {
color: inherit;
text-decoration: none;
}
.post-header-container a:hover {
text-decoration: underline;
}
.post-avatar-container {
margin-right: 12px;
display: flex;
}
.post-avatar {
border-radius: 8px;
}
.post-header {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.post-info {
margin-left: auto;
}
.post-user-info {
margin-top: -2px;
display: flex;
flex-direction: column;
justify-content: center;
}
.post-user-info a {
display: block;
}
.post-user-info .name :global(.emoji) {
position: relative;
top: 4px;
height: 20px;
}
.post-user-info .username {
opacity: .8;
font-size: .9em;
}
.post-info .created-at {
height: 100%;
display: flex;
flex-direction: column;
align-items: end;
justify-content: center;
font-size: .8em;
}
.post-visibility {
font-size: .9em;
opacity: .8;
}
</style>

88
src/lib/ui/post/ReactionButton.svelte Normal file
View file

@ -0,0 +1,88 @@
<script>
import { play_sound } from '../../sound.js';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let type = "react";
export let label = "React";
export let title = label;
export let count = 0;
export let active = false;
export let disabled = false;
export let sound = "default";
function click() {
play_sound(sound);
dispatch('click');
}
</script>
<button
type="button"
class={[
type,
active ? "active" : "",
disabled ? "disabled" : "",
].join(' ')}
aria-label="{label}"
title="{title}"
on:click={click}>
<span class="icon">
<slot/>
</span>
{#if count}
<span class="count">{count}</span>
{/if}
</button>
<style>
button {
height: 32px;
padding: 6px 8px;
display: flex;
flex-direction: row;
gap: 4px;
font-size: 1em;
background: none;
color: inherit;
border: none;
border-radius: 8px;
transition: background-color .1s, color .1s;
cursor: pointer;
}
button.active {
background-color: color-mix(in srgb, transparent, var(--accent) 50%);
color: var(--bg-1000);
}
button:not(.disabled):hover {
background-color: var(--bg-600);
color: var(--text);
}
button:not(.disabled):active {
background-color: var(--bg-1000);
color: var(--text);
}
button.disabled {
cursor: initial;
}
.icon {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.count {
opacity: .5;
}
button:hover .count {
opacity: 1;
}
</style>

146
src/lib/ui/post/ReplyContext.svelte Normal file
View file

@ -0,0 +1,146 @@
<script>
import PostHeader from './PostHeader.svelte';
import Body from './Body.svelte';
import ReactionButton from './ReactionButton.svelte';
import ActionButton from './ActionButton.svelte';
import Post from './Post.svelte';
import { parseText as parseEmojis, parseOne as parseEmoji } from '../../emoji.js';
import { shorthand as short_time } from '../../time.js';
import { get } from 'svelte/store';
import { Client } from '../../client/client.js';
import * as api from '../../client/api.js';
export let post;
let time_string = post.created_at.toLocaleString();
function gotoPost() {
location = `/post/${post.id}`;
}
async function toggleBoost() {
let client = get(Client.get());
let data;
if (post.boosted)
data = await client.unboostPost(post.id);
else
data = await client.boostPost(post.id);
if (!data) {
console.error(`Failed to boost post ${post.id}`);
return;
}
post.boosted = data.boosted;
post.boost_count = data.reblogs_count;
}
async function toggleFavourite() {
let client = get(Client.get());
let data;
if (post.favourited)
data = await client.unfavouritePost(post.id);
else
data = await client.favouritePost(post.id);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
}
async function toggleReaction(reaction) {
if (reaction.name.includes('@')) return;
let client = get(Client.get());
let data;
if (reaction.me)
data = await client.unreactPost(post.id, reaction.name);
else
data = await client.reactPost(post.id, reaction.name);
if (!data) {
console.error(`Failed to favourite post ${post.id}`);
return;
}
post.favourited = data.favourited;
post.favourite_count = data.favourites_count;
if (data.reactions) post.reactions = api.parseReactions(data.reactions);
}
</script>
{#if post.reply}
<svelte:self post={post.reply} />
{/if}
<article class="post-reply" on:click={() => gotoPost()}>
<div class="line"></div>
<div class="post-reply-main">
<PostHeader post={post} reply />
<Body post={post} />
<footer class="post-footer">
<div class="post-reactions" on:click|stopPropagation>
{#each post.reactions as reaction}
<ReactionButton
type="reaction"
on:click={() => toggleReaction(reaction)}
bind:active={reaction.me}
bind:count={reaction.count}
disabled={reaction.name.includes('@')}
title={reaction.name}
label="">
{#if reaction.url}
<img src={reaction.url} class="emoji" height="20" title={reaction.name} alt={reaction.name}>
{:else}
{reaction.name}
{/if}
</ReactionButton>
{/each}
</div>
<div class="post-actions" on:click|stopPropagation>
<ActionButton type="reply" label="Reply" bind:count={post.reply_count} sound="post" disabled>🗨️</ActionButton>
<ActionButton type="boost" label="Boost" on:click={() => toggleBoost()} bind:active={post.boosted} bind:count={post.boost_count} sound="boost">🔁</ActionButton>
<ActionButton type="favourite" label="Favourite" on:click={() => toggleFavourite()} bind:active={post.favourited} bind:count={post.favourite_count}>⭐</ActionButton>
<ActionButton type="react" label="React" disabled>😃</ActionButton>
<ActionButton type="quote" label="Quote" disabled>🗣️</ActionButton>
<ActionButton type="more" label="More" disabled>🛠️</ActionButton>
</div>
</footer>
</div>
</article>
<style>
.post-reply {
padding-bottom: 24px;
display: flex;
flex-direction: row;
color: var(--text);
align-items: stretch;
}
.post-avatar-container {
display: flex;
}
.line {
position: relative;
top: 24px;
left: 25px;
border-right: 2px solid var(--bg-700);
}
.post-reply-main {
width: 100%;
padding-left: 60px;
z-index: 1;
}
:global(.post-body) {
margin-top: 0;
}
:global(.post-body p) {
margin: 0;
}
</style>