Fix context menu trigger on chat folders overview

This commit is contained in:
Jamie
2025-10-14 12:56:56 -07:00
committed by GitHub
parent 512eccda88
commit e2072f83d7
2 changed files with 18 additions and 9 deletions

View File

@@ -1381,7 +1381,9 @@ $secondary-text-color: light-dark(
.Preferences__ChatFolders__ChatSelection__Item--Button, .Preferences__ChatFolders__ChatSelection__Item--Button,
.Preferences__ChatFolders__ChatSelection__Item--Clickable { .Preferences__ChatFolders__ChatSelection__Item--Clickable {
&:hover .Preferences__ChatFolders__ChatSelection__ItemContent { cursor: pointer;
&:hover .Preferences__ChatFolders__ChatSelection__ItemContent,
.Preferences__ChatFolders__ChatSelection__ItemContent[data-state='open'] {
background: light-dark(variables.$color-gray-02, variables.$color-gray-80); background: light-dark(variables.$color-gray-02, variables.$color-gray-80);
} }
} }
@@ -1392,7 +1394,7 @@ $secondary-text-color: light-dark(
gap: 12px; gap: 12px;
padding-block: 8px; padding-block: 8px;
padding-inline: 24px; padding-inline: 24px;
border-radius: 1px; border-radius: 8px;
@include mixins.keyboard-mode { @include mixins.keyboard-mode {
.Preferences__ChatFolders__ChatSelection__Item:focus & { .Preferences__ChatFolders__ChatSelection__Item:focus & {

View File

@@ -2,8 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
import classNames from 'classnames'; import classNames from 'classnames';
import React from 'react'; import React, { forwardRef } from 'react';
import type { ReactNode } from 'react'; import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react';
import { tw } from '../../../axo/tw.js'; import { tw } from '../../../axo/tw.js';
import type { LocalizerType } from '../../../types/I18N.js'; import type { LocalizerType } from '../../../types/I18N.js';
import { AxoSymbol } from '../../../axo/AxoSymbol.js'; import { AxoSymbol } from '../../../axo/AxoSymbol.js';
@@ -20,13 +20,20 @@ export const itemClickableClassName =
export const itemButtonClassName = export const itemButtonClassName =
'Preferences__ChatFolders__ChatSelection__Item--Button'; 'Preferences__ChatFolders__ChatSelection__Item--Button';
export function ItemContent(props: { children: ReactNode }): JSX.Element { export type ItemContentProps = HTMLAttributes<HTMLSpanElement>;
export const ItemContent = forwardRef(function ItemContent(
props: ItemContentProps,
ref: ForwardedRef<HTMLSpanElement>
): JSX.Element {
return ( return (
<span className="Preferences__ChatFolders__ChatSelection__ItemContent"> <span
{props.children} ref={ref}
</span> className="Preferences__ChatFolders__ChatSelection__ItemContent"
{...props}
/>
); );
} });
export function ItemAvatar(props: { export function ItemAvatar(props: {
kind: 'Folder' | 'Add' | ChatFolderPresetId; kind: 'Folder' | 'Add' | ChatFolderPresetId;