imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extract Extensions into their own right panel tab (#12844)

Browse source 
* Extract useIsVideoRoom hook

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Move useWidgets hook to WidgetUtils

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Extract Extensions into their own right panel tab

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove unused components & classes

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-31 10:38:25 +01:00 • committed by GitHub
parent fae5bf1612
commit b55653ddf0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 820 additions and 475 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/views/right_panel/RightPanelTabs.tsx
View file

@ -16,6 +16,7 @@ limitations under the License.
import React, { useRef } from "react";
import { NavBar, NavItem } from "@vector-im/compound-web";
import { Room } from "matrix-js-sdk/src/matrix";
import { _t } from "../../../languageHandler";
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
@ -24,17 +25,27 @@ import PosthogTrackers from "../../../PosthogTrackers";
import { useDispatcher } from "../../../hooks/useDispatcher";
import dispatcher from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
import SettingsStore from "../../../settings/SettingsStore";
import { UIComponent, UIFeature } from "../../../settings/UIFeature";
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
import { useIsVideoRoom } from "../../../utils/video-rooms";
function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean {
const tabs = [RightPanelPhases.RoomSummary, RightPanelPhases.RoomMemberList, RightPanelPhases.ThreadPanel];
const tabs = [
RightPanelPhases.RoomSummary,
RightPanelPhases.RoomMemberList,
RightPanelPhases.ThreadPanel,
RightPanelPhases.Extensions,
];
return !!phase && tabs.includes(phase);
}
type Props = {
room?: Room;
phase: RightPanelPhases;
};
export const RightPanelTabs: React.FC<Props> = ({ phase }): JSX.Element | null => {
export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element | null => {
const threadsTabRef = useRef<HTMLButtonElement | null>(null);
useDispatcher(dispatcher, (payload) => {
@ -45,6 +56,8 @@ export const RightPanelTabs: React.FC<Props> = ({ phase }): JSX.Element | null =
}
});
const isVideoRoom = useIsVideoRoom(room);
if (!shouldShowTabsForPhase(phase)) return null;
return (
@ -81,6 +94,20 @@ export const RightPanelTabs: React.FC<Props> = ({ phase }): JSX.Element | null =
>
{_t("common|threads")}
</NavItem>
{SettingsStore.getValue(UIFeature.Widgets) &&
!isVideoRoom &&
shouldShowComponent(UIComponent.AddIntegrations) && (
<NavItem
aria-controls="thread-panel"
id="extensions-panel-tab"
onClick={() => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true);
}}
active={phase === RightPanelPhases.Extensions}
>
{_t("common|extensions")}
</NavItem>
)}
</NavBar>
);
};