Merge remote-tracking branch 'origin/main' into ditto-auth

src/components/animated-number.tsx

@@ -20,7 +20,7 @@ interface IAnimatedNumber {
 }
 
 const AnimatedNumber: React.FC<IAnimatedNumber> = ({ value, obfuscate }) => {
-  const reduceMotion = useSettings().get('reduceMotion');
+  const { reduceMotion } = useSettings();
 
   const [direction, setDirection] = useState(1);
   const [displayedValue, setDisplayedValue] = useState<number>(value);

src/components/announcements/emoji.tsx

@@ -13,7 +13,7 @@ interface IEmoji {
 }
 
 const Emoji: React.FC<IEmoji> = ({ emoji, emojiMap, hovered }) => {
-  const autoPlayGif = useSettings().get('autoPlayGif');
+  const { autoPlayGif } = useSettings();
 
   // @ts-ignore
   if (unicodeMapping[emoji]) {

src/components/announcements/reactions-bar.tsx

@@ -20,7 +20,7 @@ interface IReactionsBar {
 }
 
 const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addReaction, removeReaction, emojiMap }) => {
-  const reduceMotion = useSettings().get('reduceMotion');
+  const { reduceMotion } = useSettings();
 
   const handleEmojiPick = (data: Emoji) => {
     addReaction(announcementId, (data as NativeEmoji).native.replace(/:/g, ''));

src/components/helmet.tsx

@@ -23,7 +23,7 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
   const instance = useInstance();
   const { unreadChatsCount } = useStatContext();
   const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount);
-  const demetricator = useSettings().get('demetricator');
+  const { demetricator } = useSettings();
 
   const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);
 

src/components/media-gallery.tsx

@@ -72,8 +72,7 @@ const Item: React.FC<IItem> = ({
   last,
   total,
 }) => {
-  const settings = useSettings();
-  const autoPlayGif = settings.get('autoPlayGif') === true;
+  const { autoPlayGif } = useSettings();
   const { mediaPreview } = useSoapboxConfig();
 
   const handleMouseEnter: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => {

src/components/navlinks.tsx

@@ -9,9 +9,8 @@ interface INavlinks {
 }
 
 const Navlinks: React.FC<INavlinks> = ({ type }) => {
-  const settings = useSettings();
+  const { locale } = useSettings();
   const { copyright, navlinks } = useSoapboxConfig();
-  const locale = settings.get('locale') as string;
 
   return (
     <footer className='relative mx-auto mt-auto max-w-7xl py-8'>

src/components/quoted-status.tsx

@@ -35,8 +35,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   const intl = useIntl();
   const history = useHistory();
 
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia');
+  const { displayMedia } = useSettings();
 
   const overlay = useRef<HTMLDivElement>(null);
 

src/components/scroll-top-button.tsx

@@ -27,14 +27,13 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   autoloadThreshold = 50,
 }) => {
   const intl = useIntl();
-  const settings = useSettings();
+  const { autoloadTimelines } = useSettings();
 
   // Whether we are scrolled past the `threshold`.
   const [scrolled, setScrolled] = useState<boolean>(false);
   // Whether we are scrolled above the `autoloadThreshold`.
   const [scrolledTop, setScrolledTop] = useState<boolean>(false);
 
-  const autoload = settings.get('autoloadTimelines') === true;
   const visible = count > 0 && scrolled;
 
   /** Number of pixels scrolled down from the top of the page. */
@@ -44,10 +43,10 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   /** Unload feed items if scrolled to the top. */
   const maybeUnload = useCallback(() => {
-    if (autoload && scrolledTop && count) {
+    if (autoloadTimelines && scrolledTop && count) {
       onClick();
     }
-  }, [autoload, scrolledTop, count, onClick]);
+  }, [autoloadTimelines, scrolledTop, count, onClick]);
 
   /** Set state while scrolling. */
   const handleScroll = useCallback(throttle(() => {

src/components/scrollable-list.tsx

@@ -106,8 +106,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   useWindowScroll = true,
 }, ref) => {
   const history = useHistory();
-  const settings = useSettings();
-  const autoloadMore = settings.get('autoloadMore');
+  const { autoloadMore } = useSettings();
 
   // Preserve scroll position
   const scrollDataKey = `soapbox:scrollData:${scrollKey}`;

src/components/sidebar-navigation.tsx

@@ -24,7 +24,7 @@ const SidebarNavigation = () => {
 
   const instance = useInstance();
   const features = useFeatures();
-  const settings = useSettings();
+  const { isDeveloper } = useSettings();
   const { account } = useOwnAccount();
   const groupsPath = useGroupsPath();
 
@@ -71,7 +71,7 @@ const SidebarNavigation = () => {
         });
       }
 
-      if (settings.get('isDeveloper')) {
+      if (isDeveloper) {
         menu.push({
           to: '/developers',
           icon: require('@tabler/icons/code.svg'),

src/components/site-logo.tsx

@@ -13,7 +13,7 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
 /** Display the most appropriate site logo based on the theme and configuration. */
 const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
-  const settings = useSettings();
+  const { demo } = useSettings();
 
   let darkMode = useTheme() === 'dark';
   if (theme === 'dark') darkMode = true;
@@ -26,7 +26,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {
     // In demo mode, use the Soapbox logo.
-    if (settings.get('demo')) return soapboxLogo;
+    if (demo) return soapboxLogo;
 
     return (darkMode && logoDarkMode)
       ? logoDarkMode

src/components/status-action-bar.tsx

@@ -136,7 +136,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const me = useAppSelector(state => state.me);
   const { groupRelationship } = useGroupRelationship(status.group?.id);
   const features = useFeatures();
-  const settings = useSettings();
+  const { boostModal, deleteModal } = useSettings();
   const soapboxConfig = useSoapboxConfig();
 
   const { allowedEmoji } = soapboxConfig;
@@ -208,7 +208,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
     if (me) {
       const modalReblog = () => dispatch(toggleReblog(status));
-      const boostModal = settings.get('boostModal');
       if ((e && e.shiftKey) || !boostModal) {
         modalReblog();
       } else {
@@ -229,7 +228,6 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
 
   const doDeleteStatus = (withRedraft = false) => {
     dispatch((_, getState) => {
-      const deleteModal = settings.get('deleteModal');
       if (!deleteModal) {
         dispatch(deleteStatus(status.id, withRedraft));
       } else {

src/components/status.tsx

@@ -75,8 +75,7 @@ const Status: React.FC<IStatus> = (props) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
-  const settings = useSettings();
-  const displayMedia = settings.get('displayMedia') as string;
+  const { displayMedia, boostModal } = useSettings();
   const didShowCard = useRef(false);
   const node = useRef<HTMLDivElement>(null);
   const overlay = useRef<HTMLDivElement>(null);
@@ -155,7 +154,6 @@ const Status: React.FC<IStatus> = (props) => {
 
   const handleHotkeyBoost = (e?: KeyboardEvent): void => {
     const modalReblog = () => dispatch(toggleReblog(actualStatus));
-    const boostModal = settings.get('boostModal');
     if ((e && e.shiftKey) || !boostModal) {
       modalReblog();
     } else {

src/components/statuses/sensitive-content-overlay.tsx

@@ -38,12 +38,11 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
   const { account } = useOwnAccount();
   const dispatch = useAppDispatch();
   const intl = useIntl();
-  const settings = useSettings();
+  const { displayMedia, deleteModal } = useSettings();
   const { links } = useSoapboxConfig();
 
   const isUnderReview = status.visibility === 'self';
   const isOwnStatus = status.getIn(['account', 'id']) === account?.id;
-  const displayMedia = settings.get('displayMedia') as string;
 
   const [visible, setVisible] = useState<boolean>(defaultMediaVisibility(status, displayMedia));
 
@@ -58,7 +57,6 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
   };
 
   const handleDeleteStatus = () => {
-    const deleteModal = settings.get('deleteModal');
     if (!deleteModal) {
       dispatch(deleteStatus(status.id, false));
     } else {

src/components/statuses/status-info.tsx

@@ -34,7 +34,7 @@ const StatusInfo = (props: IStatusInfo) => {
           {icon}
         </div>
 
-        <Text size='xs' theme='muted' weight='medium'>
+        <Text size='xs' theme='muted' weight='medium' truncate>
           {text}
         </Text>
       </HStack>

src/components/still-image.tsx

@@ -22,8 +22,7 @@ export interface IStillImage {
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
 const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false, showExt = false, onError }) => {
-  const settings = useSettings();
-  const autoPlayGif = settings.get('autoPlayGif');
+  const { autoPlayGif } = useSettings();
 
   const canvas = useRef<HTMLCanvasElement>(null);
   const img    = useRef<HTMLImageElement>(null);