refactor: misc component updates, styles, and gitignore by filipagr · Pull Request #128 · filecoin-project/fil-one

filipagr · 2026-03-27T18:11:20Z

What

Catch-all for smaller improvements that don't belong in a focused component PR.

Changes

AccessKeysTable — uses Dialog + Badge, removes inline status styles
AccessKeyBucketScopeFields / AccessKeyPermissionsFields — minor cleanup
AddBucketKeyModal — migrated to use Dialog component
BaseLink — simplified variant handling
SidebarNav — active state styling improvements
globals.css — brand color tokens, tracking-tight utility
styles.css — import consolidation
use-file-upload.ts — minor type fix
.gitignore — added common IDE/OS entries

🤖 Generated with Claude Code

Components: - AccessKeysTable: use Dialog + Badge, remove inline status styles - AccessKeyBucketScopeFields / AccessKeyPermissionsFields: minor cleanup - AddBucketKeyModal: use Dialog component - BaseLink: simplify variant handling - SidebarNav: active state styling improvements Styles: - globals.css: add brand color tokens, tracking-tight utility - styles.css: import consolidation Other: - use-file-upload.ts: minor type fix - .gitignore: add common IDE and OS entries Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Copilot

Pull request overview

This PR is a grab-bag refactor across the website package, aiming to modernize component usage (Dialogs/Badges/Buttons), tweak styling tokens, and add a few repo hygiene updates.

Changes:

Updates several website components (AccessKeysTable, SidebarNav, AddBucketKeyModal, BaseLink) to new UI patterns/props.
Adds Inconsolata variable font and a mono font token.
Adds an oxlint.config.js and expands .gitignore entries.

Reviewed changes

Copilot reviewed 9 out of 11 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
packages/website/src/styles/globals.css	Adds mono font token; removes `modal.css` import (currently breaks existing Modal styling).
packages/website/src/styles.css	Imports Inconsolata variable font (dependency not declared).
packages/website/src/lib/use-file-upload.ts	Changes object-name change handler signature (currently incompatible with `Input` API).
packages/website/src/components/SidebarNav.tsx	Refactors button/link + ProgressBar import (currently uses non-existent paths/unsupported Button props).
packages/website/src/components/BaseLink.tsx	Adds router-safe Link fallback (currently has problematic prop typing/spread).
packages/website/src/components/AddBucketKeyModal.tsx	Migrates to Dialog/Label + updates Input/Button usage (currently references missing components and wrong `Input` onChange signature).
packages/website/src/components/AccessKeysTable.tsx	Refactors badges/copy UI (currently references missing components + unsupported Button variant).
packages/website/src/components/AccessKeyPermissionsFields.tsx	Adjusts Checkbox import path (currently points to non-existent file).
packages/website/src/components/AccessKeyBucketScopeFields.tsx	Adjusts Checkbox/Icon imports + Icon sizing (currently points to non-existent paths and wrong `Icon` size type).
oxlint.config.js	Introduces repo-level oxlint configuration.
.gitignore	Adds Storybook log/static output ignores.

Comments suppressed due to low confidence (1)

packages/website/src/styles/globals.css:6

modal.css was removed from the global stylesheet imports, but the Modal component still relies on the .modal-* classes defined there (e.g. modal-backdrop, modal-panel, etc.). This will break styling for all existing <Modal> usages (ConfirmDialog, CreateAccessKeyModal, billing dialogs, etc.). Re-add the @import './modal.css'; or move those styles into a still-imported stylesheet.

@import './button.css';
@import './state-card.css';
@import './table.css';
@import './tabs.css';
@import './text-input.css';
@import './toast.css';

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-06T07:49:33Z

@@ -1,2 +1,3 @@
 @import 'tailwindcss';
+@import '@fontsource-variable/inconsolata';


This new @import '@fontsource-variable/inconsolata'; requires adding @fontsource-variable/inconsolata to the relevant package.json dependencies/devDependencies (currently it’s not declared anywhere in the repo). Without that, installs/builds will fail with a missing module error.

Suggested change

@import '@fontsource-variable/inconsolata';

Copilot · 2026-04-06T07:49:33Z

+  const handleObjectNameChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    userEditedName.current = true;
-    setObjectName(value);
+    setObjectName(e.target.value);
  }, []);


Input components in this codebase call onChange with a string value (see components/Input.tsx), but handleObjectNameChange was changed to expect a ChangeEvent. This will break call sites like UploadObjectPage that pass handleObjectNameChange directly to <Input onChange={...}>. Keep this callback signature as (value: string) => void (or update Input + all call sites consistently).

Copilot · 2026-04-06T07:49:33Z

 import { Link, useMatchRoute } from '@tanstack/react-router';
-import { ProgressBar } from './ProgressBar.js';
-import { Button } from './Button.js';
+import { ProgressBar } from './ProgressBar/index.js';


./ProgressBar/index.js does not exist (ProgressBar is ProgressBar.tsx in this folder). This import path will fail at build time; import from ./ProgressBar (or the actual file that exists) instead.

Suggested change

import { ProgressBar } from './ProgressBar/index.js';

import { ProgressBar } from './ProgressBar';

