2023-07-27 08:51:53 +00:00
|
|
|
/** @jsx h */
|
|
|
|
import { h } from "https://esm.sh/preact@10.11.3";
|
|
|
|
import { tw } from "https://esm.sh/twind@0.16.16";
|
|
|
|
import { DirectMessagePanelUpdate, MessagePanel } from "./message-panel.tsx";
|
|
|
|
import { Model } from "./app_model.ts";
|
|
|
|
import { NostrAccountContext } from "https://raw.githubusercontent.com/BlowaterNostr/nostr.ts/main/nostr.ts";
|
|
|
|
import { Database_Contextual_View } from "../database.ts";
|
|
|
|
import { EventEmitter } from "../event-bus.ts";
|
|
|
|
import { AllUsersInformation, ProfilesSyncer } from "./contact-list.ts";
|
|
|
|
import { EventSyncer } from "./event_syncer.ts";
|
|
|
|
import { PrimaryTextColor } from "./style/colors.ts";
|
|
|
|
import { EditorEvent } from "./editor.tsx";
|
|
|
|
import { PinContact, UnpinContact } from "../nostr.ts";
|
2023-07-27 16:31:05 +00:00
|
|
|
import { CenterClass, LinearGradientsClass } from "./components/tw.ts";
|
2023-07-27 08:51:53 +00:00
|
|
|
|
2023-07-27 16:31:05 +00:00
|
|
|
export type SocialUpdates =
|
|
|
|
| SocialFilterChanged_content
|
|
|
|
| SocialFilterChanged_authors
|
|
|
|
| SocialFilterChanged_adding_author
|
|
|
|
| SocialFilterChanged_remove_author;
|
2023-07-27 08:51:53 +00:00
|
|
|
|
|
|
|
type SocialFilterChanged_content = {
|
|
|
|
type: "SocialFilterChanged_content";
|
|
|
|
content: string;
|
|
|
|
};
|
|
|
|
|
|
|
|
type SocialFilterChanged_authors = {
|
|
|
|
type: "SocialFilterChanged_authors";
|
2023-07-27 16:31:05 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
type SocialFilterChanged_adding_author = {
|
|
|
|
type: "SocialFilterChanged_adding_author";
|
|
|
|
value: string;
|
|
|
|
};
|
|
|
|
|
|
|
|
type SocialFilterChanged_remove_author = {
|
|
|
|
type: "SocialFilterChanged_remove_author";
|
|
|
|
value: string;
|
2023-07-27 08:51:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export function SocialPanel(props: {
|
|
|
|
focusedContent: any;
|
|
|
|
model: Model;
|
|
|
|
ctx: NostrAccountContext;
|
|
|
|
db: Database_Contextual_View;
|
|
|
|
eventEmitter: EventEmitter<
|
|
|
|
SocialUpdates | EditorEvent | DirectMessagePanelUpdate | PinContact | UnpinContact
|
|
|
|
>;
|
|
|
|
profileSyncer: ProfilesSyncer;
|
|
|
|
eventSyncer: EventSyncer;
|
|
|
|
allUsersInfo: AllUsersInformation;
|
|
|
|
}) {
|
|
|
|
const model = props.model;
|
|
|
|
|
|
|
|
const messages = [];
|
|
|
|
for (const thread of model.social.threads) {
|
2023-07-27 16:31:05 +00:00
|
|
|
// content
|
2023-07-27 08:51:53 +00:00
|
|
|
if (!thread.root.content.toLowerCase().includes(model.social.filter.content.toLowerCase())) {
|
|
|
|
continue;
|
|
|
|
}
|
2023-07-27 16:31:05 +00:00
|
|
|
|
|
|
|
// authors
|
|
|
|
let matched_at_least_one_author = false;
|
|
|
|
for (const author of model.social.filter.author) {
|
|
|
|
if (thread.root.author.name?.toLowerCase().includes(author.toLowerCase())) {
|
|
|
|
matched_at_least_one_author = true;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (model.social.filter.author.size > 0 && !matched_at_least_one_author) {
|
2023-07-27 08:51:53 +00:00
|
|
|
continue;
|
|
|
|
}
|
2023-07-27 16:31:05 +00:00
|
|
|
|
2023-07-27 08:51:53 +00:00
|
|
|
messages.push(thread);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
class={tw`flex-1 overflow-hidden flex-col flex bg-[#313338]`}
|
|
|
|
>
|
2023-07-27 16:31:05 +00:00
|
|
|
{Filter(props)}
|
2023-07-27 08:51:53 +00:00
|
|
|
<div class={tw`flex-1 overflow-x-auto`}>
|
|
|
|
<MessagePanel
|
|
|
|
focusedContent={props.focusedContent}
|
|
|
|
editorModel={model.social.editor}
|
|
|
|
myPublicKey={props.ctx.publicKey}
|
|
|
|
messages={messages}
|
|
|
|
rightPanelModel={model.rightPanelModel}
|
|
|
|
db={props.db}
|
|
|
|
eventEmitter={props.eventEmitter}
|
|
|
|
profilesSyncer={props.profileSyncer}
|
|
|
|
eventSyncer={props.eventSyncer}
|
|
|
|
allUserInfo={props.allUsersInfo.userInfos}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2023-07-27 16:31:05 +00:00
|
|
|
|
|
|
|
function Filter(
|
|
|
|
props: {
|
|
|
|
eventEmitter: EventEmitter<SocialUpdates>;
|
|
|
|
model: Model;
|
|
|
|
},
|
|
|
|
) {
|
|
|
|
const authors = [];
|
|
|
|
for (const author of props.model.social.filter.author) {
|
|
|
|
authors.push(
|
|
|
|
<div class={tw`flex mx-1 border border-indigo-600`}>
|
|
|
|
<p class={tw`mx-1`}>
|
|
|
|
{author}
|
|
|
|
</p>
|
|
|
|
<button
|
|
|
|
class={tw`text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
|
|
|
|
onClick={(e) => {
|
|
|
|
props.eventEmitter.emit({
|
|
|
|
type: "SocialFilterChanged_remove_author",
|
|
|
|
value: author,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
X
|
|
|
|
</button>
|
|
|
|
</div>,
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div class={tw`flex-col text-[${PrimaryTextColor}] ml-5 my-3`}>
|
|
|
|
<p>Filter</p>
|
|
|
|
<div class={tw`flex-col`}>
|
|
|
|
<div class={tw`flex`}>
|
|
|
|
<p class={tw`mr-3`}>Content</p>
|
|
|
|
<input
|
|
|
|
class={tw`text-black`}
|
|
|
|
onInput={(e) => {
|
|
|
|
props.eventEmitter.emit({
|
|
|
|
type: "SocialFilterChanged_content",
|
|
|
|
content: e.currentTarget.value,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
value={props.model.social.filter.content}
|
|
|
|
>
|
|
|
|
</input>
|
|
|
|
</div>
|
|
|
|
<div class={tw`flex mt-3`}>
|
|
|
|
<p class={tw`mr-3`}>Authors</p>
|
|
|
|
{authors}
|
|
|
|
<input
|
|
|
|
class={tw`text-black`}
|
|
|
|
onInput={(e) => {
|
|
|
|
props.eventEmitter.emit({
|
|
|
|
type: "SocialFilterChanged_adding_author",
|
|
|
|
value: e.currentTarget.value,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
value={props.model.social.filter.adding_author}
|
|
|
|
>
|
|
|
|
</input>
|
|
|
|
<div
|
|
|
|
class={tw`ml-3 rounded-lg ${LinearGradientsClass}`}
|
|
|
|
>
|
|
|
|
<button
|
|
|
|
class={tw`w-[4.8rem] text-[${PrimaryTextColor}] rounded-lg ${CenterClass} bg-[#36393F] hover:bg-transparent font-bold`}
|
|
|
|
onClick={(e) => {
|
|
|
|
props.eventEmitter.emit({
|
|
|
|
type: "SocialFilterChanged_authors",
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Add
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|