Skip to content

Companies ページを Fjord direction デザインで再実装 #192

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
komagata merged 2 commits into from
May 11, 2026
Merged

Companies ページを Fjord direction デザインで再実装 #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e324bb
Companies ページを Fjord direction デザインで再実装
komagata May 11, 2026
c557481
CodeRabbit指摘対応: a11y / エラーハンドリング / 未実装ボタンの明示
komagata May 11, 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
23 changes: 21 additions & 2 deletions src/app/companies/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,28 @@
import { Zen_Maru_Gothic, M_PLUS_Rounded_1c } from "next/font/google";
import MultiLayout from "@components/layouts/MulitLayout";

export default function DashboardLayout({
const zenMaru = Zen_Maru_Gothic({
subsets: ["latin"],
weight: ["400", "500", "700", "900"],
Comment on lines +5 to +6

@coderabbitai coderabbitai Bot May 11, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

For next/font/google in current Next.js, what subsets are supported by Zen_Maru_Gothic and M_PLUS_Rounded_1c, and does subsets:["latin"] load Japanese glyphs?

💡 Result:

Next.js current (next/font/google) “subsets” option: it preloads only the specified Google Fonts subsets; it’s used for preloading, and you can choose which subset names to preload (for example subsets: ['latin']).[1] Zen_Maru_Gothic supported subsets: [cyrillic, greek, japanese, latin, latin-ext]. (From the font package listing of Zen Maru Gothic subsets.)[2] M_PLUS_Rounded_1c supported subsets: [cyrillic, cyrillic-ext, greek, greek-ext, hebrew, japanese, latin, latin-ext, vietnamese]. (From the font package listing of M PLUS Rounded 1c subsets.)[3] Does subsets:["latin"] load Japanese glyphs? No—based on how Next.js documents subsets as preload subset “names” (e.g. ['latin']) and given that Japanese glyphs belong to the 'japanese' subset (both fonts list 'japanese' as a distinct subset). Therefore, when you preload only the 'latin' subset, you should not expect Japanese glyphs to be included/loaded by that subset selection.[1][2][3]

Citations:

subsets に "japanese" を追加してください

ページが日本語ベースのため、フォント設定で subsets: ["latin"] のみでは日本語グリフが読み込まれません。Zen_Maru_Gothic と M_PLUS_Rounded_1c は両方とも "japanese" サブセットに対応しているため、subsets: ["latin", "japanese"] に変更する必要があります。現状ではテキストが期待通りに表示されません。

行: 5-6、12-13

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/companies/layout.tsx` around lines 5 - 6, The font configuration
currently sets subsets: ["latin"] for the Zen_Maru_Gothic and M_PLUS_Rounded_1c
font declarations; update those declarations to include the Japanese glyphs by
changing subsets to ["latin", "japanese"] so Japanese text renders correctly
(refer to the Zen_Maru_Gothic and M_PLUS_Rounded_1c font config objects where
subsets: ["latin"] and weight: ["400","500","700","900"] are defined).

display: "swap",
variable: "--font-zen-maru",
});

const mPlus = M_PLUS_Rounded_1c({
subsets: ["latin"],
weight: ["400", "500", "700", "800"],
display: "swap",
variable: "--font-mplus-rounded",
});

export default function CompaniesLayout({
children,
}: {
children: React.ReactNode;
}) {
return MultiLayout({ children });
return (
<div className={`${zenMaru.variable} ${mPlus.variable}`}>
<MultiLayout>{children}</MultiLayout>
</div>
);
}
358 changes: 358 additions & 0 deletions src/components/Companies.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,358 @@
/* ===================================================================
* Companies — Fjord direction
* Scoped via CSS Modules. Tokens / classes are local-only;
* they do not affect any other page.
* =================================================================== */

.wrapper {
--ink: #0B2426;
--ink-2: #2B4448;
--ink-3: #5E7679;
--ink-4: #8FA2A4;

--glacier: #F4F8F8;
--glacier-2: #EAF1F1;
--paper: #FFFFFF;

--fjord: #0E4A50;
--fjord-2: #0A363B;
--mist: #6FA8AC;
--moss: #2D6E5A;
--amber: #B5772E;
--berry: #9B3247;

--line: #D7E1E2;
--line-soft: #E5ECEC;
--focus: #6FA8AC;

--r-sm: 4px;
--r: 6px;
--r-lg: 8px;

--shadow-2: 0 1px 2px rgba(11,36,38,0.05), 0 12px 32px -16px rgba(11,36,38,0.16);

font-family: var(--font-zen-maru), var(--font-mplus-rounded), -apple-system,
"Hiragino Sans", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
font-weight: 500;
color: var(--ink);
background: var(--glacier);
line-height: 1.6;
min-height: 100%;
-webkit-font-smoothing: antialiased;
}

.inner {
max-width: 1280px;
margin: 0 auto;
padding: 48px 56px 96px;
}

/* ---- Page header ------------------------------------------------- */
.pageHead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 40px;
}
.tag {
font-family: var(--font-mplus-rounded), monospace;
font-size: 11.5px;
font-weight: 700;
color: var(--fjord);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 8px;
}
.pageHead h1 {
margin: 0;
font-size: 38px;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--ink);
}
.sub {
margin: 8px 0 0;
font-size: 14.5px;
color: var(--ink-3);
line-height: 1.8;
max-width: 48ch;
}
.actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}

/* ---- Buttons ----------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 18px;
border-radius: var(--r);
border: 1px solid transparent;
font-family: inherit;
font-weight: 700;
font-size: 13.5px;
cursor: pointer;
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
text-decoration: none;
white-space: nowrap;
}
.btnPrimary {
background: var(--fjord);
color: #fff;
box-shadow: 0 6px 14px -8px rgba(14, 74, 80, 0.6);
}
.btnPrimary:hover {
background: var(--fjord-2);
}
.btnGhost {
background: var(--paper);
border-color: var(--line);
color: var(--ink-2);
}
.btnGhost:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.btn:disabled,
.iconBtn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn:disabled:hover,
.iconBtn:disabled:hover {
background: var(--paper);
border-color: var(--line);
color: var(--ink-2);
}

/* ---- Toolbar (search + filter chips) ----------------------------- */
.toolbar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.search {
max-width: 360px;
flex: 1;
position: relative;
}
.search input {
width: 100%;
height: 38px;
padding: 0 12px 0 38px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r);
font-family: inherit;
font-weight: 500;
font-size: 14px;
color: var(--ink);
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.search input::placeholder {
color: var(--ink-4);
}
.search input:focus {
outline: none;
border-color: var(--mist);
box-shadow: 0 0 0 4px rgba(111, 168, 172, 0.18);
}
.searchIcon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--ink-4);
}
.filterChip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border: 1px solid var(--line);
background: var(--paper);
border-radius: 999px;
font-size: 12.5px;
color: var(--ink-2);
cursor: pointer;
font-family: inherit;
}
.filterChip:hover {
border-color: var(--ink-4);
color: var(--ink);
}
.chipCaret {
color: var(--ink-4);
}

/* ---- Panel + table ----------------------------------------------- */
.panel {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
}
.list {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13.5px;
}
.list thead th {
text-align: left;
padding: 12px 16px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-4);
background: var(--glacier-2);
border-bottom: 1px solid var(--line);
font-family: var(--font-mplus-rounded), monospace;
}
.list thead th:first-child {
border-top-left-radius: var(--r-lg);
padding-left: 24px;
}
.list thead th:last-child {
border-top-right-radius: var(--r-lg);
padding-right: 24px;
}
.list tbody td {
padding: 16px;
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
vertical-align: middle;
}
.list tbody td:first-child {
padding-left: 24px;
}
.list tbody td:last-child {
padding-right: 24px;
}
.list tbody tr:hover td {
background: var(--glacier);
}
.list tbody tr:last-child td {
border-bottom: 0;
}
.muted {
color: var(--ink-3);
font-size: 12.5px;
}
.right {
text-align: right;
}
.num {
font-variant-numeric: tabular-nums;
font-family: var(--font-mplus-rounded), monospace;
font-weight: 700;
}

/* ---- Company cell ------------------------------------------------ */
.coCell {
display: flex;
align-items: center;
gap: 12px;
}
.coCell .logo {
width: 36px;
height: 36px;
border-radius: var(--r);
background: linear-gradient(135deg, var(--fjord), var(--mist));
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
font-family: var(--font-zen-maru), sans-serif;
font-size: 14px;
flex-shrink: 0;
}
.coName {
font-weight: 800;
letter-spacing: -0.01em;
}
.coSub {
font-size: 12px;
color: var(--ink-4);
margin-top: 1px;
}

/* ---- Status badge ------------------------------------------------ */
.status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.02em;
font-family: var(--font-zen-maru), sans-serif;
}
.statusDot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.statusOpen {
background: rgba(45, 110, 90, 0.1);
color: var(--moss);
}
.statusOpen .statusDot {
background: var(--moss);
}
.statusPaused {
background: rgba(181, 119, 46, 0.12);
color: var(--amber);
}
.statusPaused .statusDot {
background: var(--amber);
}
.statusDraft {
background: var(--glacier-2);
color: var(--ink-3);
}
.statusDraft .statusDot {
background: var(--ink-4);
}

/* ---- Row icon button -------------------------------------------- */
.rowActions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.iconBtn {
width: 30px;
height: 30px;
display: grid;
place-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r);
cursor: pointer;
color: var(--ink-2);
transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.iconBtn:hover {
background: var(--paper);
border-color: var(--line);
color: var(--ink);
}

/* ---- Focus ring -------------------------------------------------- */
.wrapper :where(a, button, input):focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
border-radius: var(--r-sm);
}
Loading
Loading