Skip to content

Filter by Git Status & Responsive fixes #668

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdo wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Filter by Git Status & Responsive fixes #668

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b4b73e
chore: empty commit
amadeus Apr 29, 2026
3db4595
Filter by git status
mdo May 11, 2026
a694c35
Update avatars, add new one
mdo May 12, 2026
9ae306f
Improve avatars rendering with some border action, simplify git statu…
mdo May 12, 2026
d2eb652
Various design updates for menus and home
mdo May 12, 2026
14cbc8a
meh
mdo May 20, 2026
531bdc0
Style the dropdown menu, reverse the logic; update other dropdowns be…
mdo Jun 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 14 additions & 19 deletions apps/diffshub/app/_components/CodeViewCommentsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,25 +147,20 @@ export const CodeViewCommentsList = memo(function CodeViewCommentsList({
}
>
<CommentAuthorAvatar seed={comment.author} className="size-5" />
<div className="flex flex-col gap-0.5 select-text">
<div className="flex gap-2">
<span className="text-muted-foreground">
{comment.author} commented on{' '}
<span
className={cn(
getCommentLineClassName(
comment.side,
comment.lineType
),
'font-medium'
)}
>
{getCommentLineLabel(
comment.side,
comment.lineNumber,
comment.lineType
)}
</span>
<div className="flex flex-col items-start gap-0.5 select-text">
<div className="text-muted-foreground flex gap-1">
{comment.author} commented on{' '}
<span
className={cn(
getCommentLineClassName(comment.side, comment.lineType),
'font-medium'
)}
>
{getCommentLineLabel(
comment.side,
comment.lineNumber,
comment.lineType
)}
</span>
</div>
<p className="text-foreground w-full break-words whitespace-pre-wrap">
Expand Down
36 changes: 10 additions & 26 deletions apps/diffshub/app/_components/CodeViewHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ import {
} from 'react';

import { diffshubChromeMapping } from './_theming/js/diffshubChromeMapping';
import { getDropdownThemeStyle } from './_theming/js/dropdownChromeStyle';
import { useChromeThemeProps } from './_theming/react/useChromeThemeProps';
import { CHROME_ICON_BUTTON_CLASS } from './chromeButtonStyles';
import { DiffsHubLogo } from './DiffsHubLogo';
import { DiffUrlForm } from './DiffUrlForm';
import { docsThemeCatalog } from '@/components/themeCatalog';
Expand All @@ -50,8 +52,6 @@ type DarkThemeName = string;

const SETTING_ROW_CLASS =
'w-full flex cursor-pointer items-center justify-between gap-4 px-2 py-1.5 text-sm';
const THEMED_DROPDOWN_CONTENT_CLASS =
'border-[var(--diffshub-popover-border,var(--color-border))] bg-[var(--diffshub-popover-bg,var(--color-popover))] text-[var(--diffshub-popover-fg,var(--color-popover-foreground))] shadow-[var(--diffshub-popover-shadow,0_10px_30px_rgb(0_0_0_/_0.15))]';

interface HeaderProps {
className?: string;
Expand Down Expand Up @@ -152,7 +152,7 @@ export const CodeViewHeader = memo(function CodeViewHeader({
aria-pressed={fileTreeOverlayOpen}
disabled={!fileTreeAvailable}
title={fileTreeOverlayOpen ? 'Hide file tree' : 'Show file tree'}
className="hover:text-muted-foreground hover:bg-transparent md:hidden"
className={cn(CHROME_ICON_BUTTON_CLASS, 'md:hidden')}
onClick={onToggleFileTreeOverlay}
>
<IconFileTreeFill className="size-4 md:size-3" />
Expand All @@ -166,7 +166,7 @@ export const CodeViewHeader = memo(function CodeViewHeader({
size="icon-md"
aria-label="Open source in new tab"
title="Open source in new tab"
className="hover:text-muted-foreground hidden hover:bg-transparent md:flex"
className={cn(CHROME_ICON_BUTTON_CLASS, 'hidden md:flex')}
>
<a href={initialUrl} target="_blank" rel="noreferrer noopener">
<IconShare className="size-4 md:size-3" />
Expand All @@ -185,7 +185,7 @@ export const CodeViewHeader = memo(function CodeViewHeader({
? 'Switch to unified view'
: 'Switch to split view'
}
className="hover:text-muted-foreground hidden hover:bg-transparent md:flex"
className={cn(CHROME_ICON_BUTTON_CLASS, 'hidden md:flex')}
onClick={() =>
setDiffStyle(diffStyle === 'split' ? 'unified' : 'split')
}
Expand All @@ -206,7 +206,7 @@ export const CodeViewHeader = memo(function CodeViewHeader({
? 'Collapse all files'
: 'Expand all files'
}
className="hover:text-muted-foreground hover:bg-transparent"
className={CHROME_ICON_BUTTON_CLASS}
onClick={onToggleCollapseMode}
>
{collapseMode === 'expanded' ? (
Expand All @@ -231,14 +231,14 @@ export const CodeViewHeader = memo(function CodeViewHeader({
size="icon-md"
aria-label="Display settings"
title="Display settings"
className="hover:text-muted-foreground hover:bg-transparent"
className={CHROME_ICON_BUTTON_CLASS}
>
<IconGearFill className="size-4 md:size-3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className={cn('w-52', THEMED_DROPDOWN_CONTENT_CLASS)}
className="w-58 p-2"
style={dropdownThemeStyle}
>
<DropdownMenuItem
Expand Down Expand Up @@ -318,22 +318,6 @@ function colorModeIcon(colorMode: ColorMode) {
return IconColorAuto;
}

function getDropdownThemeStyle(
themeChromeStyle: CSSProperties | undefined
): CSSProperties | undefined {
if (themeChromeStyle == null) {
return undefined;
}

return {
...themeChromeStyle,
backgroundColor: 'var(--diffshub-popover-bg, var(--color-popover))',
borderColor: 'var(--diffshub-popover-border, var(--color-border))',
boxShadow: 'var(--diffshub-popover-shadow, 0 10px 30px rgb(0 0 0 / 0.15))',
color: 'var(--diffshub-popover-fg, var(--color-popover-foreground))',
};
}

interface ThemeDropdownProps {
colorMode: ColorMode;
darkThemeName: DarkThemeName;
Expand Down Expand Up @@ -384,14 +368,14 @@ function ThemeDropdown({
size="icon-md"
aria-label="Theme settings"
title="Theme settings"
className="hover:text-muted-foreground hover:bg-transparent"
className={CHROME_ICON_BUTTON_CLASS}
>
<TriggerIcon className="size-4 md:size-3" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className={cn('w-72 p-2', THEMED_DROPDOWN_CONTENT_CLASS)}
className="w-72 p-2"
style={themeDropdownStyle}
>
{view === 'main' ? (
Expand Down
Loading
Loading