Groups Updates

src/api/groups/GetGroupManager.ts

@@ -0,0 +1,6 @@
+import { CreateLinkEvent } from '..';
+
+export function GetGroupManager(groupId: number): void
+{
+    CreateLinkEvent(`groups/manage/${groupId}`);
+}

src/views/groups/GroupView.scss

@@ -1,5 +1,53 @@
+.nitro-groups {
+    .tab-image {
+        width: 122px;
+        height: 68px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        div {
+            background-image: url('../../assets/images/groups/creator_images.png');
+            background-repeat: no-repeat;
+        }
+
+        &.tab-1 {
+            div {
+                background-position: 0px 0px;
+                width: 99px;
+                height: 50px;
+            }
+        }
+
+        &.tab-2 {
+            div {
+                background-position: -99px 0px;
+                width: 98px;
+                height: 62px;
+            }
+        }
+
+        &.tab-3 {
+            div {
+                background-position: 0px -50px;
+                width: 96px;
+                height: 45px;
+            }
+        }
+
+        &.tab-4, &.tab-5 {
+            div {
+                background-position: 0px -95px;
+                width: 114px;
+                height: 61px;
+            }
+        }
+    }
+}
+
 @import './views/creator/GroupCreatorView';
 @import './views/information/GroupInformationView';
 @import './views/information-standalone/GroupInformationStandaloneView';
+@import './views/manager/GroupManagerView';
 @import './views/room-information/GroupRoomInformationView';
 @import './views/shared-tabs/GroupSharedTabs';

src/views/groups/GroupsMessageHandler.tsx

@@ -1,6 +1,7 @@
-import { GroupBadgePartsEvent, GroupBuyDataEvent, RoomCreatedEvent } from '@nitrots/nitro-renderer';
+import { GroupBadgePartsEvent, GroupBuyDataEvent, GroupSettingsEvent, RoomCreatedEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateMessageHook } from '../../hooks';
+import { GroupBadgePart } from './common/GroupBadgePart';
 import { useGroupsContext } from './context/GroupsContext';
 import { GroupsActions } from './context/GroupsContext.types';
 
@@ -30,8 +31,8 @@ export const GroupsMessageHandler: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_PURHCASE_SETTINGS,
             payload: {
-                objectArrays: rooms,
+                objectValues: rooms,
-                numberValue: parser.groupCost
+                numberValues: [ parser.groupCost ]
             }
         });
     }, [ dispatchGroupsState ]);
@@ -50,11 +51,10 @@ export const GroupsMessageHandler: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_PURHCASE_SETTINGS,
             payload: {
-                objectArrays: clonedRooms
+                objectValues: clonedRooms
             }
         });
-    }, []);
+    }, [ availableRooms, dispatchGroupsState ]);
-
 
     const onGroupBadgePartsEvent = useCallback((event: GroupBadgePartsEvent) =>
     {
@@ -100,14 +100,42 @@ export const GroupsMessageHandler: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_BADGE_PARTS_CONFIG,
             payload: {
-                objectArrays: [ bases, symbols, partColors, colorsA, colorsB ]
+                objectValues: [ bases, symbols, partColors, colorsA, colorsB ]
             }
-        })
+        });
+    }, [ dispatchGroupsState ]);
+
+    const onGroupSettingsEvent = useCallback((event: GroupSettingsEvent) =>
+    {
+        const parser = event.getParser();
+
+        const groupBadgeParts: GroupBadgePart[] = [];
+
+        parser.badgeParts.forEach((part, id) =>
+        {
+            groupBadgeParts.push(new GroupBadgePart(
+                part.isBase ? GroupBadgePart.BASE : part.key >= 100 ? GroupBadgePart.SYMBOL_ALT : GroupBadgePart.SYMBOL,
+                part.key >= 100 ? part.key - 100 : part.key,
+                part.color,
+                part.position
+            ));
+        });
+
+        dispatchGroupsState({
+            type: GroupsActions.SET_GROUP_SETTINGS,
+            payload: {
+                stringValues: [ parser.title, parser.description ],
+                numberValues: [ parser.id, parser.state, parser.colorA, parser.colorB ],
+                boolValues: [ parser.canMembersDecorate ],
+                objectValues: groupBadgeParts
+            }
+        });
     }, [ dispatchGroupsState ]);
 
     CreateMessageHook(GroupBuyDataEvent, onGroupBuyDataEvent);
     CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent);
     CreateMessageHook(GroupBadgePartsEvent, onGroupBadgePartsEvent);
