New experimental Filtered Posts UI

src/components/status.css

@@ -50,9 +50,11 @@
 .status-pre-meta .name-text {
   display: inline;
 }
-.status-pre-meta .icon {
+.status-pre-meta > * {
-  color: var(--reblog-color);
   vertical-align: middle;
+}
+.status-reblog .status-pre-meta .icon {
+  color: var(--reblog-color);
   margin-right: 4px;
 }
 
@@ -103,6 +105,52 @@
   background-color: var(--outline-color);
 }
 
+.status.filtered {
+  padding-block: 12px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.status.filtered .status-filtered-info {
+  pointer-events: none;
+  flex-grow: 1;
+  font-size: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  mask-image: linear-gradient(to right, black 90%, transparent);
+  position: relative;
+}
+.status.filtered .avatar {
+  opacity: 0.5;
+  transition: opacity 0.7s ease-in;
+}
+.status.filtered:is(:hover, :focus, :active) .avatar {
+  opacity: 1;
+}
+.status.filtered :is(.status-filtered-info-1, .status-filtered-info-2) {
+  transition: all 0.2s ease-out;
+}
+.status.filtered:hover :is(.status-filtered-info-1, .status-filtered-info-2) {
+  transition-delay: 0.5s;
+}
+.status.filtered .status-filtered-info-1 {
+  opacity: 0.5;
+}
+.status.filtered:is(:hover, :focus, :active) .status-filtered-info-1 {
+  opacity: 0;
+}
+.status.filtered .status-filtered-info-2 {
+  opacity: 0;
+  transform: translateX(8px);
+  position: absolute;
+  left: 0;
+}
+.status.filtered:is(:hover, :focus, :active) .status-filtered-info-2 {
+  opacity: 0.75;
+  transform: translateX(0);
+}
+
 .status .container {
   flex-grow: 1;
   min-width: 0;
@@ -195,6 +243,27 @@
   );
   font-weight: bold;
 }
+.status-filtered-badge {
+  flex-shrink: 0;
+  display: inline-block;
+  color: var(--text-insignificant-color);
+  /* background: var(--bg-faded-color); */
+  /* border: var(--hairline-width) solid var(--bg-color); */
+  border: var(--hairline-width) dashed var(--text-insignificant-color);
+  border-radius: 4px;
+  padding: 4px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  font-weight: bold;
+  vertical-align: middle;
+}
+.status-filtered-badge.clickable:hover {
+  cursor: pointer;
+  color: var(--text-color);
+  border-color: var(--text-color);
+  background: var(--bg-color);
+}
 
 .status.large .content-container {
   margin-left: calc(-50px - 16px);
@@ -1002,3 +1071,37 @@ a.card:is(:hover, :focus) {
   text-transform: uppercase;
   font-size: 80%;
 }
+
+/* FILTERED */
+
+#filtered-status-peek main > p:first-child {
+  margin-top: 0;
+}
+
+#filtered-status-peek main .heading {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#filtered-status-peek .status-link {
+  border-radius: 16px;
+  border: var(--hairline-width) dashed var(--text-insignificant-color);
+  max-height: 33vh;
+  max-height: 33dvh;
+  overflow: hidden;
+}
+#filtered-status-peek .status-link .status {
+  pointer-events: none;
+  font-size: 90%;
+  max-height: 33vh;
+  max-height: 33dvh;
+  overflow: hidden;
+  mask-image: linear-gradient(black 80%, transparent 95%);
+}
+#filtered-status-peek .status-post-link {
+  float: right;
+  position: sticky;
+  bottom: 8px;
+  right: 8px;
+}

src/components/status.jsx

@@ -29,6 +29,7 @@ import niceDateTime from '../utils/nice-date-time';
 import shortenNumber from '../utils/shorten-number';
 import showToast from '../utils/show-toast';
 import states, { getStatus, saveStatus, statusKey } from '../utils/states';
+import statusPeek from '../utils/status-peek';
 import store from '../utils/store';
 import visibilityIconsMap from '../utils/visibility-icons-map';
 
