feat: recreate dashboard page from previous version

inertia/components/dashboard/collection/collection_controls.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import QuickResourceAction from '~/components/dashboard/quick_action/quick_action';
+import useActiveCollection from '~/hooks/use_active_collection';
+
+const CollectionControlsStyle = styled.span({
+  display: 'flex',
+  gap: '0.5em',
+  alignItems: 'center',
+});
+
+export default function CollectionControls() {
+  const { activeCollection } = useActiveCollection();
+  return (
+    activeCollection && (
+      <CollectionControlsStyle>
+        <QuickResourceAction
+          resource="link"
+          action="create"
+          collectionId={activeCollection.id}
+        />
+        <QuickResourceAction
+          resource="collection"
+          action="edit"
+          resourceId={activeCollection.id}
+        />
+        <QuickResourceAction
+          resource="collection"
+          action="remove"
+          resourceId={activeCollection.id}
+        />
+      </CollectionControlsStyle>
+    )
+  );
+}

inertia/components/dashboard/collection/collection_description.tsx

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import useActiveCollection from '~/hooks/use_active_collection';
+
+const CollectionDescriptionStyle = styled.p({
+  fontSize: '0.85em',
+  marginBottom: '0.5em',
+});
+
+export default function CollectionDescription() {
+  const { activeCollection } = useActiveCollection();
+  return (
+    activeCollection && (
+      <CollectionDescriptionStyle>
+        {activeCollection?.description}
+      </CollectionDescriptionStyle>
+    )
+  );
+}

inertia/components/dashboard/collection/collection_header.tsx

@@ -0,0 +1,47 @@
+import styled from '@emotion/styled';
+import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
+import VisibilityBadge from '~/components/dashboard/side_nav/visibilty/visibilty';
+import useActiveCollection from '~/hooks/use_active_collection';
+
+const CollectionNameWrapper = styled.div({
+  minWidth: 0,
+  width: '100%',
+  display: 'flex',
+  gap: '0.35em',
+  flex: 1,
+  alignItems: 'center',
+});
+
+const CollectionName = styled.div({
+  minWidth: 0,
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+});
+
+const LinksCount = styled.div(({ theme }) => ({
+  minWidth: 'fit-content',
+  fontWeight: 300,
+  fontSize: '0.8em',
+  color: theme.colors.grey,
+}));
+
+export default function CollectionHeader() {
+  const { t } = useTranslation('common');
+  const { activeCollection } = useActiveCollection();
+
+  if (!activeCollection) return <Fragment />;
+
+  const { name, links, visibility } = activeCollection;
+  return (
+    <CollectionNameWrapper>
+      <CollectionName>{name}</CollectionName>
+      {links.length > 0 && <LinksCount> — {links.length}</LinksCount>}
+      <VisibilityBadge
+        label={t('collection.visibility')}
+        visibility={visibility}
+      />
+    </CollectionNameWrapper>
+  );
+}