diff --git a/src/app.css b/src/app.css index 36f071c..1318834 100644 --- a/src/app.css +++ b/src/app.css @@ -2,9 +2,11 @@ font-family: 'Inter', sans-serif; } -html, body { +html, +body { background-color: var(--col-bg-0); color: var(--col-fg-0); + margin: 0; } a { @@ -17,7 +19,9 @@ a.link-muted { border-bottom: 1px solid var(--col-fg-2); } -h1, h2, h3 { +h1, +h2, +h3 { margin: 0; margin-bottom: 0.25em; } diff --git a/src/hooks.ts b/src/hooks.ts index 390661b..d129822 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -4,5 +4,11 @@ export const getSession: GetSession = async () => { const session: App.Session = { instance: { url: 'https://trans.enby.town', token: '' } }; + + try { + const token = window.localStorage.getItem('instance-token') || ''; + session.instance.token = token; + } catch (_) {} + return session; }; diff --git a/src/lib/components/AccountProfile.svelte b/src/lib/components/AccountProfile.svelte index 97810ab..e57339a 100644 --- a/src/lib/components/AccountProfile.svelte +++ b/src/lib/components/AccountProfile.svelte @@ -1,7 +1,23 @@
@@ -9,12 +25,25 @@ {account.acct}

{account.display_name}

- @{account.fqn} + + @{account.fqn} +
- {@html account.note} +
+ {#each account.fields as field} +
+
{field.name}
+
{@html field.value}
+
+ {/each} +
+ +
+ {@html account.note} +
@@ -41,4 +70,53 @@ .account-profile header > div { width: 100%; } + + .about { + display: flex; + flex-direction: column; + } + + .about > * { + border: 1px solid var(--col-bg-2); + border-collapse: collapse; + padding: 1em; + } + + .bio { + border-block-start: none; + } + + .fields dl { + display: flex; + margin: 0; + } + + .fields dt { + background: var(--col-bg-2); + font-weight: 500; + max-width: 12ch; + min-width: 12ch; + } + + .fields dd { + flex: 1 1 auto; + } + + .fields dt, + .fields dd { + padding: 0.8em; + text-overflow: ellipsis; + overflow: hidden; + margin: 0; + max-height: 1em; + white-space: nowrap; + } + + :global(.bio > p:first-child) { + margin-top: 0; + } + + :global(.bio > p:last-child) { + margin-bottom: 0; + } diff --git a/src/lib/components/Status.svelte b/src/lib/components/Status.svelte index 3662fe8..1ccab1f 100644 --- a/src/lib/components/Status.svelte +++ b/src/lib/components/Status.svelte @@ -1,36 +1,37 @@
- + {status.account.display_name} @{status.account.fqn} - +
@@ -39,12 +40,12 @@

[TODO: content warning {status.spoiler_text}]

{/if} - {@html status.content} +
{#each status.media_attachments as attachment} -

[TODO: attachment {attachment.description || '(no description)'}]

+
[TODO: attachment {attachment.description || '(no description)'}]
{/each}
@@ -70,13 +71,12 @@ } .status aside { - width: 4rem; - margin-inline-end: 1em; + width: 3em; + margin-inline-end: 0.75em; } .status .avatar { - border-radius: 6px; - height: 3em; + border-radius: 4px; max-width: 3em; } @@ -99,9 +99,14 @@ flex-direction: row; justify-content: space-between; width: 100%; + margin-bottom: 0.5em; } .status .status-body { margin-bottom: 0; } + + :global(.status-body > *:first-child, .status-body > .foreign-content > *:first-child) { + margin-top: 0; + } diff --git a/src/lib/components/StatusContent.svelte b/src/lib/components/StatusContent.svelte new file mode 100644 index 0000000..b1a66ea --- /dev/null +++ b/src/lib/components/StatusContent.svelte @@ -0,0 +1,48 @@ + + +
+ {@html status.content} +
+ + diff --git a/src/lib/mastoapi/account.ts b/src/lib/mastoapi/account.ts index 295a11e..c80e837 100644 --- a/src/lib/mastoapi/account.ts +++ b/src/lib/mastoapi/account.ts @@ -13,10 +13,12 @@ export interface MastodonAccount extends MastodonObject { note: string; bot: boolean; -} -export function linkAccount(account: MastodonAccount) { - return '/acc/' + account.id; + fields: { + name: string; + value: string; + verified_at: string | null; + }[]; } export async function fetchAccount(instance: InstanceInfo, id: string): Promise { diff --git a/src/lib/mastoapi/status.ts b/src/lib/mastoapi/status.ts index 306e022..dc89ad4 100644 --- a/src/lib/mastoapi/status.ts +++ b/src/lib/mastoapi/status.ts @@ -18,6 +18,16 @@ export interface MastodonStatus extends MastodonObject { url: string; in_reply_to_id: string | null; media_attachments: MastodonMediaAttachment[]; + tags: { + name: string; + url: string; + }[]; + mentions: { + acct: string; + id: string; + username: string; + url: string; + }[]; } export interface MastodonStatusContext {