a lot of things
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
export const getAssetFromGroup = (assets, assetType) => {
|
||||
if (!assetType || !assets) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (Array.isArray(assets)) {
|
||||
return assets.find((entry) => entry?.asset_type === assetType) || null;
|
||||
}
|
||||
|
||||
return assets?.[assetType] || null;
|
||||
};
|
||||
|
||||
export const getAssetFromVersion = (currentVersion, assetType) => {
|
||||
if (!currentVersion) {
|
||||
return null;
|
||||
}
|
||||
return getAssetFromGroup(currentVersion.assets, assetType);
|
||||
};
|
||||
|
||||
class AssetManager {
|
||||
constructor({ api, assetPresignTtlMs }) {
|
||||
this.api = api;
|
||||
this.assetPresignTtlMs = assetPresignTtlMs;
|
||||
this.assetCache = new Map();
|
||||
this.assetInflight = new Map();
|
||||
this.previewCache = new Map();
|
||||
this.previewInflight = new Map();
|
||||
}
|
||||
|
||||
setApi(api) {
|
||||
this.api = api;
|
||||
}
|
||||
|
||||
rememberAsset(entry) {
|
||||
if (entry?.id) {
|
||||
this.assetCache.set(entry.id, entry);
|
||||
}
|
||||
}
|
||||
|
||||
hydrateAsset(asset) {
|
||||
if (!asset || !asset.id) {
|
||||
return asset;
|
||||
}
|
||||
const cached = this.assetCache.get(asset.id);
|
||||
if (!cached) {
|
||||
return asset;
|
||||
}
|
||||
const merged = { ...cached, ...asset };
|
||||
if (cached.url && !asset.url) {
|
||||
merged.url = cached.url;
|
||||
}
|
||||
if (cached.expiresAt) {
|
||||
const cachedExpires = Number(cached.expiresAt) || null;
|
||||
const assetExpires = Number(asset.expiresAt) || null;
|
||||
if (!assetExpires || (cachedExpires && cachedExpires > assetExpires)) {
|
||||
merged.expiresAt = cachedExpires;
|
||||
}
|
||||
}
|
||||
return merged;
|
||||
}
|
||||
|
||||
hydrateDocument(document) {
|
||||
if (!document) {
|
||||
return document;
|
||||
}
|
||||
|
||||
const currentVersion = document.current_version || null;
|
||||
if (!currentVersion) {
|
||||
return document;
|
||||
}
|
||||
|
||||
let changed = false;
|
||||
let nextAssets = currentVersion.assets;
|
||||
|
||||
if (nextAssets && !Array.isArray(nextAssets)) {
|
||||
const hydrated = {};
|
||||
Object.keys(nextAssets).forEach((key) => {
|
||||
hydrated[key] = this.hydrateAsset(nextAssets[key]);
|
||||
if (hydrated[key] !== nextAssets[key]) {
|
||||
changed = true;
|
||||
}
|
||||
});
|
||||
if (changed) {
|
||||
nextAssets = { ...nextAssets, ...hydrated };
|
||||
}
|
||||
} else if (Array.isArray(nextAssets)) {
|
||||
const hydratedList = nextAssets.map((item) => this.hydrateAsset(item));
|
||||
if (
|
||||
hydratedList.length !== nextAssets.length ||
|
||||
hydratedList.some((item, index) => item !== nextAssets[index])
|
||||
) {
|
||||
changed = true;
|
||||
nextAssets = hydratedList;
|
||||
}
|
||||
}
|
||||
|
||||
if (!changed) {
|
||||
return document;
|
||||
}
|
||||
|
||||
const nextCurrentVersion = { ...currentVersion, assets: nextAssets };
|
||||
return { ...document, current_version: nextCurrentVersion };
|
||||
}
|
||||
|
||||
hydrateDocuments(documents) {
|
||||
if (!Array.isArray(documents)) {
|
||||
return documents;
|
||||
}
|
||||
return documents.map((doc) => this.hydrateDocument(doc));
|
||||
}
|
||||
|
||||
hydrateDetail(detail) {
|
||||
if (!detail) {
|
||||
return detail;
|
||||
}
|
||||
let changed = false;
|
||||
const next = { ...detail };
|
||||
|
||||
if (detail.document) {
|
||||
const hydratedDocument = this.hydrateDocument(detail.document);
|
||||
if (hydratedDocument !== detail.document) {
|
||||
next.document = hydratedDocument;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (Array.isArray(detail.assets)) {
|
||||
const hydratedAssets = detail.assets.map((item) => this.hydrateAsset(item));
|
||||
if (
|
||||
hydratedAssets.length !== detail.assets.length ||
|
||||
hydratedAssets.some((item, index) => item !== detail.assets[index])
|
||||
) {
|
||||
next.assets = hydratedAssets;
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
return changed ? next : detail;
|
||||
}
|
||||
|
||||
hydrateFolderContents(contents) {
|
||||
if (!contents) {
|
||||
return contents;
|
||||
}
|
||||
const next = { ...contents };
|
||||
if (Array.isArray(contents.documents)) {
|
||||
next.documents = this.hydrateDocuments(contents.documents);
|
||||
}
|
||||
if (contents.document) {
|
||||
next.document = this.hydrateDocument(contents.document);
|
||||
}
|
||||
return next;
|
||||
}
|
||||
|
||||
ensureAsset(documentId, asset, { force = false } = {}) {
|
||||
if (!documentId || !asset?.id) {
|
||||
return Promise.resolve(asset || null);
|
||||
}
|
||||
|
||||
const assetExpiresAt = typeof asset.expiresAt === 'number' ? asset.expiresAt : null;
|
||||
if (!force && asset?.url && (!assetExpiresAt || assetExpiresAt > Date.now())) {
|
||||
this.rememberAsset(asset);
|
||||
return Promise.resolve(asset);
|
||||
}
|
||||
|
||||
const cached = this.assetCache.get(asset.id);
|
||||
const now = Date.now();
|
||||
if (!force && cached && cached.expiresAt && cached.expiresAt > now && cached.url) {
|
||||
return Promise.resolve({ ...asset, ...cached });
|
||||
}
|
||||
|
||||
const inflightKey = `${documentId}:${asset.id}`;
|
||||
if (!force && this.assetInflight.has(inflightKey)) {
|
||||
return this.assetInflight.get(inflightKey);
|
||||
}
|
||||
|
||||
if (!this.api) {
|
||||
return Promise.reject(new Error('AssetManager API client is not configured.'));
|
||||
}
|
||||
|
||||
const request = this.api
|
||||
.get(`/documents/${documentId}/assets/${asset.id}`)
|
||||
.then(({ data }) => {
|
||||
const entry = {
|
||||
...asset,
|
||||
...data,
|
||||
expiresAt: Date.now() + this.assetPresignTtlMs,
|
||||
};
|
||||
this.rememberAsset(entry);
|
||||
return entry;
|
||||
})
|
||||
.finally(() => {
|
||||
this.assetInflight.delete(inflightKey);
|
||||
});
|
||||
|
||||
this.assetInflight.set(inflightKey, request);
|
||||
return request;
|
||||
}
|
||||
|
||||
ensurePreview(documentId, { force = false } = {}) {
|
||||
if (!documentId) {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
const cached = this.previewCache.get(documentId);
|
||||
const now = Date.now();
|
||||
if (!force && cached && (!cached.expiresAt || cached.expiresAt > now)) {
|
||||
return Promise.resolve(cached);
|
||||
}
|
||||
|
||||
if (!force && this.previewInflight.has(documentId)) {
|
||||
return this.previewInflight.get(documentId);
|
||||
}
|
||||
|
||||
if (!this.api) {
|
||||
return Promise.reject(new Error('AssetManager API client is not configured.'));
|
||||
}
|
||||
|
||||
const request = this.api
|
||||
.get(`/documents/${documentId}/download`)
|
||||
.then(({ data }) => {
|
||||
const ttl = data.expires_in ? Math.max(data.expires_in - 60, 30) * 1000 : 5 * 60 * 1000;
|
||||
const entry = {
|
||||
url: data.url,
|
||||
contentType: data.content_type || null,
|
||||
filename: data.filename,
|
||||
expiresAt: Date.now() + ttl,
|
||||
};
|
||||
this.previewCache.set(documentId, entry);
|
||||
return entry;
|
||||
})
|
||||
.finally(() => {
|
||||
this.previewInflight.delete(documentId);
|
||||
});
|
||||
|
||||
this.previewInflight.set(documentId, request);
|
||||
return request;
|
||||
}
|
||||
|
||||
getPreview(documentId) {
|
||||
return this.previewCache.get(documentId) || null;
|
||||
}
|
||||
|
||||
deleteDocument(documentId) {
|
||||
if (!documentId) return;
|
||||
this.previewCache.delete(documentId);
|
||||
this.previewInflight.delete(documentId);
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.assetCache.clear();
|
||||
this.assetInflight.clear();
|
||||
this.previewCache.clear();
|
||||
this.previewInflight.clear();
|
||||
}
|
||||
}
|
||||
|
||||
export default AssetManager;
|
||||
@@ -0,0 +1,33 @@
|
||||
import { useCallback } from 'react';
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
const normalizeMessage = (error) => {
|
||||
if (!error) return 'Something went wrong.';
|
||||
if (typeof error === 'string') {
|
||||
return error;
|
||||
}
|
||||
const { response, message } = error;
|
||||
if (response?.data?.error) return response.data.error;
|
||||
if (response?.data?.message) return response.data.message;
|
||||
return message || 'Something went wrong.';
|
||||
};
|
||||
|
||||
const useApiError = ({
|
||||
logger = console,
|
||||
onReport = noop,
|
||||
} = {}) => {
|
||||
return useCallback(
|
||||
(error, { message, variant = 'error', retry = null } = {}) => {
|
||||
const normalizedMessage = message || normalizeMessage(error);
|
||||
if (logger && typeof logger.error === 'function') {
|
||||
logger.error('[API]', normalizedMessage, error);
|
||||
}
|
||||
onReport({ message: normalizedMessage, variant, retry, error });
|
||||
return normalizedMessage;
|
||||
},
|
||||
[logger, onReport],
|
||||
);
|
||||
};
|
||||
|
||||
export default useApiError;
|
||||
+673
-211
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,317 @@
|
||||
/* Skeuomorphic workspace styles */
|
||||
.skeuo-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.skeuo-shell {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
--desk-1: #f0e2c6;
|
||||
--desk-2: #e7d2ad;
|
||||
--desk-3: #d8b98a;
|
||||
--desk-grain-dark: rgba(110, 86, 48, 0.08);
|
||||
--desk-grain-fine: rgba(86, 66, 33, 0.04);
|
||||
--desk-vignette: rgba(60, 40, 18, 0.15);
|
||||
background:
|
||||
radial-gradient(120% 85% at 50% -10%, var(--desk-vignette), #0000 48%),
|
||||
linear-gradient(7deg, #0000 0 32%, var(--desk-grain-dark) 60%, #0000 85%),
|
||||
repeating-linear-gradient(
|
||||
7deg,
|
||||
var(--desk-grain-fine) 0 2px,
|
||||
#0000 2px 9px
|
||||
),
|
||||
linear-gradient(90deg, var(--desk-1), var(--desk-2) 48%, var(--desk-3) 100%);
|
||||
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
|
||||
background-blend-mode: multiply, overlay, normal, normal;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.skeuo-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.skeuo-header__meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.skeuo-header__meta h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.skeuo-breadcrumbs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.skeuo-crumb {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.skeuo-crumb.is-current {
|
||||
color: var(--fg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.skeuo-crumb-separator {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.skeuo-header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.skeuo-canvas {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 1.5rem 1.5rem;
|
||||
border-radius: 18px;
|
||||
background-image: radial-gradient(rgba(255, 255, 255, 0.5) 9%, transparent 9%),
|
||||
linear-gradient(180deg, rgba(0, 0, 0, 0.05), transparent 32%);
|
||||
background-size: 46px 46px, 100% 100%;
|
||||
box-shadow: inset 0 16px 28px rgba(0, 0, 0, 0.07), inset 0 -6px 20px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.skeuo-empty {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.skeuo-item {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
cursor: grab;
|
||||
touch-action: none;
|
||||
transform-origin: center center;
|
||||
transition: transform 0.28s ease, box-shadow 0.16s ease;
|
||||
outline: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.skeuo-item__body {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
transition: width 0.28s ease, height 0.28s ease;
|
||||
}
|
||||
|
||||
.skeuo-item:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.skeuo-item.is-dragging {
|
||||
cursor: grabbing;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.skeuo-item.is-zoomed {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.skeuo-item.is-zoomed .skeuo-item__card {
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.skeuo-item.is-tag-target .skeuo-item__card {
|
||||
outline: 1em dashed var(--accent);
|
||||
outline-offset: 1.41em;
|
||||
}
|
||||
|
||||
.skeuo-item.is-tag-pending .skeuo-item__card {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.skeuo-item.is-filtered-out {
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
filter: blur(15px) grayscale(100%);
|
||||
transition: opacity 0.6s ease, filter 0.28s ease;
|
||||
z-index: 0 !important;
|
||||
}
|
||||
|
||||
.skeuo-item__tags {
|
||||
--tag-scale: 1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
align-items: flex-end;
|
||||
transform-origin: top right;
|
||||
transform: scale(var(--tag-scale)) translate(-0.5em, 0.5em);
|
||||
transition: transform 0.28s ease;
|
||||
}
|
||||
|
||||
.skeuo-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0.28rem 0.7rem;
|
||||
border-radius: 1px;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0) 70%), var(--surface);
|
||||
color: var(--fg);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.18);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.skeuo-item__tags .skeuo-tag {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.18rem 0.55rem;
|
||||
pointer-events: auto;
|
||||
cursor: grab;
|
||||
transition: transform 0.16s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.skeuo-tag.is-drag-hidden {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.skeuo-tag span {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.skeuo-item__tags .skeuo-tag.is-tear-pending {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.skeuo-tag-shelf {
|
||||
position: absolute;
|
||||
top: 2.25rem;
|
||||
right: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
align-items: flex-end;
|
||||
max-height: calc(100% - 4rem);
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.skeuo-tag-shelf .skeuo-tag {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.skeuo-tag-shelf .skeuo-tag:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.skeuo-tag-shelf .skeuo-tag.is-inactive {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.skeuo-tag-shelf .skeuo-tag.is-active {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.skeuo-tag-add {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: var(--fg);
|
||||
font-size: 1.4rem;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-top: 0.4rem;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.skeuo-tag-add:hover {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.skeuo-tag-add:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.skeuo-tag-add:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
body.skeuo-cursor-remove,
|
||||
body.skeuo-cursor-remove * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.skeuo-item__shadow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skeuo-item__card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeuo-item__card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.skeuo-item__placeholder {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: normal;
|
||||
color: var(--muted);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -691,7 +691,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
.thumb-placeholder {
|
||||
width: 36px;
|
||||
height: 48px;
|
||||
border-radius: 0;
|
||||
border-radius: 1px;
|
||||
color: var(--muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user