+    CreateMessageHook(GroupSettingsEvent, onGroupSettingsEvent);
 
     return null;
 };

src/views/groups/GroupsView.tsx

@@ -1,4 +1,4 @@
-import { GroupBadgePartsComposer, GroupPurchasedEvent, ILinkEventTracker } from '@nitrots/nitro-renderer';
+import { GroupBadgePartsComposer, GroupPurchasedEvent, GroupSettingsComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { AddEventLinkTracker, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
@@ -7,6 +7,7 @@ import { GroupsReducer, initialGroups } from './context/GroupsContext.types';
 import { GroupsMessageHandler } from './GroupsMessageHandler';
 import { GroupCreatorView } from './views/creator/GroupCreatorView';
 import { GroupInformationStandaloneView } from './views/information-standalone/GroupInformationStandaloneView';
+import { GroupManagerView } from './views/manager/GroupManagerView';
 
 export const GroupsView: FC<{}> = props =>
 {
@@ -30,6 +31,11 @@ export const GroupsView: FC<{}> = props =>
             case 'create':
                 setIsCreatorVisible(true);
                 return;
+            case 'manage':
+                if(!parts[2]) return;
+                
+                SendMessageHook(new GroupSettingsComposer(Number(parts[2])));
+                return;
         }
     }, []);
 
@@ -60,6 +66,7 @@ export const GroupsView: FC<{}> = props =>
             <GroupsMessageHandler />
             <div className="nitro-groups">
                 <GroupCreatorView isVisible={ isCreatorVisible } onClose={ () => setIsCreatorVisible(false) } />
+                <GroupManagerView />
                 <GroupInformationStandaloneView />
             </div>
         </GroupsContextProvider>

src/views/groups/context/GroupsContext.types.ts

@@ -19,6 +19,7 @@ export interface IGroupsState
     badgeBases: { id: number, images: string[] }[];
     badgeSymbols: { id: number, images: string[] }[];
     badgePartColors: { id: number, color: string }[];
+    groupId: number;
     groupColorsA: { id: number, color: string }[];
     groupColorsB: { id: number, color: string }[];
     groupName: string;
@@ -26,15 +27,18 @@ export interface IGroupsState
     groupHomeroomId: number;
     groupBadgeParts: GroupBadgePart[];
     groupColors: number[];
+    groupState: number;
+    groupCanMembersDecorate: boolean;
 }
 
 export interface IGroupsAction
 {
     type: string;
     payload?: {
-        objectArrays?: any[];
+        objectValues?: any[];
-        stringValue?: string;
+        stringValues?: string[];
-        numberValue?: number;
+        numberValues?: number[];
+        boolValues?: boolean[];
         badgeParts?: GroupBadgePart[];
     }
 }
@@ -48,6 +52,9 @@ export class GroupsActions
     public static SET_GROUP_HOMEROOM_ID: string = 'GA_SET_GROUP_HOMEROOM_ID';
     public static SET_GROUP_BADGE_PARTS: string = 'GA_SET_BADGE_PARTS';
     public static SET_GROUP_COLORS: string = 'GA_SET_GROUP_COLORS';
+    public static SET_GROUP_STATE: string = 'GA_SET_GROUP_STATE';
+    public static SET_GROUP_CAN_MEMBERS_DECORATE: string = 'GA_SET_GROUP_CAN_MEMBERS_DECORATE';
+    public static SET_GROUP_SETTINGS: string = 'GA_SET_GROUP_SETTINGS';
     public static RESET_GROUP_SETTINGS: string = 'GA_RESET_GROUP_SETTINGS';
 }
 
@@ -57,13 +64,16 @@ export const initialGroups: IGroupsState = {
     badgeBases: null,
     badgeSymbols: null,
     badgePartColors: null,
+    groupId: null,
     groupColorsA: null,
     groupColorsB: null,
     groupName: '',
     groupDescription: '',
     groupHomeroomId: 0,
     groupBadgeParts: null,
-    groupColors: null
+    groupColors: null,
+    groupState: null,
+    groupCanMembersDecorate: null
 };
 
 export const GroupsReducer: Reducer<IGroupsState, IGroupsAction> = (state, action) =>
