@ossy/resources 3.3.0 → 3.5.0

package/src/ResourceGrid.jsx

@@ -0,0 +1,321 @@
+'use client'
+import React, { useRef, useEffect, useMemo, useCallback, memo, useState } from 'react'
+import { useSchemas } from './useSchemas.js'
+import {
+  Dropdown,
+  DropZone,
+  Icon,
+  Image,
+  View,
+  Text,
+  Button,
+  ContextMenu,
+} from '@ossy/design-system'
+import { formatBytes } from './utils/format-bytes.js'
+import { ResourceSelectionCheckbox } from './ResourceSelectionCheckbox.jsx'
+
+const TILE_WIDTH = 160
+
+function useSchemaMap() {
+  const templates = useSchemas()
+  return useMemo(
+    () => templates.reduce((acc, template) => ({ ...acc, [template.id]: template }), {}),
+    [templates],
+  )
+}
+
+export const ResourceGrid = ({
+  resources = [],
+  onClick = () => {},
+  onToggleSelect,
+  inlineFolder = null,
+  selectedIds,
+  showSelectionControls = false,
+}) => {
+  const templateMap = useSchemaMap()
+  const selectedSet = useMemo(() => {
+    if (selectedIds instanceof Set) return selectedIds
+    return new Set(selectedIds || [])
+  }, [selectedIds])
+
+  return (
+    <View
+      layout="row-wrap"
+      gap="m"
+      inset="m"
+      alignItems="stretch"
+      style={{ alignContent: 'flex-start' }}
+    >
+      {inlineFolder && <InlineFolderTile {...inlineFolder} />}
+      {resources.map(resource => (
+        <ResourceGridItem
+          key={resource.id}
+          resource={resource}
+          templateMap={templateMap}
+          onItemClick={onClick}
+          onToggleSelect={onToggleSelect}
+          showSelectionControls={showSelectionControls}
+          selected={selectedSet.has(resource.id) || Boolean(resource.selected)}
+        />
+      ))}
+    </View>
+  )
+}
+
+function InlineFolderTile({ name, onChange, onSave, onCancel }) {
+  const inputRef = useRef(null)
+  const handledRef = useRef(false)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [])
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handledRef.current = true
+      onSave(event.target.value)
+    } else if (event.key === 'Escape') {
+      handledRef.current = true
+      onCancel()
+    }
+  }
+
+  const handleBlur = (event) => {
+    if (handledRef.current) return
+    onSave(event.target.value)
+  }
+
+  return (
+    <View
+      surface="primary"
+      roundness="m"
+      inset="m"
+      gap="s"
+      style={{
+        width: TILE_WIDTH,
+        border: '1px dashed var(--separator-primary)',
+        boxSizing: 'border-box',
+      }}
+    >
+      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
+        <Icon size="m" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
+      </View>
+      <input
+        ref={inputRef}
+        value={name}
+        onChange={event => onChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        style={{
+          width: '100%',
+          border: 'none',
+          background: 'transparent',
+          outline: 'none',
+          fontSize: 'var(--text-small-font-size, 14px)',
+          fontFamily: 'var(--text-default-font-family, sans-serif)',
+          fontWeight: 'var(--text-default-font-weight, 400)',
+          color: 'var(--text-default-color, CanvasText)',
+          padding: 0,
+          minWidth: 0,
+          boxSizing: 'border-box',
+        }}
+      />
+    </View>
+  )
+}
+
+const ResourceGridItem = memo(function ResourceGridItem({
+  resource,
+  templateMap,
+  onItemClick,
+  onToggleSelect,
+  showSelectionControls = false,
+  selected = false,
+}) {
+  const { onClick, href, onDrop, onFilesDrop, dragData, actions, name, type, content } = resource
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [menuPosition, setMenuPosition] = useState(null)
+
+  const handleClick = useCallback((event) => {
+    if (event?.metaKey || event?.ctrlKey || event?.shiftKey) {
+      event.preventDefault?.()
+    }
+    onItemClick?.(resource, event)
+    onClick?.(resource, event)
+  }, [onItemClick, onClick, resource])
+
+  const handleToggleSelect = useCallback((event) => {
+    onToggleSelect?.(resource, event)
+  }, [onToggleSelect, resource])
+
+  const handleContextMenu = useCallback((event) => {
+    if (!actions) return
+    event.preventDefault()
+    event.stopPropagation()
+    setMenuPosition({ top: event.clientY, left: event.clientX })
+    setMenuOpen(true)
+  }, [actions])
+
+  const handleMenuOpenChange = useCallback((open) => {
+    setMenuOpen(open)
+    if (!open) setMenuPosition(null)
+  }, [])
+
+  const handleActionsTriggerClick = useCallback(() => {
+    setMenuPosition(null)
+  }, [])
+
+  let Container = ({ children }) => <>{children}</>
+
+  if (onDrop || onFilesDrop) {
+    Container = DropZone
+  } else if (dragData) {
+    Container = DropZone.Dragable
+  }
+
+  const tile = (
+    <View
+      as={href ? 'a' : 'div'}
+      href={href}
+      onClick={handleClick}
+      onContextMenu={handleContextMenu}
+      selectable
+      data-selected={selected || undefined}
+      surface="primary"
+      roundness="m"
+      inset="m"
+      gap="s"
+      data-resource-id={resource.id}
+      style={{
+        width: TILE_WIDTH,
+        textDecoration: 'none',
+        color: 'inherit',
+        cursor: 'pointer',
+        border: selected
+          ? '1px solid var(--foreground-active, var(--separator-primary))'
+          : '1px solid var(--separator-primary)',
+        boxSizing: 'border-box',
+        position: 'relative',
+      }}
+    >
+      {(showSelectionControls || selected) && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 'var(--space-xs, 4px)',
+            left: 'var(--space-xs, 4px)',
+            zIndex: 1,
+          }}
+          onClick={event => event.stopPropagation()}
+        >
+          <ResourceSelectionCheckbox
+            selected={selected}
+            onToggle={handleToggleSelect}
+          />
+        </View>
+      )}
+      {actions ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 'var(--space-xs, 4px)',
+            right: 'var(--space-xs, 4px)',
+            zIndex: 1,
+          }}
+          onClick={event => event.stopPropagation()}
+        >
+          <RowActions
+            actions={actions}
+            open={menuOpen}
+            onOpenChange={handleMenuOpenChange}
+            position={menuPosition}
+            onTriggerClick={handleActionsTriggerClick}
+          />
+        </View>
+      ) : null}
+      <View layout="row" alignItems="center" justifyContent="center" style={{ height: 96 }}>
+        <ResourceThumb type={type} content={content} templateMap={templateMap} />
+      </View>
+      <Text
+        variant="small"
+        style={{
+          fontWeight: 'bold',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {typeof name === 'string' ? name : ''}
+      </Text>
+      <Size content={content} />
+    </View>
+  )
+
+  return (
+    <Container onDrop={onDrop} onFilesDrop={onFilesDrop} dragData={dragData}>
+      {tile}
+    </Container>
+  )
+})
+
+const ResourceThumb = memo(function ResourceThumb({ type, content, templateMap }) {
+  if (type === '@ossy/platform/schema/directory' || type === 'directory') {
+    return (
+      <Icon size="l" name="folder" style={{ fill: 'hsl(0, 0%, 60%)' }} />
+    )
+  }
+
+  const mediaType = content?.ContentType || type
+  if (typeof mediaType === 'string' && mediaType.startsWith('image')) {
+    return (
+      <Image
+        src={content?.sizes?.thumbnailSmall || content?.src}
+        placeholderSrc={content?.sizes?.['loader-square-blurred-after'] || content?.src}
+        style={{
+          width: 96,
+          height: 96,
+          objectFit: 'cover',
+          borderRadius: 'var(--roundness-s, 8px)',
+        }}
+      />
+    )
+  }
+
+  return (
+    <Icon size="l" name={templateMap[type]?.icon || 'file'} style={{ fill: 'hsl(0, 0%, 80%)' }} />
+  )
+})
+
+function Size({ content }) {
+  if (content?.ContentLength) {
+    return (
+      <Text variant="small" style={{ color: 'var(--text-secondary-color, hsl(0, 0%, 50%))' }}>
+        {formatBytes(content.ContentLength)}
+      </Text>
+    )
+  }
+
+  return null
+}
+
+function RowActions({ actions, open, onOpenChange, position, onTriggerClick }) {
+  if (!actions) return null
+
+  return (
+    <Dropdown
+      trigger={<Button prefix="more-vertical-alt" variant="command" onClick={onTriggerClick} />}
+      open={open}
+      onOpenChange={onOpenChange}
+      position={position}
+    >
+      <View inset="xs" surface="primary" roundness="s">
+        <ContextMenu roundness="s" surface="primary">
+          {actions}
+        </ContextMenu>
+      </View>
+    </Dropdown>
+  )
+}

