Skip to content

Implemented some improvements #40

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

Merged
developerEhsan merged 6 commits into from
Feb 20, 2025
Merged

Implemented some improvements #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92ff87e
chore(deps-dev): bump @types/react-dom from 18.3.5 to 19.0.4
dependabot[bot] Feb 20, 2025
95987a8
Merge pull request #39 from Your-Ehsan/dependabot/npm_and_yarn/develo…
developerEhsan Feb 20, 2025
dfe8c1d
chore(tailwind): version downgrade to manually upgrade tailwindcss
developerEhsan Feb 20, 2025
344119e
chore(bump): tailwindcss version upgraded to latest
developerEhsan Feb 20, 2025
5ad0d4f
chore(actions): release.yml updated added checks
developerEhsan Feb 20, 2025
4d2fa9f
Update src/renderer/src/components/team-switcher.tsx
developerEhsan Feb 20, 2025
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
25 changes: 20 additions & 5 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
name: Release
on:
push:
branches:
pull_request:
branches:
- master
tags:
- 'v*'
types:
- closed

permissions:
contents: write # needed for creating releases
packages: write # if you're also publishing packages

jobs:
release:
if: ${{ github.repository_owner == 'your-ehsan' && startsWith(github.ref, 'refs/tags/v')}}
if: ${{ github.repository_owner == 'your-ehsan' && github.event.pull_request.merged}}
name: Create a release
runs-on: windows-latest

Expand All @@ -22,6 +22,19 @@ jobs:
with:
fetch-depth: 0

- name: Get the latest tag
id: get_tag
run: echo "LATEST_TAG=$(git describe --tags --abbrev=0)" >> $GITHUB_ENV

- name: Verify if the PR contains a tag
run: |
if [ -z "${{ env.LATEST_TAG }}" ]; then
echo "No tag found. Skipping release."
exit 1
else
echo "Latest tag: ${{ env.LATEST_TAG }}"
fi

- name: Install pnpm
uses: pnpm/action-setup@v4
with:
Expand Down Expand Up @@ -74,7 +87,9 @@ jobs:
dist/*.exe
dist/latest.yml
body_path: CHANGELOG.md
tag_name: ${{ env.LATEST_TAG }}
draft: false
generate_release_notes: true
prerelease: false
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
1 change: 0 additions & 1 deletion .husky/commit-msg
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ if ! echo "$commit_header" | grep -E "$header_pattern" > /dev/null 2>&1; then
-------------------------------------------------------
🔹 1: fix(auth): resolve login issue
🔹 2: refactor(db): optimize query performance
🔹 3: document: update README

💡 Allowed types: $allowed_types

Expand Down
1 change: 1 addition & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
pnpm pre-commit
git add .
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove automatic staging of all files.

Adding git add . after pnpm pre-commit is risky as it:

  • Automatically stages all changes, bypassing Git's selective staging process
  • Could lead to accidental commits of sensitive data or debug code
  • Makes it harder to create atomic commits with related changes

Remove this line to maintain control over what gets committed:

-git add .
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
git add .

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,14 +94,14 @@
"@electron-toolkit/eslint-config-prettier": "^3.0.0",
"@electron-toolkit/eslint-config-ts": "^3.0.0",
"@electron-toolkit/tsconfig": "^1.0.1",
"@tailwindcss/postcss": "^4.0.7",
"@tanstack/router-devtools": "^1.106.0",
"@tanstack/router-plugin": "^1.99.3",
"@types/better-sqlite3": "^7.6.12",
"@types/node": "^22.13.4",
"@types/react": "^19.0.10",
"@types/react-dom": "^18.3.5",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"conventional-changelog-cli": "^5.0.0",
"cross-env": "^7.0.3",
"drizzle-kit": "^0.30.4",
Expand Down
657 changes: 450 additions & 207 deletions pnpm-lock.yaml
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
'@tailwindcss/postcss': {}
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

⚠️ Potential issue

🧩 Analysis chain

Verify the Tailwind CSS package and version.

The package @tailwindcss/postcss doesn't exist in the npm registry, and Tailwind CSS v4 hasn't been released yet. The current stable version is v3.4.1.

Restore the original configuration:

-    '@tailwindcss/postcss': {}
+    'tailwindcss': {},
+    'autoprefixer': {}

🌐 Web query:

What is the latest version of Tailwind CSS?

💡 Result:

The latest version of Tailwind CSS is v4.0.7, released on February 18, 2025[6]. This follows the major v4.0 release in January 2025, which introduced significant architectural changes including:

  • 5x faster builds with a rewritten core engine[1][3]
  • CSS-first configuration replacing JavaScript setup[1][3]
  • Automatic template detection eliminating content configuration[2][3]
  • Native CSS variables for theme customization[3][5]
  • First-party Vite plugin integration[1][7]

Key improvements in subsequent patches (v4.0.1–v4.0.7) include:

  • Fixed crashes with null theme values[2]
  • Improved Linux compatibility[2]
  • Enhanced Vite integration stability[2]
  • Better CSS variable handling[2]

Developers can install it via npm with npm install tailwindcss@latest or use the new browser-based workflow with @tailwindcss/browser[2][3]. The upgrade tool (npx @tailwindcss/upgrade) simplifies migration from v3[5].

Citations:

Correct the Tailwind CSS PostCSS plugin configuration.

Tailwind CSS v4 is available (v4.0.7 released in February 2025), but the change to use @tailwindcss/postcss is still problematic because there is no npm package by that name. Please revert to the standard configuration that uses the official Tailwind CSS and Autoprefixer packages.

  • Action: Update postcss.config.js at line 3.
  • Diff: 
    -    '@tailwindcss/postcss': {}
+    'tailwindcss': {},
+    'autoprefixer': {}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'@tailwindcss/postcss': {}
'tailwindcss': {},
'autoprefixer': {}

}
}
83 changes: 79 additions & 4 deletions src/renderer/src/assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,82 @@
/* @import "tailwindcss"; */
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@plugin 'tailwindcss-animate';

