UX issue with gmaes data table

[ingoau]

You have to press the arrow to the far right of the table to go to the gmae. Clicking the name should navigate.

[ingoau]

@coderabbitai Can you fix this and open a pr

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch details of issue #392 using GitHub CLI
gh issue view 392 --json title,body,labels,assignees,state

Length of output: 266

---

🏁 Script executed:

#!/bin/bash
# Search for files related to games and tables
echo "=== Searching for files with 'game' and 'table' keywords ==="
rg -l "game.*table|table.*game" --ignore-case

echo -e "\n=== Searching for files containing 'game' ==="
rg -l "game" --ignore-case | head -10

echo -e "\n=== Searching for table components ==="
rg -l "table|Table" | head -10

echo -e "\n=== Searching for navigation or routing related to games ==="
rg -l "navigate.*game|router.*game|game.*navigate|game.*router" --ignore-case

Length of output: 3565

---

🏁 Script executed:

#!/bin/bash
# Read the main games file
echo "=== Content of src/lib/gmaes.ts ==="
cat src/lib/gmaes.ts

echo -e "\n=== Searching for files that import or use gmaes ==="
rg -l "gmaes" --ignore-case

echo -e "\n=== Searching for usage of gmaes in code ==="
rg "gmaes" --ignore-case -A 3 -B 1

Length of output: 13605

---

🏁 Script executed:

#!/bin/bash
# Read the table columns definition
echo "=== Content of src/routes/g/columns.ts ==="
cat src/routes/g/columns.ts

echo -e "\n=== Content of src/routes/g/table-actions.svelte ==="
cat src/routes/g/table-actions.svelte

echo -e "\n=== Content of src/routes/g/+page.svelte ==="
cat src/routes/g/+page.svelte

Length of output: 2365

---

Task: Fix UX issue with games data table navigation

• Modify the "name" column in the games data table to be clickable for navigation
• Users should be able to click the game name to navigate to the game instead of only using the arrow button
• Maintain existing functionality while adding the new navigation option

@Inglan I'll fix this UX issue and plan the code changes for you! The problem is that users currently have to click the arrow button on the far right to navigate to games, but clicking the game name should work too.

I've analyzed the codebase and found that the games data table is implemented using TanStack Table in src/routes/g/columns.ts. The solution is to modify the "name" column to render as a clickable link instead of plain text.

The code changes have been planned above. Another agent will implement these changes to make the game names clickable, which will provide a much better user experience. Users will then be able to click either the game name or the arrow button to navigate to the game page.

Note: I cannot directly open pull requests, but the planned code changes above will be implemented automatically to resolve this UX issue.

---

⏳ Preparing changes...

[coderabbitai]

A summary of the changes CodeRabbit can apply:

• Modify the name column in the data table by importing the Button component and updating the column to render game names as clickable link-style buttons directing to each game's page, replacing the plain text display.

• Modify the games data table in columns.ts by importing the Button component and updating the "name" column to render the game names as clickable links using the Button with a "link" style, enabling direct navigation to each game's page.

A summary of the context that CodeRabbit is considering across the codebase:

I need to examine the current columns.ts file structure to understand how the name column is currently implemented.

Show context details

Generated Script:

```shell
cat src/routes/g/columns.ts

**Shell Result:**

import type { ColumnDef } from '@tanstack/table-core';
import type { ParsedGmae } from '$lib/gmaes';
import { renderComponent } from '$lib/components/ui/data-table/index.js';
import TableActions from './table-actions.svelte';
import Tags from './tags.svelte';
import HeaderButtonSort from './header-button-sort.svelte';

export const columns: ColumnDef[] = [
{
accessorKey: 'id',
header: ({ column }) =>
renderComponent(HeaderButtonSort, {
content: 'ID'
})
},
{
accessorKey: 'name',
header: ({ column }) =>
renderComponent(HeaderButtonSort, {
onclick: column.getToggleSortingHandler(),
content: 'Name',
sort: true
}),
// @ts-ignore
filterFn: 'fuzzy'
},
{
accessorKey: 'category',
header: ({ column }) =>
renderComponent(HeaderButtonSort, {
onclick: column.getToggleSortingHandler(),
content: 'Category',
sort: true
})
},
{
accessorKey: 'description',
header: ({ column }) =>
renderComponent(HeaderButtonSort, {
content: 'Description'
})
},
{
accessorKey: 'tags',
header: ({ column }) =>
renderComponent(HeaderButtonSort, {
content: 'Tags'
}),
cell: ({ row }) => {
return renderComponent(Tags, { tags: row.original.tags });
}
},
{
id: 'actions',
cell: ({ row }) => {
return renderComponent(TableActions, { id: row.original.id });
}
}
];

</details>

> <rationale>I need to check the Button component structure to understand how to properly implement the clickable link functionality.</rationale>

<details>
<summary>Show context details</summary>

**Generated Script:**

find . -path "*/button/index.*" -o -path "*/button.svelte" | head -3
cat src/lib/components/ui/button/index.ts 2>/dev/null || echo "index.ts not found"

**Shell Result:**

./src/lib/components/ui/button/index.ts
index.ts not found

</details>

> <rationale>I need to examine the Button component export structure to understand the proper import path.</rationale>

<details>
<summary>Show context details</summary>

**Generated Script:**

find src/lib/components/ui/button -name "*.ts" -o -name "*.js" | xargs cat 2>/dev/null | head -20

**Shell Result:**

import { tv, type VariantProps } from "tailwind-variants";
import Root from "./button.svelte";

const buttonVariants = tv({
base: "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",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10"
}
},
defaultVariants: {
variant: "default",
size: "default"
}
});

type Variant = VariantProps["variant"];
type Size = VariantProps["size"];

type Props = {
class?: string;
variant?: Variant;
size?: Size;
};

type Events = {
click: MouseEvent;
};

export {
Root,
type Props,
type Events,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants
};

</details>

- [ ] <!-- {"checkboxId": "32599f3c-a2a5-4bb9-b887-dee90db62b97", "radioGroupId": "edit-actions-group-3003601554"} --> ✅ Create PR with these edits
- [ ] <!-- {"checkboxId": "6b3df8e2-79f5-4eb8-9d4a-c7d3a6a5f7b1", "radioGroupId": "edit-actions-group-3003601554"} --> 📋 Get copyable edits

<!-- <agentComponentType>plan-edits</agentComponentType> -->

<!-- <rawResChunk>Looking at the requirement to make game names clickable in the data table, I can see from the context that:

1. The Button component exists and supports a `link` variant with href functionality
2. The current name column only displays plain text without any click functionality
3. Other columns use `renderComponent` to render custom components

I need to modify the name column to render a clickable Button component instead of plain text.

<changeScript>
```shell
# Add Button import at the top of the file
sed -i '3a import { Button } from '\''$lib/components/ui/button/index.js'\'';' src/routes/g/columns.ts

# Add cell renderer to name column - insert after the header property
sed -i '/accessorKey: '\''name'\''/,/filterFn: '\''fuzzy'\''/ {
    /sort: true$/a\
		}),\
		cell: ({ row }) => {\
			return renderComponent(Button, {\
				variant: '\''link'\'',\
				class: '\''p-0 h-auto font-medium text-left justify-start'\'',\
				href: `/g/${row.original.id}`,\
				children: row.original.name\
			});\
		},
}' src/routes/g/columns.ts

# Remove the extra closing brace that becomes redundant
sed -i '/accessorKey: '\''name'\''/,/filterFn: '\''fuzzy'\''/ {
    /sort: true$/,/cell: ({ row })/ {
        /^\t\t\t}),$/d
    }
}' src/routes/g/columns.ts

-->

[ingoau]

@coderabbitai ok sounds good. Can you open a pr. Thanks!

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Caution

CodeRabbit has failed to create the PR to execute your edits.

[ingoau]

@coderabbitai can you try again?

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Caution

CodeRabbit has failed to create the PR to execute your edits.

[ingoau]

Fine I'll implement it myself

[ingoau]

@coderabbitai I changed my mind because I'm lazy can you please try and implement this again

[coderabbitai]

Tip

For best results, initiate chat on the files or code changes.

Caution

CodeRabbit has failed to create the PR to execute your edits.