@@ -72,6 +73,7 @@ function Status({
   contentTextWeight,
   enableTranslate,
   previewMode,
+  allowFilters,
 }) {
   if (skeleton) {
     return (
@@ -141,10 +143,21 @@ function Status({
     // Non-API props
     _deleted,
     _pinned,
+    _filtered,
   } = status;
 
   console.debug('RENDER Status', id, status?.account.displayName);
 
+  if (allowFilters && size !== 'l' && _filtered) {
+    return (
+      <FilteredStatus
+        status={status}
+        filterInfo={_filtered}
+        instance={instance}
+      />
+    );
+  }
+
   const createdAtDate = new Date(createdAt);
   const editedAtDate = new Date(editedAt);
 
@@ -183,6 +196,7 @@ function Status({
   };
 
   if (reblog) {
+    // If has statusID, means useItemID (cached in states)
     return (
       <div class="status-reblog" onMouseEnter={debugHover}>
         <div class="status-pre-meta">
@@ -191,7 +205,8 @@ function Status({
           boosted
         </div>
         <Status
-          status={reblog}
+          status={statusID ? null : reblog}
+          statusID={statusID ? reblog.id : null}
           instance={instance}
           size={size}
           contentTextWeight={contentTextWeight}
@@ -1655,8 +1670,8 @@ function nicePostURL(url) {
 const unfurlMastodonLink = throttle(_unfurlMastodonLink);
 
 const div = document.createElement('div');
-function getHTMLText(html) {
+export function getHTMLText(html) {
-  if (!html) return 0;
+  if (!html) return '';
   div.innerHTML = html
     .replace(/<\/p>/g, '</p>\n\n')
     .replace(/<\/li>/g, '</li>\n');
@@ -1687,4 +1702,94 @@ function safeBoundingBoxPadding() {
   return str;
 }
 
+function FilteredStatus({ status, filterInfo, instance }) {
+  const {
+    account: { avatar, avatarStatic },
+    createdAt,
+    visibility,
+  } = status;
+  const filterTitleStr = filterInfo?.titlesStr || '';
+  const createdAtDate = new Date(createdAt);
+  const statusPeekText = statusPeek(status);
+
+  const [showPeek, setShowPeek] = useState(false);
+  const bindLongPress = useLongPress(
+    () => {
+      setShowPeek(true);
+    },
+    {
+      captureEvent: true,
+      detect: 'touch',
+      cancelOnMovement: true,
+    },
+  );
+
+  return (
+    <div
+      title={statusPeekText}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        setShowPeek(true);
+      }}
+      {...bindLongPress()}
+    >
+      <article class="status filtered" tabindex="-1">
+        <b
+          class="status-filtered-badge clickable"
+          title={filterTitleStr}
+          onClick={(e) => {
+            e.preventDefault();
+            setShowPeek(true);
+          }}
+        >
+          Filtered
+        </b>{' '}
+        <Avatar url={avatarStatic || avatar} />
+        <span class="status-filtered-info">
+          <span class="status-filtered-info-1">
+            <NameText account={status.account} instance={instance} />{' '}
+            <Icon
+              icon={visibilityIconsMap[visibility]}
+              alt={visibilityText[visibility]}
+              size="s"
+            />{' '}
+            <RelativeTime datetime={createdAtDate} format="micro" />
+          </span>
+          <span class="status-filtered-info-2">{statusPeekText}</span>
+        </span>
+      </article>
+      {!!showPeek && (
+        <Modal
+          class="light"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              setShowPeek(false);
+            }
+          }}
+        >
+          <div id="filtered-status-peek" class="sheet">
+            <main tabIndex="-1">
+              <p class="heading">
+                <b class="status-filtered-badge">Filtered</b> {filterTitleStr}
+              </p>
+              <Link
+                class="status-link"
+                to={`/${instance}/s/${status.id}`}
+                onClick={() => {
+                  setShowPeek(false);
+                }}
+              >
+                <Status status={status} instance={instance} size="s" readOnly />
+                <button type="button" class="status-post-link plain3">
+                  See post &raquo;
+                </button>
+              </Link>
+            </main>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
+
 export default memo(Status);

src/components/timeline.jsx

@@ -28,6 +28,7 @@ function Timeline({
   headerStart,
   headerEnd,
   timelineStart,
+  allowFilters,
 }) {
   const [items, setItems] = useState([]);
   const [uiState, setUIState] = useState('default');
@@ -310,6 +311,16 @@ function Timeline({
                   title = 'Pinned posts';
                 }
                 if (items) {
+                  // Here, we don't hide filtered posts, but we sort them last
+                  items.sort((a, b) => {
+                    if (a._filtered && !b._filtered) {
+                      return 1;
+                    }
+                    if (!a._filtered && b._filtered) {
+                      return -1;
+                    }
+                    return 0;
+                  });
                   return (
                     <li key={`timeline-${statusID}`}>
                       <StatusCarousel title={title} class={`${type}-carousel`}>
@@ -352,9 +363,17 @@ function Timeline({
                   <li key={`timeline-${statusID + _pinned}`}>
                     <Link class="status-link timeline-item" to={url}>
                       {useItemID ? (
-                        <Status statusID={statusID} instance={instance} />
+                        <Status
+                          statusID={statusID}
+                          instance={instance}
+                          allowFilters
+                        />
                       ) : (
-                        <Status status={status} instance={instance} />
+                        <Status
+                          status={status}
+                          instance={instance}
+                          allowFilters
+                        />
                       )}
                     </Link>
                   </li>

src/pages/following.jsx

@@ -3,6 +3,7 @@ import { useSnapshot } from 'valtio';
 
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { filteredItems } from '../utils/filters';
 import states from '../utils/states';
 import { getStatus, saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
@@ -21,12 +22,14 @@ function Following({ title, path, id, ...props }) {
       homeIterator.current = masto.v1.timelines.listHome({ limit: LIMIT });
     }
     const results = await homeIterator.current.next();
-    const { value } = results;
+    let { value } = results;
     if (value?.length) {
       if (firstLoad) {
         latestItem.current = value[0].id;
+        console.log('First load', latestItem.current);
       }
 
+      value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -49,8 +52,9 @@ function Following({ title, path, id, ...props }) {
           since_id: latestItem.current,
         })
         .next();
-      const { value } = results;
+      let { value } = results;
       console.log('checkForUpdates', latestItem.current, value);
+      value = filteredItems(value, 'home');
       if (value?.length && value.some((item) => !item.reblog)) {
         return true;
       }
@@ -119,6 +123,7 @@ function Following({ title, path, id, ...props }) {
       useItemID
       boostsCarousel={snapStates.settings.boostsCarousel}
       {...props}
+      allowFilters
     />
   );
 }

src/pages/list.jsx

@@ -5,6 +5,7 @@ import Icon from '../components/icon';
 import Link from '../components/link';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { filteredItems } from '../utils/filters';
 import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
 
@@ -23,12 +24,13 @@ function List(props) {
       });
     }
     const results = await listIterator.current.next();
-    const { value } = results;
+    let { value } = results;
     if (value?.length) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
 
+      value = filteredItems(value, 'home');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -42,7 +44,8 @@ function List(props) {
         limit: 1,
         since_id: latestItem.current,
       });
-      const { value } = results;
+      let { value } = results;
+      value = filteredItems(value, 'home');
       if (value?.length) {
         return true;
       }
@@ -76,6 +79,7 @@ function List(props) {
       checkForUpdates={checkForUpdates}
       useItemID
       boostsCarousel
+      allowFilters
       headerStart={
         <Link to="/l" class="button plain">
           <Icon icon="list" size="l" />

src/pages/public.jsx

@@ -6,6 +6,7 @@ import { useSnapshot } from 'valtio';
 import Icon from '../components/icon';
 import Timeline from '../components/timeline';
 import { api } from '../utils/api';
+import { filteredItems } from '../utils/filters';
 import states from '../utils/states';
 import { saveStatus } from '../utils/states';
 import useTitle from '../utils/useTitle';
@@ -33,12 +34,13 @@ function Public({ local, ...props }) {
       });
     }
     const results = await publicIterator.current.next();
-    const { value } = results;
+    let { value } = results;
     if (value?.length) {
       if (firstLoad) {
         latestItem.current = value[0].id;
       }
 
+      value = filteredItems(value, 'public');
       value.forEach((item) => {
         saveStatus(item, instance);
       });
@@ -55,7 +57,8 @@ function Public({ local, ...props }) {
           since_id: latestItem.current,
         })
         .next();
-      const { value } = results;
+      let { value } = results;
+      value = filteredItems(value, 'public');
       if (value?.length) {
         return true;
       }
@@ -84,6 +87,7 @@ function Public({ local, ...props }) {
       useItemID
       headerStart={<></>}
       boostsCarousel={snapStates.settings.boostsCarousel}
+      allowFilters
       headerEnd={
         <Menu
           portal={{

src/pages/status.jsx

@@ -25,6 +25,7 @@ import states, {
   statusKey,
   threadifyStatus,
 } from '../utils/states';
+import statusPeek from '../utils/status-peek';
 import { getCurrentAccount } from '../utils/store-utils';
 import useScroll from '../utils/useScroll';
 import useTitle from '../utils/useTitle';
@@ -306,15 +307,7 @@ function StatusPage() {
   }, [heroStatus]);
   const heroContentText = useMemo(() => {
     if (!heroStatus) return '';
-    const { spoilerText, content } = heroStatus;
+    let text = statusPeek(heroStatus);
-    let text;
-    if (spoilerText) {
-      text = spoilerText;
-    } else {
-      const div = document.createElement('div');
-      div.innerHTML = content;
-      text = div.innerText.trim();
-    }
     if (text.length > 64) {
       // "The title should ideally be less than 64 characters in length"
       // https://www.w3.org/Provider/Style/TITLE.html

src/utils/filters.jsx

@@ -0,0 +1,34 @@
+import store from './store';
+
+export function filteredItem(item, filterContext, currentAccountID) {
+  const { filtered } = item;
+  if (!filtered?.length) return true;
+  const isSelf = currentAccountID && item.account?.id === currentAccountID;
+  if (isSelf) return true;
+  const appliedFilters = filtered.filter((f) => {
+    const { filter } = f;
+    const hasContext = filter.context.includes(filterContext);
+    if (!hasContext) return false;
+    if (!filter.expiresAt) return hasContext;
+    return new Date(filter.expiresAt) > new Date();
+  });
+  const isHidden = appliedFilters.some((f) => f.filter.filterAction === 'hide');
+  console.log({ isHidden, filtered, appliedFilters });
+  if (!isHidden) {
+    const filterTitles = appliedFilters.map((f) => f.filter.title);
+    item._filtered = {
+      titles: filterTitles,
+      titlesStr: filterTitles.join(' • '),
+    };
+    item._test = { test: 'test' };
+  }
+  return !isHidden;
+}
+export function filteredItems(items, filterContext) {
+  if (!items?.length) return [];
+  if (!filterContext) return items;
+  const currentAccountID = store.session.get('currentAccount');
+  return items.filter((item) =>
+    filteredItem(item, filterContext, currentAccountID),
+  );
+}

src/utils/states.js

@@ -114,8 +114,11 @@ export function saveStatus(status, instance, opts) {
     opts,
   );
   if (!status) return;
-  if (!override && getStatus(status.id)) return;
+  const oldStatus = getStatus(status.id, instance);
+  if (!override && oldStatus) return;
   const key = statusKey(status.id, instance);
+  if (oldStatus?._pinned) status._pinned = oldStatus._pinned;
+  if (oldStatus?._filtered) status._filtered = oldStatus._filtered;
   states.statuses[key] = status;
   if (status.reblog) {
     const key = statusKey(status.reblog.id, instance);

src/utils/status-peek.jsx

@@ -0,0 +1,34 @@
+import { getHTMLText } from '../components/status';
+
+function statusPeek(status) {
+  const { spoilerText, content, poll, mediaAttachments } = status;
+  let text = '';
+  if (spoilerText?.trim()) {
+    text += spoilerText;
+  } else {
+    text += getHTMLText(content);
+  }
+  text = text.trim();
+  if (poll) {
+    text += ' 📊';
+  }
+  if (mediaAttachments?.length) {
+    text +=
+      ' ' +
+      mediaAttachments
+        .map(
+          (m) =>
+            ({
+              image: '🖼️',
+              gifv: '🎞️',
+              video: '📹',
+              audio: '🎵',
+              unknown: '',
+            }[m.type] || ''),
+        )
+        .join('');
+  }
+  return text;
+}
+
+export default statusPeek;