Bohdan Triapitsyn
086982c1b3
Adds a dialog with call booking and survey actions for user feedback Shows a one-time sidebar toast prompting users to share what’s useful or missing Adds localized copy for the new feedback entry points
84 lines
3.5 KiB
TypeScript
84 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
import { Icon } from "@/components/icon/Icon";
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
type Props = {
|
|
onOpenSettings: () => void;
|
|
onOpenShortcuts: () => void;
|
|
onOpenAbout: () => void;
|
|
onOpenUpdate: () => void;
|
|
onOpenShareOpinion: () => void;
|
|
showRuntimeButtons?: boolean;
|
|
showUpdateButton?: boolean;
|
|
};
|
|
|
|
const footerButtonClassName = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
|
|
|
|
export function SidebarFooter({
|
|
onOpenSettings,
|
|
onOpenShortcuts,
|
|
onOpenAbout,
|
|
onOpenUpdate,
|
|
onOpenShareOpinion,
|
|
showRuntimeButtons = true,
|
|
showUpdateButton = true,
|
|
}: Props): React.ReactNode {
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<div className="flex shrink-0 items-center justify-start gap-1 px-2.5 py-2">
|
|
{showRuntimeButtons ? (
|
|
<>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button type="button" onClick={onOpenSettings} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.settings')}>
|
|
<Icon name="settings-3" className="h-4.5 w-4.5" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.settings')}</p></TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button type="button" onClick={onOpenShortcuts} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.shortcuts')}>
|
|
<Icon name="question" className="h-4.5 w-4.5" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.shortcuts')}</p></TooltipContent>
|
|
</Tooltip>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button type="button" onClick={onOpenAbout} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.aboutOpenChamber')}>
|
|
<Icon name="information" className="h-4.5 w-4.5" />
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.aboutOpenChamber')}</p></TooltipContent>
|
|
</Tooltip>
|
|
</>
|
|
) : null}
|
|
{showUpdateButton ? (
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="xs"
|
|
className="ml-auto border-[var(--status-info-border)] bg-[var(--status-info-background)] text-[var(--status-info)] hover:bg-[var(--status-info-background)]/80 hover:text-[var(--status-info)] dark:border-[var(--status-info-border)] dark:bg-[var(--status-info-background)] dark:hover:bg-[var(--status-info-background)]/80"
|
|
onClick={onOpenUpdate}
|
|
>
|
|
{t('sessions.sidebar.footer.actions.update')}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="default"
|
|
size="xs"
|
|
className="ml-auto border-[var(--primary-base)]/15 bg-[var(--primary-base)]/5 text-[var(--primary-base)]/60 hover:bg-[var(--primary-base)]/10 hover:text-[var(--primary-base)]/75"
|
|
onClick={onOpenShareOpinion}
|
|
>
|
|
{t('sessions.sidebar.footer.actions.shareOpinion')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|