Merge 836e7f4 into d51afe4

Author: Polleps

data-browser/src/hooks/useQueryScope.ts

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
 import { useQueryString } from '../helpers/navigation';
 
 export interface QueryScopeHandler {
@@ -11,10 +12,14 @@ export function useQueryScopeHandler(subject: string): QueryScopeHandler;
 export function useQueryScopeHandler(): Omit<QueryScopeHandler, 'enableScope'>;
 export function useQueryScopeHandler(subject?: string): QueryScopeHandler {
   const [scope, setScope] = useQueryString('queryscope');
+  const navigate = useNavigate();
 
   const enableScope = useCallback(() => {
-    setScope(subject);
-    // setQuery('');
+    const params = new URLSearchParams({
+      queryscope: subject ?? '',
+    });
+
+    navigate(`/app/search?${params.toString()}`, { replace: true });
   }, [setScope, subject]);
 
   const clearScope = useCallback(() => {

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

@@ -0,0 +1,22 @@
+import { urls, useResource, useString, useTitle } from '@tomic/react';
+import React from 'react';
+import { AtomicLink } from '../../components/AtomicLink';
+import Markdown from '../../components/datatypes/Markdown';
+import { CardViewProps } from './CardViewProps';
+
+export function ElementCard({ resource }: CardViewProps): JSX.Element {
+  const [documentSubject] = useString(resource, urls.properties.parent);
+  const document = useResource(documentSubject);
+  const [documentTitle] = useTitle(document);
+
+  const [text] = useString(resource, urls.properties.description);
+
+  return (
+    <>
+      <AtomicLink subject={document.getSubject()}>
+        <h2>{documentTitle}</h2>
+      </AtomicLink>
+      <Markdown text={text ?? ''} />
+    </>
+  );
+}

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

@@ -18,6 +18,7 @@ import { defaultHiddenProps } from '../ResourcePageDefault';
 import { MessageCard } from './MessageCard';
 import { BookmarkCard } from './BookmarkCard.jsx';
 import { CardViewPropsBase } from './CardViewProps';
+import { ElementCard } from './ElementCard';
 
 interface ResourceCardProps extends CardViewPropsBase {
   /** The subject URL - the identifier of the resource. */
@@ -96,6 +97,8 @@ function ResourceCardInner(props: ResourceCardProps): JSX.Element {
       return <MessageCard resource={resource} {...props} />;
     case urls.classes.bookmark:
       return <BookmarkCard resource={resource} {...props} />;
+    case urls.classes.elements.paragraph:
+      return <ElementCard resource={resource} {...props} />;
   }
 
   return (