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 ( return (
<main className="text-white mb-20"> <main className="text-white mb-20">
{/* {inBrowser && <PWAInstallPopup onClose={() => setInBrowser(false)} />} */} {/* {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 /> <NewThreadCard />
</div> </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) => ( {filteredAndSortedEvents.map((event) => (
<PostCard <PostCard
key={event.id} 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) { export default function CardContainer({ children }: PropsWithChildren) {
return ( return (
<div className="card break-inside-avoid mb-4 bg-neutral-900 border border-transparent hover:border-neutral-800"> <div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
<div className="card-body">{children}</div> <div className="card-body pb-2">{children}</div>
</div> </div>
); );
} }

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

@ -118,7 +118,7 @@ const NewThreadCard: React.FC = () => {
> >
Start a New Thread Start a New Thread
</div> </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 <textarea
name="com" name="com"
wrap="soft" wrap="soft"
@ -133,7 +133,7 @@ const NewThreadCard: React.FC = () => {
<CpuChipIcon className="h-4 w-4" /> <CpuChipIcon className="h-4 w-4" />
</div> </div>
<p className="text-xs font-medium text-neutral-400"> <p className="text-xs font-medium text-neutral-400">
{difficulty} POW {difficulty} PoW
</p> </p>
</div> </div>
<div> <div>

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

@ -1,5 +1,5 @@
import CardContainer from "./CardContainer"; import CardContainer from "./CardContainer";
import { ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline"; import { FolderIcon } from "@heroicons/react/24/outline";
import { parseContent } from "../../utils/content"; import { parseContent } from "../../utils/content";
import { Event } from "nostr-tools"; import { Event } from "nostr-tools";
import { nip19 } from "nostr-tools"; import { nip19 } from "nostr-tools";
@ -112,7 +112,7 @@ const PostCard = ({
</div> </div>
<span className="text-neutral-700">·</span> <span className="text-neutral-700">·</span>
<div className="inline-flex items-center gap-1.5"> <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> <span className="text-xs text-neutral-600">{replyCount}</span>
</div> </div>
</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>
<div className="flex items-center ml-auto"> <div className="flex items-center ml-auto gap-2.5">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div> <div className="text-xs text-neutral-600">
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" /> {event.id.match(/^0*([^\0]{2})/)?.[0] || 0}
<span className="text-xs text-gray-500">{replyCount}</span> </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> </div>
<div className="mr-2 flex flex-col break-words"> <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>
<div className="flex items-center ml-auto"> <div className="flex items-center ml-auto gap-2.5">
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div> <div className="text-xs font-semibold text-neutral-600">
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" /> {timeAgo(event.created_at)}
<span className="text-xs text-gray-500">{replyCount}</span> </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> </div>
<div className="flex items-center my-1" > <div className="flex items-center my-1" >

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

@ -104,13 +104,14 @@ const Thread = () => {
return ( return (
<> <>
<main className="bg-black text-white min-h-screen"> <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 {earlierEvents
.filter(event => event.kind === 1) .filter(event => event.kind === 1)
.sort((a, b) => a.created_at - b.created_at).map((event, index) => ( .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])} /> <OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
</div>
<div className="col-span-full flex justify-center space-x-36"> <div className="col-span-full flex justify-center space-x-36">
<DocumentTextIcon <DocumentTextIcon
className="h-5 w-5 text-gray-200" className="h-5 w-5 text-gray-200"
@ -128,9 +129,10 @@ const Thread = () => {
}} }}
/> />
</div> </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} /> <ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
</div> </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 */} <div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
{uniqEvents {uniqEvents
.slice(1) .slice(1)

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

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

@ -40,7 +40,7 @@ export const renderMedia = (file: string) => {
controls controls
muted muted
preload="metadata" 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" /> <source src={file} type="video/mp4" />
</video> </video>
@ -52,7 +52,7 @@ export const renderMedia = (file: string) => {
<img <img
alt="Invalid thread" alt="Invalid thread"
loading="lazy" 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} src={file}
/> />
); );