mirror of
https://github.com/lumehq/lume.git
synced 2025-04-01 16:38:14 +02:00
added channel creation
This commit is contained in:
Ren Amamiya
parent
fb700b1878
commit
549cc991a9
src
@ -2,8 +2,6 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import './assets/editor.css';
|
||||
|
||||
/* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
|
||||
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
|
||||
img[loading='lazy'] {
|
||||
|
||||
@ -1,326 +0,0 @@
|
||||
.w-md-editor-bar {
|
||||
position: absolute;
|
||||
cursor: s-resize;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
margin-top: -11px;
|
||||
margin-right: 0;
|
||||
width: 14px;
|
||||
z-index: 3;
|
||||
height: 10px;
|
||||
border-radius: 0 0 3px 0;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.w-md-editor-bar svg {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.w-md-editor-aree {
|
||||
overflow: auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.w-md-editor-text {
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-break: keep-all;
|
||||
overflow-wrap: break-word;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
-webkit-font-variant-ligatures: common-ligatures;
|
||||
font-variant-ligatures: common-ligatures;
|
||||
@apply p-4;
|
||||
}
|
||||
.w-md-editor-text-pre,
|
||||
.w-md-editor-text-input,
|
||||
.w-md-editor-text > .w-md-editor-text-pre {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
box-sizing: inherit;
|
||||
display: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
-webkit-font-variant-ligatures: inherit;
|
||||
font-variant-ligatures: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
tab-size: inherit;
|
||||
text-indent: inherit;
|
||||
text-rendering: inherit;
|
||||
text-transform: inherit;
|
||||
white-space: inherit;
|
||||
overflow-wrap: inherit;
|
||||
word-break: inherit;
|
||||
word-break: normal;
|
||||
padding: 0;
|
||||
}
|
||||
.w-md-editor-text-pre > code,
|
||||
.w-md-editor-text-input > code,
|
||||
.w-md-editor-text > .w-md-editor-text-pre > code {
|
||||
font-family: inherit;
|
||||
}
|
||||
.w-md-editor-text-pre {
|
||||
position: relative;
|
||||
margin: 0px !important;
|
||||
pointer-events: none;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.w-md-editor-text-pre > code {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.w-md-editor-text-input {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
color: inherit;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
padding: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@apply placeholder:text-zinc-500;
|
||||
}
|
||||
.w-md-editor-text-input:empty {
|
||||
-webkit-text-fill-color: inherit !important;
|
||||
}
|
||||
.w-md-editor-text-pre,
|
||||
.w-md-editor-text-input {
|
||||
word-wrap: pre;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/**
|
||||
* Hack to apply on some CSS on IE10 and IE11
|
||||
*/
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
/**
|
||||
* IE doesn't support '-webkit-text-fill-color'
|
||||
* So we use 'color: transparent' to make the text transparent on IE
|
||||
* Unlike other browsers, it doesn't affect caret color in IE
|
||||
*/
|
||||
.w-md-editor-text-input {
|
||||
color: transparent !important;
|
||||
}
|
||||
.w-md-editor-text-input::selection {
|
||||
background-color: #accef7 !important;
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
.w-md-editor-text-pre .punctuation {
|
||||
color: var(--color-prettylights-syntax-comment) !important;
|
||||
}
|
||||
.w-md-editor-text-pre .token.url,
|
||||
.w-md-editor-text-pre .token.content {
|
||||
color: var(--color-prettylights-syntax-constant) !important;
|
||||
}
|
||||
.w-md-editor-text-pre .token.title.important {
|
||||
color: var(--color-prettylights-syntax-markup-bold);
|
||||
}
|
||||
.w-md-editor-text-pre .token.code-block .function {
|
||||
color: var(--color-prettylights-syntax-entity);
|
||||
}
|
||||
.w-md-editor-text-pre .token.bold {
|
||||
font-weight: unset !important;
|
||||
}
|
||||
.w-md-editor-text-pre .token.title {
|
||||
line-height: unset !important;
|
||||
font-size: unset !important;
|
||||
font-weight: unset !important;
|
||||
}
|
||||
.w-md-editor-text-pre .token.code.keyword {
|
||||
color: var(--color-prettylights-syntax-constant) !important;
|
||||
}
|
||||
.w-md-editor-text-pre .token.strike,
|
||||
.w-md-editor-text-pre .token.strike .content {
|
||||
color: var(--color-prettylights-syntax-markup-deleted-text) !important;
|
||||
}
|
||||
.w-md-editor-toolbar-child {
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
|
||||
0 1px 1px var(--color-border-default);
|
||||
background-color: var(--color-canvas-default);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
.w-md-editor-toolbar-child.active {
|
||||
display: block;
|
||||
}
|
||||
.w-md-editor-toolbar-child .w-md-editor-toolbar {
|
||||
border-bottom: 0;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
|
||||
display: block;
|
||||
}
|
||||
.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button:not(.cta-btn) {
|
||||
width: -webkit-fill-available;
|
||||
height: initial;
|
||||
box-sizing: border-box;
|
||||
padding: 3px 4px 2px 4px;
|
||||
margin: 0;
|
||||
}
|
||||
.w-md-editor-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.w-md-editor-toolbar.bottom {
|
||||
border-bottom: 0px;
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
.w-md-editor-toolbar ul,
|
||||
.w-md-editor-toolbar li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
line-height: initial;
|
||||
}
|
||||
.w-md-editor-toolbar li {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
}
|
||||
.w-md-editor-toolbar li + li {
|
||||
margin: 0;
|
||||
}
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn) {
|
||||
border: none;
|
||||
height: 20px;
|
||||
line-height: 14px;
|
||||
background: none;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
overflow: visible;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
white-space: nowrap;
|
||||
@apply rounded py-1 px-2 text-zinc-500;
|
||||
}
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn):hover,
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn):focus {
|
||||
@apply bg-zinc-700 text-zinc-100;
|
||||
}
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn):active {
|
||||
background-color: var(--color-neutral-muted);
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn):disabled {
|
||||
color: var(--color-border-default);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.w-md-editor-toolbar li > button:not(.cta-btn):disabled:hover {
|
||||
background-color: transparent;
|
||||
color: var(--color-border-default);
|
||||
}
|
||||
.w-md-editor-toolbar li.active > button:not(.cta-btn) {
|
||||
color: var(--color-accent-fg);
|
||||
background-color: var(--color-neutral-muted);
|
||||
}
|
||||
.w-md-editor-toolbar-divider {
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
margin: -3px 3px 0 3px !important;
|
||||
vertical-align: middle;
|
||||
background-color: var(--color-border-default);
|
||||
}
|
||||
.w-md-editor {
|
||||
text-align: left;
|
||||
border-radius: 3px;
|
||||
padding-bottom: 1px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
@apply gap-3;
|
||||
}
|
||||
.w-md-editor.w-md-editor-rtl {
|
||||
direction: rtl !important;
|
||||
text-align: right !important;
|
||||
}
|
||||
.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
|
||||
right: unset !important;
|
||||
left: 0;
|
||||
text-align: right !important;
|
||||
box-shadow: inset -1px 0 0 0 var(--color-border-default);
|
||||
}
|
||||
.w-md-editor.w-md-editor-rtl .w-md-editor-text {
|
||||
text-align: right !important;
|
||||
}
|
||||
.w-md-editor-toolbar {
|
||||
@apply h-10 shrink-0;
|
||||
}
|
||||
.w-md-editor-content {
|
||||
@apply relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 shadow-inner;
|
||||
}
|
||||
.w-md-editor .copied {
|
||||
display: none !important;
|
||||
}
|
||||
.w-md-editor-input {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
.w-md-editor-text-pre > code {
|
||||
word-break: break-word !important;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
.w-md-editor-preview {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 1px 0 0 0 var(--color-border-default);
|
||||
position: absolute;
|
||||
padding: 10px 20px;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0 0 5px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.w-md-editor-preview .anchor {
|
||||
display: none;
|
||||
}
|
||||
.w-md-editor-preview .contains-task-list {
|
||||
list-style: none;
|
||||
}
|
||||
.w-md-editor-show-preview .w-md-editor-input {
|
||||
width: 0%;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-canvas-default);
|
||||
}
|
||||
.w-md-editor-show-preview .w-md-editor-preview {
|
||||
width: 100%;
|
||||
box-shadow: inset 0 0 0 0;
|
||||
}
|
||||
.w-md-editor-show-edit .w-md-editor-input {
|
||||
width: 100%;
|
||||
}
|
||||
.w-md-editor-show-edit .w-md-editor-preview {
|
||||
width: 0%;
|
||||
padding: 0;
|
||||
}
|
||||
.w-md-editor-fullscreen {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100% !important;
|
||||
}
|
||||
.w-md-editor-fullscreen .w-md-editor-content {
|
||||
height: 100%;
|
||||
}
|
||||
9
src/components/channels/channelList.tsx
Normal file
9
src/components/channels/channelList.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import { ChannelModal } from '@components/channels/channelModal';
|
||||
|
||||
export default function ChannelList() {
|
||||
return (
|
||||
<div className="flex flex-col gap-px">
|
||||
<ChannelModal />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
src/components/channels/channelModal.tsx
Normal file
129
src/components/channels/channelModal.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
import { RelayContext } from '@components/relaysProvider';
|
||||
|
||||
import { dateToUnix } from '@utils/getDate';
|
||||
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
|
||||
import { getEventHash, signEvent } from 'nostr-tools';
|
||||
import { useContext, useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
|
||||
export const ChannelModal = () => {
|
||||
const [pool, relays]: any = useContext(RelayContext);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isDirty, isValid },
|
||||
} = useForm();
|
||||
|
||||
const onSubmit = (data) => {
|
||||
const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
|
||||
|
||||
const event: any = {
|
||||
content: JSON.stringify(data),
|
||||
created_at: dateToUnix(),
|
||||
kind: 40,
|
||||
pubkey: activeAccount.pubkey,
|
||||
tags: [],
|
||||
};
|
||||
event.id = getEventHash(event);
|
||||
event.sig = signEvent(event, activeAccount.privkey);
|
||||
|
||||
// publish channel
|
||||
pool.publish(event, relays);
|
||||
// close modal
|
||||
setOpen(false);
|
||||
// reset form
|
||||
reset();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog.Root open={open} onOpenChange={setOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
|
||||
<div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
|
||||
<PlusIcon className="h-3 w-3 text-zinc-500" />
|
||||
</div>
|
||||
<div>
|
||||
<h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
|
||||
<Dialog.Content className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center">
|
||||
<div className="relative flex h-min w-full max-w-xl flex-col rounded-lg shadow-modal">
|
||||
<div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg bg-zinc-950 px-3">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<h5 className="font-medium leading-none text-zinc-500"># Create channel</h5>
|
||||
<Dialog.Close asChild>
|
||||
<button
|
||||
autoFocus={false}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
|
||||
>
|
||||
<Cross1Icon className="h-3 w-3 text-zinc-300" />
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex h-full w-full flex-col overflow-y-auto rounded-b-lg bg-zinc-950 px-3 pb-3">
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="flex h-full w-full flex-col gap-4 rounded-lg border border-white/20 bg-zinc-900 p-4"
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">
|
||||
Channel name *
|
||||
</label>
|
||||
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('name', { required: true })}
|
||||
spellCheck={false}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">Picture</label>
|
||||
<div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<input
|
||||
type={'text'}
|
||||
{...register('picture')}
|
||||
spellCheck={false}
|
||||
className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">About</label>
|
||||
<div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
|
||||
<textarea
|
||||
{...register('about')}
|
||||
spellCheck={false}
|
||||
className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!isDirty || !isValid}
|
||||
className="h-11 w-full transform rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
};
|
||||
@ -42,7 +42,10 @@ export const ChatModal = () => {
|
||||
<div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg border-b border-zinc-800 bg-zinc-950 px-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Dialog.Close asChild>
|
||||
<button className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
|
||||
<button
|
||||
autoFocus={false}
|
||||
className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"
|
||||
>
|
||||
<Cross1Icon className="h-3 w-3 text-zinc-300" />
|
||||
</button>
|
||||
</Dialog.Close>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import ChannelList from '@components/channels/channelList';
|
||||
|
||||
import * as Collapsible from '@radix-ui/react-collapsible';
|
||||
import { TriangleUpIcon } from '@radix-ui/react-icons';
|
||||
import { useState } from 'react';
|
||||
@ -18,7 +20,9 @@ export default function Channels() {
|
||||
</div>
|
||||
<h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content></Collapsible.Content>
|
||||
<Collapsible.Content>
|
||||
<ChannelList />
|
||||
</Collapsible.Content>
|
||||
</div>
|
||||
</Collapsible.Root>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user