Copilot · 2026-04-06T07:49:34Z

+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Upgrade</Link>
            </Button>


Button does not support variant="default" or the asChild prop (see components/Button.tsx, variants are primary|ghost|tertiary|filled). This usage won’t compile and also changes navigation behavior. Use href="/billing" with a supported variant (or extend Button to support asChild + the new variant everywhere).

Copilot · 2026-04-06T07:49:34Z

+            <Button variant="default" asChild className="w-full justify-center text-xs">
+              <Link to="/billing">Upgrade</Link>
            </Button>


Button does not support variant="default" or the asChild prop (variants are primary|ghost|tertiary|filled). This usage won’t compile; use href + a supported variant, or update Button to support these props consistently.

Copilot · 2026-04-06T07:49:35Z

+          <Button variant="default" onClick={onCreateOpen}>
+            <PlusIcon className="size-4" />


Button variants in this codebase are primary|ghost|tertiary|filled; variant="default" will not compile. Use a supported variant, and if you need an icon, pass it via the existing icon prop (or extend the Button API consistently).

Suggested change

<Button variant="default" onClick={onCreateOpen}>

<PlusIcon className="size-4" />

<Button variant="primary" icon={PlusIcon} onClick={onCreateOpen}>

Copilot · 2026-04-06T07:49:36Z

@@ -1,5 +1,5 @@
 import type { AccessKeyPermission } from '@filone/shared';
-import { Checkbox } from './Checkbox';
+import { Checkbox } from './Checkbox/index.js';


./Checkbox/index.js does not exist (Checkbox is Checkbox.tsx in this folder). This import path will fail at build time; import from ./Checkbox (or the actual file that exists) instead.

Suggested change

import { Checkbox } from './Checkbox/index.js';

import { Checkbox } from './Checkbox';

Copilot · 2026-04-06T07:49:36Z

+import { Checkbox } from './Checkbox/index.js';
+import { Icon } from './Icon/index.js';


./Checkbox/index.js and ./Icon/index.js do not exist (these components are Checkbox.tsx/Icon.tsx in this folder). These import paths will fail at build time; import from ./Checkbox and ./Icon instead.

Suggested change

import { Checkbox } from './Checkbox/index.js';

import { Icon } from './Icon/index.js';

import { Checkbox } from './Checkbox';

import { Icon } from './Icon';

Copilot · 2026-04-06T07:49:36Z

            <div className="flex items-center justify-center py-6" role="status">
              <span className="text-brand-700 animate-spin">
-                <Icon component={SpinnerIcon} size={20} />
+                <Icon component={SpinnerIcon} size="md" />


Icon’s size prop is a number (defaults to 24). Passing size="md" will fail typechecking and may render incorrectly. Use a numeric size (e.g. 20) or extend Icon to support named sizes consistently.

Suggested change

<Icon component={SpinnerIcon} size="md" />

<Icon component={SpinnerIcon} size={20} />

Copilot · 2026-04-06T07:49:38Z

+class RouterLinkSafe extends Component<
+  { to: string; children?: ReactNode } & Record<string, unknown>,
+  { hasError: boolean }


RouterLinkSafe types ...rest as Record<string, unknown> and then spreads it into <a {...rest}> / <Link {...rest}>. This is not assignable to those components’ prop types (e.g. className?: unknown), and will typically fail TypeScript checking. Type RouterLinkSafe props as the same anchor-attribute shape you pass from BaseLink (e.g. Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>) instead of a generic Record.

pyropy

Could you please revisit these imports before merging the PR? Also, let's keep the ts extension for the oxlint config file.

pyropy · 2026-04-09T10:22:57Z

Let's keep the ts extension.

pyropy · 2026-04-09T10:27:14Z

+import { Checkbox } from './Checkbox/index.js';
+import { Icon } from './Icon/index.js';


I see that all these components import from <Component>/index.js , but the actual extension file is index.ts. Also I don't think it's necessary to explicitly specify that import is coming from index.{ts|js} file.

pyropy requested a review from Copilot April 6, 2026 07:43

Copilot started reviewing on behalf of pyropy April 6, 2026 07:44 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

pyropy reviewed Apr 9, 2026

View reviewed changes

		@@ -1,2 +1,3 @@
		@import 'tailwindcss';
		@import '@fontsource-variable/inconsolata';

	import { ProgressBar } from './ProgressBar/index.js';
	import { ProgressBar } from './ProgressBar';

		<Button variant="default" onClick={onCreateOpen}>
		<PlusIcon className="size-4" />

	<Button variant="default" onClick={onCreateOpen}>
	<PlusIcon className="size-4" />
	<Button variant="primary" icon={PlusIcon} onClick={onCreateOpen}>

	import { Checkbox } from './Checkbox/index.js';
	import { Checkbox } from './Checkbox';

		import { Checkbox } from './Checkbox/index.js';
		import { Icon } from './Icon/index.js';

	<Icon component={SpinnerIcon} size="md" />
	<Icon component={SpinnerIcon} size={20} />

Conversation

filipagr commented Mar 27, 2026

What

Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

pyropy left a comment

Choose a reason for hiding this comment

Uh oh!

pyropy Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

pyropy Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants