Update design of Collections list page (#38822)

app/javascript/mastodon/components/tab_list/index.tsx

@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+
+import classNames from 'classnames';
+import type { NavLinkProps } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
+import classes from './styles.module.scss';
+
+interface TabListProps {
+  /**
+   * Setting this will remove the default border and
+   * horizontal padding from the component
+   */
+  plain?: boolean;
+}
+
+/**
+ * Display a simple row of links as tabs.
+ * The current page will be highlighted automatically based on the link destination.
+ */
+export const TabList: FC<TabListProps & ComponentPropsWithoutRef<'div'>> = ({
+  plain,
+  className,
+  children,
+  ...otherProps
+}) => {
+  return (
+    <div
+      {...otherProps}
+      className={classNames(
+        className,
+        classes.tabList,
+        !plain && classes.withSpaceAndBorder,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const TabLink: FC<NavLinkProps> = ({
+  className,
+  children,
+  ...otherProps
+}) => {
+  return (
+    <NavLink className={classNames(classes.tab, className)} {...otherProps}>
+      {children}
+    </NavLink>
+  );
+};

app/javascript/mastodon/components/tab_list/styles.module.scss

@@ -0,0 +1,39 @@
+.tabList {
+  display: flex;
+  gap: 16px;
+}
+
+.withSpaceAndBorder {
+  padding-inline: 16px;
+  border-bottom: 1px solid var(--color-border-primary);
+}
+
+.tab {
+  display: block;
+  padding: 18px 0;
+  color: var(--color-text-primary);
+  font-size: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  border-radius: 0;
+  transition: color 0.2s ease-in-out;
+
+  @container (width < 500px) {
+    flex: 1 1 0px;
+    text-align: center;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:not(:global(.active)):is(:hover, :focus) {
+    color: var(--color-text-brand-soft);
+  }
+
+  &:global(.active) {
+    color: var(--color-text-brand);
+    border-bottom: 4px solid var(--color-border-brand);
+    padding-bottom: 14px;
+  }
+}

app/javascript/mastodon/components/tab_list/tab_list.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { TabList, TabLink } from './index';
+
+const meta = {
+  title: 'Components/TabList',
+  component: TabList,
+  subcomponents: { TabLink },
+} satisfies Meta<typeof TabList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <TabList>
+      <TabLink to='/'>Activity</TabLink>
+      <TabLink to='/media'>Media</TabLink>
+      <TabLink to='/featured'>Featured</TabLink>
+    </TabList>
+  ),
+};
+
+export const Plain: Story = {
+  render: () => (
+    <TabList plain>
+      <TabLink to='/'>Activity</TabLink>
+      <TabLink to='/media'>Media</TabLink>
+      <TabLink to='/featured'>Featured</TabLink>
+    </TabList>
+  ),
+};