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> <body>
<h1>Svelte embedding demo</h1> <h1>Svelte embedding demo</h1>
<p>Below, we have inserted a <code>script</code> tag that should <p>Below, we have inserted a <code>script</code> tag that should
renter a Svelte component upon loading this page.</p> 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> <p>This text will come after the embedded content.</p>
</body> </body>

2
package.json
View file

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

46
src/ConnectedWidget.svelte
View file

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

6
src/NostrNote.svelte
View file

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

8
src/Widget.svelte
View file

@ -28,7 +28,7 @@
{#if showChat} {#if showChat}
<div class=" <div class="
shadow-2xl 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' : ''} {minimizeChat ? 'hidden' : ''}
" style="max-height: 80vh;"> " style="max-height: 80vh;">
{#if !dismissedIntro} {#if !dismissedIntro}
@ -38,7 +38,7 @@
text-purple-700"> text-purple-700">
NostriChat NostriChat
</h1> </h1>
<p class="text-gray-700 mb-3"> <p class="text-gray-700 mb-3">
This is a FOSS chat app built on top of the Nostr protocol. This is a FOSS chat app built on top of the Nostr protocol.
</p> </p>
@ -90,8 +90,8 @@
{/if} {/if}
</div> </div>
{/if} {/if}
<div class="self-end"> <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}> <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"> <span class="tracking-wider flex">

57
src/routes/+page.svelte
View file

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

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

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