package/src/ResourceGrid.stories.jsx

@@ -0,0 +1,95 @@
+import React, { useMemo, useState } from 'react'
+import { Button, ContextMenu, Dropdown, View } from '@ossy/design-system'
+import { WorkspaceProvider } from '@ossy/sdk-react'
+import { ResourceGrid } from './ResourceGrid.jsx'
+import { ResourceList } from './ResourceList.jsx'
+
+const mockSdk = {
+  invoke: async () => [],
+}
+
+const sampleResources = [
+  {
+    id: 'folder-1',
+    name: 'Projects',
+    type: '@ossy/platform/schema/directory',
+    content: {},
+    actions: [
+      <ContextMenu.Item key="open" prefix="mail-forward">Open</ContextMenu.Item>,
+      <ContextMenu.Separator key="sep" />,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+  {
+    id: 'file-1',
+    name: 'brief.pdf',
+    type: '@ossy/platform/schema/file',
+    content: { ContentType: 'application/pdf', ContentLength: 245760 },
+    actions: [
+      <ContextMenu.Item key="view" prefix="details-more">View</ContextMenu.Item>,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+  {
+    id: 'file-2',
+    name: 'notes.txt',
+    type: '@ossy/platform/schema/file',
+    content: { ContentType: 'text/plain', ContentLength: 1024 },
+    actions: [
+      <ContextMenu.Item key="view" prefix="details-more">View</ContextMenu.Item>,
+      <ContextMenu.Item key="remove" variant="command-danger" prefix="trash-empty">Remove</ContextMenu.Item>,
+    ],
+  },
+]
+
+function ViewToggleDemo() {
+  const [viewMode, setViewMode] = useState('list')
+  const resources = useMemo(() => sampleResources, [])
+
+  return (
+    <WorkspaceProvider sdk={mockSdk}>
+      <View gap="m">
+        <Dropdown
+          trigger={(
+            <Button
+              prefix={viewMode === 'grid' ? 'layout-grid' : 'layout-list'}
+              variant="command"
+              aria-label="Layout"
+            />
+          )}
+        >
+          <View inset="xs" surface="primary" roundness="s">
+            <ContextMenu roundness="s" surface="primary">
+              <ContextMenu.Item
+                prefix="layout-list"
+                suffix={viewMode === 'list' ? 'check' : undefined}
+                onClick={() => setViewMode('list')}
+              >
+                List view
+              </ContextMenu.Item>
+              <ContextMenu.Item
+                prefix="layout-grid"
+                suffix={viewMode === 'grid' ? 'check' : undefined}
+                onClick={() => setViewMode('grid')}
+              >
+                Grid view
+              </ContextMenu.Item>
+            </ContextMenu>
+          </View>
+        </Dropdown>
+        {viewMode === 'grid'
+          ? <ResourceGrid resources={resources} />
+          : <ResourceList resources={resources} />}
+      </View>
+    </WorkspaceProvider>
+  )
+}
+
+export default {
+  title: 'Resources/Resource views',
+  component: ResourceGrid,
+}
+
+export const ListAndGridToggle = {
+  render: () => <ViewToggleDemo />,
+}

package/src/ResourceList.jsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useEffect, useMemo, useCallback, memo } from 'react'
+import React, { useRef, useEffect, useMemo, useCallback, memo, useState } from 'react'
 import { useSchemas } from './useSchemas.js'
 import {
   Dropdown,
@@ -13,6 +13,7 @@ import {
   List,
 } from '@ossy/design-system'
 import { formatBytes } from './utils/format-bytes.js'
+import { ResourceSelectionCheckbox } from './ResourceSelectionCheckbox.jsx'
 
 function useSchemaMap() {
   const templates = useSchemas()
@@ -25,9 +26,16 @@ function useSchemaMap() {
 export const ResourceList = ({
     resources = [],
     onClick = () => {},
+    onToggleSelect,
     inlineFolder = null,
+    selectedIds,
+    showSelectionControls = false,
 }) => {
     const templateMap = useSchemaMap()
+    const selectedSet = useMemo(() => {
+      if (selectedIds instanceof Set) return selectedIds
+      return new Set(selectedIds || [])
+    }, [selectedIds])
 
     return (
       <List>
@@ -38,6 +46,9 @@ export const ResourceList = ({
                 resource={resource}
                 templateMap={templateMap}
                 onItemClick={onClick}
+                onToggleSelect={onToggleSelect}
+                showSelectionControls={showSelectionControls}
+                selected={selectedSet.has(resource.id) || Boolean(resource.selected)}
             />
         ))}
       </List>
@@ -102,14 +113,43 @@ const ResourceListItem = memo(function ResourceListItem({
     resource,
     templateMap,
     onItemClick,
+    onToggleSelect,
+    showSelectionControls = false,
+    selected = false,
   }) {
     const { onClick, href, onDrop, onFilesDrop, dragData, actions, name, type, content } = resource
+    const [menuOpen, setMenuOpen] = useState(false)
+    const [menuPosition, setMenuPosition] = useState(null)
 
-    const handleClick = useCallback(() => {
-        onItemClick(resource)
-        onClick?.(resource)
+    const handleClick = useCallback((event) => {
+        if (event?.metaKey || event?.ctrlKey || event?.shiftKey) {
+          event.preventDefault?.()
+        }
+        onItemClick?.(resource, event)
+        onClick?.(resource, event)
     }, [onItemClick, onClick, resource])
 
+    const handleToggleSelect = useCallback((event) => {
+      onToggleSelect?.(resource, event)
+    }, [onToggleSelect, resource])
+
+    const handleContextMenu = useCallback((event) => {
+      if (!actions) return
+      event.preventDefault()
+      event.stopPropagation()
+      setMenuPosition({ top: event.clientY, left: event.clientX })
+      setMenuOpen(true)
+    }, [actions])
+
+    const handleMenuOpenChange = useCallback((open) => {
+      setMenuOpen(open)
+      if (!open) setMenuPosition(null)
+    }, [])
+
+    const handleActionsTriggerClick = useCallback(() => {
+      setMenuPosition(null)
+    }, [])
+
     let Container = ({ children }) => <>{children}</>
 
     if (onDrop || onFilesDrop) {
@@ -118,15 +158,37 @@ const ResourceListItem = memo(function ResourceListItem({
       Container = DropZone.Dragable
     }
 
+    const leading = (
+      <View layout="row" alignItems="center" gap="s" style={{ flexShrink: 0 }}>
+        {(showSelectionControls || selected) && (
+          <ResourceSelectionCheckbox
+            selected={selected}
+            onToggle={handleToggleSelect}
+          />
+        )}
+        <ResourceIcon type={type} content={content} templateMap={templateMap} />
+      </View>
+    )
+
     return (
       <Container onDrop={onDrop} onFilesDrop={onFilesDrop} dragData={dragData}>
         <List.Item
           href={href}
           onClick={handleClick}
+          onContextMenu={handleContextMenu}
           selectable
-          leading={<ResourceIcon type={type} content={content} templateMap={templateMap} />}
+          selected={selected}
+          leading={leading}
           meta={<Size content={content} />}
-          trailing={<RowActions actions={actions} />}
+          trailing={(
+            <RowActions
+              actions={actions}
+              open={menuOpen}
+              onOpenChange={handleMenuOpenChange}
+              position={menuPosition}
+              onTriggerClick={handleActionsTriggerClick}
+            />
+          )}
           data-resource-id={resource.id}
         >
           {typeof name === 'string' ? name : ''}
@@ -149,6 +211,9 @@ const ResourceIcon = memo(function ResourceIcon({ type, content, templateMap })
         <Image
           src={content?.sizes?.thumbnailSmall || content?.src}
           placeholderSrc={content?.sizes?.['loader-square-blurred-after'] || content?.src}
+          blurhash={content?.blurhash}
+          width={content?.width}
+          height={content?.height}
           style={{ width: '24px', height: '24px', borderRadius: '25%' }}
         />
       )
@@ -171,11 +236,16 @@ function Size({ content }) {
     return null
 }
 
-function RowActions({ actions }) {
+function RowActions({ actions, open, onOpenChange, position, onTriggerClick }) {
     if (!actions) return null
 
     return (
-      <Dropdown trigger={<Button prefix="more-vertical-alt" variant="command" /> } >
+      <Dropdown
+        trigger={<Button prefix="more-vertical-alt" variant="command" onClick={onTriggerClick} />}
+        open={open}
+        onOpenChange={onOpenChange}
+        position={position}
+      >
         <View inset="xs" surface="primary" roundness="s">
           <ContextMenu roundness="s" surface="primary">
             {actions}

package/src/ResourcePanel.jsx

@@ -1,8 +1,14 @@
 import React, { useState, useEffect, memo } from 'react'
 import { metadata as GetResource } from './get.action.js'
-import { removeResource, updateResourceContent, renameResource } from './resource.helpers.js'
+import {
+  isDownloadableResource,
+  removeResource,
+  renameResource,
+  resourceDownloadHref,
+  updateResourceContent,
+} from './resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
-import { Switch, View, Text, Button, InputTitle, Alert, useInputValue } from '@ossy/design-system'
+import { Switch, View, Text, Button, InputTitle, Alert, useInputValue, useLocale } from '@ossy/design-system'
 import { ResourceFactory } from './ResourceFactory.jsx'
 import { ResourceDetails } from './ResourceDetails.jsx'
 import { ResourceTags } from './ResourceTags.jsx'
@@ -32,6 +38,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
   extraPanels = [],
 }) {
   const sdk = useSdk()
+  const { t } = useLocale()
   const [contentError, setContentError] = useState()
   const [resourceName, setResourceName] = useInputValue('')
   const [panelViewModes, setPanelViewModes] = useState(DefaultViewModes)
@@ -39,6 +46,7 @@ export const ResourcePanel = memo(function ResourcePanel ({
   const { data: resource = {} } = sdk.read(GetResource, { resourceId }, { enabled: !!resourceId })
   const template = useSchema(resource?.type)
   const engine = useSchemaEngine()
+  const downloadHref = isDownloadableResource(resource) ? resourceDownloadHref(resource) : null
 
   const form = useForm({ defaultData: resource.content })
 
@@ -171,6 +179,15 @@ export const ResourcePanel = memo(function ResourcePanel ({
                   <Text as="h3" variant="breadcrumb">{resourceName}</Text>
                </View.Item>
 
+              {downloadHref && (
+                <Button
+                  prefix="software-download"
+                  variant="command"
+                  href={downloadHref}
+                  download={resource.name}
+                  aria-label={t('resources.panel.download')}
+                />
+              )}
               <Button prefix="trash-empty"  variant="command-danger" onClick={onRemoveResource}/>
               <Button prefix="pen" variant="command" onClick={() => setPanelViewModes(x => ({ ...x, 'panel-header': ViewMode.Edit }))} />
               { !!_onClose && (<Button prefix="close" variant="command" onClick={onCloseResource} /> ) }

package/src/ResourceSelectionCheckbox.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View } from '@ossy/design-system'
+
+/**
+ * Checkbox affordance for multi-select rows/tiles.
+ * Click toggles selection; does not navigate or open the resource panel.
+ */
+export function ResourceSelectionCheckbox ({
+  selected = false,
+  onToggle,
+  'aria-label': ariaLabel = 'Select',
+}) {
+  return (
+    <View
+      role="checkbox"
+      aria-checked={selected}
+      aria-label={ariaLabel}
+      tabIndex={0}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle?.(event)
+      }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') return
+        event.preventDefault()
+        event.stopPropagation()
+        onToggle?.(event)
+      }}
+      style={{
+        boxSizing: 'border-box',
+        width: 18,
+        height: 18,
+        flexShrink: 0,
+        borderRadius: 4,
+        border: selected
+          ? '1px solid var(--foreground-active, var(--foreground))'
+          : '1px solid var(--separator, hsl(0, 0%, 50%))',
+        background: selected
+          ? 'var(--foreground-active, var(--foreground))'
+          : 'transparent',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+      }}
+    >
+      {selected ? (
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          aria-hidden="true"
+          style={{ display: 'block' }}
+        >
+          <path
+            d="M2.5 6.2L4.8 8.5L9.5 3.5"
+            fill="none"
+            stroke="var(--background, Canvas)"
+            strokeWidth="1.75"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+    </View>
+  )
+}

package/src/ResourcesPage.jsx

@@ -41,6 +41,9 @@ export const ResourcesPage= () => {
                     href={router.getHref({ id: "@resource", params: { resourceId: resource?.id } })}
                     src={resource?.content?.sizes?.galleryMedium || resource?.content?.src}
                     placeholderSrc={resource?.content?.sizes?.['loader-square-blurred-after'] || resource?.content?.src}
+                    blurhash={resource?.content?.blurhash}
+                    width={resource?.content?.width}
+                    height={resource?.content?.height}
                     style={{ pageBreakInside: 'avoid', cursor: 'pointer' }}
                     key={resource.id}
                   />