weseek__growi/apps/app/src/client/components/Admin/Customize/CustomizeSidebarSetting.tsx

import React, { type JSX, useCallback } from 'react';
import { LoadingSpinner } from '@growi/ui/dist/components';
import { useTranslation } from 'next-i18next';
import { Card, CardBody } from 'reactstrap';

import { toastError, toastSuccess } from '~/client/util/toastr';
import { useSWRxSidebarConfig } from '~/stores/admin/sidebar-config';
import { useNextThemes } from '~/stores-universal/use-next-themes';

const CustomizeSidebarsetting = (): JSX.Element => {
  const { t } = useTranslation(['admin', 'commons']);

  const { data, update, setIsSidebarCollapsedMode } = useSWRxSidebarConfig();

  const { resolvedTheme } = useNextThemes();
  const collapsedIconFileName = `/images/customize-settings/collapsed-${resolvedTheme}.svg`;
  const dockIconFileName = `/images/customize-settings/dock-${resolvedTheme}.svg`;

  const onClickSubmit = useCallback(async () => {
    try {
      await update();
      toastSuccess(
        t('toaster.update_successed', {
          target: t('customize_settings.default_sidebar_mode.title'),
          ns: 'commons',
        }),
      );
    } catch (err) {
      toastError(err);
    }
  }, [t, update]);

  if (data == null) {
    return <LoadingSpinner />;
  }

  const { isSidebarCollapsedMode } = data;

  return (
    <div className="row">
      <div className="col-12">
        <h2 className="admin-setting-header">
          {t('customize_settings.default_sidebar_mode.title')}
        </h2>

        <Card className="card custom-card bg-body-tertiary my-3">
          <CardBody className="px-0 py-2">
            {t('customize_settings.default_sidebar_mode.desc')}
          </CardBody>
        </Card>

        <div className="d-flex justify-content-around mt-5">
          <div className="row row-cols-2">
            <div className="col">
              <button
                type="button"
                className={`card border border-4 ${isSidebarCollapsedMode ? 'border-primary' : ''}`}
                onClick={() => setIsSidebarCollapsedMode(true)}
                aria-pressed={isSidebarCollapsedMode}
              >
                {/* biome-ignore lint/performance/noImgElement: Ignore for SVG */}
                <img src={collapsedIconFileName} alt="Collapsed Mode" />
                <div className="card-body text-center">Collapsed Mode</div>
              </button>
            </div>
            <div className="col">
              <button
                type="button"
                className={`card border border-4 ${!isSidebarCollapsedMode ? 'border-primary' : ''}`}
                onClick={() => setIsSidebarCollapsedMode(false)}
                aria-pressed={!isSidebarCollapsedMode}
              >
                {/* biome-ignore lint/performance/noImgElement: Ignore for SVG */}
                <img src={dockIconFileName} alt="Dock Mode" />
                <div className="card-body  text-center">Dock Mode</div>
              </button>
            </div>
          </div>
        </div>

        <div className="row my-3">
          <div className="mx-auto">
            <button
              type="button"
              onClick={onClickSubmit}
              className="btn btn-primary"
            >
              {t('Update')}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CustomizeSidebarsetting;