@source '../../../**/*.{ts,tsx,js,jsx,html,css}';

@custom-variant dark (&:is(.dark *));

@theme {
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
--color-ring: hsl(var(--ring));
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));

--color-primary: hsl(var(--primary));
--color-primary-foreground: hsl(var(--primary-foreground));

--color-secondary: hsl(var(--secondary));
--color-secondary-foreground: hsl(var(--secondary-foreground));

--color-destructive: hsl(var(--destructive));
--color-destructive-foreground: hsl(var(--destructive-foreground));

--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));

--color-accent: hsl(var(--accent));
--color-accent-foreground: hsl(var(--accent-foreground));

--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));

--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));

--color-sidebar: hsl(var(--sidebar-background));
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
--color-sidebar-primary: hsl(var(--sidebar-primary));
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
--color-sidebar-accent: hsl(var(--sidebar-accent));
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
--color-sidebar-border: hsl(var(--sidebar-border));
--color-sidebar-ring: hsl(var(--sidebar-ring));

--radius-lg: `var(--radius) `;
--radius-md: `calc(var(--radius) - 2px) `;
--radius-sm: calc(var(--radius) - 4px);
Comment on lines +46 to +48
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

⚠️ Potential issue

Removal of Unintended Backticks in CSS Custom Properties.
The following lines use backticks around the CSS values, which may cause syntax errors:

--radius-lg: `var(--radius) `;
--radius-md: `calc(var(--radius) - 2px) `;

It is recommended to remove the backticks so that the properties are defined as:

-  --radius-lg: `var(--radius) `;
-  --radius-md: `calc(var(--radius) - 2px) `;
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);

This change will ensure that the custom properties are parsed correctly by browsers.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
--radius-lg: `var(--radius) `;
--radius-md: `calc(var(--radius) - 2px) `;
--radius-sm: calc(var(--radius) - 4px);
--radius-lg: var(--radius);
--radius-md: calc(var(--radius) - 2px);
--radius-sm: calc(var(--radius) - 4px);
🧰 Tools
🪛 Biome (1.9.4)

