✨ Advanced tag filters #266

foysalit · 2024-12-31T15:36:13Z

This PR changes the current filter panel with a more powerful tag filter builder.

This interface allows moderators to filter the queue in a more useful ways like

Only show accounts that were reported for spam and no other reason
Only show english posts with image that were not reported for spam

Light mode, showing the exclude tag builder

Dark mode, showing the record type filter

foysalit · 2024-12-31T15:45:16Z

app/actions/ModActionPanel/QuickAction.tsx

@@ -491,7 +492,13 @@ function Form(
    submitForm()
  }
  useKeyPressEvent('c', safeKeyHandler(onCancel))
-  useKeyPressEvent('s', safeKeyHandler(submitForm))
+  useKeyPressEvent(


Unrelated to the PR. fixes #265

foysalit · 2024-12-31T15:46:11Z

app/actions/ModActionPanel/QuickAction.tsx

-    safeKeyHandler(() => {
-      setModEventType(MOD_EVENTS.TAKEDOWN)
-    }),
+    canTakedown


foysalit · 2024-12-31T15:46:29Z

app/actions/ModActionPanel/QuickAction.tsx

-                    <LabelList className="-ml-1 flex-wrap">
-                      {subjectStatus.tags.map((tag) => {
+                    <LabelList className="-ml-1 flex-wrap gap-1">
+                      {subjectStatus.tags.sort().map((tag) => {


Fixes having the lang tags being placed in random places.

Note that .sort() will sort the input array in place. I don't know if that's fine or if a copy should be made before sorting ?

foysalit · 2024-12-31T15:47:01Z

app/surprise-me/page.tsx

@@ -29,7 +29,7 @@ const Timer = () => {
  }, 1000)

  return (
-    <div className="flex flex-row justify-center py-4">
+    <div className="flex flex-row justify-center py-4 dark:text-gray-200">


foysalit · 2024-12-31T15:47:55Z

components/common/SetupModal.tsx

@@ -27,12 +27,12 @@ export function SetupModal({
              className="mx-auto h-20 w-auto"
              title="Icon from Flaticon: https://www.flaticon.com/free-icons/lifeguard-tower"
              src="/img/logo-colorful.png"
-              alt="Ozone - Bluesky Admin"
+              alt="Ozone - ATProto Moderation Service"


Addresses #216

foysalit · 2024-12-31T15:50:06Z

components/reports/QueueFilter/Tag.tsx

+}
+
+const selectClassNames = {
+  tagItemIconContainer:


These classes are mostly copy pasted from the library itself because the lib doesn't append/overwrite classes and instead, replaces entirely based on customized config so in order to maintain current styling AND add dark mode, we need to bring over all classes the lib uses and add our own dark mode classes.

foysalit · 2024-12-31T15:51:15Z

components/repositories/AccountView.tsx

@@ -640,7 +640,7 @@ function Details({
          </LabelList>
        </DataField>
        <DataField label="Tags">
-          <LabelList>
+          <LabelList className='flex-wrap gap-1'>


Fixes tags spilling outside of view port on the profile view page.

foysalit · 2024-12-31T15:52:59Z

components/shell/CommandPalette/actions.ts

@@ -13,7 +13,6 @@ export const getStaticActions = ({
  {
    id: 'quick-action-modal',
    name: 'Open Quick Action Panel',
-    shortcut: ['q'],


we never use these global shortcuts and they break some other shortcuts we use contextually in various panels so getting rid of these entirely.
fixes #265

…lters

foysalit · 2025-01-06T20:52:03Z

package.json

@@ -40,6 +40,7 @@
    "react-dom": "18.2.0",
    "react-dropzone": "^14.3.5",
    "react-json-view": "1.21.3",
+    "react-tailwindcss-select": "^1.8.5",


we were using this package before and made OS contributions to it as well. we could replicate some of its behavior via combobox but that requires a lot of work so opting in for this one again.

matthieusieben

Look good

matthieusieben · 2025-01-08T12:41:34Z

app/actions/ModActionPanel/QuickAction.tsx

-                    <LabelList className="-ml-1 flex-wrap">
-                      {subjectStatus.tags.map((tag) => {
+                    <LabelList className="-ml-1 flex-wrap gap-1">
+                      {subjectStatus.tags.sort().map((tag) => {


Note that .sort() will sort the input array in place. I don't know if that's fine or if a copy should be made before sorting ?

matthieusieben · 2025-01-08T12:42:23Z

components/reports/QueueFilter/Panel.tsx

+      .map((t) => {
+        if (t.startsWith('lang:')) {


You should probably trim here ?

the sort should be fine, we don't depend on the order anywhere

matthieusieben · 2025-01-08T12:43:37Z

components/reports/QueueFilter/Panel.tsx

+    return list[0]
+  }
+
+  return `(${list.join(') OR (')})`


Are we mixing OR and && notations here ? Is that desired ?

hmm... we could replace && with AND i guess since this is purely for display purposes.

matthieusieben · 2025-01-08T12:48:46Z

components/tags/SubjectTag.tsx

+export const SubjectTag = ({
+  tag,
+  ...rest
+}: { tag: string } & ComponentProps<typeof LabelChip>) => {


Nit: For stricter types (and avoid any potential miss-use & conflicts), the props that will get ignored should not be allowed.

Suggested change

}: { tag: string } & ComponentProps<typeof LabelChip>) => {

}: { tag: string } & Omit<ComponentProps<typeof LabelChip>, 'tag' | 'children'>) => {

matthieusieben · 2025-01-08T12:49:49Z

components/reports/QueueFilter/Tag.tsx

+  tagItemText: `text-gray-600 text-xs truncate cursor-default select-none`,
+}
+
+export const QueueFilterTags = () => {


Nit: This component is quite big. Could it be split into smaller components and communicate though props ?

I think it's quite reasonable in size and splitting into multiple components would just make unnecessarily more complex

foysalit added 7 commits December 27, 2024 19:40

🚧 WIP

314efe1

🐛 Ignore keybinding for takedown unless user has permission

4c09587

✨ Remove cmd palette shortcuts

055dcc8

💄 Fix styling for tetris page for dark mode

5ddeacc

💄 Fix tag list overflow in profile page

7b2ba1f

💄 De-emphasize bluesky branding

343ef37

✨ Add tag filtering with exclusion

efa025a

arcalinea had a problem deploying to tag-filters - ozone-staging PR #266 December 31, 2024 15:36 — with Render Failure

🧹 Cleanup

8a2bce5

arcalinea deployed to tag-filters - ozone-staging PR #266 December 31, 2024 15:42 — with Render View deployment

foysalit commented Dec 31, 2024

View reviewed changes

foysalit requested review from matthieusieben and devinivy December 31, 2024 15:59

foysalit added 2 commits January 6, 2025 15:48

Merge branch 'main' of github.com:bluesky-social/ozone-ui into tag-fi…

50c65f2

…lters

✨ Show filters preview

5a0957f

arcalinea deployed to tag-filters - ozone-staging PR #266 January 6, 2025 17:50 — with Render View deployment

foysalit commented Jan 6, 2025

View reviewed changes

matthieusieben approved these changes Jan 8, 2025

View reviewed changes

✨ Add arbitrary tag input

8ab42cb

arcalinea temporarily deployed to tag-filters - ozone-staging PR #266 January 8, 2025 17:06 — with Render Destroyed

foysalit merged commit 63146b2 into main Jan 8, 2025
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

✨ Advanced tag filters #266

✨ Advanced tag filters #266

foysalit commented Dec 31, 2024 •

edited

Loading

foysalit Dec 31, 2024

foysalit Dec 31, 2024

foysalit Dec 31, 2024

matthieusieben Jan 8, 2025

foysalit Dec 31, 2024

foysalit Dec 31, 2024

foysalit Dec 31, 2024

foysalit Dec 31, 2024

foysalit Dec 31, 2024

foysalit Jan 6, 2025

matthieusieben left a comment

matthieusieben Jan 8, 2025

matthieusieben Jan 8, 2025

foysalit Jan 8, 2025

matthieusieben Jan 8, 2025

foysalit Jan 8, 2025

matthieusieben Jan 8, 2025

matthieusieben Jan 8, 2025

foysalit Jan 8, 2025

	}: { tag: string } & ComponentProps<typeof LabelChip>) => {
	}: { tag: string } & Omit<ComponentProps<typeof LabelChip>, 'tag' \| 'children'>) => {

✨ Advanced tag filters #266

✨ Advanced tag filters #266

Conversation

foysalit commented Dec 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

matthieusieben left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

foysalit commented Dec 31, 2024 •

edited

Loading