@@ -71,32 +81,32 @@ export const GroupsReducer: Reducer<IGroupsState, IGroupsAction> = (state, actio
     switch(action.type)
     {
         case GroupsActions.SET_PURHCASE_SETTINGS: {
-            const availableRooms = action.payload.objectArrays;
+            const availableRooms = action.payload.objectValues;
-            const purchaseCost = (action.payload.numberValue || state.purchaseCost || 0);
+            const purchaseCost = (action.payload.numberValues[0] || state.purchaseCost || 0);
 
             return { ...state, availableRooms, purchaseCost };
         }
         case GroupsActions.SET_GROUP_BADGE_PARTS_CONFIG: {
-            const badgeBases = (action.payload.objectArrays[0] || state.badgeBases || null);
+            const badgeBases = (action.payload.objectValues[0] || state.badgeBases || null);
-            const badgeSymbols = (action.payload.objectArrays[1] || state.badgeSymbols || null);
+            const badgeSymbols = (action.payload.objectValues[1] || state.badgeSymbols || null);
-            const badgePartColors = (action.payload.objectArrays[2] || state.badgePartColors || null);
+            const badgePartColors = (action.payload.objectValues[2] || state.badgePartColors || null);
-            const groupColorsA = (action.payload.objectArrays[3] || state.groupColorsA || null);
+            const groupColorsA = (action.payload.objectValues[3] || state.groupColorsA || null);
-            const groupColorsB = (action.payload.objectArrays[4] || state.groupColorsB || null);
+            const groupColorsB = (action.payload.objectValues[4] || state.groupColorsB || null);
 
             return { ...state, badgeBases, badgeSymbols, badgePartColors, groupColorsA, groupColorsB };
         }
         case GroupsActions.SET_GROUP_NAME: {
-            const groupName = action.payload.stringValue;
+            const groupName = action.payload.stringValues[0];
 
             return { ...state, groupName };
         }
         case GroupsActions.SET_GROUP_DESCRIPTION: {
-            const groupDescription = action.payload.stringValue;
+            const groupDescription = action.payload.stringValues[0];
 
             return { ...state, groupDescription };
         }
         case GroupsActions.SET_GROUP_HOMEROOM_ID: {
-            const groupHomeroomId = action.payload.numberValue;
+            const groupHomeroomId = action.payload.numberValues[0];
 
             return { ...state, groupHomeroomId };
         }
@@ -106,18 +116,42 @@ export const GroupsReducer: Reducer<IGroupsState, IGroupsAction> = (state, actio
             return { ...state, groupBadgeParts };
         }
         case GroupsActions.SET_GROUP_COLORS: {
-            const groupColors = action.payload.objectArrays;
+            const groupColors = action.payload.objectValues;
 
             return { ...state, groupColors };
         }
+        case GroupsActions.SET_GROUP_STATE: {
+            const groupState = action.payload.numberValues[0];
+
+            return { ...state, groupState };
+        }
+        case GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE: {
+            const groupCanMembersDecorate = action.payload.boolValues[0];
+
+            return { ...state, groupCanMembersDecorate };
+        }
+        case GroupsActions.SET_GROUP_SETTINGS: {
+            const groupId = action.payload.numberValues[0];
+            const groupName = action.payload.stringValues[0];
+            const groupDescription = action.payload.stringValues[1];
+            const groupBadgeParts = action.payload.objectValues;
+            const groupState = action.payload.numberValues[1];
+            const groupColors = action.payload.numberValues.slice(2);
+            const groupCanMembersDecorate = action.payload.boolValues[0];
+            
+            return { ...state, groupId, groupName, groupDescription, groupBadgeParts, groupColors, groupState, groupCanMembersDecorate };
+        }
         case GroupsActions.RESET_GROUP_SETTINGS: {
+            const groupId = null;
             const groupName = '';
             const groupDescription = '';
             const groupHomeroomId = 0;
             const groupBadgeParts = null;
             const groupColors = null;
+            const groupState = null;
+            const groupCanMembersDecorate = null;
             
-            return { ...state, groupName, groupDescription, groupHomeroomId, groupBadgeParts, groupColors };
+            return { ...state, groupId, groupName, groupDescription, groupHomeroomId, groupBadgeParts, groupColors, groupState, groupCanMembersDecorate };
         }
         default:
             return state;

src/views/groups/views/creator/GroupCreatorView.scss

@@ -68,51 +68,6 @@
         }
     }
 
