mirror of
				https://github.com/cinnyapp/cinny.git
				synced 2025-11-04 06:20:28 +03:00 
			
		
		
		
	Add mark as read button to space options (#667)
This allows users to mark all rooms in a space as read, matching similar features found in other popular chat applications. We opted to place the mark as read button at the top of the list instead of next to the add user button like in room options since we felt this will be the most-used button in the list. Fixes #645. Co-authored-by: Maple <mapletree.dv@gmail.com> Co-authored-by: Maple <mapletree.dv@gmail.com>
This commit is contained in:
		
							parent
							
								
									bdb8bdf76c
								
							
						
					
					
						commit
						78e12d5bee
					
				
					 1 changed files with 13 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -5,6 +5,7 @@ import { twemojify } from '../../../util/twemojify';
 | 
			
		|||
 | 
			
		||||
import initMatrix from '../../../client/initMatrix';
 | 
			
		||||
import { openSpaceSettings, openSpaceManage, openInviteUser } from '../../../client/action/navigation';
 | 
			
		||||
import { markAsRead } from '../../../client/action/notifications';
 | 
			
		||||
import { leave } from '../../../client/action/room';
 | 
			
		||||
import {
 | 
			
		||||
  createSpaceShortcut,
 | 
			
		||||
| 
						 | 
				
			
			@ -17,6 +18,7 @@ import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 | 
			
		|||
 | 
			
		||||
import CategoryIC from '../../../../public/res/ic/outlined/category.svg';
 | 
			
		||||
import CategoryFilledIC from '../../../../public/res/ic/filled/category.svg';
 | 
			
		||||
import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
 | 
			
		||||
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 | 
			
		||||
import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 | 
			
		||||
import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
 | 
			
		||||
| 
						 | 
				
			
			@ -28,11 +30,21 @@ import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
 | 
			
		|||
 | 
			
		||||
function SpaceOptions({ roomId, afterOptionSelect }) {
 | 
			
		||||
  const mx = initMatrix.matrixClient;
 | 
			
		||||
  const { roomList } = initMatrix;
 | 
			
		||||
  const room = mx.getRoom(roomId);
 | 
			
		||||
  const canInvite = room?.canInvite(mx.getUserId());
 | 
			
		||||
  const isPinned = initMatrix.accountData.spaceShortcut.has(roomId);
 | 
			
		||||
  const isCategorized = initMatrix.accountData.categorizedSpaces.has(roomId);
 | 
			
		||||
 | 
			
		||||
  const handleMarkAsRead = () => {
 | 
			
		||||
    const spaceChildren = roomList.getCategorizedSpaces([roomId]);
 | 
			
		||||
    spaceChildren?.forEach((childIds, spaceId) => {
 | 
			
		||||
      childIds?.forEach((childId) => {
 | 
			
		||||
        markAsRead(childId);
 | 
			
		||||
      })
 | 
			
		||||
    });
 | 
			
		||||
    afterOptionSelect();
 | 
			
		||||
  };
 | 
			
		||||
  const handleInviteClick = () => {
 | 
			
		||||
    openInviteUser(roomId);
 | 
			
		||||
    afterOptionSelect();
 | 
			
		||||
| 
						 | 
				
			
			@ -71,6 +83,7 @@ function SpaceOptions({ roomId, afterOptionSelect }) {
 | 
			
		|||
  return (
 | 
			
		||||
    <div style={{ maxWidth: 'calc(var(--navigation-drawer-width) - var(--sp-normal))' }}>
 | 
			
		||||
      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
 | 
			
		||||
      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
 | 
			
		||||
      <MenuItem
 | 
			
		||||
        onClick={handleCategorizeClick}
 | 
			
		||||
        iconSrc={isCategorized ? CategoryFilledIC : CategoryIC}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue