spencer/dsnt-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve mobile UI

Browse source
This commit is contained in:
pablof7z 2023-03-16 16:45:27 +01:00
parent a3dc27febd
commit 6b831c62c7
7 changed files with 83 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
demo.html
View file

@ -7,11 +7,19 @@
<body>
<h1>Svelte embedding demo</h1>
<p>Below, we have inserted a <code>script</code> tag that should
renter a Svelte component upon loading this page.</p>
<script src="public/bundle.js"></script>
<script
src="public/bundle.js"
data-chat-type="GLOBAL"
data-chat-tags="nostrica"
data-relays="ws://localhost:8080"
></script>
<link rel="stylesheet" href="public/bundle.css">
></script>
<p>This text will come after the embedded content.</p>
</body>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "nostri.chat",
"version": "0.1.1",
"version": "0.1.2",
"scripts": {
"dev": "vite dev",
"build": "svelte-kit sync && svelte-package",

46
src/ConnectedWidget.svelte
View file

@ -64,7 +64,7 @@
// extraParams.tags.push(['p', mostRecentEvent.pubkey]);
// }
// }
const noteId = await $chatAdapter.send(message, extraParams);
if (!rootNoteId) {
@ -72,7 +72,7 @@
localStorage.setItem('rootNoteId', rootNoteId);
}
}
async function inputKeyDown(event) {
if (event.key === 'Enter') {
sendMessage();
@ -83,14 +83,14 @@
function messageReceived(message) {
const messageLastEventTag = message.tags.filter(tag => tag[0] === 'e').pop();
let isThread;
if (chatConfiguration.chatType === 'GLOBAL') {
isThread = message.tags.filter(tag => tag[0] === 'e').length >= 1;
} else {
const pubkeysTagged = message.tags.filter(tag => tag[0] === 'p').map(tag => tag[1]);
isThread = new Set(pubkeysTagged).size >= 2;
}
responses[message.id] = [];
if (isThread) {
@ -119,7 +119,7 @@
function scrollDown() {
animateScroll.scrollToBottom({
container: document.getElementById('messages-container'),
offset: 500,
offset: 999999, // hack, oh well, browsers suck
duration: 50
})
}
@ -134,7 +134,7 @@
}
let rootNoteId;
onMount(() => {
$chatAdapter.on('message', messageReceived);
@ -188,26 +188,26 @@
let ownName;
$: ownName = $chatAdapter?.pubkey ? pubkeyName($chatAdapter.pubkey) : "";
function pubkeyName(pubkey) {
let name;
if (profiles[$chatAdapter.pubkey]) {
let self = profiles[$chatAdapter.pubkey];
// https://xkcd.com/927/
name = self.display_name ||
self.displayName ||
self.displayName ||
self.name ||
self.nip05;
}
if (!name) { name = `[${pubkey.slice(0, 6)}]`; }
return name;
}
</script>
<div class="
@ -260,17 +260,19 @@
{/if}
{/if}
<div id="messages-container" class="overflow-scroll">
{#if $selectedMessage}
<NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} />
{:else}
{#each events as event}
<NostrNote {event} {responses} {websiteOwnerPubkey} />
{#if event.deleted}
👆 deleted
{/if}
{/each}
{/if}
<div id="messages-container" class="overflow-auto -mx-4 px-4" style="height: 50vh; min-height: 300px;">
<div id="messages-container-inner">
{#if $selectedMessage}
<NostrNote event={getEventById($selectedMessage)} {responses} {websiteOwnerPubkey} />
{:else}
{#each events as event}
<NostrNote {event} {responses} {websiteOwnerPubkey} />
{#if event.deleted}
👆 deleted
{/if}
{/each}
{/if}
</div>
</div>

6
src/NostrNote.svelte
View file

@ -19,7 +19,7 @@
const byWebsiteOwner = !!websiteOwnerPubkey === event.pubkey;
$: profiles = $chatData.profiles;
$: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || event.pubkey;
$: displayName = profiles[event.pubkey] && profiles[event.pubkey].display_name || `[${event.pubkey.slice(0, 6)}]`;
$: nip05 = profiles[event.pubkey] && profiles[event.pubkey].nip05;
$: profilePicture = profiles[event.pubkey] && profiles[event.pubkey].picture || `https://robohash.org/${event.pubkey}.png?set=set1`;
@ -50,13 +50,13 @@
<div class="w-full overflow-hidden">
<div class="flex flex-row justify-between text-center overflow-clip text-clip w-full">
</div>
<div class="
max-h-64 text-base
cursor-pointer
border border-slate-200
{$selectedMessage === event.id ? 'bg-purple-700 text-white' : 'bg-slate-50 text-gray-500 hover:bg-slate-100'}
p-4 py-2 overflow-scroll rounded-2xl
p-4 py-2 overflow-auto rounded-2xl
" on:click|preventDefault={()=>{selectMessage(event.id)}}>
{event.content}
</div>

8
src/Widget.svelte
View file

@ -28,7 +28,7 @@
{#if showChat}
<div class="
shadow-2xl
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5 overflow-scroll
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-xl p-5
{minimizeChat ? 'hidden' : ''}
" style="max-height: 80vh;">
{#if !dismissedIntro}
@ -38,7 +38,7 @@
text-purple-700">
NostriChat
</h1>
<p class="text-gray-700 mb-3">
This is a FOSS chat app built on top of the Nostr protocol.
</p>
@ -90,8 +90,8 @@
{/if}
</div>
{/if}
<div class="self-end">
<a href="#" class="text-white bg-purple-900 hover:bg-purple-700 w-full p-5 rounded-full flex-shrink-1 text-center font-semibold flex flex-row items-center gap-4" on:click|preventDefault={toggleChat}>
<span class="tracking-wider flex">

57
src/routes/+page.svelte
View file

@ -1,5 +1,6 @@
<script>
import Container from '../Container.svelte';
import Widget from '../Widget.svelte';
import { chatAdapter } from '$lib/store';
let chatStarted;
@ -31,21 +32,21 @@
</svelte:head>
<section class="
min-h-screen
lg:min-h-screen
text-white
bg-gradient-to-b from-orange-500 to-orange-800
">
<div class="min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
flex flex-col lg:flex-row
<div class="lg:min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
flex flex-col md:flex-row
gap-20 items-center px-4 lg:px-0
relative
">
<div class="
md:w-3/5 grid grid-cols-1 gap-10
md:w-7/12 gap-10
">
<section id="hero" style="min-height: 50vh;">
<h1 class="
text-4xl md:text-6xl
text-6xl
font-black
my-2
">Nostri.chat</h1>
@ -72,13 +73,16 @@
</div>
<div class="
flex flex-row items-center justify-center
min-h-screen fixed
" style="margin-left: 50%;">
flex-row items-center justify-center
min-h-screen
hidden md:flex
md:w-5/12
">
<div class="
shadow-2xl
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-scroll
bg-white mb-5 w-96 max-w-screen-sm text-black rounded-3xl p-5 overflow-auto
flex flex-col justify-end
fixed
" style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}">
<Container chatConfiguration={{
chatType,
@ -99,9 +103,9 @@
flex flex-col lg:flex-row
gap-20 px-4 lg:px-0
" style="min-height: 50vh;">
<div class="md:w-8/12 lg:w-3/5 grid grid-cols-1 gap-8">
<div class="md:w-7/12 flex flex-col gap-8">
<div>
<h1 class="text-7xl font-black">
<h1 class="text-6xl lg:text-7xl font-black">
Innovative modes
</h1>
@ -151,8 +155,8 @@
<span class="text-2xl text-slate-500 font-extralight block">public discussion/support</span>
</span>
</div>
</h2>
<p class="
@ -172,7 +176,7 @@
text-lg
font-semibold
">🔖 Topic-based chats</h3>
<span class="inline-flex rounded-md">
<button type="button" class="
inline-flex items-center rounded-l-md border px-4 py-2 text-md font-medium
@ -226,7 +230,7 @@
<span class="opacity-50 font-normal">https://</span>psbt.io
</button>
</span>
</div>
</div>
</div>
@ -243,7 +247,7 @@
flex flex-col lg:flex-row
gap-20 items-center px-4 lg:px-0
" style="min-height: 50vh;">
<div class="md:w-3/5 grid grid-cols-1 gap-8">
<div class="md:w-4/5 lg:w-3/5 grid grid-cols-1 gap-8">
<div>
<h1 class="text-7xl font-black">
@ -260,7 +264,7 @@
<pre class ="
p-4
bg-white
overflow-scroll
overflow-auto
">
&lt;script
src="https://nostri.chat/public/bundle.js"
@ -278,6 +282,25 @@
</div>
</section>
<div class="md:hidden">
<Widget chatConfiguration={{
chatType,
chatTags,
chatReferenceTags,
}} {websiteOwnerPubkey} {relays} bind:chatStarted={chatStarted} />
</div>
<footer class="py-6 bg-orange-900 font-mono text-white text-center mt-12 px-10">
<div class="flex justify-center flex-row">
<div class="text-sm">
NOSTRI.CHAT
by
<a class="text-purple-50 hover:text-orange-400" href="https://pablof7z.com">
@pablof7z
</a>
</div>
</div>
</footer>
<style>
/* div { border: solid red 1px; } */

2
src/routes/demo/+page.svelte
View file

@ -7,7 +7,7 @@
<body>
<h1>Svelte embedding demo</h1>
<p>Below,we have inserted a <code>script</code> tag that should
renter a Svelte component upon loading this page.</p>