mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 07:33:22 +00:00
remove some tw (#353)
This commit is contained in:
BlowaterNostr
GitHub
parent
6c23dff5db
commit
b09e269aed
@ -1,67 +0,0 @@
|
||||
/** @jsx h */
|
||||
import { FunctionComponent, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
|
||||
type AppListItem = {
|
||||
picture?: string;
|
||||
title: string;
|
||||
subTitle: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
const AppListData: AppListItem[] = [
|
||||
{
|
||||
picture: "https://info.coracle.social/images/logo.png",
|
||||
title: "Coracle",
|
||||
subTitle: "Escape the walled gardens and make social media work for you.",
|
||||
url: "https://app.coracle.social",
|
||||
},
|
||||
{
|
||||
picture: "https://getalby.com/alby_icon_yellow_128x128.png",
|
||||
title: "Alby",
|
||||
subTitle: "Your Bitcoin & Nostr companion for the web.",
|
||||
url: "https://getalby.com",
|
||||
},
|
||||
{
|
||||
title: "Habla",
|
||||
subTitle: "Habla is a nostr-based web app that enables anyone to earn from their writing.",
|
||||
url: "https://habla.news/",
|
||||
},
|
||||
{
|
||||
picture: "https://flycat.club/logo512.png",
|
||||
title: "Flycat",
|
||||
subTitle: "A Nostr blogging client",
|
||||
url: "https://flycat.club/",
|
||||
},
|
||||
];
|
||||
|
||||
export const AppList: FunctionComponent = () => {
|
||||
return (
|
||||
<div class={tw`max-w-[40rem] m-auto px-4 py-8`}>
|
||||
<ul class={tw`overflow-auto flex-1 p-2 text-[#96989D]`}>
|
||||
{AppListData.map((item) => (
|
||||
<li
|
||||
class={tw`cursor-pointer p-2 hover:bg-[#3C3F45] bg-[#36393F] my-2 rounded-lg flex items-center w-full`}
|
||||
onClick={() => {
|
||||
open(item.url);
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
class={tw`w-8 h-8 mr-2`}
|
||||
picture={item.picture}
|
||||
/>
|
||||
<div class={tw`flex-1 overflow-hidden`}>
|
||||
<p class={tw`w-full text-[1.2rem] text-[#F7F7F7] font-bold`}>
|
||||
{item.title}
|
||||
</p>
|
||||
<p class={tw`w-full`}>
|
||||
{item.subTitle}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
|
||||
export function Avatar(props: {
|
||||
picture: string | undefined;
|
||||
@ -17,7 +16,7 @@ export function Avatar(props: {
|
||||
onClick={props.onClick}
|
||||
style={props.style}
|
||||
class={[
|
||||
tw`rounded-full${props.onClick ? " cursor-pointer" : ""}`,
|
||||
`rounded-full${props.onClick ? " cursor-pointer" : ""}`,
|
||||
props.class,
|
||||
].join(" ")}
|
||||
src={props.picture ? props.picture : "logo.webp"}
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { HoverButtonBackgroudColor } from "../style/colors.ts";
|
||||
|
||||
export function Loading() {
|
||||
return (
|
||||
<div class={tw`w-full mt-8}`}>
|
||||
<div class={tw`animate-pulse flex`}>
|
||||
<div class={tw`flex-1 space-y-4 py-1`}>
|
||||
<div class={tw`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-1/2`}></div>
|
||||
<div class={tw`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-3/4`}></div>
|
||||
<div class={tw`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-5/6`}></div>
|
||||
<div class={`w-full mt-8}`}>
|
||||
<div class={`animate-pulse flex`}>
|
||||
<div class={`flex-1 space-y-4 py-1`}>
|
||||
<div class={`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-1/2`}></div>
|
||||
<div class={`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-3/4`}></div>
|
||||
<div class={`h-4 bg-[${HoverButtonBackgroudColor}] rounded w-5/6`}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/** @jsx h */
|
||||
import { Component } from "https://esm.sh/preact@10.17.1";
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { PrimaryBackgroundColor, PrimaryTextColor } from "../style/colors.ts";
|
||||
import { Channel } from "https://raw.githubusercontent.com/BlowaterNostr/csp/master/csp.ts";
|
||||
|
||||
@ -31,7 +30,7 @@ export class Toast extends Component<Props, State> {
|
||||
? (
|
||||
<div
|
||||
key={`${this.state.content}${Date.now()}`}
|
||||
class={tw`animate-toast absolute left-full top-4 px-4 py-2 rounded shadow-2xl w-max max-w-xs bg-[${PrimaryBackgroundColor}] text-[${PrimaryTextColor}] text-xs break-all`}
|
||||
class={`animate-toast absolute left-full top-4 px-4 py-2 rounded shadow-2xl w-max max-w-xs bg-[${PrimaryBackgroundColor}] text-[${PrimaryTextColor}] text-xs break-all`}
|
||||
>
|
||||
{this.state.content}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/** @jsx h */
|
||||
import { Component } from "https://esm.sh/preact@10.17.1";
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { ErrorColor, PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts";
|
||||
import { GroupIcon } from "./icons/group-icon.tsx";
|
||||
import { ButtonClass, InputClass, LinearGradientsClass } from "./components/tw.ts";
|
||||
@ -35,17 +34,17 @@ export class CreateGroup extends Component<Props, State> {
|
||||
error: "",
|
||||
};
|
||||
styles = {
|
||||
container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
container: `py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
header: {
|
||||
container: tw`text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
container: `text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
},
|
||||
title: tw`mt-7 text-[${PrimaryTextColor}]`,
|
||||
avatar: tw`w-14 h-14 m-auto`,
|
||||
input: tw`${InputClass} mt-4`,
|
||||
error: tw`mt-2 text-[${ErrorColor}] text-xs`,
|
||||
title: `mt-7 text-[${PrimaryTextColor}]`,
|
||||
avatar: `w-14 h-14 m-auto`,
|
||||
input: `${InputClass} mt-4`,
|
||||
error: `mt-2 text-[${ErrorColor}] text-xs`,
|
||||
submit:
|
||||
tw`w-full mt-4 ${ButtonClass} ${LinearGradientsClass} hover:bg-gradient-to-l disabled:opacity-50`,
|
||||
`w-full mt-4 ${ButtonClass} ${LinearGradientsClass} hover:bg-gradient-to-l disabled:opacity-50`,
|
||||
};
|
||||
|
||||
onNameInput = (name: string) => {
|
||||
|
||||
27
UI/dm.tsx
27
UI/dm.tsx
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import * as cl from "./conversation-list.tsx";
|
||||
import { MessagePanel, NewMessageListener, RightPanelModel } from "./message-panel.tsx";
|
||||
import { EventBus } from "../event-bus.ts";
|
||||
@ -62,7 +61,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
if (props.isGroupMessage) {
|
||||
buttons.push(
|
||||
<button
|
||||
class={tw`w-8 h-8 ${CenterClass}`}
|
||||
class={`w-8 h-8 ${CenterClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "ViewUserDetail",
|
||||
@ -71,7 +70,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
}}
|
||||
>
|
||||
<UserIcon
|
||||
class={tw`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
style={{ fill: "none" }}
|
||||
/>
|
||||
</button>,
|
||||
@ -82,7 +81,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
buttons.push(
|
||||
// setting button
|
||||
<button
|
||||
class={tw`w-8 h-8 ${CenterClass}`}
|
||||
class={`w-8 h-8 ${CenterClass}`}
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "StartEditGroupChatProfile",
|
||||
@ -91,7 +90,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
}}
|
||||
>
|
||||
<SettingIcon
|
||||
class={tw`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
class={`w-6 h-6 text-[${PrimaryTextColor}] stroke-current`}
|
||||
style={{ fill: "none" }}
|
||||
/>
|
||||
</button>,
|
||||
@ -111,9 +110,9 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
|
||||
const vDom = (
|
||||
<div
|
||||
class={tw`h-full w-full flex bg-[#36393F] overflow-hidden`}
|
||||
class={`h-full w-full flex bg-[#36393F] overflow-hidden`}
|
||||
>
|
||||
<div class={tw`${props.currentEditor ? "mobile:hidden" : "mobile:w-full"}`}>
|
||||
<div class={`${props.currentEditor ? "mobile:hidden" : "mobile:w-full"}`}>
|
||||
<cl.ConversationList
|
||||
eventBus={props.bus}
|
||||
emit={props.bus.emit}
|
||||
@ -125,23 +124,23 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
</div>
|
||||
{props.currentEditor
|
||||
? (
|
||||
<div class={tw`flex-1 overflow-hidden flex-col flex`}>
|
||||
<div class={`flex-1 overflow-hidden flex-col flex`}>
|
||||
<div
|
||||
class={tw`h-14 mobile:h-12
|
||||
class={`h-14 mobile:h-12
|
||||
border-l border-b border-[#36393F] flex
|
||||
items-center justify-between px- mobile:px-2 bg-[#2F3136]`}
|
||||
>
|
||||
<div class={tw`flex items-center overflow-hidden`}>
|
||||
<div class={`flex items-center overflow-hidden`}>
|
||||
<button
|
||||
onClick={() => {
|
||||
props.bus.emit({
|
||||
type: "BackToContactList",
|
||||
});
|
||||
}}
|
||||
class={tw`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
|
||||
class={`w-6 h-6 mobile:mr-2 desktop:hidden ${IconButtonClass}`}
|
||||
>
|
||||
<LeftArrowIcon
|
||||
class={tw`w-4 h-4`}
|
||||
class={`w-4 h-4`}
|
||||
style={{
|
||||
fill: "rgb(185, 187, 190)",
|
||||
}}
|
||||
@ -150,7 +149,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
<span
|
||||
// https://tailwindcss.com/docs/customizing-colors
|
||||
// https://tailwindcss.com/docs/cursor
|
||||
class={tw`text-[#F3F4EA] text-[1.2rem]
|
||||
class={`text-[#F3F4EA] text-[1.2rem]
|
||||
hover:text-[#60a5fa] hover:cursor-pointer
|
||||
ml-4 mobile:text-base whitespace-nowrap truncate`}
|
||||
onClick={() => {
|
||||
@ -172,7 +171,7 @@ export function DirectMessageContainer(props: DirectMessageContainerProps) {
|
||||
{buttons}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div class={tw`flex-1 overflow-x-auto`}>
|
||||
<div class={`flex-1 overflow-x-auto`}>
|
||||
{props.currentEditor
|
||||
? (
|
||||
<MessagePanel
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
/** @jsx h */
|
||||
import { Component } from "https://esm.sh/preact@10.17.1";
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { ErrorColor, PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts";
|
||||
import { PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts";
|
||||
import { GroupIcon } from "./icons/group-icon.tsx";
|
||||
import { ButtonClass, InputClass, LinearGradientsClass } from "./components/tw.ts";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import { ProfileData } from "../features/profile.ts";
|
||||
import { emitFunc } from "../event-bus.ts";
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
import { ProfileGetter } from "./search.tsx";
|
||||
import { EditProfile, SaveProfile } from "./edit-profile.tsx";
|
||||
import { NostrAccountContext } from "../lib/nostr-ts/nostr.ts";
|
||||
@ -24,10 +18,10 @@ export function EditGroup(props: {
|
||||
emit: emitFunc<SaveProfile>;
|
||||
}) {
|
||||
const styles = {
|
||||
container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
container: `py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
header: {
|
||||
container: tw`text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
container: `text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { createRef, Fragment, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import {
|
||||
CenterClass,
|
||||
@ -49,30 +48,30 @@ type State = {
|
||||
|
||||
export class EditProfile extends Component<Props, State> {
|
||||
styles = {
|
||||
container: tw`py-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
container: `py-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
banner: {
|
||||
container: tw`h-72 w-full rounded-lg mb-20 relative`,
|
||||
container: `h-72 w-full rounded-lg mb-20 relative`,
|
||||
avatar:
|
||||
tw`w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`,
|
||||
`w-24 h-24 m-auto absolute top-60 left-1/2 box-border border-2 border-[${PrimaryTextColor}] -translate-x-2/4`,
|
||||
},
|
||||
avatar: tw`w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`,
|
||||
avatar: `w-24 h-24 m-auto box-border border-2 border-[${PrimaryTextColor}]`,
|
||||
field: {
|
||||
title: tw`text-[${PrimaryTextColor}] mt-8`,
|
||||
input: tw`${InputClass}`,
|
||||
title: `text-[${PrimaryTextColor}] mt-8`,
|
||||
input: `${InputClass}`,
|
||||
hint: {
|
||||
text: tw`text-sm text-[${HintTextColor}]`,
|
||||
link: tw`text-[${HintLinkColor}]`,
|
||||
text: `text-sm text-[${HintTextColor}]`,
|
||||
link: `text-[${HintLinkColor}]`,
|
||||
},
|
||||
},
|
||||
addButton:
|
||||
tw`w-full mt-6 p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] bg-[${DividerBackgroundColor}] hover:bg-[${HoverButtonBackgroudColor}] ${CenterClass}`,
|
||||
`w-full mt-6 p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] bg-[${DividerBackgroundColor}] hover:bg-[${HoverButtonBackgroudColor}] ${CenterClass}`,
|
||||
submitButton:
|
||||
tw`w-full p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l`,
|
||||
divider: tw`${DividerClass}`,
|
||||
`w-full p-3 rounded-lg ${NoOutlineClass} text-[${PrimaryTextColor}] ${CenterClass} ${LinearGradientsClass} hover:bg-gradient-to-l`,
|
||||
divider: `${DividerClass}`,
|
||||
custom: {
|
||||
title: tw`text-[${PrimaryTextColor}] font-bold text-sm`,
|
||||
text: tw`text-[${HintTextColor}] text-sm`,
|
||||
error: tw`text-sm text-[${ErrorColor}]`,
|
||||
title: `text-[${PrimaryTextColor}] font-bold text-sm`,
|
||||
text: `text-[${HintTextColor}] text-sm`,
|
||||
error: `text-sm text-[${ErrorColor}]`,
|
||||
},
|
||||
};
|
||||
|
||||
@ -266,7 +265,7 @@ export class EditProfile extends Component<Props, State> {
|
||||
|
||||
<button class={this.styles.addButton} onClick={this.addField}>Add Field</button>
|
||||
|
||||
<div class={tw`${DividerClass}`}></div>
|
||||
<div class={`${DividerClass}`}></div>
|
||||
|
||||
<button class={this.styles.submitButton} onClick={this.onSubmit}>Update Profile</button>
|
||||
</div>
|
||||
|
||||
@ -1,17 +1,11 @@
|
||||
/** @jsx h */
|
||||
import { createRef, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { CenterClass, LinearGradientsClass, NoOutlineClass } from "./components/tw.ts";
|
||||
import { emitFunc } from "../event-bus.ts";
|
||||
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
import { ImageIcon } from "./icons/image-icon.tsx";
|
||||
import {
|
||||
DividerBackgroundColor,
|
||||
PrimaryBackgroundColor,
|
||||
PrimaryTextColor,
|
||||
SecondaryBackgroundColor,
|
||||
} from "./style/colors.ts";
|
||||
import { DividerBackgroundColor, PrimaryBackgroundColor, PrimaryTextColor } from "./style/colors.ts";
|
||||
import { SendIcon } from "./icons/send-icon.tsx";
|
||||
import { Component } from "https://esm.sh/preact@10.17.1";
|
||||
import { RemoveIcon } from "./icons/remove-icon.tsx";
|
||||
@ -107,9 +101,9 @@ export class Editor extends Component<EditorProps> {
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={tw`flex mb-4 mx-5 mobile:mx-2 mobile:mb-2 items-center`}>
|
||||
<div class={`flex mb-4 mx-5 mobile:mx-2 mobile:mb-2 items-center`}>
|
||||
<button
|
||||
class={tw`min-w-[3rem] mobile:min-w-[2rem] w-[3rem] mobile:w-8 h-[3rem] mobile:h-8 hover:bg-[${DividerBackgroundColor}] group ${CenterClass} rounded-[50%] ${NoOutlineClass}`}
|
||||
class={`min-w-[3rem] mobile:min-w-[2rem] w-[3rem] mobile:w-8 h-[3rem] mobile:h-8 hover:bg-[${DividerBackgroundColor}] group ${CenterClass} rounded-[50%] ${NoOutlineClass}`}
|
||||
onClick={() => {
|
||||
if (uploadFileInput.current) {
|
||||
uploadFileInput.current.click();
|
||||
@ -117,7 +111,7 @@ export class Editor extends Component<EditorProps> {
|
||||
}}
|
||||
>
|
||||
<ImageIcon
|
||||
class={tw`h-[2rem] w-[2rem] mobile:w-6 mobile:h-6 stroke-current text-[${PrimaryTextColor}4D] group-hover:text-[${PrimaryTextColor}]`}
|
||||
class={`h-[2rem] w-[2rem] mobile:w-6 mobile:h-6 stroke-current text-[${PrimaryTextColor}4D] group-hover:text-[${PrimaryTextColor}]`}
|
||||
style={{
|
||||
fill: "none",
|
||||
}}
|
||||
@ -148,29 +142,29 @@ export class Editor extends Component<EditorProps> {
|
||||
isGroupChat: props.isGroupChat,
|
||||
});
|
||||
}}
|
||||
class={tw`hidden`}
|
||||
class={`hidden`}
|
||||
/>
|
||||
<div
|
||||
class={tw`mx-2 p-[0.75rem] mobile:p-2 mobile:text-sm bg-[${DividerBackgroundColor}] rounded-lg flex flex-col flex-1 overflow-hidden`}
|
||||
class={`mx-2 p-[0.75rem] mobile:p-2 mobile:text-sm bg-[${DividerBackgroundColor}] rounded-lg flex flex-col flex-1 overflow-hidden`}
|
||||
>
|
||||
{props.files.length > 0
|
||||
? (
|
||||
<ul
|
||||
class={tw`flex overflow-auto list-none py-2 w-full border-b border-[#52525B] mb-[1rem]`}
|
||||
class={`flex overflow-auto list-none py-2 w-full border-b border-[#52525B] mb-[1rem]`}
|
||||
>
|
||||
{props.files.map((file, index) => {
|
||||
return (
|
||||
<li
|
||||
class={tw`relative mx-2 min-w-[10rem] w-[10rem] h-[10rem] p-2 bg-[${PrimaryBackgroundColor}] rounded ${CenterClass}`}
|
||||
class={`relative mx-2 min-w-[10rem] w-[10rem] h-[10rem] p-2 bg-[${PrimaryBackgroundColor}] rounded ${CenterClass}`}
|
||||
>
|
||||
<button
|
||||
class={tw`w-[2rem] h-[2rem] absolute top-1 right-1 rounded-[50%] hover:bg-[${DividerBackgroundColor}] ${CenterClass} ${NoOutlineClass}`}
|
||||
class={`w-[2rem] h-[2rem] absolute top-1 right-1 rounded-[50%] hover:bg-[${DividerBackgroundColor}] ${CenterClass} ${NoOutlineClass}`}
|
||||
onClick={() => {
|
||||
removeFile(index);
|
||||
}}
|
||||
>
|
||||
<RemoveIcon
|
||||
class={tw`w-[1.3rem] h-[1.3rem]`}
|
||||
class={`w-[1.3rem] h-[1.3rem]`}
|
||||
style={{
|
||||
fill: "none",
|
||||
stroke: PrimaryTextColor,
|
||||
@ -178,7 +172,7 @@ export class Editor extends Component<EditorProps> {
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
class={tw`max-w-full max-h-full`}
|
||||
class={`max-w-full max-h-full`}
|
||||
src={URL.createObjectURL(file)}
|
||||
alt=""
|
||||
/>
|
||||
@ -196,7 +190,7 @@ export class Editor extends Component<EditorProps> {
|
||||
}}
|
||||
value={props.text}
|
||||
rows={1}
|
||||
class={tw`flex-1 bg-transparent focus-visible:outline-none placeholder-[${PrimaryTextColor}4D] text-[0.8rem] text-[#D2D3D5] whitespace-nowrap resize-none overflow-x-hidden overflow-y-auto`}
|
||||
class={`flex-1 bg-transparent focus-visible:outline-none placeholder-[${PrimaryTextColor}4D] text-[0.8rem] text-[#D2D3D5] whitespace-nowrap resize-none overflow-x-hidden overflow-y-auto`}
|
||||
placeholder={props.placeholder}
|
||||
onInput={(e) => {
|
||||
props.emit({
|
||||
@ -246,17 +240,17 @@ export class Editor extends Component<EditorProps> {
|
||||
</div>
|
||||
|
||||
<div
|
||||
class={tw`w-[5rem] h-[2.5rem] rounded-lg mobile:hidden ${LinearGradientsClass} ${CenterClass}`}
|
||||
class={`w-[5rem] h-[2.5rem] rounded-lg mobile:hidden ${LinearGradientsClass} ${CenterClass}`}
|
||||
>
|
||||
<button
|
||||
class={tw`w-[4.8rem] h-[2.3rem] text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
|
||||
class={`w-[4.8rem] h-[2.3rem] text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
|
||||
onClick={async () => {
|
||||
await sendMessage();
|
||||
this.textareaElement.current?.focus();
|
||||
}}
|
||||
>
|
||||
<SendIcon
|
||||
class={tw`h-[1.25rem] w-[1.25rem] mr-[0.1rem]`}
|
||||
class={`h-[1.25rem] w-[1.25rem] mr-[0.1rem]`}
|
||||
style={{
|
||||
stroke: PrimaryTextColor,
|
||||
fill: "none",
|
||||
@ -267,14 +261,14 @@ export class Editor extends Component<EditorProps> {
|
||||
</div>
|
||||
|
||||
<button
|
||||
class={tw`desktop:hidden w-12 h-8 ${CenterClass} ${LinearGradientsClass} rounded`}
|
||||
class={`desktop:hidden w-12 h-8 ${CenterClass} ${LinearGradientsClass} rounded`}
|
||||
onClick={async () => {
|
||||
await sendMessage();
|
||||
this.textareaElement.current?.focus();
|
||||
}}
|
||||
>
|
||||
<SendIcon
|
||||
class={tw`h-4 w-4`}
|
||||
class={`h-4 w-4`}
|
||||
style={{
|
||||
stroke: PrimaryTextColor,
|
||||
fill: "none",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { Fragment, h } from "https://esm.sh/preact@10.11.3";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { CenterClass, InputClass } from "./components/tw.ts";
|
||||
import { PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts";
|
||||
import { Component } from "https://esm.sh/preact@10.11.3";
|
||||
@ -18,16 +17,16 @@ type Props = {
|
||||
|
||||
export class EventDetail extends Component<Props> {
|
||||
styles = {
|
||||
container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
container: `py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
||||
header: {
|
||||
container: tw`text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
container: `text-[${PrimaryTextColor}] text-xl flex`,
|
||||
icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
||||
},
|
||||
title: tw`mt-7 text-[${PrimaryTextColor}]`,
|
||||
title: `mt-7 text-[${PrimaryTextColor}]`,
|
||||
field: {
|
||||
container: tw`relative ${InputClass} resize-none flex p-0 mt-4`,
|
||||
pre: tw`whitespace-pre flex-1 overflow-x-auto px-4 py-3`,
|
||||
copyButton: tw`w-14 ${CenterClass}`,
|
||||
container: `relative ${InputClass} resize-none flex p-0 mt-4`,
|
||||
pre: `whitespace-pre flex-1 overflow-x-auto px-4 py-3`,
|
||||
copyButton: `w-14 ${CenterClass}`,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -4,9 +4,7 @@ import { InviteButton } from "./invite-button.tsx";
|
||||
import { InMemoryAccountContext } from "../lib/nostr-ts/nostr.ts";
|
||||
import { GroupMessageController } from "../features/gm.ts";
|
||||
import { fail } from "https://deno.land/std@0.176.0/testing/asserts.ts";
|
||||
import { Datebase_View } from "../database.ts";
|
||||
import { testEventBus, testEventMarker, testEventsAdapter, testRelayAdapter } from "./_setup.test.ts";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { test_db_view, testEventBus } from "./_setup.test.ts";
|
||||
import { CenterClass } from "./components/tw.ts";
|
||||
import { getTags } from "../nostr.ts";
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
@ -27,7 +25,7 @@ gm_A.addEvent({
|
||||
publicKey: PublicKey.FromHex(gm_A_creation_event.pubkey) as PublicKey,
|
||||
});
|
||||
render(
|
||||
<div class={tw`${CenterClass}`}>
|
||||
<div class={`${CenterClass}`}>
|
||||
<InviteButton
|
||||
userPublicKey={user_B.publicKey}
|
||||
groupChatController={gm_A}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { Component, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { InviteIcon } from "./icons/invite-icon.tsx";
|
||||
import { DividerBackgroundColor, HoverButtonBackgroudColor, PrimaryTextColor } from "./style/colors.ts";
|
||||
import { NoOutlineClass } from "./components/tw.ts";
|
||||
@ -31,11 +30,11 @@ export class InviteButton extends Component<Props, State> {
|
||||
styles = {
|
||||
button: {
|
||||
container:
|
||||
tw`w-6 h-6 flex items-center justify-center relative bg-[${DividerBackgroundColor}] hover:[${HoverButtonBackgroudColor}] ${NoOutlineClass}`,
|
||||
icon: tw`w-4 h-4 scale-150 fill-current text-[${PrimaryTextColor}]`,
|
||||
`w-6 h-6 flex items-center justify-center relative bg-[${DividerBackgroundColor}] hover:[${HoverButtonBackgroudColor}] ${NoOutlineClass}`,
|
||||
icon: `w-4 h-4 scale-150 fill-current text-[${PrimaryTextColor}]`,
|
||||
},
|
||||
ul: tw`absolute top-6 rounded right-0 text-[${PrimaryTextColor}] bg-[${HoverButtonBackgroudColor}] z-20 overflow-y-auto`,
|
||||
li: tw`p-2 text-left hover:bg-[${DividerBackgroundColor}] first:rounded-t last:rounded-b w-32 whitespace-nowrap truncate text-xs`,
|
||||
ul: `absolute top-6 rounded right-0 text-[${PrimaryTextColor}] bg-[${HoverButtonBackgroudColor}] z-20 overflow-y-auto`,
|
||||
li: `p-2 text-left hover:bg-[${DividerBackgroundColor}] first:rounded-t last:rounded-b w-32 whitespace-nowrap truncate text-xs`,
|
||||
};
|
||||
|
||||
sendEvent = (e: h.JSX.TargetedMouseEvent<HTMLLIElement>, groupPublicKey: PublicKey) => {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { PrimaryTextColor, SecondaryBackgroundColor, SecondaryTextColor } from "./style/colors.ts";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import { LinearGradientsClass, NoOutlineClass } from "./components/tw.ts";
|
||||
@ -20,19 +19,19 @@ export function InviteCard(props: {
|
||||
const { publicKey, profileGetter } = props;
|
||||
|
||||
const styles = {
|
||||
container: tw`bg-[${SecondaryBackgroundColor}] rounded-sm p-2 max-w-sm my-1`,
|
||||
title: tw`text-[${SecondaryTextColor}] font-bold text-xs uppercase`,
|
||||
container: `bg-[${SecondaryBackgroundColor}] rounded-sm p-2 max-w-sm my-1`,
|
||||
title: `text-[${SecondaryTextColor}] font-bold text-xs uppercase`,
|
||||
profile: {
|
||||
container: tw`flex py-2 gap-x-4`,
|
||||
picture: tw`w-10 h-10`,
|
||||
container: `flex py-2 gap-x-4`,
|
||||
picture: `w-10 h-10`,
|
||||
text: {
|
||||
container: tw`flex-1 overflow-hidden`,
|
||||
name: tw`text-[${PrimaryTextColor}] truncate`,
|
||||
description: tw`text-[${SecondaryTextColor}] text-xs truncate`,
|
||||
container: `flex-1 overflow-hidden`,
|
||||
name: `text-[${PrimaryTextColor}] truncate`,
|
||||
description: `text-[${SecondaryTextColor}] text-xs truncate`,
|
||||
},
|
||||
},
|
||||
button:
|
||||
tw`px-4 py-2 rounded-sm ${LinearGradientsClass} hover:bg-gradient-to-l text-[${PrimaryTextColor}] text-sm ${NoOutlineClass} font-bold`,
|
||||
`px-4 py-2 rounded-sm ${LinearGradientsClass} hover:bg-gradient-to-l text-[${PrimaryTextColor}] text-sm ${NoOutlineClass} font-bold`,
|
||||
};
|
||||
|
||||
const profile = profileGetter.getProfilesByPublicKey(publicKey);
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { Fragment, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { PrivateKey, PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
import { InputClass } from "./components/tw.ts";
|
||||
import { PrimaryTextColor, TitleIconColor, WarnColor } from "./style/colors.ts";
|
||||
@ -14,9 +13,9 @@ export default function KeyView(props: {
|
||||
const privateKey = props.privateKey;
|
||||
return (
|
||||
<Fragment>
|
||||
<p class={tw`text-[${PrimaryTextColor}] text-[1.3125rem] flex font-bold`}>
|
||||
<p class={`text-[${PrimaryTextColor}] text-[1.3125rem] flex font-bold`}>
|
||||
<KeyIcon
|
||||
class={tw`w-[2rem] h-[2rem] mr-[1rem]`}
|
||||
class={`w-[2rem] h-[2rem] mr-[1rem]`}
|
||||
style={{
|
||||
stroke: TitleIconColor,
|
||||
fill: "none",
|
||||
@ -24,32 +23,32 @@ export default function KeyView(props: {
|
||||
/>
|
||||
Key Pair
|
||||
</p>
|
||||
<p class={tw`mt-[1.75rem] text-[${PrimaryTextColor}]`}>Public Key</p>
|
||||
<div class={tw`relative`}>
|
||||
<p class={`mt-[1.75rem] text-[${PrimaryTextColor}]`}>Public Key</p>
|
||||
<div class={`relative`}>
|
||||
<input
|
||||
value={props.publicKey.bech32()}
|
||||
disabled
|
||||
type="text"
|
||||
class={tw`${InputClass} overflow-x-auto pr-[4rem]`}
|
||||
class={`${InputClass} overflow-x-auto pr-[4rem]`}
|
||||
/>
|
||||
<CopyButton
|
||||
class={tw`absolute right-4 top-4`}
|
||||
class={`absolute right-4 top-4`}
|
||||
text={props.publicKey.bech32()}
|
||||
/>
|
||||
</div>
|
||||
<p class={tw`mt-[1.5rem] text-[${PrimaryTextColor}]`}>Private Key</p>
|
||||
<div class={tw`relative`}>
|
||||
<p class={`mt-[1.5rem] text-[${PrimaryTextColor}]`}>Private Key</p>
|
||||
<div class={`relative`}>
|
||||
<input
|
||||
value="●●●●●●"
|
||||
disabled
|
||||
type="password"
|
||||
class={tw`${InputClass} overflow-x-auto pr-[4rem]`}
|
||||
class={`${InputClass} overflow-x-auto pr-[4rem]`}
|
||||
/>
|
||||
|
||||
{privateKey
|
||||
? (
|
||||
<CopyButton
|
||||
class={tw`absolute right-4 top-4`}
|
||||
class={`absolute right-4 top-4`}
|
||||
text={privateKey.bech32}
|
||||
/>
|
||||
)
|
||||
@ -57,7 +56,7 @@ export default function KeyView(props: {
|
||||
</div>
|
||||
{!privateKey
|
||||
? (
|
||||
<p class={tw`text-[${WarnColor}] text-[0.875rem] mt-[0.5rem]`}>
|
||||
<p class={`text-[${WarnColor}] text-[0.875rem] mt-[0.5rem]`}>
|
||||
Blowater cannot view your private key because you logged in with an extension.
|
||||
</p>
|
||||
)
|
||||
|
||||
@ -1,24 +0,0 @@
|
||||
/** @jsx h */
|
||||
import { h, render } from "https://esm.sh/preact@10.17.1";
|
||||
import { NavBar } from "./nav.tsx";
|
||||
import { InMemoryAccountContext } from "../lib/nostr-ts/nostr.ts";
|
||||
import { Datebase_View } from "../database.ts";
|
||||
import { fail } from "https://deno.land/std@0.176.0/testing/asserts.ts";
|
||||
import { testEventBus, testEventMarker, testEventsAdapter, testRelayAdapter } from "./_setup.test.ts";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
|
||||
const db = await test_db_view();
|
||||
|
||||
const ctx = InMemoryAccountContext.Generate();
|
||||
|
||||
render(
|
||||
<div class={tw`h-screen`}>
|
||||
<NavBar emit={testEventBus.emit} publicKey={ctx.publicKey} profileGetter={db} />
|
||||
<NavBar emit={testEventBus.emit} publicKey={ctx.publicKey} profileGetter={db} isMobile={true} />
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
|
||||
for await (const event of testEventBus.onChange()) {
|
||||
console.log(event);
|
||||
}
|
||||
13
UI/nav.tsx
13
UI/nav.tsx
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { ComponentChild, Fragment, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
import {
|
||||
@ -56,20 +55,20 @@ type NavTab = {
|
||||
export class NavBar extends Component<Props, State> {
|
||||
styles = {
|
||||
container:
|
||||
tw`h-full w-16 flex flex-col gap-y-4 overflow-y-auto bg-[${PrimaryBackgroundColor}] py-8 items-center`,
|
||||
`h-full w-16 flex flex-col gap-y-4 overflow-y-auto bg-[${PrimaryBackgroundColor}] py-8 items-center`,
|
||||
icons: (active: boolean, fill?: boolean) => (
|
||||
tw`w-6 h-6 ${fill ? "fill-current" : "stroke-current"} text-[${
|
||||
`w-6 h-6 ${fill ? "fill-current" : "stroke-current"} text-[${
|
||||
active ? PrimaryTextColor : SecondaryTextColor
|
||||
}]`
|
||||
),
|
||||
avatar: tw`w-12 h-12`,
|
||||
avatar: `w-12 h-12`,
|
||||
tabsContainer:
|
||||
tw`last:flex-1 last:flex last:items-end last:flex last:flex-col last:justify-end last:gap-y-4`,
|
||||
`last:flex-1 last:flex last:items-end last:flex last:flex-col last:justify-end last:gap-y-4`,
|
||||
tabs: (active: boolean) =>
|
||||
tw`rounded-lg w-10 h-10 ${
|
||||
`rounded-lg w-10 h-10 ${
|
||||
active ? `bg-[${SecondaryBackgroundColor}]` : ""
|
||||
} hover:bg-[${SecondaryBackgroundColor}] ${CenterClass} ${NoOutlineClass}`,
|
||||
mobileContainer: tw`h-[4.5rem] flex justify-evenly bg-[${PrimaryBackgroundColor}] items-start pt-2`,
|
||||
mobileContainer: `h-[4.5rem] flex justify-evenly bg-[${PrimaryBackgroundColor}] items-start pt-2`,
|
||||
};
|
||||
|
||||
state: State = {
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { ProfileData } from "../features/profile.ts";
|
||||
import {
|
||||
cardBackgroundColor,
|
||||
@ -23,9 +22,9 @@ export function NoteCard(props: {
|
||||
const { profileData, event, emit, publicKey } = props;
|
||||
const styles = {
|
||||
container:
|
||||
tw`px-4 mb-1 mobile:px-2 py-1 text-[${PrimaryTextColor}] rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] w-4/5 mobile:w-full`,
|
||||
name: tw`truncate font-bold text-[${LinkColor}] text-base cursor-pointer hover:underline`,
|
||||
content: tw`text-sm text-[${HintTextColor}] hover:underline cursor-pointer`,
|
||||
`px-4 mb-1 mobile:px-2 py-1 text-[${PrimaryTextColor}] rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] w-4/5 mobile:w-full`,
|
||||
name: `truncate font-bold text-[${LinkColor}] text-base cursor-pointer hover:underline`,
|
||||
content: `text-sm text-[${HintTextColor}] hover:underline cursor-pointer`,
|
||||
};
|
||||
|
||||
const viewNoteDetail = () =>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { emitFunc } from "../event-bus.ts";
|
||||
import { ProfileData } from "../features/profile.ts";
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
@ -17,14 +16,14 @@ export function ProfileCard(props: {
|
||||
const { profileData, publicKey, emit } = props;
|
||||
const styles = {
|
||||
container:
|
||||
tw`px-4 mb-1 mobile:px-2 py-1 text-[${HintTextColor}] hover:underline rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] max-w-sm cursor-pointer gorup`,
|
||||
`px-4 mb-1 mobile:px-2 py-1 text-[${HintTextColor}] hover:underline rounded bg-[${cardBackgroundColor}] border-l-2 border-[${HintLinkColor}] max-w-sm cursor-pointer gorup`,
|
||||
profile: {
|
||||
container: tw`flex items-center`,
|
||||
avatar: tw`w-8 h-8`,
|
||||
name: tw`text-base font-bold truncate ml-2 text-[${LinkColor}]`,
|
||||
container: `flex items-center`,
|
||||
avatar: `w-8 h-8`,
|
||||
name: `text-base font-bold truncate ml-2 text-[${LinkColor}]`,
|
||||
},
|
||||
divider: tw`${DividerClass} my-[0.5rem]`,
|
||||
about: tw`text-sm`,
|
||||
divider: `${DividerClass} my-[0.5rem]`,
|
||||
about: `text-sm`,
|
||||
};
|
||||
|
||||
const onClick = () =>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { Component, ComponentChildren, Fragment, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { CopyButton } from "./components/copy-button.tsx";
|
||||
import { CenterClass, InputClass } from "./components/tw.ts";
|
||||
import {
|
||||
@ -44,12 +43,12 @@ export type RelayDetailItem = {
|
||||
|
||||
export class RelayDetail extends Component<Props, State> {
|
||||
styles = {
|
||||
container: tw`bg-[${SecondaryBackgroundColor}] p-8`,
|
||||
title: tw`pt-8 text-[${PrimaryTextColor}]`,
|
||||
error: tw`text-[${ErrorColor}] ${CenterClass}`,
|
||||
container: `bg-[${SecondaryBackgroundColor}] p-8`,
|
||||
title: `pt-8 text-[${PrimaryTextColor}]`,
|
||||
error: `text-[${ErrorColor}] ${CenterClass}`,
|
||||
header: {
|
||||
container: tw`text-lg flex text-[${PrimaryTextColor}] pb-4`,
|
||||
icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] stroke-current`,
|
||||
container: `text-lg flex text-[${PrimaryTextColor}] pb-4`,
|
||||
icon: `w-8 h-8 mr-4 text-[${TitleIconColor}] stroke-current`,
|
||||
},
|
||||
};
|
||||
|
||||
@ -178,10 +177,10 @@ function AuthorField(props: {
|
||||
profileGetter: ProfileGetter;
|
||||
}) {
|
||||
const styles = {
|
||||
container: tw`flex items-center ${InputClass}`,
|
||||
avatar: tw`h-8 w-8 mr-2`,
|
||||
icon: tw`w-4 h-4 text-[${HintTextColor}] fill-current rotate-180`,
|
||||
name: tw`overflow-x-auto flex-1`,
|
||||
container: `flex items-center ${InputClass}`,
|
||||
avatar: `h-8 w-8 mr-2`,
|
||||
icon: `w-4 h-4 text-[${HintTextColor}] fill-current rotate-180`,
|
||||
name: `overflow-x-auto flex-1`,
|
||||
};
|
||||
|
||||
const pubkey = PublicKey.FromString(props.publicKey);
|
||||
@ -206,9 +205,9 @@ function TextField(props: {
|
||||
text: string;
|
||||
}) {
|
||||
const styles = {
|
||||
container: tw`relative ${InputClass} resize-none flex p-0 mt-4`,
|
||||
pre: tw`whitespace-pre flex-1 overflow-x-auto px-4 py-3`,
|
||||
copyButton: tw`w-14 ${CenterClass}`,
|
||||
container: `relative ${InputClass} resize-none flex p-0 mt-4`,
|
||||
pre: `whitespace-pre flex-1 overflow-x-auto px-4 py-3`,
|
||||
copyButton: `w-14 ${CenterClass}`,
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { createRef, h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import {
|
||||
DividerBackgroundColor,
|
||||
@ -48,16 +47,16 @@ export class Search extends Component<Props, State> {
|
||||
state: State = { searchResults: [] };
|
||||
inputRef = createRef();
|
||||
styles = {
|
||||
container: tw`flex flex-col h-full w-full bg-[${SecondaryBackgroundColor}]`,
|
||||
container: `flex flex-col h-full w-full bg-[${SecondaryBackgroundColor}]`,
|
||||
searchInput:
|
||||
tw`p-2 w-full border-b border-[${DividerBackgroundColor}] focus-visible:outline-none bg-[${SecondaryBackgroundColor}] text-[${PrimaryTextColor}] placeholder-[${PlaceholderColor}]`,
|
||||
`p-2 w-full border-b border-[${DividerBackgroundColor}] focus-visible:outline-none bg-[${SecondaryBackgroundColor}] text-[${PrimaryTextColor}] placeholder-[${PlaceholderColor}]`,
|
||||
result: {
|
||||
container: tw`flex-1 list-none p-1 overflow-y-auto`,
|
||||
container: `flex-1 list-none p-1 overflow-y-auto`,
|
||||
item: {
|
||||
container:
|
||||
tw`w-full flex items-center px-4 py-2 text-[#B8B9BF] hover:bg-[#404249] rounded cursor-pointer`,
|
||||
avatar: tw`w-8 h-8 mr-2`,
|
||||
text: tw`truncate`,
|
||||
`w-full flex items-center px-4 py-2 text-[#B8B9BF] hover:bg-[#404249] rounded cursor-pointer`,
|
||||
avatar: `w-8 h-8 mr-2`,
|
||||
text: `truncate`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
/** @jsx h */
|
||||
import { h } from "https://esm.sh/preact@10.17.1";
|
||||
import { tw } from "https://esm.sh/twind@0.16.16";
|
||||
import { Avatar } from "./components/avatar.tsx";
|
||||
import { PublicKey } from "../lib/nostr-ts/key.ts";
|
||||
import { ProfileData } from "../features/profile.ts";
|
||||
@ -21,37 +20,37 @@ type UserDetailProps = {
|
||||
|
||||
export function UserDetail(props: UserDetailProps) {
|
||||
return (
|
||||
<div class={tw`p-2 relative text-[#7A818C]`}>
|
||||
<div class={`p-2 relative text-[#7A818C]`}>
|
||||
<Avatar
|
||||
class={tw`w-64 h-64 m-auto mt-8`}
|
||||
class={`w-64 h-64 m-auto mt-8`}
|
||||
picture={props.targetUserProfile.picture}
|
||||
/>
|
||||
<h1 class={tw`text-[#F3F4EA] truncate text-[1.4rem] mt-8 max-w-full text-center`}>
|
||||
<h1 class={`text-[#F3F4EA] truncate text-[1.4rem] mt-8 max-w-full text-center`}>
|
||||
{props.targetUserProfile.name || props.pubkey.bech32()}
|
||||
</h1>
|
||||
<div class={tw`flex items-start overflow-hidden w-full mt-8 group`}>
|
||||
<div class={`flex items-start overflow-hidden w-full mt-8 group`}>
|
||||
<KeyIcon
|
||||
class={tw`w-6 h-6 mr-2`}
|
||||
class={`w-6 h-6 mr-2`}
|
||||
style={{
|
||||
fill: "#7A818C",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
class={tw`flex-1 text-[#7A818C] group-hover:text-[#F3F4EA] break-words overflow-hidden`}
|
||||
class={`flex-1 text-[#7A818C] group-hover:text-[#F3F4EA] break-words overflow-hidden`}
|
||||
>
|
||||
{props.pubkey.bech32()}
|
||||
</p>
|
||||
<CopyButton text={props.pubkey.bech32()} />
|
||||
</div>
|
||||
<div class={tw`flex items-start overflow-hidden w-full mt-1 group`}>
|
||||
<div class={`flex items-start overflow-hidden w-full mt-1 group`}>
|
||||
<KeyIcon
|
||||
class={tw`w-6 h-6 mr-2`}
|
||||
class={`w-6 h-6 mr-2`}
|
||||
style={{
|
||||
fill: "#7A818C",
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
class={tw`flex-1 text-[#7A818C] group-hover:text-[#F3F4EA] break-words overflow-hidden`}
|
||||
class={`flex-1 text-[#7A818C] group-hover:text-[#F3F4EA] break-words overflow-hidden`}
|
||||
>
|
||||
{props.pubkey.hex}
|
||||
</p>
|
||||
@ -59,9 +58,9 @@ export function UserDetail(props: UserDetailProps) {
|
||||
</div>
|
||||
{props.targetUserProfile.about
|
||||
? (
|
||||
<div class={tw`flex items-start overflow-hidden w-full mt-4 group`}>
|
||||
<div class={`flex items-start overflow-hidden w-full mt-4 group`}>
|
||||
<UserIcon
|
||||
class={tw`w-6 h-6 mr-2`}
|
||||
class={`w-6 h-6 mr-2`}
|
||||
style={{
|
||||
stroke: "#7A818C",
|
||||
strokeWidth: "1.5",
|
||||
@ -69,7 +68,7 @@ export function UserDetail(props: UserDetailProps) {
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
class={tw`flex-1 break-words overflow-hidden`}
|
||||
class={`flex-1 break-words overflow-hidden`}
|
||||
>
|
||||
{TextWithLinks({ text: props.targetUserProfile.about })}
|
||||
</p>
|
||||
@ -78,9 +77,9 @@ export function UserDetail(props: UserDetailProps) {
|
||||
: undefined}
|
||||
{props.targetUserProfile.website
|
||||
? (
|
||||
<div class={tw`flex items-start overflow-hidden w-full mt-4 group`}>
|
||||
<div class={`flex items-start overflow-hidden w-full mt-4 group`}>
|
||||
<HomeIcon
|
||||
class={tw`w-6 h-6 mr-2`}
|
||||
class={`w-6 h-6 mr-2`}
|
||||
style={{
|
||||
stroke: "#7A818C",
|
||||
strokeWidth: "1.5",
|
||||
@ -88,7 +87,7 @@ export function UserDetail(props: UserDetailProps) {
|
||||
}}
|
||||
/>
|
||||
<p
|
||||
class={tw`flex-1 break-words overflow-hidden`}
|
||||
class={`flex-1 break-words overflow-hidden`}
|
||||
>
|
||||
{TextWithLinks({ text: props.targetUserProfile.website })}
|
||||
</p>
|
||||
@ -108,7 +107,7 @@ function TextWithLinks({ text }: { text: string }) {
|
||||
if (part instanceof URL) {
|
||||
return (
|
||||
<a
|
||||
class={tw`text-[${LinkColor}] hover:text-[#F3F4EA]`}
|
||||
class={`text-[${LinkColor}] hover:text-[#F3F4EA]`}
|
||||
key={index}
|
||||
href={part.href}
|
||||
target="_blank"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user