-    .tab-image {
-        width: 122px;
-        height: 68px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        div {
-            background-image: url('../../../../assets/images/groups/creator_images.png');
-            background-repeat: no-repeat;
-        }
-
-        &.tab-1 {
-            div {
-                background-position: 0px 0px;
-                width: 99px;
-                height: 50px;
-            }
-        }
-
-        &.tab-2 {
-            div {
-                background-position: -99px 0px;
-                width: 98px;
-                height: 62px;
-            }
-        }
-
-        &.tab-3 {
-            div {
-                background-position: 0px -50px;
-                width: 96px;
-                height: 45px;
-            }
-        }
-
-        &.tab-4 {
-            div {
-                background-position: 0px -95px;
-                width: 114px;
-                height: 61px;
-            }
-        }
-    }
-
     .creator-tab {
         height: 230px;
         min-height: 230px;

src/views/groups/views/creator/GroupCreatorView.tsx

@@ -9,9 +9,9 @@ import { useGroupsContext } from '../../context/GroupsContext';
 import { GroupsActions } from '../../context/GroupsContext.types';
 import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
 import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
+import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
 import { GroupCreatorViewProps } from './GroupCreatorView.types';
-import { GroupCreatorTabConfirmationView } from './views/tab-confirmation/GroupCreatorTabConfirmationView';
+import { GroupCreatorTabConfirmationView } from './tab-confirmation/GroupCreatorTabConfirmationView';
-import { GroupCreatorTabIdentityView } from './views/tab-identity/GroupCreatorTabIdentityView';
 
 const TABS: number[] = [1, 2, 3, 4];
 
@@ -113,7 +113,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
                     </div>
                 </div>
                 <div className="text-black creator-tab">
-                    { currentTab === 1 && <GroupCreatorTabIdentityView /> }
+                    { currentTab === 1 && <GroupSharedTabIdentityView isCreator={ true } /> }
                     { currentTab === 2 && <GroupSharedTabBadgeView /> }
                     { currentTab === 3 && <GroupSharedTabColorsView /> }
                     { currentTab === 4 && <GroupCreatorTabConfirmationView /> }

src/views/groups/views/creator/tab-confirmation/GroupCreatorTabConfirmationView.tsx

@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { LocalizeText } from '../../../../../api';
-import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
+import { BadgeImageView } from '../../../../shared/badge-image/BadgeImageView';
-import { useGroupsContext } from '../../../../context/GroupsContext';
+import { useGroupsContext } from '../../../context/GroupsContext';
 
 export const GroupCreatorTabConfirmationView: FC<{}> = props =>
 {

src/views/groups/views/information/GroupInformationView.tsx

@@ -1,6 +1,7 @@
-import { GroupDeleteComposer, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
+import { GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateLinkEvent, GetSessionDataManager, LocalizeText, TryVisitRoom } from '../../../../api';
+import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
 import { TryJoinGroup } from '../../../../api/groups/TryJoinGroup';
 import { SendMessageHook } from '../../../../hooks';
 import { CatalogPageName } from '../../../catalog/common/CatalogPageName';
@@ -81,13 +82,6 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
             case 'furniture':
                 CreateLinkEvent('catalog/open/' + CatalogPageName.GUILD_CUSTOM_FURNI);
                 break;
-            case 'delete':
-                if(window.confirm(LocalizeText('group.deleteconfirm.title') + ' - ' + LocalizeText('group.deleteconfirm.desc')))
-                {
-                    SendMessageHook(new GroupDeleteComposer(groupInformation.id));
-                    if(onClose) onClose();
-                }
-                break;
         }
     }, [ groupInformation, onClose ]);
     
