From 3cc6f8813abafee1326bbd985f3dcec737a42309 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Fri, 22 Aug 2025 14:34:37 +0200
Subject: [PATCH] [Glitch] Visibility Modal fixes

Port 4df50b9c7e547ce1d99a43eeccdd92d88406eca2 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/dropdown_selector.tsx   |  8 ++--
 .../ui/components/visibility_modal.tsx        | 43 ++++++++++---------
 .../flavours/glitch/styles/components.scss    | 31 +++++++++++--
 .../glitch/styles/mastodon-light/diff.scss    | 14 +++---
 4 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/dropdown_selector.tsx b/app/javascript/flavours/glitch/components/dropdown_selector.tsx
index 9299e7d6bd..672665c80e 100644
--- a/app/javascript/flavours/glitch/components/dropdown_selector.tsx
+++ b/app/javascript/flavours/glitch/components/dropdown_selector.tsx
@@ -98,13 +98,13 @@ export const DropdownSelector: React.FC<Props> = ({
           break;
         case 'Tab':
           if (e.shiftKey) {
-            element =
-              nodeRef.current?.children[index + 1] ??
-              nodeRef.current?.firstElementChild;
-          } else {
             element =
               nodeRef.current?.children[index - 1] ??
               nodeRef.current?.lastElementChild;
+          } else {
+            element =
+              nodeRef.current?.children[index + 1] ??
+              nodeRef.current?.firstElementChild;
           }
           break;
         case 'Home':
diff --git a/app/javascript/flavours/glitch/features/ui/components/visibility_modal.tsx b/app/javascript/flavours/glitch/features/ui/components/visibility_modal.tsx
index e2af5ea89d..e7bb955fbf 100644
--- a/app/javascript/flavours/glitch/features/ui/components/visibility_modal.tsx
+++ b/app/javascript/flavours/glitch/features/ui/components/visibility_modal.tsx
@@ -1,11 +1,4 @@
-import {
-  forwardRef,
-  useCallback,
-  useId,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
+import { forwardRef, useCallback, useId, useMemo, useState } from 'react';
 import type { FC } from 'react';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -16,6 +9,7 @@ import type { ApiQuotePolicy } from '@/flavours/glitch/api_types/quotes';
 import { isQuotePolicy } from '@/flavours/glitch/api_types/quotes';
 import { isStatusVisibility } from '@/flavours/glitch/api_types/statuses';
 import type { StatusVisibility } from '@/flavours/glitch/api_types/statuses';
+import { Button } from '@/flavours/glitch/components/button';
 import { Dropdown } from '@/flavours/glitch/components/dropdown';
 import type { SelectItem } from '@/flavours/glitch/components/dropdown_selector';
 import { IconButton } from '@/flavours/glitch/components/icon_button';
@@ -96,7 +90,8 @@ const selectStatusPolicy = createAppSelector(
 );
 
 export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
-  ({ onClose, onChange, statusId }, ref) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ({ onClose, onChange, statusId }, _ref) => {
     const intl = useIntl();
     const currentVisibility = useAppSelector((state) =>
       statusId
@@ -172,18 +167,10 @@ export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
         setQuotePolicy(value);
       }
     }, []);
-
-    // Save on close
-    useImperativeHandle(
-      ref,
-      () => ({
-        getCloseConfirmationMessage() {
-          onChange(visibility, quotePolicy);
-          return null;
-        },
-      }),
-      [onChange, quotePolicy, visibility],
-    );
+    const handleSave = useCallback(() => {
+      onChange(visibility, quotePolicy);
+      onClose();
+    }, [onChange, onClose, visibility, quotePolicy]);
 
     const privacyDropdownId = useId();
     const quoteDropdownId = useId();
@@ -274,6 +261,20 @@ export const VisibilityModal: FC<VisibilityModalProps> = forwardRef(
               <QuotePolicyHelper policy={quotePolicy} visibility={visibility} />
             </label>
           </div>
+          <div className='dialog-modal__content__actions'>
+            <Button onClick={onClose} secondary>
+              <FormattedMessage
+                id='confirmation_modal.cancel'
+                defaultMessage='Cancel'
+              />
+            </Button>
+            <Button onClick={handleSave}>
+              <FormattedMessage
+                id='visibility_modal.save'
+                defaultMessage='Save'
+              />
+            </Button>
+          </div>
         </div>
       </div>
     );
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 6b603376d9..b69576be1c 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -5628,6 +5628,8 @@ a.status-card {
 
 .privacy-dropdown__option,
 .visibility-dropdown__option {
+  --dropdown-text-color: $primary-text-color;
+
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.25px;
@@ -5637,7 +5639,22 @@ a.status-card {
   align-items: center;
   gap: 12px;
   border-radius: 4px;
-  color: $primary-text-color;
+  color: var(--dropdown-text-color);
+
+  // Make sure adjacent hover/active states don't have a meeting radius.
+  &:hover + &:is(:focus, .active),
+  &:is(:focus, .active) + &:hover,
+  &:is(:focus, .active) + &:is(:focus, .active) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  &:hover:has(+ :focus, .active),
+  &:is(:focus, .active):has(+ :hover),
+  &:is(:focus, .active):has(+ :is(:focus, .active)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 
   &:hover,
   &:active {
@@ -5647,7 +5664,7 @@ a.status-card {
   &:focus,
   &.active {
     background: $ui-highlight-color;
-    color: $primary-text-color;
+    color: var(--dropdown-text-color);
     outline: 0;
 
     .privacy-dropdown__option__content,
@@ -5656,7 +5673,7 @@ a.status-card {
     .visibility-dropdown__option__content,
     .visibility-dropdown__option__content strong,
     .visibility-dropdown__option__additional {
-      color: $primary-text-color;
+      color: var(--dropdown-text-color);
     }
   }
 
@@ -6769,6 +6786,14 @@ a.status-card {
         max-height: 45vh;
       }
     }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      justify-content: flex-end;
+      padding: 0 24px 24px;
+    }
   }
 
   &__popout {
diff --git a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
index 3ad9b4042c..14acf40f22 100644
--- a/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon-light/diff.scss
@@ -445,14 +445,8 @@
 
 .compose-form__actions .icon-button.active,
 .dropdown-button.active,
-.privacy-dropdown__option.active,
-.privacy-dropdown__option:focus,
 .language-dropdown__dropdown__results__item:focus,
 .language-dropdown__dropdown__results__item.active,
-.privacy-dropdown__option:focus .privacy-dropdown__option__content,
-.privacy-dropdown__option:focus .privacy-dropdown__option__content strong,
-.privacy-dropdown__option.active .privacy-dropdown__option__content,
-.privacy-dropdown__option.active .privacy-dropdown__option__content strong,
 .language-dropdown__dropdown__results__item:focus
   .language-dropdown__dropdown__results__item__common-name,
 .language-dropdown__dropdown__results__item.active
@@ -460,6 +454,14 @@
   color: $white;
 }
 
+.privacy-dropdown__option,
+.visibility-dropdown__option {
+  &:focus,
+  &.active {
+    --dropdown-text-color: #{$white};
+  }
+}
+
 .compose-form .spoiler-input__input {
   color: lighten($ui-highlight-color, 8%);
 }