Combine visually single section

This commit is contained in:
Manav Rathi 2025-02-20 17:57:25 +05:30
parent d41e177b3c
commit f5ea565aa8
No known key found for this signature in database

View File

@ -161,8 +161,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
onCloseSidebar={onClose}
collectionSummaries={collectionSummaries}
/>
<UtilitySection onCloseSidebar={onClose} />
<HelpSection onCloseSidebar={onClose} {...{ onShowExport }} />
<UtilitySection onCloseSidebar={onClose} {...{ onShowExport }} />
<Divider sx={{ my: "2px" }} />
<ExitSection />
<InfoSection />
@ -516,11 +515,19 @@ const ShortcutSection: React.FC<ShortcutSectionProps> = ({
);
};
const UtilitySection: React.FC<SectionProps> = ({ onCloseSidebar }) => {
type UtilitySectionProps = SectionProps & Pick<SidebarProps, "onShowExport">;
const UtilitySection: React.FC<UtilitySectionProps> = ({
onCloseSidebar,
onShowExport,
}) => {
const { showMiniDialog } = useBaseContext();
const { watchFolderView, setWatchFolderView } = usePhotosAppContext();
const router = useRouter();
const { show: showHelp, props: helpVisibilityProps } = useModalVisibility();
const { show: showAccount, props: accountVisibilityProps } =
useModalVisibility();
const { show: showPreferences, props: preferencesVisibilityProps } =
@ -531,6 +538,11 @@ const UtilitySection: React.FC<SectionProps> = ({ onCloseSidebar }) => {
const handleDeduplicate = () => router.push("/duplicates");
const handleExport = () =>
isDesktop
? onShowExport()
: showMiniDialog(downloadAppDialogAttributes());
return (
<>
<RowButton
@ -555,38 +567,6 @@ const UtilitySection: React.FC<SectionProps> = ({ onCloseSidebar }) => {
label={t("preferences")}
onClick={showPreferences}
/>
{isDesktop && (
<WatchFolder
open={watchFolderView}
onClose={handleCloseWatchFolder}
/>
)}
<Account {...accountVisibilityProps} onRootClose={onCloseSidebar} />
<Preferences
{...preferencesVisibilityProps}
onRootClose={onCloseSidebar}
/>
</>
);
};
type HelpSectionProps = SectionProps & Pick<SidebarProps, "onShowExport">;
const HelpSection: React.FC<HelpSectionProps> = ({
onCloseSidebar,
onShowExport,
}) => {
const { showMiniDialog } = useBaseContext();
const { show: showHelp, props: helpVisibilityProps } = useModalVisibility();
const handleExport = () =>
isDesktop
? onShowExport()
: showMiniDialog(downloadAppDialogAttributes());
return (
<>
<RowButton
variant="secondary"
label={t("help")}
@ -603,6 +583,17 @@ const HelpSection: React.FC<HelpSectionProps> = ({
onClick={handleExport}
/>
<Help {...helpVisibilityProps} onRootClose={onCloseSidebar} />
{isDesktop && (
<WatchFolder
open={watchFolderView}
onClose={handleCloseWatchFolder}
/>
)}
<Account {...accountVisibilityProps} onRootClose={onCloseSidebar} />
<Preferences
{...preferencesVisibilityProps}
onRootClose={onCloseSidebar}
/>
</>
);
};