Add edit button to default view and add icons to properties in the on…

…tology view

browser/CHANGELOG.md

@@ -11,6 +11,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - [#968](https://github.com/atomicdata-dev/atomic-server/issues/968) Allow users to pick files by entering a subject into the file picker search bar.
 - [#969](https://github.com/atomicdata-dev/atomic-server/issues/969) Fix markdown editor sometimes doesn't update the value after saving.
 - Fix markdown editor closing the edit page when a button is clicked.
+- Add an edit button to the default resource view.
 
 ### @tomic/lib
 

browser/data-browser/src/components/ClassDetail.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Resource, useResource } from '@tomic/react';
 import { Detail } from './Detail';
-import { getIconForClass } from '../views/FolderPage/iconMap';
+import { getIconForClass } from '../helpers/iconMap';
 import { InlineFormattedResourceList } from './InlineFormattedResourceList';
+import { AtomicLink } from './AtomicLink';
 
 type ClassDetailProps = {
   resource: Resource;
@@ -35,7 +36,7 @@ const ClassItem = ({ subject }: ClassItemProps): JSX.Element => {
   return (
     <Detail>
       <Icon />
-      {classResource.title}
+      <AtomicLink subject={subject}>{classResource.title}</AtomicLink>
     </Detail>
   );
 };

browser/data-browser/src/components/Detail.tsx

@@ -11,6 +11,4 @@ export const Detail = styled.div`
 /** A wrapper for the Detail component . */
 export const Details = styled.div`
   font-style: italic;
-  margin-bottom: 0.5rem;
-  margin-top: -0.5rem;
 `;

browser/data-browser/src/components/IconButton/IconButton.tsx

@@ -94,6 +94,7 @@ const IconButtonBase = styled.button<ButtonBaseProps>`
   user-select: none;
   padding: var(--button-padding);
   aspect-ratio: 1/1;
+  height: 2em;
   margin-inline-start: ${p =>
     p.edgeAlign === 'start' ? 'calc(var(--button-padding) * -1)' : '0'};
 

browser/data-browser/src/components/ParentPicker/ParentPickerItem.tsx

@@ -10,7 +10,7 @@ import {
 } from '@tomic/react';
 import { Details } from '../Details';
 import { useEffect, useState } from 'react';
-import { getIconForClass } from '../../views/FolderPage/iconMap';
+import { getIconForClass } from '../../helpers/iconMap';
 import { styled } from 'styled-components';
 
 const shouldBeRendered = (resource: Resource) =>

browser/data-browser/src/components/SideBar/OntologySideBar/OntologiesPanel.tsx

@@ -9,7 +9,7 @@ import {
 import { SideBarItem } from '../SideBarItem';
 import { Row } from '../../Row';
 import { AtomicLink } from '../../AtomicLink';
-import { getIconForClass } from '../../../views/FolderPage/iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 import { ScrollArea } from '../../ScrollArea';
 import { ErrorLook } from '../../ErrorLook';
 import { useCallback, useEffect, useState } from 'react';

browser/data-browser/src/components/SideBar/ResourceSideBar/SidebarItemTitle.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 import { styled, css, keyframes } from 'styled-components';
 import { SideBarItem } from '../SideBarItem';
 import { FloatingActions, floatingHoverStyles } from './FloatingActions';
-import { getIconForClass } from '../../../views/FolderPage/iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 import { useResource, useArray, core, useString } from '@tomic/react';
 import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
 import { DraggableAttributes } from '@dnd-kit/core';

browser/data-browser/src/components/forms/SearchBox/ResultLine.tsx

@@ -7,7 +7,7 @@ import {
 } from '@tomic/react';
 import React, { useEffect, useRef } from 'react';
 import { styled, css } from 'styled-components';
-import { getIconForClass } from '../../../views/FolderPage/iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 
 interface ResultLineProps {
   selected: boolean;

browser/data-browser/src/views/FolderPage/iconMap.ts → browser/data-browser/src/helpers/iconMap.ts

@@ -1,4 +1,11 @@
-import { collections, commits, core, dataBrowser, server } from '@tomic/react';
+import {
+  collections,
+  commits,
+  core,
+  dataBrowser,
+  Datatype,
+  server,
+} from '@tomic/react';
 import { IconType } from 'react-icons';
 import {
   FaTag,
@@ -18,6 +25,12 @@ import {
   FaShapes,
   FaShareFromSquare,
   FaTable,
+  FaArrowUpRightFromSquare,
+  FaCalendar,
+  FaFont,
+  FaListUl,
+  FaMarkdown,
+  FaRegSquareCheck,
 } from 'react-icons/fa6';
 
 const iconMap = new Map<string, IconType>([
@@ -45,3 +58,16 @@ export function getIconForClass(
 ): IconType {
   return iconMap.get(classSubject) ?? fallback;
 }
+
+export const dataTypeIconMap = new Map<string, IconType>([
+  [Datatype.STRING, FaFont],
+  [Datatype.SLUG, FaFont],
+  [Datatype.MARKDOWN, FaMarkdown],
+  [Datatype.ATOMIC_URL, FaArrowUpRightFromSquare],
+  [Datatype.INTEGER, FaHashtag],
+  [Datatype.FLOAT, FaHashtag],
+  [Datatype.RESOURCEARRAY, FaListUl],
+  [Datatype.BOOLEAN, FaRegSquareCheck],
+  [Datatype.DATE, FaCalendar],
+  [Datatype.TIMESTAMP, FaClock],
+]);

browser/data-browser/src/routes/NewResource/ClassButton.tsx

@@ -1,5 +1,5 @@
 import { useResource, useTitle } from '@tomic/react';
-import { getIconForClass } from '../../views/FolderPage/iconMap';
+import { getIconForClass } from '../../helpers/iconMap';
 import { NewInstanceButton } from '../../components/NewInstanceButton';
 
 interface ClassButtonProps {

browser/data-browser/src/views/Card/ResourceCardTitle.tsx

@@ -7,7 +7,7 @@ import {
   PAGE_TITLE_TRANSITION_TAG,
   transitionName,
 } from '../../helpers/transitionName';
-import { getIconForClass } from '../FolderPage/iconMap';
+import { getIconForClass } from '../../helpers/iconMap';
 import { Row } from '../../components/Row';
 
 interface ResourceCardTitleProps {

browser/data-browser/src/views/ClassPage.tsx

@@ -16,13 +16,13 @@ import { defaultHiddenProps } from './ResourcePageDefault';
 export function ClassPage({ resource }: ResourcePageProps) {
   return (
     <ContainerNarrow about={resource.subject}>
-      <Title resource={resource} />
-      <ClassDetail resource={resource} />
-      <ValueForm
-        resource={resource}
-        propertyURL={core.properties.description}
-      />
       <Column>
+        <Title resource={resource} />
+        <ClassDetail resource={resource} />
+        <ValueForm
+          resource={resource}
+          propertyURL={core.properties.description}
+        />
         <AllProps
           resource={resource}
           except={defaultHiddenProps}

browser/data-browser/src/views/FolderPage/GridItem/ResourceGridItem.tsx

@@ -9,7 +9,7 @@ import {
 import { useCallback, useMemo } from 'react';
 import { styled } from 'styled-components';
 import { constructOpenURL } from '../../../helpers/navigation';
-import { getIconForClass } from '../iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 import { BookmarkGridItem } from './BookmarkGridItem';
 import { BasicGridItem } from './BasicGridItem';
 import { GridCard, GridItemTitle, GridItemWrapper } from './components';

browser/data-browser/src/views/FolderPage/ListView.tsx

@@ -10,7 +10,7 @@ import { styled } from 'styled-components';
 import { AtomicLink } from '../../components/AtomicLink';
 import { CommitDetail } from '../../components/CommitDetail';
 import { ViewProps } from './FolderDisplayStyle';
-import { getIconForClass } from './iconMap';
+import { getIconForClass } from '../../helpers/iconMap';
 import { FaPlus } from 'react-icons/fa';
 import { Button } from '../../components/Button';
 

browser/data-browser/src/views/OntologyPage/Property/PropertyLineRead.tsx

@@ -1,10 +1,12 @@
-import { urls, useResource, useString } from '@tomic/react';
+import { urls, useResource, useString, type Core } from '@tomic/react';
 
 import { styled } from 'styled-components';
 import Markdown from '../../../components/datatypes/Markdown';
 import { InlineDatatype } from '../InlineDatatype';
 import { ErrorLook } from '../../../components/ErrorLook';
 import { CARD_CONTAINER } from '../../../helpers/containers';
+import { dataTypeIconMap } from '../../../helpers/iconMap';
+import { Row } from '../../../components/Row';
 
 interface PropertyLineReadProps {
   subject: string;
@@ -13,8 +15,9 @@ interface PropertyLineReadProps {
 export function PropertyLineRead({
   subject,
 }: PropertyLineReadProps): JSX.Element {
-  const resource = useResource(subject);
+  const resource = useResource<Core.Property>(subject);
   const [description] = useString(resource, urls.properties.description);
+  const Icon = dataTypeIconMap.get(resource.props.datatype);
 
   if (resource.error) {
     return (
@@ -26,7 +29,10 @@ export function PropertyLineRead({
 
   return (
     <SubGrid>
-      <PropTitle>{resource.title}</PropTitle>
+      <Row center gap='1ch'>
+        {Icon && <Icon />}
+        <PropTitle>{resource.title}</PropTitle>
+      </Row>
       <DatatypeSlot>
         <InlineDatatype resource={resource} />
       </DatatypeSlot>
@@ -48,9 +54,13 @@ const SubGrid = styled.div`
     grid-template-columns: 1fr;
   }
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: ${p => p.theme.colors.bg1};
   }
+
+  & svg {
+    fill: ${p => p.theme.colors.textLight};
+  }
 `;
 
 const MarkdownWrapper = styled.span`

browser/data-browser/src/views/ResourcePageDefault.tsx

@@ -1,4 +1,4 @@
-import { useString, core, server, commits } from '@tomic/react';
+import { useString, core, server, commits, useCanWrite } from '@tomic/react';
 import AllProps from '../components/AllProps';
 import { ClassDetail } from '../components/ClassDetail';
 import { ContainerNarrow } from '../components/Containers';
@@ -7,6 +7,14 @@ import { ResourcePageProps } from './ResourcePage';
 import { CommitDetail } from '../components/CommitDetail';
 import { Details } from '../components/Detail';
 import { EditableTitle } from '../components/EditableTitle';
+import { FaPencil } from 'react-icons/fa6';
+import {
+  IconButton,
+  IconButtonVariant,
+} from '../components/IconButton/IconButton';
+import { Column, Row } from '../components/Row';
+import { useNavigateWithTransition } from '../hooks/useNavigateWithTransition';
+import { editURL } from '../helpers/navigation';
 
 /**
  * The properties that are shown in an alternative, custom way in default views.
@@ -32,31 +40,46 @@ export const defaultHiddenProps = [
 ];
 
 /**
- * The Resource view that is used when no specific one fits better. It lists all
+ * The Resource view that is used when no specific one fits better. It lists most
  * properties.
  */
 export function ResourcePageDefault({
   resource,
 }: ResourcePageProps): JSX.Element {
   const [lastCommit] = useString(resource, commits.properties.lastCommit);
+  const [canEdit] = useCanWrite(resource);
+  const navigate = useNavigateWithTransition();
 
   return (
     <ContainerNarrow>
-      <EditableTitle resource={resource} />
-      <Details>
-        <ClassDetail resource={resource} />
-        <CommitDetail commitSubject={lastCommit} />
-      </Details>
-      <ValueForm
-        resource={resource}
-        propertyURL={core.properties.description}
-      />
-      <AllProps
-        resource={resource}
-        except={defaultHiddenProps}
-        editable
-        columns
-      />
+      <Column>
+        <Row justify='space-between'>
+          <EditableTitle resource={resource} />
+          {canEdit && (
+            <IconButton
+              title='Edit'
+              variant={IconButtonVariant.Square}
+              onClick={() => navigate(editURL(resource.subject))}
+            >
+              <FaPencil />
+            </IconButton>
+          )}
+        </Row>
+        <Details>
+          <ClassDetail resource={resource} />
+          <CommitDetail commitSubject={lastCommit} />
+        </Details>
+        <ValueForm
+          resource={resource}
+          propertyURL={core.properties.description}
+        />
+        <AllProps
+          resource={resource}
+          except={defaultHiddenProps}
+          editable
+          columns
+        />
+      </Column>
     </ContainerNarrow>
   );
 }

browser/data-browser/src/views/TablePage/EditorCells/AtomicURLCell.tsx

@@ -22,7 +22,7 @@ import {
   CursorMode,
   useTableEditorContext,
 } from '../../../components/TableEditor/TableEditorContext';
-import { getIconForClass } from '../../FolderPage/iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 import { CellContainer, DisplayCellProps, EditCellProps } from './Type';
 import { useResourceSearch } from './useResourceSearch';
 import { IconButton } from '../../../components/IconButton/IconButton';

browser/data-browser/src/views/TablePage/EditorCells/MultiRelationCell.tsx

@@ -14,7 +14,7 @@ import {
   InputWrapper,
 } from '../../../components/forms/InputStyles';
 import { useTableEditorContext } from '../../../components/TableEditor/TableEditorContext';
-import { getIconForClass } from '../../FolderPage/iconMap';
+import { getIconForClass } from '../../../helpers/iconMap';
 import { CellContainer, DisplayCellProps, EditCellProps } from './Type';
 import { useResourceSearch } from './useResourceSearch';
 import { IconButton } from '../../../components/IconButton/IconButton';

browser/data-browser/src/views/TablePage/NewColumnButton.tsx

@@ -3,10 +3,10 @@ import { useCallback, useContext, useMemo, useState } from 'react';
 import { FaChevronCircleDown, FaFile, FaHashtag, FaPlus } from 'react-icons/fa';
 import { DIVIDER, DropdownMenu, DropdownItem } from '../../components/Dropdown';
 import { buildDefaultTrigger } from '../../components/Dropdown/DefaultTrigger';
-import { dataTypeIconMap } from './dataTypeMaps';
 import { NewPropertyDialog } from './PropertyForm/NewPropertyDialog';
 import { TablePageContext } from './tablePageContext';
 import { ExternalPropertyDialog } from './PropertyForm/ExternalPropertyDialog';
+import { dataTypeIconMap } from '../../helpers/iconMap';
 
 const NewColumnTrigger = buildDefaultTrigger(<FaPlus />, 'Add column');
 

browser/data-browser/src/views/TablePage/TableHeading.tsx

@@ -10,13 +10,13 @@ import {
 import { FaAngleDown, FaAngleUp, FaAtom } from 'react-icons/fa';
 import { FaGripVertical } from 'react-icons/fa6';
 import { styled } from 'styled-components';
-import { dataTypeIconMap } from './dataTypeMaps';
 import { TableHeadingMenu } from './TableHeadingMenu';
 import { TablePageContext } from './tablePageContext';
 import { IconType } from 'react-icons';
 import { TableSorting } from './tableSorting';
 import { useContext, useState } from 'react';
 import { TableHeadingComponent } from '../../components/TableEditor/TableHeader';
+import { dataTypeIconMap } from '../../helpers/iconMap';
 
 function getIcon(
   propResource: Resource,

browser/data-browser/src/views/TablePage/dataTypeMaps.ts

@@ -1,15 +1,4 @@
 import { Datatype, JSONValue } from '@tomic/react';
-import type { IconType } from 'react-icons';
-import {
-  FaCalendar,
-  FaCheckSquare,
-  FaClock,
-  FaExternalLinkAlt,
-  FaFont,
-  FaHashtag,
-  FaListUl,
-  FaMarkdown,
-} from 'react-icons/fa';
 import { CellAlign } from '../../components/TableEditor/Cell';
 import { AtomicURLCell } from './EditorCells/AtomicURLCell';
 import { BooleanCell } from './EditorCells/BooleanCell';
@@ -22,19 +11,6 @@ import { SlugCell } from './EditorCells/SlugCell';
 import { StringCell } from './EditorCells/StringCell';
 import { CellContainer } from './EditorCells/Type';
 
-export const dataTypeIconMap = new Map<string, IconType>([
-  [Datatype.STRING, FaFont],
-  [Datatype.SLUG, FaFont],
-  [Datatype.MARKDOWN, FaMarkdown],
-  [Datatype.ATOMIC_URL, FaExternalLinkAlt],
-  [Datatype.INTEGER, FaHashtag],
-  [Datatype.FLOAT, FaHashtag],
-  [Datatype.RESOURCEARRAY, FaListUl],
-  [Datatype.BOOLEAN, FaCheckSquare],
-  [Datatype.DATE, FaCalendar],
-  [Datatype.TIMESTAMP, FaClock],
-]);
-
 export const dataTypeCellMap = new Map<Datatype, CellContainer<JSONValue>>([
   [Datatype.STRING, StringCell],
   [Datatype.SLUG, SlugCell],