[error] 46-46: unexpected character ```

(parse)

[error] 46-46: unexpected character ```

(parse)

[error] 47-47: unexpected character ```

(parse)

[error] 47-47: unexpected character ```

(parse)


--background-image-dots-pattern: radial-gradient(transparent 1px, white 1px);
--background-image-dots-pattern-dark: radial-gradient(transparent 1px, rgb(0 0 0) 1px);

@keyframes bg-position {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
}

/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}

@layer base {
:root {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/animata/interactive-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ function Grid(): React.JSX.Element {

return (
<div
className={cn('absolute inset-0 !min-h-full w-full grid items-center')}
className={cn('absolute inset-0 min-h-full! w-full grid items-center')}
onMouseEnter={onMouseEnter}
ref={containerRef}
>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/home/components/note-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export function NoteEditor({
<MinimalTiptapThree
className={cn('h-full min-h-56 w-full rounded-xl')}
editable
editorClassName="focus:outline-none px-5 py-4 h-full"
editorClassName="focus:outline-hidden px-5 py-4 h-full"
editorContentClassName="overflow-auto h-full"
enableContentCheck
key={noteId}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export function Note({ Notes, defaultLayout = [12, 32, 48] }: NoteProps): React.

<Separator />

<div className="bg-background/95 p-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="bg-background/95 p-4 backdrop-blur-sm supports-backdrop-filter:bg-background/60">
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify browser support for backdrop filter syntax.

The change in feature query syntax from supports-[backdrop-filter] to supports-backdrop-filter needs verification.

🌐 Web query:

What is the correct syntax for backdrop-filter feature queries in Tailwind CSS? How to properly use @supports with backdrop-filter?

💡 Result:

The correct syntax for backdrop-filter feature detection in Tailwind CSS combines standard CSS @supports rules with Tailwind's utility-first approach. Here's how to implement it properly:

1. Basic CSS Feature Query Syntax

For native CSS detection of backdrop-filter support:

@supports (backdrop-filter: blur(1px)) {
  /* Styles for supported browsers */
}

@supports not (backdrop-filter: blur(1px)) {
  /* Fallback styles */
}

2. Tailwind-Specific Implementation

Tailwind requires explicit configuration for custom @supports rules in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      supports: {
        'backdrop-blur': 'backdrop-filter: blur(4px)'
      }
    }
  }
}

Then use in your HTML with Tailwind's supports-[*] variant:

<div class="supports-[backdrop-filter]:backdrop-blur-md">
  <!-- Content -->
</div>

Key Considerations:

  • Browser Support: Works in modern browsers (Chrome/Edge 76+, Safari 13+) but requires fallbacks[9]
  • Build Process: Ensure @tailwind base is included to initialize CSS variables[6][7]
  • Performance: Combine with opacity control for optimal rendering:
<div class="bg-white/50 backdrop-blur-lg">...</div>

For complex scenarios requiring multiple filters:

<div class="backdrop-filter-[blur(8px)_saturate(180%)]">...</div>

Troubleshooting Tip: If filters disappear after build, check your PostCSS/SASS configuration isn't stripping empty CSS variables[6][7].

Citations:

Action Required: Update Feature Query Syntax for Backdrop Filter

  • In src/renderer/src/components/home/index.tsx at line 45, update the class name from

    supports-backdrop-filter:bg-background/60

    to

    supports-[backdrop-filter]:bg-background/60

    This adjustment is needed to match Tailwind CSS’s recommended syntax for custom feature query variants.

  • Additionally, ensure that appropriate fallbacks or alternative styles are provided for browsers that do not support the backdrop-filter property (modern browsers like Chrome 76+, Safari 13+, and Edge support it).

<form>
<div className="relative">
<SearchIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/minimal-tiptap-three.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export const MinimalTiptapThree = React.forwardRef<HTMLDivElement, MinimalTiptap
return (
<MeasuredContainer
as="div"
className={cn('flex h-auto w-full flex-col shadow-sm', className)}
className={cn('flex h-auto w-full flex-col shadow-xs', className)}
name="editor"
ref={ref}
>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/nav-secondary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function NavUser({

<DropdownMenuContent
align="end"
className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
side={isMobile ? 'bottom' : 'right'}
sideOffset={4}
>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/shared/create-note-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export function CreateNoteButton(): React.JSX.Element {
<SimpleTooltip content="Create new Note">
<Button
className={cn(
'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-offset-foreground rounded-full grid'
'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-hidden focus:ring-1 focus:ring-offset-foreground rounded-full grid'
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid Tailwind CSS class: focus:outline-hidden

The class focus:outline-hidden is not a valid Tailwind CSS class. The standard class for removing outline is focus:outline-none.

Apply this diff to fix the invalid class:

-            'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-hidden focus:ring-1 focus:ring-offset-foreground rounded-full grid'
+            'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-offset-foreground rounded-full grid'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-hidden focus:ring-1 focus:ring-offset-foreground rounded-full grid'
'h-12 animate-shimmer items-center justify-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-offset-foreground rounded-full grid'

)}
onClick={() => openModal('create-note-modal')}
size="icon"
Expand Down
7 changes: 4 additions & 3 deletions src/renderer/src/components/ui/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,16 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@renderer/utils'

const badgeVariants = cva(
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid Tailwind CSS class: focus:outline-hidden

The class focus:outline-hidden is not a valid Tailwind CSS class. The standard class for removing outline is focus:outline-none.

Apply this diff to fix the invalid class:

-  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

{
variants: {
variant: {
default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
default:
'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
'border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80',
outline: 'text-foreground'
}
},
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@renderer/utils'

const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid Tailwind CSS class: focus-visible:outline-hidden

The class focus-visible:outline-hidden is not a valid Tailwind CSS class. The standard class for removing outline is focus-visible:outline-none.

Apply this diff to fix the invalid class:

-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',

className
)}
{...props}
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/src/components/ui/command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const CommandInput = React.forwardRef<

<CommandPrimitive.Input
className={cn(
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid Tailwind class affecting accessibility.

The class outline-hidden is not a valid Tailwind CSS class. This change could break focus visibility and harm accessibility in both CommandInput and CommandItem components.

Use the standard Tailwind class:

-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',

-      'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',

Also applies to: 120-120

className
)}
ref={ref}
Expand Down Expand Up @@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
className={cn(
'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
className
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
>
{children}

<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Ensure modal close button remains accessible.

The change to focus:outline-hidden on the close button could affect keyboard accessibility in modal dialogs. Modal dialogs require clear visual focus indicators for accessibility compliance.

Consider keeping the default focus outline or using a more visible alternative:

-focus:outline-hidden
+focus:ring-2 focus:ring-offset-2 focus:ring-primary
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:ring-primary focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">

<X className="h-4 w-4" />

<span className="sr-only">Close</span>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/dotted-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const DialogContent = React.forwardRef<
>
{children}

<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Invalid Tailwind class affecting accessibility.

The class focus:outline-hidden is not a valid Tailwind CSS class. This change could break focus visibility and harm accessibility.

Use the standard Tailwind class:

-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">

<Cross2Icon className="h-4 w-4" />

<span className="sr-only">Close</span>
Expand Down
8 changes: 4 additions & 4 deletions src/renderer/src/components/ui/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && 'pl-8',
className
)}
Expand Down Expand Up @@ -82,7 +82,7 @@ const DropdownMenuItem = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
className={cn(
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
inset && 'pl-8',
className
)}
Expand All @@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
checked={checked}
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
className
)}
ref={ref}
Expand All @@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
className={cn(
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
className
)}
ref={ref}
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/ui/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...pr
return (
<input
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix invalid Tailwind CSS class name.

The class outline-hidden is not a valid Tailwind CSS class. The correct class for hiding outline is outline-none.

Fix the class name:

-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',

className
)}
ref={ref}
Expand Down
Loading
Loading