From 1ecd568c2967d073fdc2b48b124ff2195bb8bc0f Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 9 Aug 2023 19:08:42 +0800
Subject: [PATCH] Preliminary support for exclusive list

Only for Mastodon v4.2+
---
 src/components/list-add-edit.jsx | 24 ++++++++++++++++++++++++
 src/data/features.json           |  3 ++-
 src/pages/lists.css              |  7 ++++++-
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/components/list-add-edit.jsx b/src/components/list-add-edit.jsx
index 4b19be0e..5e5027a3 100644
--- a/src/components/list-add-edit.jsx
+++ b/src/components/list-add-edit.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'preact/hooks';
 
 import { api } from '../utils/api';
+import supports from '../utils/supports';
 
 import Icon from './icon';
 import MenuConfirm from './menu-confirm';
@@ -11,12 +12,18 @@ function ListAddEdit({ list, onClose }) {
   const editMode = !!list;
   const nameFieldRef = useRef();
   const repliesPolicyFieldRef = useRef();
+  const exclusiveFieldRef = useRef();
   useEffect(() => {
     if (editMode) {
       nameFieldRef.current.value = list.title;
       repliesPolicyFieldRef.current.value = list.repliesPolicy;
+      if (exclusiveFieldRef.current) {
+        exclusiveFieldRef.current.checked = list.exclusive;
+      }
     }
   }, [editMode]);
+  const supportsExclusive = supports('@mastodon/list-exclusive');
+
   return (
     <div class="sheet">
       {!!onClose && (
@@ -36,9 +43,11 @@ function ListAddEdit({ list, onClose }) {
             const formData = new FormData(e.target);
             const title = formData.get('title');
             const repliesPolicy = formData.get('replies_policy');
+            const exclusive = formData.get('exclusive') === 'on';
             console.log({
               title,
               repliesPolicy,
+              exclusive,
             });
             setUiState('loading');
 
@@ -50,11 +59,13 @@ function ListAddEdit({ list, onClose }) {
                   listResult = await masto.v1.lists.update(list.id, {
                     title,
                     replies_policy: repliesPolicy,
+                    exclusive,
                   });
                 } else {
                   listResult = await masto.v1.lists.create({
                     title,
                     replies_policy: repliesPolicy,
+                    exclusive,
                   });
                 }
 
@@ -99,6 +110,19 @@ function ListAddEdit({ list, onClose }) {
               <option value="none">Don't show replies</option>
             </select>
           </div>
+          {supportsExclusive && (
+            <div class="list-form-row">
+              <label class="label-block">
+                <input
+                  ref={exclusiveFieldRef}
+                  type="checkbox"
+                  name="exclusive"
+                  disabled={uiState === 'loading'}
+                />{' '}
+                Hide posts on this list from Home/Following
+              </label>
+            </div>
+          )}
           <div class="list-form-footer">
             <button type="submit" disabled={uiState === 'loading'}>
               {editMode ? 'Save' : 'Create'}
diff --git a/src/data/features.json b/src/data/features.json
index 16340ca3..69be7477 100644
--- a/src/data/features.json
+++ b/src/data/features.json
@@ -1,3 +1,4 @@
 {
-  "@mastodon/edit-media-attributes": ">=4.1"
+  "@mastodon/edit-media-attributes": ">=4.1",
+  "@mastodon/list-exclusive": ">=4.2"
 }
diff --git a/src/pages/lists.css b/src/pages/lists.css
index dcf5ffc6..f6b0455d 100644
--- a/src/pages/lists.css
+++ b/src/pages/lists.css
@@ -5,10 +5,15 @@
   flex-direction: column;
 }
 
-.list-form-row :is(input, select) {
+.list-form-row :is(input[type='text'], select) {
   width: 100%;
 }
 
+.list-form-row .label-block {
+  display: block;
+  padding: 8px 0;
+}
+
 .list-form-footer {
   display: flex;
   gap: 8px;