Merge pull request #2054 from GW2Treasures/feature/legendary-relics-a…

…ctions Add actions to legendary relics tables
GW2Treasures · Feb 14, 2025 · 8eaf56e · 8eaf56e
2 parents 3e3952a + a09b518
commit 8eaf56e
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 4 deletions.
diff --git a/apps/web/app/[language]/legendary/relics/page.tsx b/apps/web/app/[language]/legendary/relics/page.tsx
@@ -15,6 +15,13 @@ import { Headline } from '@gw2treasures/ui/components/Headline/Headline';
 import { createDataTable } from '@gw2treasures/ui/components/Table/DataTable';
 import type { Metadata } from 'next';
 import { createItemTable, LegendaryItemDataTable } from '../table';
+import { DropDown } from '@gw2treasures/ui/components/DropDown/DropDown';
+import { Button, LinkButton } from '@gw2treasures/ui/components/Form/Button';
+import { Icon } from '@gw2treasures/ui';
+import { MenuList } from '@gw2treasures/ui/components/Layout/MenuList';
+import { CopyButton } from '@gw2treasures/ui/components/Form/Buttons/CopyButton';
+import { encode } from 'gw2e-chat-codes';
+import { Separator } from '@gw2treasures/ui/components/Layout/Separator';
 
 // item id of the legendary relic
 const legendaryRelicId = 101582;
@@ -103,6 +110,20 @@ export default async function LegendaryRelicsPage() {
         <Relics.DynamicColumns headers={<AccountAchievementProgressHeader/>}>
           {({ achievement, bitId }) => <AccountAchievementProgressRow achievement={achievement} bitId={bitId}/>}
         </Relics.DynamicColumns>
+        <Relics.Column id="actions" title="" small fixed>
+          {({ item, achievement }) => (
+            <DropDown button={<Button iconOnly appearance="menu"><Icon icon="more"/></Button>} preferredPlacement="right-start">
+              <MenuList>
+                <LinkButton appearance="menu" icon="eye" href={`/item/${item.id}`}>View Item</LinkButton>
+                <CopyButton appearance="menu" icon="chatlink" copy={encode('item', item.id) || ''}><Trans id="chatlink.copy"/></CopyButton>
+                <LinkButton appearance="menu" icon="external" href={`https://api.guildwars2.com/v2/items/${item.id}?v=latest`} target="_blank" rel="noreferrer noopener">API</LinkButton>
+                <Separator/>
+                <LinkButton appearance="menu" icon="eye" href={`/achievement/${achievement.id}`}>View Achievement</LinkButton>
+                <LinkButton appearance="menu" icon="external" href={`https://api.guildwars2.com/v2/achievements/${achievement.id}?v=latest`} target="_blank" rel="noreferrer noopener">API</LinkButton>
+              </MenuList>
+            </DropDown>
+          )}
+        </Relics.Column>
       </Relics.Table>
     </>
   );

diff --git a/apps/web/app/[language]/legendary/table.tsx b/apps/web/app/[language]/legendary/table.tsx
@@ -7,6 +7,12 @@ import { Gw2AccountBodyCells, Gw2AccountHeaderCells } from '@/components/Gw2Api/
 import { LegendaryArmoryCell } from './table.client';
 import { requiredScopes } from './helper';
 import { Trans } from '@/components/I18n/Trans';
+import { DropDown } from '@gw2treasures/ui/components/DropDown/DropDown';
+import { Button, LinkButton } from '@gw2treasures/ui/components/Form/Button';
+import { Icon } from '@gw2treasures/ui';
+import { MenuList } from '@gw2treasures/ui/components/Layout/MenuList';
+import { CopyButton } from '@gw2treasures/ui/components/Form/Buttons/CopyButton';
+import { encode } from 'gw2e-chat-codes';
 
 export function createItemTable(items: Pick<Item, keyof LocalizedEntity | 'id' | 'rarity'>[]) {
   return createDataTable(items, ({ id }) => id);
@@ -24,6 +30,18 @@ export const LegendaryItemDataTable: FC<LegendaryItemDataTableProps> = ({ table:
       <items.DynamicColumns headers={<Gw2AccountHeaderCells small requiredScopes={requiredScopes}/>}>
         {(item) => <Gw2AccountBodyCells requiredScopes={requiredScopes}><LegendaryArmoryCell itemId={item.id} accountId={undefined as never}/></Gw2AccountBodyCells>}
       </items.DynamicColumns>
+      <items.Column id="actions" title="" small fixed>
+        {({ id }) => (
+          <DropDown button={<Button iconOnly appearance="menu"><Icon icon="more"/></Button>} preferredPlacement="right-start">
+            <MenuList>
+              <LinkButton appearance="menu" icon="eye" href={`/item/${id}`}>View Item</LinkButton>
+              <CopyButton appearance="menu" icon="chatlink" copy={encode('recipe', id) || ''}><Trans id="chatlink.copy"/></CopyButton>
+              <LinkButton appearance="menu" icon="external" href={`https://gw2efficiency.com/crafting/calculator/a~0!b~1!c~0!d~1-${id}`} target="_blank" rel="noreferrer noopener">gw2efficiency</LinkButton>
+              <LinkButton appearance="menu" icon="external" href={`https://api.guildwars2.com/v2/recipes/${id}?v=latest`} target="_blank" rel="noreferrer noopener">API</LinkButton>
+            </MenuList>
+          </DropDown>
+        )}
+      </items.Column>
     </items.Table>
   );
 };
diff --git a/apps/web/translations/en.json b/apps/web/translations/en.json
@@ -367,7 +367,7 @@
   "legendary-armory.trinkets": "Trinkets",
   "legendary-armory.relics": "Relics",
   "legendary-armory.relics.title": "Legendary Relics",
-  "legendary-armory.relics.description": "Legendary Relics can take the effect of any relic, and can be used on every character once unlocked in the Legendary Armory.",
+  "legendary-armory.relics.description": "Legendary Relics can take the effect of any unlocked relic, and can be used on every character once unlocked in the Legendary Armory.",
   "legendary-armory.relics.unlocks": "Unlocks",
-  "legendary-armory.relics.unlocks.description": "Relics introduced after Secrets of the Obscure have to be unlocked, before they can be used with the Legendary Relic."
+  "legendary-armory.relics.unlocks.description": "Core relics can always be used with the Legendary Relic. Other relics require the corresponding expansions, and relics introduced after Secrets of the Obscure have to be unlocked."
 }
diff --git a/packages/ui/components/Table/DataTable.client.tsx b/packages/ui/components/Table/DataTable.client.tsx
@@ -126,8 +126,8 @@ export const DataTableClientColumnSelection: FC<DataTableClientColumnSelectionPr
   return (
     <DropDown button={<Button icon="columns">{children}</Button>} preferredPlacement="right-start">
       <MenuList>
-        {currentAvailableColumns.filter((column) => !column.fixed).map((column) => (
-          <Checkbox key={column.id} checked={currentColumns.includes(column.id)} onChange={(checked) => setColumns(id, currentAvailableColumns.map(({ id }) => id).filter((id) => id === column.id ? checked : currentColumns.includes(id)))}>{column.title}</Checkbox>
+        {currentAvailableColumns.filter((column) => !column.fixed || column.title).map((column) => (
+          <Checkbox key={column.id} checked={column.fixed || currentColumns.includes(column.id)} onChange={(checked) => setColumns(id, currentAvailableColumns.map(({ id }) => id).filter((id) => id === column.id ? checked : currentColumns.includes(id)))} disabled={column.fixed}>{column.title}</Checkbox>
         ))}
         <Separator/>
         <Button appearance="menu" onClick={() => setColumns(id, undefined)} disabled={columns[id] === undefined}>{reset}</Button>