@@ -96,26 +90,22 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
     return (
         <div className="group-information text-black p-2">
             <div>
-                <div className="group-badge text-center">
+                <div className="text-center d-flex flex-column h-100 small text-black text-decoration-underline">
-                    <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
+                    <div className="group-badge">
-                    <div className="mt-3">
+                        <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
-                        <a href="#" className="small text-black">
-                            { LocalizeText('group.membercount', ['totalMembers'], [groupInformation.membersCount.toString()]) }
-                        </a>
                     </div>
-                    <div>
+                    <div className="mt-3 cursor-pointer">
-                        { groupInformation.pendingRequestsCount > 0 && <a href="#" className="small text-black">
+                        { LocalizeText('group.membercount', ['totalMembers'], [groupInformation.membersCount.toString()]) }
-                            { LocalizeText('group.pendingmembercount', ['totalMembers'], [groupInformation.pendingRequestsCount.toString()]) }
-                        </a> }
                     </div>
-                    <div className="mt-3">
+                    { groupInformation.pendingRequestsCount > 0 && <div className="cursor-pointer">
+                        { LocalizeText('group.pendingmembercount', ['totalMembers'], [groupInformation.pendingRequestsCount.toString()]) }
+                    </div> }
+                    { groupInformation.isOwner && <div className="cursor-pointer" onClick={ () => GetGroupManager(groupInformation.id) }>
+                        { LocalizeText('group.manage') }
+                    </div> }
+                    <div className="mt-auto mb-1">
                         { getRoleIcon() }
                     </div>
-                    <div>
-                        { groupInformation.isOwner && <a href="#" className="small text-danger" onClick={ () => handleAction('delete') }>
-                            { LocalizeText('group.delete') }
-                        </a> }
-                    </div>
                 </div>
             </div>
             <div className="ms-2 w-100">
@@ -126,20 +116,16 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
                 </div>
                 <div>{ LocalizeText('group.created', ['date', 'owner'], [groupInformation.createdAt, groupInformation.ownerName]) }</div>
                 <div className="group-description small overflow-auto">{ groupInformation.description }</div>
-                <div>
+                <div className="small text-black text-decoration-underline">
-                    <a href="#" className="small text-black" onClick={ () => handleAction('homeroom') }>
+                    <div className="cursor-pointer" onClick={ () => handleAction('homeroom') }>
                         { LocalizeText('group.linktobase') }
-                    </a>
+                    </div>
-                </div>
+                    <div className="cursor-pointer" onClick={ () => handleAction('furniture') }>
-                <div>
-                    <a href="#" className="small text-black" onClick={ () => handleAction('furniture') }>
                         { LocalizeText('group.buyfurni') }
-                    </a>
+                    </div>
-                </div>
+                    <div className="cursor-pointer">
-                <div>
-                    <a href="#" className="small text-black">
                         { LocalizeText('group.showgroups') }
-                    </a>
+                    </div>
                 </div>
                 { groupInformation.type !== GroupType.PRIVATE && 
                     <button className="btn btn-primary w-100 mt-2" disabled={ groupInformation.membershipType === GroupMembershipType.REQUEST_PENDING || isRealOwner() } onClick={ handleButtonClick }>

src/views/groups/views/manager/GroupManagerView.scss

@@ -0,0 +1,9 @@
+.nitro-group-manager {
+    width: 385px;
+
+    .manager-tab {
+        height: 230px;
+        min-height: 230px;
+        max-height: 230px;
+    }
+}

src/views/groups/views/manager/GroupManagerView.tsx

@@ -0,0 +1,100 @@
+import { GroupDeleteComposer, GroupSaveBadgeComposer, GroupSaveColorsComposer, GroupSaveInformationComposer, GroupSavePreferencesComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../api';
+import { SendMessageHook } from '../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { useGroupsContext } from '../../context/GroupsContext';
+import { GroupsActions } from '../../context/GroupsContext.types';
+import { GroupSharedTabBadgeView } from '../shared-tabs/tab-badge/GroupSharedTabBadgeView';
+import { GroupSharedTabColorsView } from '../shared-tabs/tab-colors/GroupSharedTabColorsView';
+import { GroupSharedTabIdentityView } from '../shared-tabs/tab-identity/GroupSharedTabIdentityView';
+import { GroupManagerTabSettingsView } from './tab-settings/GroupManagerTabSettingsView';
+
+const TABS: number[] = [1, 2, 3, 5];
+
+export const GroupManagerView: FC<{}> = props =>
+{
+    const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
+    const { groupId = null, groupName = null, groupDescription = null, groupColors = null, groupBadgeParts = null, groupState = null, groupCanMembersDecorate = null } = groupsState;
+
+    const [ currentTab, setCurrentTab ] = useState<number>(1);
+
+    const onClose = useCallback(() =>
+    {
+        dispatchGroupsState({
+            type: GroupsActions.RESET_GROUP_SETTINGS
+        });
+    }, [ dispatchGroupsState ]);
+
+    const saveGroup = useCallback(() =>
+    {
+        const badge = [];
+
+        if(!groupBadgeParts) return;
+
+        groupBadgeParts.forEach((part) =>
+        {
+            if(part.code)
+            {
+                badge.push(part.key);
+                badge.push(part.color);
+                badge.push(part.position);
+            }
+        });
+
+        SendMessageHook(new GroupSaveInformationComposer(groupId, groupName, groupDescription));
+        SendMessageHook(new GroupSaveBadgeComposer(groupId, badge));
+        SendMessageHook(new GroupSaveColorsComposer(groupId, groupColors[0], groupColors[1]));
+        SendMessageHook(new GroupSavePreferencesComposer(groupId, groupState, groupCanMembersDecorate ? 0 : 1));
+
+        onClose();
+    }, [ groupBadgeParts, groupId, groupName, groupDescription, groupColors, groupState, groupCanMembersDecorate, onClose ]);
+
+    const deleteGroup = useCallback(() =>
+    {
+        if(window.confirm(LocalizeText('group.deleteconfirm.title') + ' - ' + LocalizeText('group.deleteconfirm.desc')))
+        {
+            SendMessageHook(new GroupDeleteComposer(groupId));
+            onClose();
+        }
+    }, [ groupId, onClose ]);
+
+    if(!groupId) return null;
+    
+    return (
+        <NitroCardView className="nitro-group-manager" simple={ false }>
+            <NitroCardHeaderView headerText={ LocalizeText('group.window.title') } onCloseClick={ onClose } />
+            <NitroCardContentView className="p-0">
+                <NitroCardTabsView>
+                    { TABS.map(tab =>
+                        {
+                            return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => setCurrentTab(tab) }>
+                                { LocalizeText(`group.edit.tab.${tab}`) }
+                            </NitroCardTabsItemView>);
+                        }) }
+                </NitroCardTabsView>
+                <div className="p-2">
+                    <div className="d-flex align-items-center mb-2">
+                        <div className={ 'flex-shrink-0 tab-image tab-' + currentTab }>
+                            <div></div>
+                        </div>
+                        <div className="w-100 text-black ms-2">
+                            <div className="fw-bold h4 m-0">{ LocalizeText('group.edit.tabcaption.' + currentTab) }</div>
+                            <div>{ LocalizeText('group.edit.tabdesc.' + currentTab) }</div>
+                        </div>
+                    </div>
+                    <div className="text-black manager-tab">
+                        { currentTab === 1 && <GroupSharedTabIdentityView /> }
+                        { currentTab === 2 && <GroupSharedTabBadgeView skipDefault={ true } /> }
+                        { currentTab === 3 && <GroupSharedTabColorsView /> }
+                        { currentTab === 5 && <GroupManagerTabSettingsView /> }
+                    </div>
+                    <div className="d-flex justify-content-between mt-2">
+                        <button className="btn btn-danger" onClick={ deleteGroup }>{ LocalizeText('group.delete') }</button>
+                        <button className="btn btn-success" onClick={ saveGroup }>{ LocalizeText('save') }</button>
+                    </div>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/views/groups/views/manager/tab-settings/GroupManagerTabSettingsView.tsx

@@ -0,0 +1,55 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../api/utils/LocalizeText';
+import { useGroupsContext } from '../../../context/GroupsContext';
+import { GroupsActions } from '../../../context/GroupsContext.types';
+
+const STATES: string[] = ['regular', 'exclusive', 'private'];
+
+export const GroupManagerTabSettingsView: FC<{}> = props =>
+{
+    const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
+    const { groupState = null, groupCanMembersDecorate = false } = groupsState;
+
+    const setState = useCallback((state: number) =>
+    {
+        dispatchGroupsState({
+            type: GroupsActions.SET_GROUP_STATE,
+            payload: {
+                numberValues: [ state ]
+            }
+        })
+    }, [ dispatchGroupsState ]);
+
+    const toggleCanMembersDecorate = useCallback(() =>
+    {
+        dispatchGroupsState({
+            type: GroupsActions.SET_GROUP_CAN_MEMBERS_DECORATE,
+            payload: {
+                boolValues: [ !groupCanMembersDecorate ]
+            }
+        })
+    }, [ dispatchGroupsState, groupCanMembersDecorate ]);
+    
+    return (
+        <>
+            { STATES.map((state, index) =>
+                {
+                    return <div key={ index } className="form-check mb-1">
+                    <input className="form-check-input" type="radio" name="groupState" id={ `groupState${ index }` } checked={ (groupState === index) } onChange={ () => setState(index) } />
+                    <label className="form-check-label d-flex align-items-center gap-1 fw-bold" htmlFor={'groupState' + index}>
+                        <i className={ `icon icon-group-type-${index}` } /> { LocalizeText(`group.edit.settings.type.${state}.label`) }
+                    </label>
+                    <div>{ LocalizeText(`group.edit.settings.type.${state}.help`) }</div>
+                </div>
+                }) }
+            <hr className="bg-dark" />
+            <div className="form-check">
+                <input className="form-check-input" type="checkbox" id="groupCanMembersDecorate" checked={ groupCanMembersDecorate } onChange={() => toggleCanMembersDecorate() } />
+                <label className="form-check-label fw-bold" htmlFor="groupCanMembersDecorate">
+                    { LocalizeText('group.edit.settings.rights.caption') }
+                </label>
+                <div>{ LocalizeText('group.edit.settings.rights.members.help') }</div>
+            </div>
+        </>
+    );
+};

src/views/groups/views/room-information/GroupRoomInformationView.tsx

@@ -1,6 +1,7 @@
 import { DesktopViewEvent, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupJoinComposer, GroupRemoveMemberComposer, RoomInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { GetGroupInformation, GetSessionDataManager, LocalizeText } from '../../../../api';
+import { GetGroupManager } from '../../../../api/groups/GetGroupManager';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
 import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { GroupMembershipType } from '../../common/GroupMembershipType';
@@ -67,8 +68,6 @@ export const GroupRoomInformationView: FC<{}> = props =>
         SendMessageHook(new GroupRemoveMemberComposer(groupInformation.id, GetSessionDataManager().userId));
         SendMessageHook(new GroupInformationComposer(groupInformation.id, false));
     }, [ groupInformation ]);
-    
-    const manageGroup = useCallback(() => {}, []);
 
     const getButtonText = useCallback(() =>
     {
@@ -90,14 +89,14 @@ export const GroupRoomInformationView: FC<{}> = props =>
 
     const handleButtonClick = useCallback(() =>
     {
-        if(isRealOwner()) return manageGroup();
+        if(isRealOwner()) return GetGroupManager(groupInformation.id);
 
         if(groupInformation.type === GroupType.PRIVATE && groupInformation.membershipType === GroupMembershipType.NOT_MEMBER) return;
 
         if(groupInformation.membershipType === GroupMembershipType.MEMBER) return tryLeaveGroup();
 
         return tryJoinGroup();
-    }, [ groupInformation, tryLeaveGroup, tryJoinGroup, isRealOwner, manageGroup ]);
+    }, [ groupInformation, tryLeaveGroup, tryJoinGroup, isRealOwner ]);
 
     if(!groupInformation) return null;
 

src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx

@@ -4,20 +4,23 @@ import { BadgeImageView } from '../../../../shared/badge-image/BadgeImageView';
 import { GroupBadgePart } from '../../../common/GroupBadgePart';
 import { useGroupsContext } from '../../../context/GroupsContext';
 import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupSharedTabBadgeViewProps } from './GroupSharedTabBadgeView.types';
 
 const POSITIONS: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 
-export const GroupSharedTabBadgeView: FC<{}> = props =>
+export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =>
 {
     const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
     const { badgeBases = null, badgeSymbols = null, badgePartColors = null, groupBadgeParts = null } = groupsState;
 
+    const { skipDefault = null } = props;
+
     const [ editingIndex, setEditingIndex ] = useState<number>(0);
     const [ isSelectingModel, setIsSelectingModel ] = useState<boolean>(false);
 
     useEffect(() =>
     {
-        if(!badgeBases || !badgePartColors || groupBadgeParts) return;
+        if(skipDefault || !badgeBases || !badgePartColors || groupBadgeParts) return;
 
         const badgeParts: GroupBadgePart[] = [
             new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),

src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.types.ts

@@ -0,0 +1,4 @@
+export interface GroupSharedTabBadgeViewProps
+{
+    skipDefault?: boolean;
+}

src/views/groups/views/shared-tabs/tab-colors/GroupSharedTabColorsView.tsx

@@ -22,7 +22,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_COLORS,
             payload: {
-                objectArrays: colors
+                objectValues: colors
             }
         });
         
@@ -44,7 +44,7 @@ export const GroupSharedTabColorsView: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_COLORS,
             payload: { 
-                objectArrays: clonedGroupColors
+                objectValues: clonedGroupColors
             }
         });
     }, [ selectingColorIndex, groupColors, dispatchGroupsState ]);

