diff --git a/src/components/post/timestamp/index.ts b/src/components/post/timestamp/index.ts
new file mode 100644
index 00000000..8fe28740
--- /dev/null
+++ b/src/components/post/timestamp/index.ts
@@ -0,0 +1 @@
+export { default } from './timestamp';
diff --git a/src/components/post/timestamp/timestamp.tsx b/src/components/post/timestamp/timestamp.tsx
new file mode 100644
index 00000000..d5b71828
--- /dev/null
+++ b/src/components/post/timestamp/timestamp.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { getFormattedDate, getFormattedTimeAgo } from '../../../lib/utils/time-utils';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
+
+const Timestamp = ({ timestamp }: { timestamp: number }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setIsOpen,
+ placement: 'top',
+ whileElementsMounted: autoUpdate,
+ middleware: [
+ offset(5),
+ flip({
+ fallbackAxisSideDirection: 'start',
+ }),
+ shift(),
+ ],
+ });
+
+ const hover = useHover(context, { move: false, delay: { open: 250, close: 0 } });
+ const focus = useFocus(context);
+ const dismiss = useDismiss(context);
+ const role = useRole(context, { role: 'tooltip' });
+
+ const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+ return (
+ <>
+
+ {getFormattedDate(timestamp)}
+
+
+ {isOpen && (
+
+ {getFormattedTimeAgo(timestamp)}
+
+ )}
+
+
+ );
+};
+
+export default Timestamp;
diff --git a/src/hooks/use-edit-comment-privileges.ts b/src/hooks/use-author-privileges.ts
similarity index 78%
rename from src/hooks/use-edit-comment-privileges.ts
rename to src/hooks/use-author-privileges.ts
index 92b43b8c..09b40d08 100644
--- a/src/hooks/use-edit-comment-privileges.ts
+++ b/src/hooks/use-author-privileges.ts
@@ -1,11 +1,11 @@
import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
-interface EditCommentPrivileges {
+interface AuthorPrivilegesProps {
commentAuthorAddress: string;
subplebbitAddress: string;
}
-const useEditCommentPrivileges = ({ commentAuthorAddress, subplebbitAddress }: EditCommentPrivileges) => {
+const useAuthorPrivileges = ({ commentAuthorAddress, subplebbitAddress }: AuthorPrivilegesProps) => {
const accountAuthorAddress = useAccount()?.author?.address;
const { roles } = useSubplebbit({ subplebbitAddress }) || {};
@@ -15,7 +15,7 @@ const useEditCommentPrivileges = ({ commentAuthorAddress, subplebbitAddress }: E
const isAccountMod = accountAuthorRole === 'admin' || accountAuthorRole === 'owner' || accountAuthorRole === 'moderator';
const isAccountCommentAuthor = accountAuthorAddress === commentAuthorAddress;
- return { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor };
+ return { isCommentAuthorMod, isAccountMod, isAccountCommentAuthor, commentAuthorRole, accountAuthorRole };
};
-export default useEditCommentPrivileges;
+export default useAuthorPrivileges;
diff --git a/src/hooks/use-popular-posts.ts b/src/hooks/use-popular-posts.ts
index 65360890..d8aa7e42 100644
--- a/src/hooks/use-popular-posts.ts
+++ b/src/hooks/use-popular-posts.ts
@@ -10,9 +10,9 @@ const usePopularPosts = (subplebbits: Subplebbit[]) => {
const allPosts: Comment[] = [];
let postsPerSub = 1;
- if (subplebbits.length == 2) {
+ if (subplebbits.length === 2) {
postsPerSub = 4;
- } else if (subplebbits.length == 3) {
+ } else if (subplebbits.length === 3) {
postsPerSub = 3;
} else if (subplebbits.length >= 4 && subplebbits.length < 8) {
postsPerSub = 2;
diff --git a/src/hooks/use-replies.ts b/src/hooks/use-replies.ts
index 6af6b66b..bc59fc0a 100644
--- a/src/hooks/use-replies.ts
+++ b/src/hooks/use-replies.ts
@@ -2,7 +2,7 @@ import { useMemo, useCallback } from 'react';
import { Comment, useAccountComments } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils';
-const useRepliesAndAccountReplies = (comment: Comment) => {
+const useReplies = (comment: Comment) => {
// flatten all replies including nested ones from the original comment
const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]);
@@ -45,4 +45,4 @@ const useRepliesAndAccountReplies = (comment: Comment) => {
return repliesAndNotYetPublishedReplies;
};
-export default useRepliesAndAccountReplies;
+export default useReplies;
diff --git a/src/index.css b/src/index.css
index 938cfbd0..d62858cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,6 +26,42 @@ hr {
color: var(--post-greentext-color);
}
+.highlight {
+ background: var(--reply-highlight-background-color) !important;
+}
+
+.capitalize {
+ text-transform: capitalize;
+}
+
+.tooltip {
+ position: absolute;
+ background-color: #181f24;
+ font-size: 11px;
+ line-height: 13px;
+ padding: 3px 6px;
+ z-index: 100000;
+ word-wrap: break-word;
+ white-space: pre-line;
+ max-width: 400px;
+ color: #fff;
+ text-align: center;
+}
+
+.tooltip::before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ position: absolute;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 4px solid #181f24;
+ margin-left: -4px;
+ bottom: -4px;
+ left: 50%;
+}
+
@media (max-width: 640px) {
.button {
font-size: var(--button-font-size-mobile);
diff --git a/src/lib/utils/time-utils.ts b/src/lib/utils/time-utils.ts
index 05ca793b..5c332bd8 100644
--- a/src/lib/utils/time-utils.ts
+++ b/src/lib/utils/time-utils.ts
@@ -33,3 +33,38 @@ export const getFormattedDate = (commentTimestamp: number) => {
}
return string;
};
+
+export const getFormattedTimeAgo = (unixTimestamp: number): string => {
+ const currentTime = Date.now() / 1000;
+ const timeDifference = currentTime - unixTimestamp;
+ const t = i18next.t;
+
+ if (timeDifference < 120) {
+ return t('time_1_minute_ago');
+ }
+ if (timeDifference < 3600) {
+ return t('time_x_minutes_ago', { count: Math.floor(timeDifference / 60) });
+ }
+ if (timeDifference < 7200) {
+ return t('time_1_hour_ago');
+ }
+ if (timeDifference < 86400) {
+ return t('time_x_hours_ago', { count: Math.floor(timeDifference / 3600) });
+ }
+ if (timeDifference < 172800) {
+ return t('time_1_day_ago');
+ }
+ if (timeDifference < 2592000) {
+ return t('time_x_days_ago', { count: Math.floor(timeDifference / 86400) });
+ }
+ if (timeDifference < 5184000) {
+ return t('time_1_month_ago');
+ }
+ if (timeDifference < 31104000) {
+ return t('time_x_months_ago', { count: Math.floor(timeDifference / 2592000) });
+ }
+ if (timeDifference < 62208000) {
+ return t('time_1_year_ago');
+ }
+ return t('time_x_years_ago', { count: Math.floor(timeDifference / 31104000) });
+};
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 080d19ec..a990c9c5 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -45,12 +45,13 @@ export const isRulesView = (pathname: string, params: ParamsType): boolean => {
};
export const isSettingsView = (pathname: string, params: ParamsType): boolean => {
- const { subplebbitAddress, commentCid } = params;
+ const { accountCommentIndex, commentCid, subplebbitAddress } = params;
const decodedPathname = decodeURIComponent(pathname);
return (
decodedPathname === `/p/${subplebbitAddress}/c/${commentCid}/settings` ||
decodedPathname === `/p/${subplebbitAddress}/description/settings` ||
- decodedPathname === `/p/${subplebbitAddress}/rules/settings`
+ decodedPathname === `/p/${subplebbitAddress}/rules/settings` ||
+ decodedPathname === `/profile/${accountCommentIndex}/settings`
);
};
diff --git a/src/themes.css b/src/themes.css
index 83197713..54c95b97 100644
--- a/src/themes.css
+++ b/src/themes.css
@@ -25,6 +25,12 @@
--catalog-post-menu-desktop-btn-hover-color: red;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-subject-color: #cc1105;
+ --catalog-post-preview-author-color: #00a550;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #f0e0d6;
@@ -226,6 +232,11 @@
--catalog-post-menu-desktop-btn-hover-color: #d00;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-author-color: #00a550;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #d6daf0;
@@ -421,6 +432,12 @@
--catalog-post-menu-desktop-btn-hover-color: red;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-subject-color: #cc1105;
+ --catalog-post-preview-author-color: #00a550;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #f0e0d6;
@@ -590,6 +607,11 @@
--catalog-post-menu-desktop-btn-hover-color: red;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-author-color: #00a550;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #d6daf0;
@@ -766,12 +788,18 @@
--catalog-post-menu-desktop-btn-hover-color: #5f89ac;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-subject-color: #b294bb;
+ --catalog-post-preview-author-color: #00a550;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #282a2e;
--challenge-modal-border: 1px solid #111;
--challenge-modal-title-background-color: #282a2e;
- --challenge-modal-title-text-color: #c5c8c6;
+ --challenge-modal-title-text-color: #b0cab9;
--challenge-modal-title-border: unset;
--challenge-modal-title-font-size: 10pt;
--challenge-modal-title-font-weight: 700;
@@ -969,6 +997,10 @@
--catalog-post-menu-desktop-btn-hover-color: #f30;
--catalog-post-menu-desktop-btn-opacity: 0.5;
--catalog-post-menu-desktop-btn-hover-opacity: 1;
+ --catalog-post-preview-background-color: #181f24;
+ --catalog-post-preview-color: #dedede;
+ --catalog-post-preview-last-color: #bbbfbd;
+ --catalog-post-preview-author-capcode-color: purple;
/* challenge modal */
--challenge-modal-background-color: #ddd;
diff --git a/src/views/home/boards-box/boards-box.tsx b/src/views/home/boards-box/boards-box.tsx
index ee7ce7aa..aef5bbed 100644
--- a/src/views/home/boards-box/boards-box.tsx
+++ b/src/views/home/boards-box/boards-box.tsx
@@ -197,7 +197,7 @@ const BoardsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebb
return (
-
{t('boards')}
+ {t('boards')}
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css
index 0bad3b19..a7855eba 100644
--- a/src/views/home/home.module.css
+++ b/src/views/home/home.module.css
@@ -150,10 +150,6 @@
content: '✔ ';
}
-.capitalize {
- text-transform: capitalize;
-}
-
.list a {
color: var(--homepage-box-link-text-color);
text-decoration: var(--homepage-box-link-text-decoration);
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 84456ae4..3c61045d 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -88,7 +88,7 @@ const Stats = ({ multisub, subplebbitAddresses }: { multisub: any; subplebbitAdd
return (
-
{t('stats')}
+ {t('stats')}
{enoughStats ? (
@@ -143,7 +143,7 @@ const Footer = () => {
-
+
Twitter
diff --git a/src/views/home/popular-threads-box/popular-threads-box.tsx b/src/views/home/popular-threads-box/popular-threads-box.tsx
index 76b13a1e..338dc4c8 100644
--- a/src/views/home/popular-threads-box/popular-threads-box.tsx
+++ b/src/views/home/popular-threads-box/popular-threads-box.tsx
@@ -63,7 +63,7 @@ const PopularThreadsBox = ({ multisub, subplebbits }: { multisub: Subplebbit[];
return (
-
{t('popular_threads')}
+ {t('popular_threads')}
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index 0aab5e3b..4b25fd9c 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/src/views/pending-post/pending-post.tsx
@@ -1,13 +1,18 @@
import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
+import { isSettingsView } from '../../lib/utils/view-utils';
import Post from '../../components/post';
+import SettingsModal from '../../components/settings-modal';
const PendingPost = () => {
const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
const post = useAccountComment({ commentIndex });
const navigate = useNavigate();
+ const location = useLocation();
+ const params = useParams();
+ const isInSettingsView = isSettingsView(location.pathname, params);
useEffect(() => window.scrollTo(0, 0), []);
@@ -17,7 +22,12 @@ const PendingPost = () => {
}
}, [post, navigate]);
- return
;
+ return (
+ <>
+ {isInSettingsView &&
}
+
;
+
+ );
};
export default PendingPost;
: thumbnailComponent}