doot/TAO
1
0
Fork 0
mirror of https://github.com/smolgrrr/TAO.git synced 2024-09-20 09:21:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5 from smolgrrr/feat/ui

Browse Source 
smol changes per comment

this is actually reya's PR but i fucked up https://github.com/smolgrrr/TAO/pull/4
This commit is contained in:
smolgrrr 2023-11-03 00:14:20 +11:00 committed by GitHub
commit 30ba427227
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/Home.tsx
View File

@ -72,10 +72,10 @@ const Home = () => {
return (
<main className="text-white mb-20">
{/* {inBrowser && <PWAInstallPopup onClose={() => setInBrowser(false)} />} */}
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-16">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<NewThreadCard />
</div>
<div className="columns-1 md:columns-2 lg:columns-3 [column-fill:_balance] box-border gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
{filteredAndSortedEvents.map((event) => (
<PostCard
key={event.id}

4
client/src/components/PostCard/CardContainer.tsx
View File

@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
export default function CardContainer({ children }: PropsWithChildren) {
return (
<div className="card break-inside-avoid mb-4 bg-neutral-900 border border-transparent hover:border-neutral-800">
<div className="card-body">{children}</div>
<div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
<div className="card-body pb-2">{children}</div>
</div>
);
}

4
client/src/components/PostCard/NewThreadCard.tsx
View File

@ -118,7 +118,7 @@ const NewThreadCard: React.FC = () => {
>
Start a New Thread
</div>
<div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
<div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
<textarea
name="com"
wrap="soft"
@ -133,7 +133,7 @@ const NewThreadCard: React.FC = () => {
<CpuChipIcon className="h-4 w-4" />
</div>
<p className="text-xs font-medium text-neutral-400">
{difficulty} POW
{difficulty} PoW
</p>
</div>
<div>

4
client/src/components/PostCard/PostCard.tsx
View File

@ -1,5 +1,5 @@
import CardContainer from "./CardContainer";
import { ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
import { FolderIcon } from "@heroicons/react/24/outline";
import { parseContent } from "../../utils/content";
import { Event } from "nostr-tools";
import { nip19 } from "nostr-tools";
@ -112,7 +112,7 @@ const PostCard = ({
</div>
<span className="text-neutral-700">·</span>
<div className="inline-flex items-center gap-1.5">
<ChatBubbleLeftEllipsisIcon className="h-4 w-4 text-neutral-600" />
<FolderIcon className="h-4 w-4 text-neutral-600" />
<span className="text-xs text-neutral-600">{replyCount}</span>
</div>
</div>

17
client/src/components/Thread/OPCard.tsx
View File

@ -81,10 +81,19 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
</>
}
</div>
<div className="flex items-center ml-auto">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
<span className="text-xs text-gray-500">{replyCount}</span>
<div className="flex items-center ml-auto gap-2.5">
<div className="text-xs text-neutral-600">
{event.id.match(/^0*([^\0]{2})/)?.[0] || 0}
</div>
<span className="text-neutral-700">·</span>
<div className="text-xs font-semibold text-neutral-600">
{timeAgo(event.created_at)}
</div>
<span className="text-neutral-700">·</span>
<div className="inline-flex items-center gap-1.5">
<FolderIcon className="h-4 w-4 text-neutral-600" />
<span className="text-xs text-neutral-600">{replyCount}</span>
</div>
</div>
</div>
<div className="mr-2 flex flex-col break-words">

13
client/src/components/Thread/ReplyCard.tsx
View File

@ -87,10 +87,15 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
</>
}
</div>
<div className="flex items-center ml-auto">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
<span className="text-xs text-gray-500">{replyCount}</span>
<div className="flex items-center ml-auto gap-2.5">
<div className="text-xs font-semibold text-neutral-600">
{timeAgo(event.created_at)}
</div>
<span className="text-neutral-700">·</span>
<div className="inline-flex items-center gap-1.5">
<FolderIcon className="h-4 w-4 text-neutral-600" />
<span className="text-xs text-neutral-600">{replyCount}</span>
</div>
</div>
</div>
<div className="flex items-center my-1" >

12
client/src/components/Thread/Thread.tsx
View File

@ -104,14 +104,15 @@ const Thread = () => {
return (
<>
<main className="bg-black text-white min-h-screen">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
{earlierEvents
.filter(event => event.kind === 1)
.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
<OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
<OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} />
))}
<OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
<div className="col-span-full flex justify-center space-x-36 ">
</div>
<div className="col-span-full flex justify-center space-x-36">
<DocumentTextIcon
className="h-5 w-5 text-gray-200"
onClick={() => {
@ -128,15 +129,16 @@ const Thread = () => {
}}
/>
</div>
<div>
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
<ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
{uniqEvents
.slice(1)
.filter(event => event.kind === 1)
.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
<ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)}/>
<ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)} />
))}
</div>
</main>

43
client/src/components/Thread/ThreadPost.tsx
View File

@ -131,33 +131,46 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
<div id="togglePostFormLink" className="text-lg font-semibold">
{type === 'r' ? <span>Reply To Post</span> : <span>Quote Post</span>}
</div>
<div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
<div>
<textarea
name="com"
wrap="soft"
className="w-full p-2 rounded bg-gradient-to-r from-blue-900 to-cyan-500 text-white border-none placeholder-blue-300"
className="shadow-lg w-full px-4 py-3 h-28 rounded-md outline-none focus:outline-none bg-neutral-800 border border-neutral-700 text-white placeholder:text-neutral-500"
placeholder='Shitpost here...'
value={comment}
onChange={(e) => setComment(e.target.value)}
/>
</div>
<div className="h-14 flex items-center justify-between">
<div className="inline-flex items-center gap-2 bg-neutral-800 px-1.5 py-1 rounded-lg">
<div className="inline-flex items-center gap-1.5 text-neutral-300">
<CpuChipIcon className="h-4 w-4" />
</div>
<p className="text-xs font-medium text-neutral-400">
{difficulty} PoW
</p>
</div>
<div>
<div className="relative">
{file != '' &&
<button onClick={() => setFile('')}><XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" /></button>
}
{file !== "" && (
<button onClick={() => setFile("")}>
<XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" />
</button>
)}
{renderMedia(file)}
</div>
<div className="flex justify-between items-center">
<div className="flex items-center gap-4">
<div className="flex items-center">
<ArrowUpTrayIcon
className="h-6 w-6 text-white cursor-pointer"
onClick={() => document.getElementById('file_input')?.click()}
className="h-4 w-4 text-neutral-400 cursor-pointer"
onClick={() => document.getElementById("file_input")?.click()}
/>
<input
type="file"
name="file_input"
id="file_input"
style={{ display: 'none' }}
style={{ display: "none" }}
onChange={(e) => {
const file_input = e.target.files?.[0];
if (file_input) {
@ -166,23 +179,27 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
}}
/>
{uploadingFile ? (
<div className='flex animate-spin text-sm text-gray-300'>
<div className="flex animate-spin text-sm text-gray-300">
<ArrowPathIcon className="h-4 w-4 ml-auto" />
</div>
) : null}
</div>
<span className="flex items-center"><CpuChipIcon className="h-6 w-6 text-white" />: {difficulty}</span>
<button type="submit" className="px-4 py-2 bg-gradient-to-r from-cyan-900 to-blue-500 rounded text-white font-semibold">
<button
type="submit"
className="h-9 inline-flex items-center justify-center px-4 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium text-sm"
>
Submit
</button>
</div>
{doingWorkProp ? (
<div className='flex animate-pulse text-sm text-gray-300'>
<div className="flex animate-pulse text-sm text-gray-300">
<CpuChipIcon className="h-4 w-4 ml-auto" />
<span>Generating Proof-of-Work...</span>
</div>
) : null}
<div id="postFormError" className="text-red-500" />
</div>
</div>
</div>
</form>)}
</>
);

4
client/src/utils/FileUpload.tsx
View File

@ -40,7 +40,7 @@ export const renderMedia = (file: string) => {
controls
muted
preload="metadata"
className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
className="thumb mt-2 rounded-md w-full"
>
<source src={file} type="video/mp4" />
</video>
@ -52,7 +52,7 @@ export const renderMedia = (file: string) => {
<img
alt="Invalid thread"
loading="lazy"
className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
className="thumb mt-2 rounded-md w-full"
src={file}
/>
);