src/views/groups/views/shared-tabs/tab-identity/GroupSharedTabIdentityView.tsx

@@ -1,19 +1,22 @@
 import { FC, useCallback } from 'react';
-import { CreateLinkEvent, LocalizeText } from '../../../../../../api';
+import { CreateLinkEvent, LocalizeText } from '../../../../../api';
-import { useGroupsContext } from '../../../../context/GroupsContext';
+import { useGroupsContext } from '../../../context/GroupsContext';
-import { GroupsActions } from '../../../../context/GroupsContext.types';
+import { GroupsActions } from '../../../context/GroupsContext.types';
+import { GroupSharedTabIdentityViewProps } from './GroupSharedTabIdentityView.types';
 
-export const GroupCreatorTabIdentityView: FC<{}> = props =>
+export const GroupSharedTabIdentityView: FC<GroupSharedTabIdentityViewProps> = props =>
 {
     const { groupsState = null, dispatchGroupsState = null } = useGroupsContext();
     const { groupName = '', groupDescription = '', groupHomeroomId = 0, availableRooms = null } = groupsState;
+
+    const { isCreator = false } = props;
     
     const setName = useCallback((name: string) =>
     {
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_NAME,
             payload: {
-                stringValue: name
+                stringValues: [ name ]
             }
         })
     }, [ dispatchGroupsState ]);
