fix bugs with posts

eslint.config.mjs

@@ -40,16 +40,10 @@ export default [
  "brace-style": ["error", "stroustrup"],
  quotes: ["error", "double"],
 
- indent: [
- "error",
- 2,
- {
- SwitchCase: 1,
- },
- ],
+ indent: "off",
 
  semi: ["error", "always"],
- "comma-dangle": ["error", "always-multiline"],
+ "comma-dangle": "off",
  },
  },
  solid,

src/components/PostsArea.tsx

@@ -734,7 +734,11 @@ function PostNotification(props: { notification: RawPostNotification }) {
  >
  <strong
  class={notificationUsernameStyles}
- style="display: inline-block; max-width: 200px; vertical-align: bottom;"
+ style={{
+ display: "inline-block",
+ "max-width": "200px",
+ "vertical-align": "bottom",
+ }}
  >
  {"username"}
  </strong>
@@ -782,7 +786,11 @@ function PostNotification(props: { notification: RawPostNotification }) {
  >
  <strong
  class={notificationUsernameStyles}
- style="display: inline-block; max-width: 200px; vertical-align: bottom;"
+ style={{
+ display: "inline-block",
+ "max-width": "200px",
+ "vertical-align": "bottom",
+ }}
  >
  {"username"}
  </strong>
@@ -912,7 +920,7 @@ export function ViewPostModal(props: { close(): void }) {
  <Show when={post()}>
  <FlexColumn gap={6}>
  <For each={commentToList()}>
- {(post) => <PostItem showFullDate disableClick post={post!} />}
+ {(post) => <PostItem showFullDate post={post!} />}
  </For>
  </FlexColumn>
  <FlexRow

src/components/post-area/PostItem.tsx

@@ -41,7 +41,7 @@ export function PostItem(props: {
  post: Post;
 }) {
  const { posts } = useStore();
- const [, setSearchParams] = useSearchParams<{ postId: string }>();
+ const [search, setSearchParams] = useSearchParams<{ postId: string }>();
  const [hovered, setHovered] = createSignal(false);
 
  const replyingTo = createMemo(() => {
@@ -61,6 +61,8 @@ export function PostItem(props: {
  };
 
  const onClick = (event: any) => {
+ const alreadyOpened = search.postId === props.post.id;
+ if (alreadyOpened) return;
  if (props.disableClick) return;
  if (props.post.deleted) return;
  if (event.target.closest(".button")) return;

src/components/ui/legacy-modal/LegacyModal.tsx

@@ -25,35 +25,50 @@ interface Props {
 
 export default function LegacyModal(props: Props) {
  const { isMobileWidth } = useWindowProperties();
- let mouseDownTarget: HTMLDivElement | null = null;
 
- const modalContainerStyle = () =>
- ({
- ...(props.maxWidth
- ? {
- "max-width": `${props.maxWidth}px`,
- }
- : {}),
+ const modalContainerStyle = () => {
+ const s = {} as JSX.CSSProperties;
+ if (props.maxWidth) {
+ s["max-width"] = `${props.maxWidth}px`;
+ }
 
- ...(props.maxHeight
- ? {
- "max-height": `${props.maxHeight}px`,
- height: `${isMobileWidth() ? "calc(100% - 20px)" : "100%"}`,
- }
- : {}),
- } as JSX.CSSProperties);
+ if (props.maxHeight) {
+ s["max-height"] = `${props.maxHeight}px`;
+ s.height = `${isMobileWidth() ? "calc(100% - 20px)" : "100%"}`;
+ }
 
+ return s;
+ };
+ let startClick = { x: 0, y: 0 };
+ let textSelected = false;
  const onBackgroundClick = (event: MouseEvent) => {
  if (props.ignoreBackgroundClick) return;
- if (mouseDownTarget?.closest(".modal")) return;
+ if (event.target !== event.currentTarget) return;
+
+ const xDistance = Math.abs(startClick.x - event.clientX);
+ const yDistance = Math.abs(startClick.y - event.clientY);
+
+ const clickedPos = xDistance > 3 || yDistance > 3;
+ if (clickedPos || textSelected) {
+ return;
+ }
+
  props.close?.();
  };
+
+ const onMouseDown = (event: MouseEvent) => {
+ startClick = {
+ x: event.clientX,
+ y: event.clientY,
+ };
+ textSelected = !!window.getSelection()?.toString();
+ };
  return (
  <Portal>
  <div
  class={classNames(styles.backgroundContainer, "modal-bg")}
  onClick={onBackgroundClick}
- onMouseDown={(e) => (mouseDownTarget = e.target as HTMLDivElement)}
+ onMouseDown={onMouseDown}
  >
  <div
  style={modalContainerStyle()}