@@ -23,7 +26,7 @@ export const GroupCreatorTabIdentityView: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_DESCRIPTION,
             payload: {
-                stringValue: description
+                stringValues: [ description ]
             }
         })
     }, [ dispatchGroupsState ]);
@@ -33,7 +36,7 @@ export const GroupCreatorTabIdentityView: FC<{}> = props =>
         dispatchGroupsState({
             type: GroupsActions.SET_GROUP_HOMEROOM_ID,
             payload: {
-                numberValue: id
+                numberValues: [ id ]
             }
         })
     }, [ dispatchGroupsState ]);
@@ -47,17 +50,19 @@ export const GroupCreatorTabIdentityView: FC<{}> = props =>
             <label className="fw-bold">{ LocalizeText('group.edit.desc') }</label>
             <input type="text" className="form-control form-control-sm" value={ groupDescription } maxLength={ 254 } onChange={ (e) => setDescription(e.target.value) } />
         </div>
-        <div className="form-group mb-1">
+        { isCreator && <>
-            <label className="fw-bold">{ LocalizeText('group.edit.base') }</label>
+            <div className="form-group mb-1">
-            <select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ (e) => setHomeroomId(Number(e.target.value)) }>
+                <label className="fw-bold">{ LocalizeText('group.edit.base') }</label>
-                <option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
+                <select className="form-select form-select-sm" value={ groupHomeroomId } onChange={ (e) => setHomeroomId(Number(e.target.value)) }>
-                { availableRooms && availableRooms.map((room, index) =>
+                    <option value={ 0 } disabled>{ LocalizeText('group.edit.base.select.room') }</option>
-                {
+                    { availableRooms && availableRooms.map((room, index) =>
-                    return <option key={ index } value={ room.id }>{ room.name }</option>;
+                    {
-                }) }
+                        return <option key={ index } value={ room.id }>{ room.name }</option>;
-            </select>
+                    }) }
-        </div>
+                </select>
-        <div className="small mb-2">{ LocalizeText('group.edit.base.warning') }</div>
+            </div>
-        <div className="cursor-pointer text-decoration-underline text-center" onClick={ () => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</div>
+            <div className="small mb-2">{ LocalizeText('group.edit.base.warning') }</div>
+            <div className="cursor-pointer text-decoration-underline text-center" onClick={ () => CreateLinkEvent('navigator/create') }>{ LocalizeText('group.createroom') }</div>
+        </> }
     </div>);
 };

src/views/groups/views/shared-tabs/tab-identity/GroupSharedTabIdentityView.types.ts

@@ -0,0 +1,4 @@
+export interface GroupSharedTabIdentityViewProps
+{
+    isCreator?: boolean;
+}