Compare commits
1 commit
main
...
devin/1763
| Author | SHA1 | Date | |
|---|---|---|---|
|
8cc5cedc9d |
210 changed files with 3383 additions and 3210 deletions
|
|
@ -1,304 +0,0 @@
|
||||||
# ESLint Cleanup Plan
|
|
||||||
|
|
||||||
**Branch:** `devin/1763907694-fix-linter-errors`
|
|
||||||
**Status:** 613 errors → 207 errors (66% reduction, 406 fixed)
|
|
||||||
**Base:** `main` (after cleanup/linter PR #18 was merged)
|
|
||||||
**Generated:** 2025-11-24
|
|
||||||
**Last Updated:** 2025-11-24
|
|
||||||
|
|
||||||
## Executive Summary
|
|
||||||
|
|
||||||
This branch represents ongoing linter cleanup work following the merge of PR #18 (cleanup/linter). A previous automated LLM fixed 406 errors systematically, bringing the error count from 613 down to 207 (66% reduction).
|
|
||||||
|
|
||||||
**Quality Review:** The automated fixes were 84% good quality, with one critical issue (AlbumForm save functionality removed) that has been **FIXED** as of 2025-11-24.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Current Progress
|
|
||||||
|
|
||||||
### What's Already Fixed ✅ (406 errors)
|
|
||||||
|
|
||||||
#### Phase 1: Auto-Fixes & Cleanup (287 errors)
|
|
||||||
- ✅ Removed 287 unused imports and variables
|
|
||||||
- ✅ Renamed unused parameters with underscore prefix
|
|
||||||
- ✅ Configured ESLint to ignore `_` prefixed variables
|
|
||||||
|
|
||||||
#### Phase 2: Code Quality (52 errors)
|
|
||||||
- ✅ Fixed 34 duplicate SVG style properties in AvatarSVG
|
|
||||||
- ✅ Added 22 missing type imports (SerializableGameInfo, Leaflet types, etc.)
|
|
||||||
- ✅ Fixed 4 switch case scoping with braces
|
|
||||||
- ✅ Added comments to 8 empty catch blocks
|
|
||||||
- ✅ Fixed 3 empty interfaces → type aliases
|
|
||||||
- ✅ Fixed 2 regex escaping issues
|
|
||||||
- ✅ Fixed 1 parsing error (missing brace)
|
|
||||||
|
|
||||||
#### Phase 3: Svelte 5 Patterns (26 errors)
|
|
||||||
- ✅ Added `void` operator to 26 reactive dependency tracking patterns
|
|
||||||
- ✅ Proper Svelte 5 runes mode implementation
|
|
||||||
|
|
||||||
#### Phase 4: ESLint Configuration
|
|
||||||
- ✅ Added underscore ignore pattern for unused vars
|
|
||||||
- ⚠️ **Globally disabled** `svelte/no-at-html-tags` rule (affects 15+ files)
|
|
||||||
|
|
||||||
#### Phase 5: Critical Issue Fixed
|
|
||||||
- ✅ **AlbumForm save functionality restored** (was broken, now working)
|
|
||||||
- Restored: `handleSave()`, `validateForm()`, related imports
|
|
||||||
- Restored: `isSaving`, `validationErrors` state
|
|
||||||
- Restored: Zod validation schema
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Remaining Work (207 errors)
|
|
||||||
|
|
||||||
### Error Breakdown by Type
|
|
||||||
|
|
||||||
| Category | Count | % of Total | Priority |
|
|
||||||
|----------|-------|-----------|----------|
|
|
||||||
| Type Safety (`@typescript-eslint/no-explicit-any`) | 103 | 49.8% | High |
|
|
||||||
| Accessibility (`a11y_*`) | 52 | 25.1% | Medium-High |
|
|
||||||
| Svelte 5 Migration | 51 | 24.6% | Medium |
|
|
||||||
| Misc/Parsing | 1 | 0.5% | Low |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Detailed Remaining Errors
|
|
||||||
|
|
||||||
### Priority 1: Type Safety (103 errors)
|
|
||||||
|
|
||||||
Replace `any` types with proper TypeScript interfaces across:
|
|
||||||
|
|
||||||
**Areas to fix:**
|
|
||||||
- Admin components (forms, modals, utilities)
|
|
||||||
- Server utilities (logger, metadata, apple-music-client)
|
|
||||||
- API routes and RSS feeds
|
|
||||||
- Content utilities and renderers
|
|
||||||
|
|
||||||
**Approach:**
|
|
||||||
- Use Prisma-generated types for database models
|
|
||||||
- Use `Prisma.JsonValue` for JSON columns
|
|
||||||
- Create specific interfaces for complex nested data
|
|
||||||
- Use `unknown` instead of `any` when type is genuinely unknown
|
|
||||||
- Add type guards for safe casting
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Priority 2: Accessibility (52 errors)
|
|
||||||
|
|
||||||
#### Breakdown by Issue Type:
|
|
||||||
|
|
||||||
| Issue | Count | Description |
|
|
||||||
|-------|-------|-------------|
|
|
||||||
| `a11y_no_static_element_interactions` | 38 | Static elements with click handlers need ARIA roles |
|
|
||||||
| `a11y_click_events_have_key_events` | 30 | Click handlers need keyboard event handlers |
|
|
||||||
| `a11y_label_has_associated_control` | 12 | Form labels need `for` attribute |
|
|
||||||
| `a11y_no_noninteractive_element_interactions` | 8 | Non-interactive elements have interactions |
|
|
||||||
| `a11y_no_noninteractive_tabindex` | 6 | Non-interactive elements have tabindex |
|
|
||||||
| `a11y_consider_explicit_label` | 4 | Elements need explicit labels |
|
|
||||||
| `a11y_media_has_caption` | 2 | Media elements missing captions |
|
|
||||||
| `a11y_interactive_supports_focus` | 2 | Interactive elements need focus support |
|
|
||||||
| `a11y_img_redundant_alt` | 2 | Images have redundant alt text |
|
|
||||||
|
|
||||||
**Common fixes:**
|
|
||||||
- Add `role="button"` to clickable divs
|
|
||||||
- Add `onkeydown` handlers for keyboard support
|
|
||||||
- Associate labels with controls using `for` attribute
|
|
||||||
- Remove inappropriate tabindex or add proper ARIA roles
|
|
||||||
- Add captions to video/audio elements
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Priority 3: Svelte 5 Migration (51 errors)
|
|
||||||
|
|
||||||
#### Breakdown by Issue Type:
|
|
||||||
|
|
||||||
| Issue | Count | Description |
|
|
||||||
|-------|-------|-------------|
|
|
||||||
| `non_reactive_update` | 25 | Variables updated but not declared with `$state()` |
|
|
||||||
| `event_directive_deprecated` | 10 | Deprecated `on:*` handlers need updating |
|
|
||||||
| `custom_element_props_identifier` | 6 | Custom element props need explicit config |
|
|
||||||
| `state_referenced_locally` | 5 | State referenced outside reactive context |
|
|
||||||
| `element_invalid_self_closing_tag` | 2 | Self-closing non-void elements |
|
|
||||||
| `css_unused_selector` | 2 | Unused CSS selectors |
|
|
||||||
| `svelte_self_deprecated` | 1 | `<svelte:self>` is deprecated |
|
|
||||||
|
|
||||||
**Fixes needed:**
|
|
||||||
1. **Non-reactive updates:** Wrap variables in `$state()`
|
|
||||||
2. **Event handlers:** Change `on:click` → `onclick`, `on:mousemove` → `onmousemove`, etc.
|
|
||||||
3. **Custom elements:** Add explicit `customElement.props` configuration
|
|
||||||
4. **Deprecated syntax:** Replace `<svelte:self>` with self-imports
|
|
||||||
5. **Self-closing tags:** Fix `<textarea />` → `<textarea></textarea>`
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
### Priority 4: Miscellaneous (1 error)
|
|
||||||
|
|
||||||
- 1 parsing error to investigate
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Quality Review: Previous LLM Work
|
|
||||||
|
|
||||||
### Overall Assessment: ⚠️ 84% Good, 1 Critical Issue (Fixed)
|
|
||||||
|
|
||||||
**What went well:**
|
|
||||||
- ✅ Systematic, methodical approach with clear commit messages
|
|
||||||
- ✅ Proper Svelte 5 patterns (void operators)
|
|
||||||
- ✅ Correct type import fixes
|
|
||||||
- ✅ Appropriate underscore naming for unused params
|
|
||||||
- ✅ Good code cleanup (duplicate styles, switch cases)
|
|
||||||
|
|
||||||
**What went poorly:**
|
|
||||||
- ❌ **Over-aggressive dead code removal** - Removed functional AlbumForm save logic
|
|
||||||
- ⚠️ **Global rule disable** - Disabled `@html` warnings for all files instead of inline
|
|
||||||
- ⚠️ **No apparent testing** - Breaking change wasn't caught
|
|
||||||
|
|
||||||
**Root cause of AlbumForm issue:**
|
|
||||||
The `handleSave()` function appeared unused because an earlier incomplete Svelte 5 migration removed the save button UI but left the save logic orphaned. The LLM then removed the "unused" functions without understanding the migration context.
|
|
||||||
|
|
||||||
### Files Requiring Testing
|
|
||||||
|
|
||||||
Before merging, test these admin forms thoroughly:
|
|
||||||
- ✅ AlbumForm - **FIXED and should work now**
|
|
||||||
- ⚠️ EssayForm - Uses autosave, verify it works
|
|
||||||
- ⚠️ ProjectForm - Uses autosave, verify it works
|
|
||||||
- ⚠️ PhotoPostForm - Verify save functionality
|
|
||||||
- ⚠️ SimplePostForm - Verify save functionality
|
|
||||||
|
|
||||||
### Security Concerns
|
|
||||||
|
|
||||||
**`@html` Global Disable:**
|
|
||||||
The rule `svelte/no-at-html-tags` was disabled globally with the justification that "all uses are for trusted content (static SVGs, sanitized content, JSON-LD)".
|
|
||||||
|
|
||||||
**Affected files** (15 total):
|
|
||||||
- AvatarSimple.svelte
|
|
||||||
- DynamicPostContent.svelte
|
|
||||||
- PostContent.svelte
|
|
||||||
- ProjectContent.svelte
|
|
||||||
- And 11 more...
|
|
||||||
|
|
||||||
**Recommendation:** Audit each `{@html}` usage to verify content is truly safe, or replace global disable with inline `svelte-ignore` comments.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Execution Strategy
|
|
||||||
|
|
||||||
### Approach
|
|
||||||
|
|
||||||
1. ✅ **AlbumForm fixed** - Critical blocker resolved
|
|
||||||
2. **Work by priority** - Type safety → Accessibility → Svelte 5
|
|
||||||
3. **Batch similar fixes** - Process files with same error pattern together
|
|
||||||
4. **Test frequently** - Especially admin forms after changes
|
|
||||||
5. **Commit often** - Make rollback easy if needed
|
|
||||||
|
|
||||||
### Phase Breakdown
|
|
||||||
|
|
||||||
#### Phase 1: Type Safety (103 errors) - HIGH PRIORITY
|
|
||||||
**Goal:** Replace all `any` types with proper TypeScript types
|
|
||||||
|
|
||||||
**Batches:**
|
|
||||||
1. Admin components with `any` types
|
|
||||||
2. Server utilities (logger, metadata, apple-music-client)
|
|
||||||
3. API routes and RSS feeds
|
|
||||||
4. Content utilities and helpers
|
|
||||||
5. Miscellaneous files
|
|
||||||
|
|
||||||
**Pattern:**
|
|
||||||
- Use Prisma types: `import type { Post, Project, Media } from '@prisma/client'`
|
|
||||||
- Use `Prisma.JsonValue` for JSON columns
|
|
||||||
- Create interfaces for complex structures
|
|
||||||
- Use type guards instead of casts
|
|
||||||
|
|
||||||
#### Phase 2: Accessibility (52 errors) - MEDIUM-HIGH PRIORITY
|
|
||||||
**Goal:** Make UI accessible to all users
|
|
||||||
|
|
||||||
**Batches:**
|
|
||||||
1. Add ARIA roles to 38 static elements with click handlers
|
|
||||||
2. Add keyboard handlers to 30 click events
|
|
||||||
3. Fix 12 form label associations
|
|
||||||
4. Remove inappropriate tabindex (6 errors)
|
|
||||||
5. Fix remaining a11y issues (4+2+2+2 = 10 errors)
|
|
||||||
|
|
||||||
**Testing:** Use keyboard navigation to verify changes work
|
|
||||||
|
|
||||||
#### Phase 3: Svelte 5 Updates (51 errors) - MEDIUM PRIORITY
|
|
||||||
**Goal:** Full Svelte 5 compatibility
|
|
||||||
|
|
||||||
**Batches:**
|
|
||||||
1. Fix 25 non-reactive updates with `$state()`
|
|
||||||
2. Update 10 deprecated event handlers (`on:*` → `on*`)
|
|
||||||
3. Fix 6 custom element props
|
|
||||||
4. Fix 5 state referenced locally
|
|
||||||
5. Fix remaining misc issues (2+2+1 = 5 errors)
|
|
||||||
|
|
||||||
#### Phase 4: Final Cleanup (1 error) - LOW PRIORITY
|
|
||||||
**Goal:** Zero linter errors
|
|
||||||
|
|
||||||
- Investigate and fix the 1 remaining parsing error
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Commands Reference
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Check all errors
|
|
||||||
npx eslint src/
|
|
||||||
|
|
||||||
# Check error count
|
|
||||||
npx eslint src/ 2>/dev/null | grep "✖"
|
|
||||||
|
|
||||||
# Check specific file
|
|
||||||
npx eslint src/path/to/file.svelte
|
|
||||||
|
|
||||||
# Test all admin forms
|
|
||||||
npm run dev
|
|
||||||
# Navigate to /admin and test each form
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Success Metrics
|
|
||||||
|
|
||||||
- **Phase 0: AlbumForm Fixed** ✅ Critical blocker resolved
|
|
||||||
- **Phase 1 Complete:** 104 errors remaining (103 → 0 type safety)
|
|
||||||
- **Phase 2 Complete:** 52 errors remaining (a11y fixed)
|
|
||||||
- **Phase 3 Complete:** 1 error remaining (Svelte 5 migration complete)
|
|
||||||
- **Phase 4 Complete:** 🎯 **0 errors - 100% clean codebase**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Next Actions
|
|
||||||
|
|
||||||
### Immediate (Completed ✅)
|
|
||||||
- [x] AlbumForm save functionality restored
|
|
||||||
- [ ] Test AlbumForm create/edit in UI
|
|
||||||
- [ ] Test other admin forms (Essay, Project, Photo, Simple)
|
|
||||||
|
|
||||||
### Short-term (Phase 1)
|
|
||||||
- [ ] Start fixing `any` types in admin components
|
|
||||||
- [ ] Fix `any` types in server utilities
|
|
||||||
- [ ] Replace remaining `any` types systematically
|
|
||||||
|
|
||||||
### Medium-term (Phase 2-3)
|
|
||||||
- [ ] Fix accessibility issues
|
|
||||||
- [ ] Update to Svelte 5 syntax
|
|
||||||
- [ ] Test thoroughly
|
|
||||||
|
|
||||||
### Long-term
|
|
||||||
- [ ] Consider replacing global `@html` disable with inline ignores
|
|
||||||
- [ ] Add integration tests for admin forms
|
|
||||||
- [ ] Document which forms use autosave vs manual save
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Notes
|
|
||||||
|
|
||||||
- **Prettier formatting** - Run `npm run format` separately from ESLint
|
|
||||||
- **Sass `@import` warnings** - Informational only, not counted in errors
|
|
||||||
- **Branch history** - Built on top of cleanup/linter (PR #18)
|
|
||||||
- **Testing is critical** - Admin forms must work before merge
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**Last Updated:** 2025-11-24
|
|
||||||
**Next Review:** After Phase 1 (Type Safety) completion
|
|
||||||
**Estimated Total Time:** ~25-35 hours for remaining 207 errors
|
|
||||||
|
|
@ -30,20 +30,6 @@ export default [
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
rules: {
|
|
||||||
'@typescript-eslint/no-unused-vars': [
|
|
||||||
'error',
|
|
||||||
{
|
|
||||||
argsIgnorePattern: '^_',
|
|
||||||
varsIgnorePattern: '^_',
|
|
||||||
caughtErrorsIgnorePattern: '^_'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
// Disable @html warnings - all uses are for trusted content (static SVGs, sanitized content, JSON-LD)
|
|
||||||
'svelte/no-at-html-tags': 'off'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
ignores: ['build/', '.svelte-kit/', 'dist/']
|
ignores: ['build/', '.svelte-kit/', 'dist/']
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -60,7 +60,6 @@
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@aarkue/tiptap-math-extension": "^1.3.6",
|
"@aarkue/tiptap-math-extension": "^1.3.6",
|
||||||
"@eslint/js": "^9.39.1",
|
|
||||||
"@floating-ui/dom": "^1.7.1",
|
"@floating-ui/dom": "^1.7.1",
|
||||||
"@prisma/client": "^6.8.2",
|
"@prisma/client": "^6.8.2",
|
||||||
"@sveltejs/adapter-node": "^5.2.0",
|
"@sveltejs/adapter-node": "^5.2.0",
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,6 @@ importers:
|
||||||
'@aarkue/tiptap-math-extension':
|
'@aarkue/tiptap-math-extension':
|
||||||
specifier: ^1.3.6
|
specifier: ^1.3.6
|
||||||
version: 1.4.0(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
|
version: 1.4.0(@tiptap/core@2.26.2(@tiptap/pm@2.26.2))(@tiptap/pm@2.26.2)
|
||||||
'@eslint/js':
|
|
||||||
specifier: ^9.39.1
|
|
||||||
version: 9.39.1
|
|
||||||
'@floating-ui/dom':
|
'@floating-ui/dom':
|
||||||
specifier: ^1.7.1
|
specifier: ^1.7.1
|
||||||
version: 1.7.4
|
version: 1.7.4
|
||||||
|
|
@ -657,10 +654,6 @@ packages:
|
||||||
resolution: {integrity: sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==}
|
resolution: {integrity: sha512-jaS+NJ+hximswBG6pjNX0uEJZkrT0zwpVi3BA3vX22aFGjJjmgSTSmPpZCRKmoBL5VY/M6p0xsSJx7rk7sy5gg==}
|
||||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||||
|
|
||||||
'@eslint/js@9.39.1':
|
|
||||||
resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
|
|
||||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
|
||||||
|
|
||||||
'@eslint/object-schema@2.1.6':
|
'@eslint/object-schema@2.1.6':
|
||||||
resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
|
resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
|
||||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||||
|
|
@ -3806,8 +3799,6 @@ snapshots:
|
||||||
|
|
||||||
'@eslint/js@9.37.0': {}
|
'@eslint/js@9.37.0': {}
|
||||||
|
|
||||||
'@eslint/js@9.39.1': {}
|
|
||||||
|
|
||||||
'@eslint/object-schema@2.1.6': {}
|
'@eslint/object-schema@2.1.6': {}
|
||||||
|
|
||||||
'@eslint/plugin-kit@0.4.0':
|
'@eslint/plugin-kit@0.4.0':
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
onlyBuiltDependencies:
|
|
||||||
- "@musicorum/lastfm"
|
|
||||||
- "psn-api"
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
-- AlterTable
|
|
||||||
ALTER TABLE "Project" ADD COLUMN "showFeaturedImageInHeader" BOOLEAN NOT NULL DEFAULT true,
|
|
||||||
ADD COLUMN "showBackgroundColorInHeader" BOOLEAN NOT NULL DEFAULT true,
|
|
||||||
ADD COLUMN "showLogoInHeader" BOOLEAN NOT NULL DEFAULT true;
|
|
||||||
|
|
@ -13,10 +13,9 @@ async function isDatabaseInitialized(): Promise<boolean> {
|
||||||
`
|
`
|
||||||
|
|
||||||
return migrationCount[0].count > 0n
|
return migrationCount[0].count > 0n
|
||||||
} catch (error: unknown) {
|
} catch (error: any) {
|
||||||
// If the table doesn't exist, database is not initialized
|
// If the table doesn't exist, database is not initialized
|
||||||
const message = error instanceof Error ? error.message : String(error)
|
console.log('📊 Migration table check failed (expected on first deploy):', error.message)
|
||||||
console.log('📊 Migration table check failed (expected on first deploy):', message)
|
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
* --dry-run Show what would be changed without updating
|
* --dry-run Show what would be changed without updating
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { PrismaClient, Prisma } from '@prisma/client'
|
import { PrismaClient } from '@prisma/client'
|
||||||
import { selectBestDominantColor, isGreyColor } from '../src/lib/server/color-utils'
|
import { selectBestDominantColor, isGreyColor } from '../src/lib/server/color-utils'
|
||||||
|
|
||||||
const prisma = new PrismaClient()
|
const prisma = new PrismaClient()
|
||||||
|
|
@ -54,7 +54,7 @@ function parseArgs(): Options {
|
||||||
async function reanalyzeColors(options: Options) {
|
async function reanalyzeColors(options: Options) {
|
||||||
try {
|
try {
|
||||||
// Build query
|
// Build query
|
||||||
const where: Prisma.MediaWhereInput = {
|
const where: any = {
|
||||||
colors: { not: null }
|
colors: { not: null }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
5
src/global.d.ts
vendored
5
src/global.d.ts
vendored
|
|
@ -1,11 +1,10 @@
|
||||||
declare module '*.svg' {
|
declare module '*.svg' {
|
||||||
const content: string
|
const content: any
|
||||||
export default content
|
export default content
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module '*.svg?component' {
|
declare module '*.svg?component' {
|
||||||
import type { Component } from 'svelte'
|
const content: any
|
||||||
const content: Component
|
|
||||||
export default content
|
export default content
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,92 +3,99 @@ import { goto } from '$app/navigation'
|
||||||
export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
|
export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'
|
||||||
|
|
||||||
export interface RequestOptions<TBody = unknown> {
|
export interface RequestOptions<TBody = unknown> {
|
||||||
method?: HttpMethod
|
method?: HttpMethod
|
||||||
body?: TBody
|
body?: TBody
|
||||||
signal?: AbortSignal
|
signal?: AbortSignal
|
||||||
headers?: Record<string, string>
|
headers?: Record<string, string>
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ApiError extends Error {
|
export interface ApiError extends Error {
|
||||||
status: number
|
status: number
|
||||||
details?: unknown
|
details?: unknown
|
||||||
}
|
}
|
||||||
|
|
||||||
function getAuthHeader() {
|
function getAuthHeader() {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleResponse(res: Response) {
|
async function handleResponse(res: Response) {
|
||||||
if (res.status === 401) {
|
if (res.status === 401) {
|
||||||
// Redirect to login for unauthorized requests
|
// Redirect to login for unauthorized requests
|
||||||
try {
|
try {
|
||||||
goto('/admin/login')
|
goto('/admin/login')
|
||||||
} catch {
|
} catch {}
|
||||||
// Ignore navigation errors (e.g., if already on login page)
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const contentType = res.headers.get('content-type') || ''
|
const contentType = res.headers.get('content-type') || ''
|
||||||
const isJson = contentType.includes('application/json')
|
const isJson = contentType.includes('application/json')
|
||||||
const data = isJson ? await res.json().catch(() => undefined) : undefined
|
const data = isJson ? await res.json().catch(() => undefined) : undefined
|
||||||
|
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
const err: ApiError = Object.assign(new Error('Request failed'), {
|
const err: ApiError = Object.assign(new Error('Request failed'), {
|
||||||
status: res.status,
|
status: res.status,
|
||||||
details: data
|
details: data
|
||||||
})
|
})
|
||||||
throw err
|
throw err
|
||||||
}
|
}
|
||||||
return data
|
return data
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function request<TResponse = unknown, TBody = unknown>(
|
export async function request<TResponse = unknown, TBody = unknown>(
|
||||||
url: string,
|
url: string,
|
||||||
opts: RequestOptions<TBody> = {}
|
opts: RequestOptions<TBody> = {}
|
||||||
): Promise<TResponse> {
|
): Promise<TResponse> {
|
||||||
const { method = 'GET', body, signal, headers } = opts
|
const { method = 'GET', body, signal, headers } = opts
|
||||||
|
|
||||||
const isFormData = typeof FormData !== 'undefined' && body instanceof FormData
|
const isFormData = typeof FormData !== 'undefined' && body instanceof FormData
|
||||||
const mergedHeaders: Record<string, string> = {
|
const mergedHeaders: Record<string, string> = {
|
||||||
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
|
...(isFormData ? {} : { 'Content-Type': 'application/json' }),
|
||||||
...getAuthHeader(),
|
...getAuthHeader(),
|
||||||
...(headers || {})
|
...(headers || {})
|
||||||
}
|
}
|
||||||
|
|
||||||
const res = await fetch(url, {
|
const res = await fetch(url, {
|
||||||
method,
|
method,
|
||||||
headers: mergedHeaders,
|
headers: mergedHeaders,
|
||||||
body: body ? (isFormData ? (body as FormData) : JSON.stringify(body)) : undefined,
|
body: body ? (isFormData ? (body as any) : JSON.stringify(body)) : undefined,
|
||||||
signal,
|
signal,
|
||||||
credentials: 'same-origin'
|
credentials: 'same-origin'
|
||||||
})
|
})
|
||||||
|
|
||||||
return handleResponse(res) as Promise<TResponse>
|
return handleResponse(res) as Promise<TResponse>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const api = {
|
export const api = {
|
||||||
get: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
|
get: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
|
||||||
request<T>(url, { ...opts, method: 'GET' }),
|
request<T>(url, { ...opts, method: 'GET' }),
|
||||||
post: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
|
post: <T = unknown, B = unknown>(
|
||||||
request<T, B>(url, { ...opts, method: 'POST', body }),
|
url: string,
|
||||||
put: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
|
body: B,
|
||||||
request<T, B>(url, { ...opts, method: 'PUT', body }),
|
opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
|
||||||
patch: <T = unknown, B = unknown>(url: string, body: B, opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}) =>
|
) => request<T, B>(url, { ...opts, method: 'POST', body }),
|
||||||
request<T, B>(url, { ...opts, method: 'PATCH', body }),
|
put: <T = unknown, B = unknown>(
|
||||||
delete: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
|
url: string,
|
||||||
request<T>(url, { ...opts, method: 'DELETE' })
|
body: B,
|
||||||
|
opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
|
||||||
|
) => request<T, B>(url, { ...opts, method: 'PUT', body }),
|
||||||
|
patch: <T = unknown, B = unknown>(
|
||||||
|
url: string,
|
||||||
|
body: B,
|
||||||
|
opts: Omit<RequestOptions<B>, 'method' | 'body'> = {}
|
||||||
|
) => request<T, B>(url, { ...opts, method: 'PATCH', body }),
|
||||||
|
delete: <T = unknown>(url: string, opts: Omit<RequestOptions, 'method' | 'body'> = {}) =>
|
||||||
|
request<T>(url, { ...opts, method: 'DELETE' })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createAbortable() {
|
export function createAbortable() {
|
||||||
let controller: AbortController | null = null
|
let controller: AbortController | null = null
|
||||||
return {
|
return {
|
||||||
nextSignal() {
|
nextSignal() {
|
||||||
if (controller) controller.abort()
|
if (controller) controller.abort()
|
||||||
controller = new AbortController()
|
controller = new AbortController()
|
||||||
return controller.signal
|
return controller.signal
|
||||||
},
|
},
|
||||||
abort() {
|
abort() {
|
||||||
if (controller) controller.abort()
|
if (controller) controller.abort()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'
|
export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'
|
||||||
|
|
||||||
export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
|
export interface AutoSaveStoreOptions<TPayload, TResponse = unknown> {
|
||||||
debounceMs?: number
|
debounceMs?: number
|
||||||
idleResetMs?: number
|
idleResetMs?: number
|
||||||
getPayload: () => TPayload | null | undefined
|
getPayload: () => TPayload | null | undefined
|
||||||
save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
|
save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
|
||||||
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
|
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AutoSaveStore<TPayload, _TResponse = unknown> {
|
export interface AutoSaveStore<TPayload, TResponse = unknown> {
|
||||||
readonly status: AutoSaveStatus
|
readonly status: AutoSaveStatus
|
||||||
readonly lastError: string | null
|
readonly lastError: string | null
|
||||||
schedule: () => void
|
schedule: () => void
|
||||||
flush: () => Promise<void>
|
flush: () => Promise<void>
|
||||||
destroy: () => void
|
destroy: () => void
|
||||||
prime: (payload: TPayload) => void
|
prime: (payload: TPayload) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -35,135 +35,109 @@ export interface AutoSaveStore<TPayload, _TResponse = unknown> {
|
||||||
* // Trigger save: autoSave.schedule()
|
* // Trigger save: autoSave.schedule()
|
||||||
*/
|
*/
|
||||||
export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
export function createAutoSaveStore<TPayload, TResponse = unknown>(
|
||||||
opts: AutoSaveStoreOptions<TPayload, TResponse>
|
opts: AutoSaveStoreOptions<TPayload, TResponse>
|
||||||
): AutoSaveStore<TPayload, unknown> {
|
): AutoSaveStore<TPayload, TResponse> {
|
||||||
const debounceMs = opts.debounceMs ?? 2000
|
const debounceMs = opts.debounceMs ?? 2000
|
||||||
const idleResetMs = opts.idleResetMs ?? 2000
|
const idleResetMs = opts.idleResetMs ?? 2000
|
||||||
let timer: ReturnType<typeof setTimeout> | null = null
|
let timer: ReturnType<typeof setTimeout> | null = null
|
||||||
let idleResetTimer: ReturnType<typeof setTimeout> | null = null
|
let idleResetTimer: ReturnType<typeof setTimeout> | null = null
|
||||||
let controller: AbortController | null = null
|
let controller: AbortController | null = null
|
||||||
let lastSentHash: string | null = null
|
let lastSentHash: string | null = null
|
||||||
|
|
||||||
let status = $state<AutoSaveStatus>('idle')
|
let status = $state<AutoSaveStatus>('idle')
|
||||||
let lastError = $state<string | null>(null)
|
let lastError = $state<string | null>(null)
|
||||||
|
|
||||||
function setStatus(next: AutoSaveStatus) {
|
function setStatus(next: AutoSaveStatus) {
|
||||||
if (idleResetTimer) {
|
if (idleResetTimer) {
|
||||||
clearTimeout(idleResetTimer)
|
clearTimeout(idleResetTimer)
|
||||||
idleResetTimer = null
|
idleResetTimer = null
|
||||||
}
|
}
|
||||||
|
|
||||||
status = next
|
status = next
|
||||||
|
|
||||||
// Auto-transition from 'saved' to 'idle' after idleResetMs
|
// Auto-transition from 'saved' to 'idle' after idleResetMs
|
||||||
if (next === 'saved') {
|
if (next === 'saved') {
|
||||||
idleResetTimer = setTimeout(() => {
|
idleResetTimer = setTimeout(() => {
|
||||||
status = 'idle'
|
status = 'idle'
|
||||||
idleResetTimer = null
|
idleResetTimer = null
|
||||||
}, idleResetMs)
|
}, idleResetMs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function prime(payload: TPayload) {
|
function prime(payload: TPayload) {
|
||||||
lastSentHash = safeHash(payload)
|
lastSentHash = safeHash(payload)
|
||||||
}
|
}
|
||||||
|
|
||||||
function schedule() {
|
function schedule() {
|
||||||
if (timer) clearTimeout(timer)
|
if (timer) clearTimeout(timer)
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
timer = setTimeout(() => void run(), debounceMs)
|
||||||
console.debug(`[AutoSave] Scheduled (${debounceMs}ms debounce)`)
|
}
|
||||||
}
|
|
||||||
timer = setTimeout(() => void run(), debounceMs)
|
|
||||||
}
|
|
||||||
|
|
||||||
async function run() {
|
async function run() {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer)
|
||||||
timer = null
|
timer = null
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload = opts.getPayload()
|
const payload = opts.getPayload()
|
||||||
if (!payload) {
|
if (!payload) return
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
|
||||||
console.debug('[AutoSave] Skipped: getPayload returned null/undefined')
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const hash = safeHash(payload)
|
const hash = safeHash(payload)
|
||||||
if (lastSentHash && hash === lastSentHash) {
|
if (lastSentHash && hash === lastSentHash) return
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
|
||||||
console.debug('[AutoSave] Skipped: payload unchanged (hash match)')
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (controller) controller.abort()
|
if (controller) controller.abort()
|
||||||
controller = new AbortController()
|
controller = new AbortController()
|
||||||
|
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
setStatus('saving')
|
||||||
console.debug('[AutoSave] Saving...', { hashChanged: lastSentHash !== hash })
|
lastError = null
|
||||||
}
|
try {
|
||||||
|
const res = await opts.save(payload, { signal: controller.signal })
|
||||||
|
lastSentHash = hash
|
||||||
|
setStatus('saved')
|
||||||
|
if (opts.onSaved) opts.onSaved(res, { prime })
|
||||||
|
} catch (e: any) {
|
||||||
|
if (e?.name === 'AbortError') {
|
||||||
|
// Newer save superseded this one
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (typeof navigator !== 'undefined' && navigator.onLine === false) {
|
||||||
|
setStatus('offline')
|
||||||
|
} else {
|
||||||
|
setStatus('error')
|
||||||
|
}
|
||||||
|
lastError = e?.message || 'Auto-save failed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
setStatus('saving')
|
function flush() {
|
||||||
lastError = null
|
return run()
|
||||||
try {
|
}
|
||||||
const res = await opts.save(payload, { signal: controller.signal })
|
|
||||||
lastSentHash = hash
|
|
||||||
setStatus('saved')
|
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
|
||||||
console.debug('[AutoSave] Saved successfully')
|
|
||||||
}
|
|
||||||
if (opts.onSaved) opts.onSaved(res, { prime })
|
|
||||||
} catch (e) {
|
|
||||||
if (e instanceof Error && e.name === 'AbortError') {
|
|
||||||
// Newer save superseded this one
|
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
|
||||||
console.debug('[AutoSave] Aborted: superseded by newer save')
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (typeof navigator !== 'undefined' && navigator.onLine === false) {
|
|
||||||
setStatus('offline')
|
|
||||||
} else {
|
|
||||||
setStatus('error')
|
|
||||||
}
|
|
||||||
lastError = e instanceof Error ? e.message : 'Auto-save failed'
|
|
||||||
if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
|
|
||||||
console.debug('[AutoSave] Error:', lastError)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function flush() {
|
function destroy() {
|
||||||
return run()
|
if (timer) clearTimeout(timer)
|
||||||
}
|
if (idleResetTimer) clearTimeout(idleResetTimer)
|
||||||
|
if (controller) controller.abort()
|
||||||
|
}
|
||||||
|
|
||||||
function destroy() {
|
return {
|
||||||
if (timer) clearTimeout(timer)
|
get status() {
|
||||||
if (idleResetTimer) clearTimeout(idleResetTimer)
|
return status
|
||||||
if (controller) controller.abort()
|
},
|
||||||
}
|
get lastError() {
|
||||||
|
return lastError
|
||||||
return {
|
},
|
||||||
get status() {
|
schedule,
|
||||||
return status
|
flush,
|
||||||
},
|
destroy,
|
||||||
get lastError() {
|
prime
|
||||||
return lastError
|
}
|
||||||
},
|
|
||||||
schedule,
|
|
||||||
flush,
|
|
||||||
destroy,
|
|
||||||
prime
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function safeHash(obj: unknown): string {
|
function safeHash(obj: unknown): string {
|
||||||
try {
|
try {
|
||||||
return JSON.stringify(obj)
|
return JSON.stringify(obj)
|
||||||
} catch {
|
} catch {
|
||||||
// Fallback for circular structures; not expected for form payloads
|
// Fallback for circular structures; not expected for form payloads
|
||||||
return String(obj)
|
return String(obj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,139 +1,139 @@
|
||||||
export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'
|
export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline'
|
||||||
|
|
||||||
export interface AutoSaveController {
|
export interface AutoSaveController {
|
||||||
status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
|
status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
|
||||||
lastError: { subscribe: (run: (v: string | null) => void) => () => void }
|
lastError: { subscribe: (run: (v: string | null) => void) => () => void }
|
||||||
schedule: () => void
|
schedule: () => void
|
||||||
flush: () => Promise<void>
|
flush: () => Promise<void>
|
||||||
destroy: () => void
|
destroy: () => void
|
||||||
prime: <T>(payload: T) => void
|
prime: <T>(payload: T) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
interface CreateAutoSaveControllerOptions<TPayload, TResponse = unknown> {
|
interface CreateAutoSaveControllerOptions<TPayload, TResponse = unknown> {
|
||||||
debounceMs?: number
|
debounceMs?: number
|
||||||
idleResetMs?: number
|
idleResetMs?: number
|
||||||
getPayload: () => TPayload | null | undefined
|
getPayload: () => TPayload | null | undefined
|
||||||
save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
|
save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise<TResponse>
|
||||||
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
|
onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createAutoSaveController<TPayload, TResponse = unknown>(
|
export function createAutoSaveController<TPayload, TResponse = unknown>(
|
||||||
opts: CreateAutoSaveControllerOptions<TPayload, TResponse>
|
opts: CreateAutoSaveControllerOptions<TPayload, TResponse>
|
||||||
) {
|
) {
|
||||||
const debounceMs = opts.debounceMs ?? 2000
|
const debounceMs = opts.debounceMs ?? 2000
|
||||||
const idleResetMs = opts.idleResetMs ?? 2000
|
const idleResetMs = opts.idleResetMs ?? 2000
|
||||||
let timer: ReturnType<typeof setTimeout> | null = null
|
let timer: ReturnType<typeof setTimeout> | null = null
|
||||||
let idleResetTimer: ReturnType<typeof setTimeout> | null = null
|
let idleResetTimer: ReturnType<typeof setTimeout> | null = null
|
||||||
let controller: AbortController | null = null
|
let controller: AbortController | null = null
|
||||||
let lastSentHash: string | null = null
|
let lastSentHash: string | null = null
|
||||||
|
|
||||||
let _status: AutoSaveStatus = 'idle'
|
let _status: AutoSaveStatus = 'idle'
|
||||||
let _lastError: string | null = null
|
let _lastError: string | null = null
|
||||||
const statusSubs = new Set<(v: AutoSaveStatus) => void>()
|
const statusSubs = new Set<(v: AutoSaveStatus) => void>()
|
||||||
const errorSubs = new Set<(v: string | null) => void>()
|
const errorSubs = new Set<(v: string | null) => void>()
|
||||||
|
|
||||||
function setStatus(next: AutoSaveStatus) {
|
function setStatus(next: AutoSaveStatus) {
|
||||||
if (idleResetTimer) {
|
if (idleResetTimer) {
|
||||||
clearTimeout(idleResetTimer)
|
clearTimeout(idleResetTimer)
|
||||||
idleResetTimer = null
|
idleResetTimer = null
|
||||||
}
|
}
|
||||||
|
|
||||||
_status = next
|
_status = next
|
||||||
statusSubs.forEach((fn) => fn(_status))
|
statusSubs.forEach((fn) => fn(_status))
|
||||||
|
|
||||||
// Auto-transition from 'saved' to 'idle' after idleResetMs
|
// Auto-transition from 'saved' to 'idle' after idleResetMs
|
||||||
if (next === 'saved') {
|
if (next === 'saved') {
|
||||||
idleResetTimer = setTimeout(() => {
|
idleResetTimer = setTimeout(() => {
|
||||||
_status = 'idle'
|
_status = 'idle'
|
||||||
statusSubs.forEach((fn) => fn(_status))
|
statusSubs.forEach((fn) => fn(_status))
|
||||||
idleResetTimer = null
|
idleResetTimer = null
|
||||||
}, idleResetMs)
|
}, idleResetMs)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function prime(payload: TPayload) {
|
function prime(payload: TPayload) {
|
||||||
lastSentHash = safeHash(payload)
|
lastSentHash = safeHash(payload)
|
||||||
}
|
}
|
||||||
|
|
||||||
function schedule() {
|
function schedule() {
|
||||||
if (timer) clearTimeout(timer)
|
if (timer) clearTimeout(timer)
|
||||||
timer = setTimeout(() => void run(), debounceMs)
|
timer = setTimeout(() => void run(), debounceMs)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function run() {
|
async function run() {
|
||||||
if (timer) {
|
if (timer) {
|
||||||
clearTimeout(timer)
|
clearTimeout(timer)
|
||||||
timer = null
|
timer = null
|
||||||
}
|
}
|
||||||
|
|
||||||
const payload = opts.getPayload()
|
const payload = opts.getPayload()
|
||||||
if (!payload) return
|
if (!payload) return
|
||||||
|
|
||||||
const hash = safeHash(payload)
|
const hash = safeHash(payload)
|
||||||
if (lastSentHash && hash === lastSentHash) return
|
if (lastSentHash && hash === lastSentHash) return
|
||||||
|
|
||||||
if (controller) controller.abort()
|
if (controller) controller.abort()
|
||||||
controller = new AbortController()
|
controller = new AbortController()
|
||||||
|
|
||||||
setStatus('saving')
|
setStatus('saving')
|
||||||
_lastError = null
|
_lastError = null
|
||||||
try {
|
try {
|
||||||
const res = await opts.save(payload, { signal: controller.signal })
|
const res = await opts.save(payload, { signal: controller.signal })
|
||||||
lastSentHash = hash
|
lastSentHash = hash
|
||||||
setStatus('saved')
|
setStatus('saved')
|
||||||
if (opts.onSaved) opts.onSaved(res, { prime })
|
if (opts.onSaved) opts.onSaved(res, { prime })
|
||||||
} catch (e: unknown) {
|
} catch (e: any) {
|
||||||
if (e?.name === 'AbortError') {
|
if (e?.name === 'AbortError') {
|
||||||
// Newer save superseded this one
|
// Newer save superseded this one
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (typeof navigator !== 'undefined' && navigator.onLine === false) {
|
if (typeof navigator !== 'undefined' && navigator.onLine === false) {
|
||||||
setStatus('offline')
|
setStatus('offline')
|
||||||
} else {
|
} else {
|
||||||
setStatus('error')
|
setStatus('error')
|
||||||
}
|
}
|
||||||
_lastError = e?.message || 'Auto-save failed'
|
_lastError = e?.message || 'Auto-save failed'
|
||||||
errorSubs.forEach((fn) => fn(_lastError))
|
errorSubs.forEach((fn) => fn(_lastError))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function flush() {
|
function flush() {
|
||||||
return run()
|
return run()
|
||||||
}
|
}
|
||||||
|
|
||||||
function destroy() {
|
function destroy() {
|
||||||
if (timer) clearTimeout(timer)
|
if (timer) clearTimeout(timer)
|
||||||
if (idleResetTimer) clearTimeout(idleResetTimer)
|
if (idleResetTimer) clearTimeout(idleResetTimer)
|
||||||
if (controller) controller.abort()
|
if (controller) controller.abort()
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
status: {
|
status: {
|
||||||
subscribe(run: (v: AutoSaveStatus) => void) {
|
subscribe(run: (v: AutoSaveStatus) => void) {
|
||||||
run(_status)
|
run(_status)
|
||||||
statusSubs.add(run)
|
statusSubs.add(run)
|
||||||
return () => statusSubs.delete(run)
|
return () => statusSubs.delete(run)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
lastError: {
|
lastError: {
|
||||||
subscribe(run: (v: string | null) => void) {
|
subscribe(run: (v: string | null) => void) {
|
||||||
run(_lastError)
|
run(_lastError)
|
||||||
errorSubs.add(run)
|
errorSubs.add(run)
|
||||||
return () => errorSubs.delete(run)
|
return () => errorSubs.delete(run)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
schedule,
|
schedule,
|
||||||
flush,
|
flush,
|
||||||
destroy,
|
destroy,
|
||||||
prime
|
prime
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function safeHash(obj: unknown): string {
|
function safeHash(obj: unknown): string {
|
||||||
try {
|
try {
|
||||||
return JSON.stringify(obj)
|
return JSON.stringify(obj)
|
||||||
} catch {
|
} catch {
|
||||||
// Fallback for circular structures; not expected for form payloads
|
// Fallback for circular structures; not expected for form payloads
|
||||||
return String(obj)
|
return String(obj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,58 +4,58 @@ import type { AutoSaveController } from './autoSave'
|
||||||
import type { AutoSaveStore } from './autoSave.svelte'
|
import type { AutoSaveStore } from './autoSave.svelte'
|
||||||
|
|
||||||
interface AutoSaveLifecycleOptions {
|
interface AutoSaveLifecycleOptions {
|
||||||
isReady?: () => boolean
|
isReady?: () => boolean
|
||||||
onFlushError?: (error: unknown) => void
|
onFlushError?: (error: unknown) => void
|
||||||
enableShortcut?: boolean
|
enableShortcut?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initAutoSaveLifecycle(
|
export function initAutoSaveLifecycle(
|
||||||
controller: AutoSaveController | AutoSaveStore<unknown, unknown>,
|
controller: AutoSaveController | AutoSaveStore<any, any>,
|
||||||
options: AutoSaveLifecycleOptions = {}
|
options: AutoSaveLifecycleOptions = {}
|
||||||
) {
|
) {
|
||||||
const { isReady = () => true, onFlushError, enableShortcut = true } = options
|
const { isReady = () => true, onFlushError, enableShortcut = true } = options
|
||||||
|
|
||||||
if (typeof window === 'undefined') {
|
if (typeof window === 'undefined') {
|
||||||
onDestroy(() => controller.destroy())
|
onDestroy(() => controller.destroy())
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleKeydown(event: KeyboardEvent) {
|
function handleKeydown(event: KeyboardEvent) {
|
||||||
if (!enableShortcut) return
|
if (!enableShortcut) return
|
||||||
if (!isReady()) return
|
if (!isReady()) return
|
||||||
const key = event.key.toLowerCase()
|
const key = event.key.toLowerCase()
|
||||||
const isModifier = event.metaKey || event.ctrlKey
|
const isModifier = event.metaKey || event.ctrlKey
|
||||||
if (!isModifier || key !== 's') return
|
if (!isModifier || key !== 's') return
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
controller.flush().catch((error) => {
|
controller.flush().catch((error) => {
|
||||||
onFlushError?.(error)
|
onFlushError?.(error)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
if (enableShortcut) {
|
if (enableShortcut) {
|
||||||
document.addEventListener('keydown', handleKeydown)
|
document.addEventListener('keydown', handleKeydown)
|
||||||
}
|
}
|
||||||
|
|
||||||
const stopNavigating = beforeNavigate(async (navigation) => {
|
const stopNavigating = beforeNavigate(async (navigation) => {
|
||||||
if (!isReady()) return
|
if (!isReady()) return
|
||||||
navigation.cancel()
|
navigation.cancel()
|
||||||
try {
|
try {
|
||||||
await controller.flush()
|
await controller.flush()
|
||||||
navigation.retry()
|
navigation.retry()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
onFlushError?.(error)
|
onFlushError?.(error)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const stop = () => {
|
const stop = () => {
|
||||||
if (enableShortcut) {
|
if (enableShortcut) {
|
||||||
document.removeEventListener('keydown', handleKeydown)
|
document.removeEventListener('keydown', handleKeydown)
|
||||||
}
|
}
|
||||||
stopNavigating?.()
|
stopNavigating?.()
|
||||||
controller.destroy()
|
controller.destroy()
|
||||||
}
|
}
|
||||||
|
|
||||||
onDestroy(stop)
|
onDestroy(stop)
|
||||||
|
|
||||||
return { stop }
|
return { stop }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,49 @@
|
||||||
export type Draft<T = unknown> = { payload: T; ts: number }
|
export type Draft<T = unknown> = { payload: T; ts: number }
|
||||||
|
|
||||||
export function makeDraftKey(type: string, id: string | number) {
|
export function makeDraftKey(type: string, id: string | number) {
|
||||||
return `admin:draft:${type}:${id}`
|
return `admin:draft:${type}:${id}`
|
||||||
}
|
}
|
||||||
|
|
||||||
export function saveDraft<T>(key: string, payload: T) {
|
export function saveDraft<T>(key: string, payload: T) {
|
||||||
try {
|
try {
|
||||||
const entry: Draft<T> = { payload, ts: Date.now() }
|
const entry: Draft<T> = { payload, ts: Date.now() }
|
||||||
localStorage.setItem(key, JSON.stringify(entry))
|
localStorage.setItem(key, JSON.stringify(entry))
|
||||||
} catch {
|
} catch {
|
||||||
// Ignore quota or serialization errors
|
// Ignore quota or serialization errors
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function loadDraft<T = unknown>(key: string): Draft<T> | null {
|
export function loadDraft<T = unknown>(key: string): Draft<T> | null {
|
||||||
try {
|
try {
|
||||||
const raw = localStorage.getItem(key)
|
const raw = localStorage.getItem(key)
|
||||||
if (!raw) return null
|
if (!raw) return null
|
||||||
return JSON.parse(raw) as Draft<T>
|
return JSON.parse(raw) as Draft<T>
|
||||||
} catch {
|
} catch {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function clearDraft(key: string) {
|
export function clearDraft(key: string) {
|
||||||
try {
|
try {
|
||||||
localStorage.removeItem(key)
|
localStorage.removeItem(key)
|
||||||
} catch {
|
} catch {}
|
||||||
// Ignore storage errors
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function timeAgo(ts: number): string {
|
export function timeAgo(ts: number): string {
|
||||||
const diff = Date.now() - ts
|
const diff = Date.now() - ts
|
||||||
const sec = Math.floor(diff / 1000)
|
const sec = Math.floor(diff / 1000)
|
||||||
if (sec < 5) return 'just now'
|
if (sec < 5) return 'just now'
|
||||||
if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago`
|
if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago`
|
||||||
const min = Math.floor(sec / 60)
|
const min = Math.floor(sec / 60)
|
||||||
if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago`
|
if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago`
|
||||||
const hr = Math.floor(min / 60)
|
const hr = Math.floor(min / 60)
|
||||||
if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago`
|
if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago`
|
||||||
const day = Math.floor(hr / 24)
|
const day = Math.floor(hr / 24)
|
||||||
if (day <= 29) {
|
if (day <= 29) {
|
||||||
if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago`
|
if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago`
|
||||||
const wk = Math.floor(day / 7)
|
const wk = Math.floor(day / 7)
|
||||||
return `${wk} week${wk !== 1 ? 's' : ''} ago`
|
return `${wk} week${wk !== 1 ? 's' : ''} ago`
|
||||||
}
|
}
|
||||||
// Beyond 29 days, show a normal localized date
|
// Beyond 29 days, show a normal localized date
|
||||||
return new Date(ts).toLocaleDateString()
|
return new Date(ts).toLocaleDateString()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -127,38 +127,54 @@ export function createListFilters<T>(
|
||||||
*/
|
*/
|
||||||
export const commonSorts = {
|
export const commonSorts = {
|
||||||
/** Sort by date field, newest first */
|
/** Sort by date field, newest first */
|
||||||
dateDesc: <T>(field: keyof T) => (a: T, b: T) =>
|
dateDesc:
|
||||||
new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(),
|
||||||
|
|
||||||
/** Sort by date field, oldest first */
|
/** Sort by date field, oldest first */
|
||||||
dateAsc: <T>(field: keyof T) => (a: T, b: T) =>
|
dateAsc:
|
||||||
new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(),
|
||||||
|
|
||||||
/** Sort by string field, A-Z */
|
/** Sort by string field, A-Z */
|
||||||
stringAsc: <T>(field: keyof T) => (a: T, b: T) =>
|
stringAsc:
|
||||||
String(a[field] || '').localeCompare(String(b[field] || '')),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
String(a[field] || '').localeCompare(String(b[field] || '')),
|
||||||
|
|
||||||
/** Sort by string field, Z-A */
|
/** Sort by string field, Z-A */
|
||||||
stringDesc: <T>(field: keyof T) => (a: T, b: T) =>
|
stringDesc:
|
||||||
String(b[field] || '').localeCompare(String(a[field] || '')),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
String(b[field] || '').localeCompare(String(a[field] || '')),
|
||||||
|
|
||||||
/** Sort by number field, ascending */
|
/** Sort by number field, ascending */
|
||||||
numberAsc: <T>(field: keyof T) => (a: T, b: T) =>
|
numberAsc:
|
||||||
Number(a[field]) - Number(b[field]),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
Number(a[field]) - Number(b[field]),
|
||||||
|
|
||||||
/** Sort by number field, descending */
|
/** Sort by number field, descending */
|
||||||
numberDesc: <T>(field: keyof T) => (a: T, b: T) =>
|
numberDesc:
|
||||||
Number(b[field]) - Number(a[field]),
|
<T>(field: keyof T) =>
|
||||||
|
(a: T, b: T) =>
|
||||||
|
Number(b[field]) - Number(a[field]),
|
||||||
|
|
||||||
/** Sort by status field, published first */
|
/** Sort by status field, published first */
|
||||||
statusPublishedFirst: <T>(field: keyof T) => (a: T, b: T) => {
|
statusPublishedFirst:
|
||||||
if (a[field] === b[field]) return 0
|
<T>(field: keyof T) =>
|
||||||
return a[field] === 'published' ? -1 : 1
|
(a: T, b: T) => {
|
||||||
},
|
if (a[field] === b[field]) return 0
|
||||||
|
return a[field] === 'published' ? -1 : 1
|
||||||
|
},
|
||||||
|
|
||||||
/** Sort by status field, draft first */
|
/** Sort by status field, draft first */
|
||||||
statusDraftFirst: <T>(field: keyof T) => (a: T, b: T) => {
|
statusDraftFirst:
|
||||||
if (a[field] === b[field]) return 0
|
<T>(field: keyof T) =>
|
||||||
return a[field] === 'draft' ? -1 : 1
|
(a: T, b: T) => {
|
||||||
}
|
if (a[field] === b[field]) return 0
|
||||||
|
return a[field] === 'draft' ? -1 : 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
import { loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
||||||
|
|
||||||
export function useDraftRecovery<TPayload>(options: {
|
export function useDraftRecovery<TPayload>(options: {
|
||||||
draftKey: () => string | null
|
draftKey: string | null
|
||||||
onRestore: (payload: TPayload) => void
|
onRestore: (payload: TPayload) => void
|
||||||
enabled?: boolean
|
enabled?: boolean
|
||||||
}) {
|
}) {
|
||||||
|
|
@ -17,10 +17,9 @@ export function useDraftRecovery<TPayload>(options: {
|
||||||
|
|
||||||
// Auto-detect draft on mount using $effect
|
// Auto-detect draft on mount using $effect
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const key = options.draftKey()
|
if (!options.draftKey || options.enabled === false) return
|
||||||
if (!key || options.enabled === false) return
|
|
||||||
|
|
||||||
const draft = loadDraft<TPayload>(key)
|
const draft = loadDraft<TPayload>(options.draftKey)
|
||||||
if (draft) {
|
if (draft) {
|
||||||
showPrompt = true
|
showPrompt = true
|
||||||
draftTimestamp = draft.ts
|
draftTimestamp = draft.ts
|
||||||
|
|
@ -44,21 +43,19 @@ export function useDraftRecovery<TPayload>(options: {
|
||||||
draftTimeText,
|
draftTimeText,
|
||||||
|
|
||||||
restore() {
|
restore() {
|
||||||
const key = options.draftKey()
|
if (!options.draftKey) return
|
||||||
if (!key) return
|
const draft = loadDraft<TPayload>(options.draftKey)
|
||||||
const draft = loadDraft<TPayload>(key)
|
|
||||||
if (!draft) return
|
if (!draft) return
|
||||||
|
|
||||||
options.onRestore(draft.payload)
|
options.onRestore(draft.payload)
|
||||||
showPrompt = false
|
showPrompt = false
|
||||||
clearDraft(key)
|
clearDraft(options.draftKey)
|
||||||
},
|
},
|
||||||
|
|
||||||
dismiss() {
|
dismiss() {
|
||||||
const key = options.draftKey()
|
if (!options.draftKey) return
|
||||||
if (!key) return
|
|
||||||
showPrompt = false
|
showPrompt = false
|
||||||
clearDraft(key)
|
clearDraft(options.draftKey)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,18 @@ import { beforeNavigate } from '$app/navigation'
|
||||||
import { toast } from '$lib/stores/toast'
|
import { toast } from '$lib/stores/toast'
|
||||||
import type { AutoSaveStore } from '$lib/admin/autoSave.svelte'
|
import type { AutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
|
|
||||||
export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
export function useFormGuards(autoSave: AutoSaveStore<any, any> | null) {
|
||||||
autoSave: AutoSaveStore<TPayload, unknown> | null
|
|
||||||
) {
|
|
||||||
if (!autoSave) return // No guards needed for create mode
|
if (!autoSave) return // No guards needed for create mode
|
||||||
|
|
||||||
// Navigation guard: flush autosave before route change
|
// Navigation guard: flush autosave before route change
|
||||||
beforeNavigate(async (_navigation) => {
|
beforeNavigate(async (navigation) => {
|
||||||
// If already saved, allow navigation immediately
|
// If already saved, allow navigation immediately
|
||||||
if (autoSave.status === 'saved') return
|
if (autoSave.status === 'saved') return
|
||||||
|
|
||||||
// Otherwise flush pending changes
|
// Otherwise flush pending changes
|
||||||
try {
|
try {
|
||||||
await autoSave.flush()
|
await autoSave.flush()
|
||||||
} catch (error) {
|
} catch (error: any) {
|
||||||
console.error('Autosave flush failed:', error)
|
console.error('Autosave flush failed:', error)
|
||||||
toast.error('Failed to save changes')
|
toast.error('Failed to save changes')
|
||||||
}
|
}
|
||||||
|
|
@ -23,12 +21,8 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
||||||
|
|
||||||
// Warn before closing browser tab/window if unsaved changes
|
// Warn before closing browser tab/window if unsaved changes
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// Capture autoSave in closure to avoid non-null assertions
|
|
||||||
const store = autoSave
|
|
||||||
if (!store) return
|
|
||||||
|
|
||||||
function handleBeforeUnload(event: BeforeUnloadEvent) {
|
function handleBeforeUnload(event: BeforeUnloadEvent) {
|
||||||
if (store.status !== 'saved') {
|
if (autoSave!.status !== 'saved') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.returnValue = ''
|
event.returnValue = ''
|
||||||
}
|
}
|
||||||
|
|
@ -40,17 +34,13 @@ export function useFormGuards<TPayload = unknown, _TResponse = unknown>(
|
||||||
|
|
||||||
// Cmd/Ctrl+S keyboard shortcut for immediate save
|
// Cmd/Ctrl+S keyboard shortcut for immediate save
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// Capture autoSave in closure to avoid non-null assertions
|
|
||||||
const store = autoSave
|
|
||||||
if (!store) return
|
|
||||||
|
|
||||||
function handleKeydown(event: KeyboardEvent) {
|
function handleKeydown(event: KeyboardEvent) {
|
||||||
const key = event.key.toLowerCase()
|
const key = event.key.toLowerCase()
|
||||||
const isModifier = event.metaKey || event.ctrlKey
|
const isModifier = event.metaKey || event.ctrlKey
|
||||||
|
|
||||||
if (isModifier && key === 's') {
|
if (isModifier && key === 's') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
store.flush().catch((error) => {
|
autoSave!.flush().catch((error: any) => {
|
||||||
console.error('Autosave flush failed:', error)
|
console.error('Autosave flush failed:', error)
|
||||||
toast.error('Failed to save changes')
|
toast.error('Failed to save changes')
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -101,10 +101,10 @@
|
||||||
// Use the album's isNowPlaying status directly - single source of truth
|
// Use the album's isNowPlaying status directly - single source of truth
|
||||||
const isNowPlaying = $derived(album?.isNowPlaying ?? false)
|
const isNowPlaying = $derived(album?.isNowPlaying ?? false)
|
||||||
const nowPlayingTrack = $derived(album?.nowPlayingTrack)
|
const nowPlayingTrack = $derived(album?.nowPlayingTrack)
|
||||||
|
|
||||||
// Use Apple Music URL if available, otherwise fall back to Last.fm
|
// Use Apple Music URL if available, otherwise fall back to Last.fm
|
||||||
const albumUrl = $derived(album?.appleMusicData?.url || album?.url || '#')
|
const albumUrl = $derived(album?.appleMusicData?.url || album?.url || '#')
|
||||||
|
|
||||||
// Debug logging
|
// Debug logging
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (album && (isNowPlaying || album.isNowPlaying)) {
|
if (album && (isNowPlaying || album.isNowPlaying)) {
|
||||||
|
|
|
||||||
|
|
@ -2,15 +2,15 @@
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import XIcon from '$icons/x.svg'
|
import XIcon from '$icons/x.svg'
|
||||||
import LoaderIcon from '$icons/loader.svg'
|
import LoaderIcon from '$icons/loader.svg'
|
||||||
|
|
||||||
let isOpen = $state(false)
|
let isOpen = $state(false)
|
||||||
let searchQuery = $state('')
|
let searchQuery = $state('')
|
||||||
let storefront = $state('us')
|
let storefront = $state('us')
|
||||||
let isSearching = $state(false)
|
let isSearching = $state(false)
|
||||||
let searchResults = $state<unknown>(null)
|
let searchResults = $state<any>(null)
|
||||||
let searchError = $state<string | null>(null)
|
let searchError = $state<string | null>(null)
|
||||||
let responseTime = $state<number>(0)
|
let responseTime = $state<number>(0)
|
||||||
|
|
||||||
// Available storefronts
|
// Available storefronts
|
||||||
const storefronts = [
|
const storefronts = [
|
||||||
{ value: 'us', label: 'United States' },
|
{ value: 'us', label: 'United States' },
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
{ value: 'cn', label: 'China' },
|
{ value: 'cn', label: 'China' },
|
||||||
{ value: 'br', label: 'Brazil' }
|
{ value: 'br', label: 'Brazil' }
|
||||||
]
|
]
|
||||||
|
|
||||||
export function open() {
|
export function open() {
|
||||||
isOpen = true
|
isOpen = true
|
||||||
searchQuery = ''
|
searchQuery = ''
|
||||||
|
|
@ -34,23 +34,23 @@
|
||||||
searchError = null
|
searchError = null
|
||||||
responseTime = 0
|
responseTime = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
function close() {
|
function close() {
|
||||||
isOpen = false
|
isOpen = false
|
||||||
}
|
}
|
||||||
|
|
||||||
async function performSearch() {
|
async function performSearch() {
|
||||||
if (!searchQuery.trim()) {
|
if (!searchQuery.trim()) {
|
||||||
searchError = 'Please enter a search query'
|
searchError = 'Please enter a search query'
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSearching = true
|
isSearching = true
|
||||||
searchError = null
|
searchError = null
|
||||||
searchResults = null
|
searchResults = null
|
||||||
|
|
||||||
const startTime = performance.now()
|
const startTime = performance.now()
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch('/api/admin/debug/apple-music-search', {
|
const response = await fetch('/api/admin/debug/apple-music-search', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
|
@ -60,13 +60,13 @@
|
||||||
storefront
|
storefront
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
responseTime = Math.round(performance.now() - startTime)
|
responseTime = Math.round(performance.now() - startTime)
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
searchResults = await response.json()
|
searchResults = await response.json()
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
searchError = error instanceof Error ? error.message : 'Unknown error occurred'
|
searchError = error instanceof Error ? error.message : 'Unknown error occurred'
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
isSearching = false
|
isSearching = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleKeydown(e: KeyboardEvent) {
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
if (e.key === 'Escape' && isOpen) {
|
if (e.key === 'Escape' && isOpen) {
|
||||||
close()
|
close()
|
||||||
|
|
@ -83,7 +83,7 @@
|
||||||
performSearch()
|
performSearch()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
window.addEventListener('keydown', handleKeydown)
|
window.addEventListener('keydown', handleKeydown)
|
||||||
return () => window.removeEventListener('keydown', handleKeydown)
|
return () => window.removeEventListener('keydown', handleKeydown)
|
||||||
|
|
@ -91,22 +91,15 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<div class="modal-overlay" role="presentation" onclick={close}>
|
<div class="modal-overlay" onclick={close}>
|
||||||
<div
|
<div class="modal-container" onclick={(e) => e.stopPropagation()}>
|
||||||
class="modal-container"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
tabindex="-1"
|
|
||||||
onclick={(e) => e.stopPropagation()}
|
|
||||||
onkeydown={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h2>Apple Music API Search</h2>
|
<h2>Apple Music API Search</h2>
|
||||||
<button class="close-btn" onclick={close} aria-label="Close">
|
<button class="close-btn" onclick={close} aria-label="Close">
|
||||||
<XIcon />
|
<XIcon />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<div class="search-controls">
|
<div class="search-controls">
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
|
|
@ -119,7 +112,7 @@
|
||||||
disabled={isSearching}
|
disabled={isSearching}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<label for="storefront">Storefront</label>
|
<label for="storefront">Storefront</label>
|
||||||
<select id="storefront" bind:value={storefront} disabled={isSearching}>
|
<select id="storefront" bind:value={storefront} disabled={isSearching}>
|
||||||
|
|
@ -128,9 +121,9 @@
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="search-btn"
|
class="search-btn"
|
||||||
onclick={performSearch}
|
onclick={performSearch}
|
||||||
disabled={isSearching || !searchQuery.trim()}
|
disabled={isSearching || !searchQuery.trim()}
|
||||||
>
|
>
|
||||||
|
|
@ -141,32 +134,27 @@
|
||||||
{/if}
|
{/if}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if searchError}
|
{#if searchError}
|
||||||
<div class="error-message">
|
<div class="error-message">
|
||||||
<strong>Error:</strong> {searchError}
|
<strong>Error:</strong>
|
||||||
|
{searchError}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if responseTime > 0}
|
{#if responseTime > 0}
|
||||||
<div class="response-time">
|
<div class="response-time">
|
||||||
Response time: {responseTime}ms
|
Response time: {responseTime}ms
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if searchResults}
|
{#if searchResults}
|
||||||
<div class="results-section">
|
<div class="results-section">
|
||||||
<h3>Results</h3>
|
<h3>Results</h3>
|
||||||
|
|
||||||
<div class="result-tabs">
|
<div class="result-tabs">
|
||||||
<button
|
<button class="tab" class:active={true} onclick={() => {}}> Raw JSON </button>
|
||||||
class="tab"
|
<button
|
||||||
class:active={true}
|
|
||||||
onclick={() => {}}
|
|
||||||
>
|
|
||||||
Raw JSON
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="copy-btn"
|
class="copy-btn"
|
||||||
onclick={async () => {
|
onclick={async () => {
|
||||||
try {
|
try {
|
||||||
|
|
@ -188,7 +176,7 @@
|
||||||
Copy to Clipboard
|
Copy to Clipboard
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="results-content">
|
<div class="results-content">
|
||||||
<pre>{JSON.stringify(searchResults, null, 2)}</pre>
|
<pre>{JSON.stringify(searchResults, null, 2)}</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -213,7 +201,7 @@
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-container {
|
.modal-container {
|
||||||
background: rgba(20, 20, 20, 0.98);
|
background: rgba(20, 20, 20, 0.98);
|
||||||
border-radius: $unit * 1.5;
|
border-radius: $unit * 1.5;
|
||||||
|
|
@ -225,21 +213,21 @@
|
||||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: $unit * 2;
|
padding: $unit * 2;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.close-btn {
|
.close-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -248,34 +236,34 @@
|
||||||
padding: $unit-half;
|
padding: $unit-half;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
:global(svg) {
|
:global(svg) {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: white;
|
color: white;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-body {
|
.modal-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: $unit * 2;
|
padding: $unit * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-controls {
|
.search-controls {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: $unit * 2;
|
gap: $unit * 2;
|
||||||
margin-bottom: $unit * 2;
|
margin-bottom: $unit * 2;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
|
@ -283,8 +271,9 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: $unit-half;
|
margin-bottom: $unit-half;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, select {
|
input,
|
||||||
|
select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
|
@ -293,24 +282,24 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: rgba(255, 255, 255, 0.4);
|
color: rgba(255, 255, 255, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: $primary-color;
|
border-color: $primary-color;
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-btn {
|
.search-btn {
|
||||||
padding: $unit $unit * 2;
|
padding: $unit $unit * 2;
|
||||||
background: $primary-color;
|
background: $primary-color;
|
||||||
|
|
@ -325,23 +314,23 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: $unit-half;
|
gap: $unit-half;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
&:hover:not(:disabled) {
|
||||||
background: darken($primary-color, 10%);
|
background: darken($primary-color, 10%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.icon) {
|
:global(.icon) {
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-message {
|
.error-message {
|
||||||
background: rgba(255, 59, 48, 0.1);
|
background: rgba(255, 59, 48, 0.1);
|
||||||
border: 1px solid rgba(255, 59, 48, 0.3);
|
border: 1px solid rgba(255, 59, 48, 0.3);
|
||||||
|
|
@ -351,16 +340,16 @@
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
margin-bottom: $unit * 2;
|
margin-bottom: $unit * 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.response-time {
|
.response-time {
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-bottom: $unit;
|
margin-bottom: $unit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-section {
|
.results-section {
|
||||||
margin-top: $unit * 2;
|
margin-top: $unit * 2;
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin: 0 0 $unit 0;
|
margin: 0 0 $unit 0;
|
||||||
color: #87ceeb;
|
color: #87ceeb;
|
||||||
|
|
@ -368,14 +357,14 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-tabs {
|
.result-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
margin-bottom: $unit * 2;
|
margin-bottom: $unit * 2;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
padding: $unit $unit * 2;
|
padding: $unit $unit * 2;
|
||||||
background: none;
|
background: none;
|
||||||
|
|
@ -386,17 +375,17 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: white;
|
color: white;
|
||||||
border-bottom-color: $primary-color;
|
border-bottom-color: $primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn {
|
.copy-btn {
|
||||||
padding: $unit-half $unit;
|
padding: $unit-half $unit;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
|
@ -407,7 +396,7 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
border-color: rgba(255, 255, 255, 0.3);
|
border-color: rgba(255, 255, 255, 0.3);
|
||||||
|
|
@ -415,14 +404,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.results-content {
|
.results-content {
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: $unit * 1.5;
|
padding: $unit * 1.5;
|
||||||
|
|
@ -432,11 +421,11 @@
|
||||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.spinning) {
|
:global(.spinning) {
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
|
@ -445,4 +434,4 @@
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte'
|
import { onMount, onDestroy } from 'svelte'
|
||||||
import { Spring } from 'svelte/motion'
|
import { Spring } from 'svelte/motion'
|
||||||
import { musicStream } from '$lib/stores/music-stream'
|
import { musicStream } from '$lib/stores/music-stream'
|
||||||
import AvatarSVG from './AvatarSVG.svelte'
|
import AvatarSVG from './AvatarSVG.svelte'
|
||||||
|
|
@ -12,7 +12,6 @@
|
||||||
let isBlinking = $state(false)
|
let isBlinking = $state(false)
|
||||||
let isPlayingMusic = $state(forcePlayingMusic)
|
let isPlayingMusic = $state(forcePlayingMusic)
|
||||||
|
|
||||||
|
|
||||||
const scale = new Spring(1, {
|
const scale = new Spring(1, {
|
||||||
stiffness: 0.1,
|
stiffness: 0.1,
|
||||||
damping: 0.125
|
damping: 0.125
|
||||||
|
|
@ -86,7 +85,6 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="face-container"
|
class="face-container"
|
||||||
role="presentation"
|
|
||||||
onmouseenter={handleMouseEnter}
|
onmouseenter={handleMouseEnter}
|
||||||
onmouseleave={handleMouseLeave}
|
onmouseleave={handleMouseLeave}
|
||||||
style="transform: scale({scale.current})"
|
style="transform: scale({scale.current})"
|
||||||
|
|
|
||||||
|
|
@ -33,28 +33,28 @@
|
||||||
<path
|
<path
|
||||||
d="M113.14 341.08C113.14 341.08 97.1402 334.75 97.4702 322.08C97.4702 322.08 98.4702 310.42 106.81 309.42C106.81 309.42 86.1402 309.75 86.1402 295.75C86.1402 295.75 86.1402 283.08 97.4702 283.42C97.4702 283.42 78.4702 275.42 78.4702 261.75C78.4702 249.08 85.8102 240.75 95.8102 240.75C95.8102 240.75 80.4702 232.08 80.4702 220.08C80.4702 220.08 79.4702 209.75 85.1402 204.75C85.1402 204.75 76.1402 184.08 83.4702 167.42C83.4702 167.42 86.1402 156.75 104.14 153.75C104.14 153.75 98.1402 137.42 107.47 126.75C107.47 126.75 112.47 118.75 125.47 118.08C125.47 118.08 127.47 102.26 141.47 98.08C141.47 98.08 157.03 97.08 168.69 102.08C168.69 102.08 177.14 79.43 195.14 72.76C195.14 72.76 214.34 65.76 228.34 78.37C228.34 78.37 230.47 57.09 247.97 57.09C265.47 57.09 272.66 72.17 272.66 72.17C272.66 72.17 277.72 59.04 294.47 64.09C312.14 69.43 312.47 93.43 312.47 93.43C312.47 93.43 326.47 78.76 345.81 84.09C353.92 86.33 357.14 97.76 354.81 106.43C354.81 106.43 362.47 98.09 369.81 101.43C377.15 104.77 391.47 117.09 382.81 137.76C382.81 137.76 401.47 135.43 410.14 150.09C410.14 150.09 424.14 169.76 407.14 184.76C407.14 184.76 428.47 183.09 432.47 209.09C432.47 209.09 434.14 229.76 413.47 236.43C413.47 236.43 430.81 237.76 430.47 253.76C430.47 253.76 432.77 269.76 411.77 276.76C411.77 276.76 423.43 285.76 421.1 297.43C417.1 317.43 391.43 315.43 391.43 315.43C391.43 315.43 405.43 320.09 403.43 328.43C403.43 328.43 399.77 338.43 386.1 336.43C386.1 336.43 395.1 345.43 387.1 352.76C379.1 360.09 369.43 352.76 369.43 352.76C369.43 352.76 374.81 368.89 364.08 373.23C353.56 377.49 344.52 369.41 342.86 367.08C341.2 364.75 346.43 377.76 332.1 379.08C317.77 380.4 316.43 366.08 316.43 366.08C316.43 366.08 317.43 352.75 329.1 355.42C329.1 355.42 320.43 352.42 321.1 344.42C321.77 336.42 330.77 333.42 330.77 333.42C330.77 333.42 318.77 339.08 317.1 329.42C315.43 319.76 325.43 309.75 325.43 309.75C325.43 309.75 311.43 311.42 310.1 297.75C310.1 297.75 309.77 282.75 325.77 277.08C325.77 277.08 309.1 274.75 309.43 256.08C309.76 237.41 326.1 231.42 326.1 231.42C326.1 231.42 316.77 238.42 307.43 230.75C298.09 223.08 302.1 210.08 302.1 210.08C302.1 210.08 298.43 221.84 283.1 218.08C267.77 214.32 271.77 200.08 271.77 200.08C271.77 200.08 263.43 215.08 250.77 213.42C238.11 211.76 237.1 196.75 237.1 196.75C237.1 196.75 232.1 205.42 225.43 204.75C225.43 204.75 212.77 205.08 213.43 186.75C213.43 186.75 213.1 204.08 195.77 207.42C178.44 210.76 177.1 193.75 177.1 193.75C177.1 193.75 179.1 208.42 162.43 214.75C145.76 221.08 143.43 206.42 143.43 206.42C143.43 206.42 148.1 217.08 139.43 229.42C130.76 241.76 131.1 236.42 131.1 236.42C132.79 243.396 133.354 250.596 132.77 257.75C131.77 269.42 125.1 286.08 121.77 305.42C119.756 317.082 118.972 328.924 119.43 340.75L113.14 341.08Z"
|
d="M113.14 341.08C113.14 341.08 97.1402 334.75 97.4702 322.08C97.4702 322.08 98.4702 310.42 106.81 309.42C106.81 309.42 86.1402 309.75 86.1402 295.75C86.1402 295.75 86.1402 283.08 97.4702 283.42C97.4702 283.42 78.4702 275.42 78.4702 261.75C78.4702 249.08 85.8102 240.75 95.8102 240.75C95.8102 240.75 80.4702 232.08 80.4702 220.08C80.4702 220.08 79.4702 209.75 85.1402 204.75C85.1402 204.75 76.1402 184.08 83.4702 167.42C83.4702 167.42 86.1402 156.75 104.14 153.75C104.14 153.75 98.1402 137.42 107.47 126.75C107.47 126.75 112.47 118.75 125.47 118.08C125.47 118.08 127.47 102.26 141.47 98.08C141.47 98.08 157.03 97.08 168.69 102.08C168.69 102.08 177.14 79.43 195.14 72.76C195.14 72.76 214.34 65.76 228.34 78.37C228.34 78.37 230.47 57.09 247.97 57.09C265.47 57.09 272.66 72.17 272.66 72.17C272.66 72.17 277.72 59.04 294.47 64.09C312.14 69.43 312.47 93.43 312.47 93.43C312.47 93.43 326.47 78.76 345.81 84.09C353.92 86.33 357.14 97.76 354.81 106.43C354.81 106.43 362.47 98.09 369.81 101.43C377.15 104.77 391.47 117.09 382.81 137.76C382.81 137.76 401.47 135.43 410.14 150.09C410.14 150.09 424.14 169.76 407.14 184.76C407.14 184.76 428.47 183.09 432.47 209.09C432.47 209.09 434.14 229.76 413.47 236.43C413.47 236.43 430.81 237.76 430.47 253.76C430.47 253.76 432.77 269.76 411.77 276.76C411.77 276.76 423.43 285.76 421.1 297.43C417.1 317.43 391.43 315.43 391.43 315.43C391.43 315.43 405.43 320.09 403.43 328.43C403.43 328.43 399.77 338.43 386.1 336.43C386.1 336.43 395.1 345.43 387.1 352.76C379.1 360.09 369.43 352.76 369.43 352.76C369.43 352.76 374.81 368.89 364.08 373.23C353.56 377.49 344.52 369.41 342.86 367.08C341.2 364.75 346.43 377.76 332.1 379.08C317.77 380.4 316.43 366.08 316.43 366.08C316.43 366.08 317.43 352.75 329.1 355.42C329.1 355.42 320.43 352.42 321.1 344.42C321.77 336.42 330.77 333.42 330.77 333.42C330.77 333.42 318.77 339.08 317.1 329.42C315.43 319.76 325.43 309.75 325.43 309.75C325.43 309.75 311.43 311.42 310.1 297.75C310.1 297.75 309.77 282.75 325.77 277.08C325.77 277.08 309.1 274.75 309.43 256.08C309.76 237.41 326.1 231.42 326.1 231.42C326.1 231.42 316.77 238.42 307.43 230.75C298.09 223.08 302.1 210.08 302.1 210.08C302.1 210.08 298.43 221.84 283.1 218.08C267.77 214.32 271.77 200.08 271.77 200.08C271.77 200.08 263.43 215.08 250.77 213.42C238.11 211.76 237.1 196.75 237.1 196.75C237.1 196.75 232.1 205.42 225.43 204.75C225.43 204.75 212.77 205.08 213.43 186.75C213.43 186.75 213.1 204.08 195.77 207.42C178.44 210.76 177.1 193.75 177.1 193.75C177.1 193.75 179.1 208.42 162.43 214.75C145.76 221.08 143.43 206.42 143.43 206.42C143.43 206.42 148.1 217.08 139.43 229.42C130.76 241.76 131.1 236.42 131.1 236.42C132.79 243.396 133.354 250.596 132.77 257.75C131.77 269.42 125.1 286.08 121.77 305.42C119.756 317.082 118.972 328.924 119.43 340.75L113.14 341.08Z"
|
||||||
fill="#935C0A"
|
fill="#935C0A"
|
||||||
style="fill:color(display-p3 0.5765 0.3608 0.0392);fill-opacity:1;"
|
style="fill:#935C0A;fill:color(display-p3 0.5765 0.3608 0.0392);fill-opacity:1;"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M331.19 339.25C335.93 337.62 335.62 334.81 333.31 333.19C331 331.57 327.13 332.56 326.19 333.94C325.25 335.32 323.05 335.05 321.75 332.81C317.63 325.7 324.31 316.12 328.69 314.69C334.69 312.69 332.38 309.25 332.38 309.25C332.01 308.647 331.462 308.174 330.812 307.895C330.162 307.616 329.442 307.544 328.75 307.69C326.94 308.12 326.12 308.88 324.75 308.88C320 308.88 315.75 304.5 315.88 298.44C316.01 292.38 321.56 283.31 326.81 282.5C332.06 281.69 331.28 278.95 331.28 278.95C331.28 278.95 331.91 276.88 326.81 275.81C317.34 273.81 314 270 313.63 258C313.26 246 318.75 238.56 324.44 237.21C333.68 235.02 332 229.31 331.38 228.62C330.828 228.254 330.156 228.114 329.503 228.232C328.851 228.349 328.27 228.714 327.88 229.25C327.19 230.5 324.1 235.15 315.04 232.08C300.68 227.23 306.94 212.08 307.94 209.38C308.94 206.68 304.88 206.94 304.88 206.94C304.88 206.94 300.5 206.62 299.81 208.62C298.94 211.17 294.44 219.81 285.69 218.06C274.85 215.9 274.81 205.94 275.12 202.56C275.43 199.18 274.81 198.88 273.12 198.88C271.43 198.88 269.69 198.81 269 201.69C266.43 212.44 251.94 212.88 251.94 212.88C238.44 212.56 239.18 196.15 239.75 191.88C240.44 186.75 240.44 186.79 239.49 186.88C238 186.97 236.38 190.28 236.38 192.41C236.481 194.484 235.981 196.543 234.94 198.34C233.75 200.34 231.25 204.65 226.31 204.47C221.37 204.29 218.75 199.47 218.69 194.59C218.63 190.34 218.88 185.59 218.88 185.59C218.81 184.28 218 182.72 216.69 183.28C215.38 183.84 214.19 184.41 212.31 185.41C211.77 185.729 211.339 186.202 211.071 186.769C210.804 187.336 210.713 187.971 210.81 188.59L211 191.97C211.06 195.47 207.89 199.66 205.62 201.72C198.75 207.97 191.7 207.91 188.27 204.41C184.84 200.91 184.19 199.34 183.27 195.47C182.74 193.28 181.27 192.72 180.46 193.03C179.65 193.34 176.71 194.65 176.71 194.65C176.437 194.798 176.198 195 176.007 195.244C175.816 195.489 175.678 195.77 175.601 196.071C175.523 196.371 175.509 196.684 175.559 196.991C175.609 197.297 175.722 197.589 175.89 197.85C176.62 199.29 174.82 202.85 174.08 203.91C171.94 207.13 165.4 213.47 160.02 214.36C154.43 215.29 151.35 209.36 149.85 206.36C148.35 203.36 145.02 204.53 142.02 206.36C139.02 208.19 139.85 210.36 139.85 210.36C141.85 216.64 139.64 224.91 137.52 228.7C132.19 238.21 125.52 235.7 123.52 235.15C121.52 234.6 120.02 236.7 122.69 239.86C125.36 243.02 132.1 241.61 132.1 241.61C132.1 241.61 126.85 272.2 122.19 289.7C117.53 307.2 114.52 329.36 114.52 340.7C114.52 352.04 116.69 382.86 145.35 399.7C174.01 416.54 199.52 413.53 208.35 412.03C208.35 412.03 221.02 409.52 226.19 406.53C226.19 406.53 228.98 404.65 229.19 408.53C229.52 414.78 227.5 426.53 222.85 433.2C222.85 433.2 218.19 440.63 240.52 440.63C249.19 440.63 254.69 439.54 264.85 432.03C264.85 432.03 266.85 431.36 266.35 426.36C265.85 421.36 265.68 410.86 266.43 407.36C266.43 407.36 304.08 399.59 322.07 381.44L322.45 374.6C316.79 366.23 326.14 359.78 327.21 360.34C328.28 360.9 328.96 361.03 331.21 360.78C333.46 360.53 333.71 359.41 333.27 358.03C332.83 356.65 330.96 355.15 327.4 353.72C323.84 352.29 327.38 340.56 331.19 339.25ZM321.08 340.19C317.65 342.62 317.33 349.33 320.4 352.52C321.34 353.52 321.28 354.52 320.4 354.77C311.92 357.03 310.87 366.54 315.81 374.85C317.46 377.62 316.56 378.27 316.56 378.27C300.31 394.02 278.19 400.5 267.62 402.56C264.52 403.17 262.38 404.44 261.15 409.1C259.63 414.86 259.23 427.27 259.23 427.27C247.23 437.27 230.31 434.69 232.31 432.19C234.31 429.69 235.31 424.93 235.31 424.93C235.31 424.93 236.54 421.26 238.25 408.38C239.44 399.44 232.82 394.82 222.53 398.5C200.6 406.33 174.98 406.25 159.81 399.44C137.55 389.44 127.42 374.23 125.31 352.94C123.2 331.65 123.92 324.5 131.31 288.86C138.7 253.22 136.56 238.15 136.56 238.15C147.19 234.15 148.5 217.25 148.5 217.25C162.81 227.88 180.75 204.88 180.75 204.88C188.81 216.31 206.06 212.14 213.88 200.31C215.25 208.88 232.88 213.44 237.25 199.75C235.19 216.06 255.94 224.25 269.5 208.88C270.18 208.1 270.82 208.5 271 209.44C273.65 223.5 288.73 226.35 297.4 221.44C299.99 219.96 299.94 221.5 299.94 221.5C298.86 232.24 313.88 236.5 317.09 236.2C317.9 236.14 318.09 236.75 317.69 236.98C311.59 240.98 308.39 247.54 307.46 254.37C306.13 264.17 310.63 274.04 316.88 277.14C320.16 278.76 318.23 280.14 318.23 280.14C310.9 286.06 308.56 293.93 308.48 297.73C308.4 301.53 310.81 311.14 317.81 311.98C320.3 312.27 318.98 313.89 318.98 313.89C313.13 321.33 313.65 335.56 319.48 338.23C322.07 339.37 322.21 339.39 321.08 340.19Z"
|
d="M331.19 339.25C335.93 337.62 335.62 334.81 333.31 333.19C331 331.57 327.13 332.56 326.19 333.94C325.25 335.32 323.05 335.05 321.75 332.81C317.63 325.7 324.31 316.12 328.69 314.69C334.69 312.69 332.38 309.25 332.38 309.25C332.01 308.647 331.462 308.174 330.812 307.895C330.162 307.616 329.442 307.544 328.75 307.69C326.94 308.12 326.12 308.88 324.75 308.88C320 308.88 315.75 304.5 315.88 298.44C316.01 292.38 321.56 283.31 326.81 282.5C332.06 281.69 331.28 278.95 331.28 278.95C331.28 278.95 331.91 276.88 326.81 275.81C317.34 273.81 314 270 313.63 258C313.26 246 318.75 238.56 324.44 237.21C333.68 235.02 332 229.31 331.38 228.62C330.828 228.254 330.156 228.114 329.503 228.232C328.851 228.349 328.27 228.714 327.88 229.25C327.19 230.5 324.1 235.15 315.04 232.08C300.68 227.23 306.94 212.08 307.94 209.38C308.94 206.68 304.88 206.94 304.88 206.94C304.88 206.94 300.5 206.62 299.81 208.62C298.94 211.17 294.44 219.81 285.69 218.06C274.85 215.9 274.81 205.94 275.12 202.56C275.43 199.18 274.81 198.88 273.12 198.88C271.43 198.88 269.69 198.81 269 201.69C266.43 212.44 251.94 212.88 251.94 212.88C238.44 212.56 239.18 196.15 239.75 191.88C240.44 186.75 240.44 186.79 239.49 186.88C238 186.97 236.38 190.28 236.38 192.41C236.481 194.484 235.981 196.543 234.94 198.34C233.75 200.34 231.25 204.65 226.31 204.47C221.37 204.29 218.75 199.47 218.69 194.59C218.63 190.34 218.88 185.59 218.88 185.59C218.81 184.28 218 182.72 216.69 183.28C215.38 183.84 214.19 184.41 212.31 185.41C211.77 185.729 211.339 186.202 211.071 186.769C210.804 187.336 210.713 187.971 210.81 188.59L211 191.97C211.06 195.47 207.89 199.66 205.62 201.72C198.75 207.97 191.7 207.91 188.27 204.41C184.84 200.91 184.19 199.34 183.27 195.47C182.74 193.28 181.27 192.72 180.46 193.03C179.65 193.34 176.71 194.65 176.71 194.65C176.437 194.798 176.198 195 176.007 195.244C175.816 195.489 175.678 195.77 175.601 196.071C175.523 196.371 175.509 196.684 175.559 196.991C175.609 197.297 175.722 197.589 175.89 197.85C176.62 199.29 174.82 202.85 174.08 203.91C171.94 207.13 165.4 213.47 160.02 214.36C154.43 215.29 151.35 209.36 149.85 206.36C148.35 203.36 145.02 204.53 142.02 206.36C139.02 208.19 139.85 210.36 139.85 210.36C141.85 216.64 139.64 224.91 137.52 228.7C132.19 238.21 125.52 235.7 123.52 235.15C121.52 234.6 120.02 236.7 122.69 239.86C125.36 243.02 132.1 241.61 132.1 241.61C132.1 241.61 126.85 272.2 122.19 289.7C117.53 307.2 114.52 329.36 114.52 340.7C114.52 352.04 116.69 382.86 145.35 399.7C174.01 416.54 199.52 413.53 208.35 412.03C208.35 412.03 221.02 409.52 226.19 406.53C226.19 406.53 228.98 404.65 229.19 408.53C229.52 414.78 227.5 426.53 222.85 433.2C222.85 433.2 218.19 440.63 240.52 440.63C249.19 440.63 254.69 439.54 264.85 432.03C264.85 432.03 266.85 431.36 266.35 426.36C265.85 421.36 265.68 410.86 266.43 407.36C266.43 407.36 304.08 399.59 322.07 381.44L322.45 374.6C316.79 366.23 326.14 359.78 327.21 360.34C328.28 360.9 328.96 361.03 331.21 360.78C333.46 360.53 333.71 359.41 333.27 358.03C332.83 356.65 330.96 355.15 327.4 353.72C323.84 352.29 327.38 340.56 331.19 339.25ZM321.08 340.19C317.65 342.62 317.33 349.33 320.4 352.52C321.34 353.52 321.28 354.52 320.4 354.77C311.92 357.03 310.87 366.54 315.81 374.85C317.46 377.62 316.56 378.27 316.56 378.27C300.31 394.02 278.19 400.5 267.62 402.56C264.52 403.17 262.38 404.44 261.15 409.1C259.63 414.86 259.23 427.27 259.23 427.27C247.23 437.27 230.31 434.69 232.31 432.19C234.31 429.69 235.31 424.93 235.31 424.93C235.31 424.93 236.54 421.26 238.25 408.38C239.44 399.44 232.82 394.82 222.53 398.5C200.6 406.33 174.98 406.25 159.81 399.44C137.55 389.44 127.42 374.23 125.31 352.94C123.2 331.65 123.92 324.5 131.31 288.86C138.7 253.22 136.56 238.15 136.56 238.15C147.19 234.15 148.5 217.25 148.5 217.25C162.81 227.88 180.75 204.88 180.75 204.88C188.81 216.31 206.06 212.14 213.88 200.31C215.25 208.88 232.88 213.44 237.25 199.75C235.19 216.06 255.94 224.25 269.5 208.88C270.18 208.1 270.82 208.5 271 209.44C273.65 223.5 288.73 226.35 297.4 221.44C299.99 219.96 299.94 221.5 299.94 221.5C298.86 232.24 313.88 236.5 317.09 236.2C317.9 236.14 318.09 236.75 317.69 236.98C311.59 240.98 308.39 247.54 307.46 254.37C306.13 264.17 310.63 274.04 316.88 277.14C320.16 278.76 318.23 280.14 318.23 280.14C310.9 286.06 308.56 293.93 308.48 297.73C308.4 301.53 310.81 311.14 317.81 311.98C320.3 312.27 318.98 313.89 318.98 313.89C313.13 321.33 313.65 335.56 319.48 338.23C322.07 339.37 322.21 339.39 321.08 340.19Z"
|
||||||
fill="#070610"
|
fill="#070610"
|
||||||
style="fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M116.48 346.51C97.2602 345.19 83.3802 330.08 93.0002 312.67C80.3802 308.62 75.2502 293.25 85.2502 285.12C73.1202 279.62 63.6202 258.5 84.6202 238.38C72.2402 230.38 73.7502 213.38 82.0002 205.5C74.0002 199.25 72.8802 159 98.7502 154.5C92.8802 135.12 111 115.24 122.25 118C124.88 103.76 144.25 87 165.62 99C167.92 100.29 168.51 100.54 169.5 97.25C172.25 88.12 198.5 56.01 223.12 73.88C227.5 76.38 227.93 75.88 228 72.25C228.25 59.88 256.53 45.5 270.75 67.25C272.88 70.5 273.12 70 275.25 67.38C277.38 64.76 303.12 48.25 315.75 86.88C339.12 74.12 359.25 84 359.25 101.38C378.12 94.5 394 116.75 390.12 136.62C413.5 136.88 428.5 160.25 417.88 184.12C442.88 194.25 447.5 226.5 422.5 236.12C442.88 246.75 438.92 271.48 420.12 280.88C418.62 281.62 419.03 282.19 419.5 282.5C425.5 286.5 434.85 317.44 404.5 319.12C400 319.38 400.38 320.88 401.75 322.12C403.12 323.36 415.12 338.12 394.5 340.75C401.38 356.12 384.5 363.5 377.38 362.25C379.25 370.75 366 381.88 348.62 376.5C346.38 385.73 324.88 385 319 379.5C317.873 378.546 316.965 377.36 316.34 376.022C315.715 374.684 315.388 373.227 315.38 371.75L320.63 369.6C320.63 369.6 320.89 377.84 329.73 377.73C338.73 377.61 340.54 373.98 340.02 368.73C339.75 365.98 341.75 366.6 341.75 366.6C341.75 366.6 344.62 367.1 345.75 365.86C346.88 364.62 348.25 364.86 348.75 366.1C349.25 367.34 352.88 375.1 362.62 370.48C372.36 365.86 368 359.25 367 357.38C366 355.51 366.12 353.38 367 353.12C368.606 353.008 370.109 352.294 371.21 351.12C372.6 349.48 373.97 353.4 375.28 354.83C376.41 356.04 385.28 355.56 385.28 345.92C385.28 339.16 381.78 336.04 381.78 336.04C381.78 336.04 399.65 335.54 399.91 329.16C400.17 322.78 393.51 321.76 391.28 321.16C390.227 320.903 389.312 320.254 388.721 319.345C388.13 318.437 387.908 317.337 388.099 316.271C388.29 315.204 388.881 314.25 389.75 313.603C390.62 312.957 391.704 312.666 392.78 312.79C396.89 313.18 417.15 312.17 417.15 295.79C417.15 284.29 410.28 283.16 410.28 283.16C405.53 281.79 407.03 273.36 411.96 273.44C418.53 273.54 426.91 264.66 426.65 253.92C426.65 253.92 428.2 236.68 412.03 239.79C405.53 241.04 406.78 236.92 409.15 234.79C411.52 232.66 437.69 216.58 424.91 199.54C415.53 187.04 407.86 190.54 407.86 190.54C403.53 191.93 400.57 184.54 404.91 181.3C410.15 177.43 421.53 145.93 389.28 143.43C387.15 143.26 386.34 143.95 385.65 145.43C384.96 146.91 382.91 146.15 382.78 144.75C382.68 143.63 382.25 143.39 381.27 143.75C380.29 144.11 376.78 143.22 380.65 137.35C385.49 130.02 378.91 105.88 366.15 105.6C360.53 105.48 355.49 110.43 353.15 110.69C351.5 110.88 349.62 109.89 350.78 103.1C351.53 98.72 348.56 86.18 331.28 88.1C324.53 88.85 318.94 90.25 315.53 95.1C313.9 97.41 312.46 97.96 310.15 97.85C306.97 97.7 305.41 95.1 305.91 89.35C306.41 83.6 299.66 68.48 287.91 68.48C282.15 68.48 275.91 73.1 272.03 77.35C268.28 71.72 258.61 55.77 241.53 63.48C231.25 68 230.62 78.62 230.75 80.75C230.88 82.88 228.5 83.88 226.12 82C223.74 80.12 198 57.5 174.88 99C170.74 106.43 169.48 108.56 163.88 104.88C159.5 102 133.34 95.49 129.75 118.38C128.75 124.75 127.25 125.38 119.15 125.13C113.28 124.95 100.88 136.75 108.88 157.75C88.3802 162.12 83.5602 169.75 83.8802 185.25C84.1202 197.75 85.6202 202.79 88.6202 205.12C88.6202 205.12 89.7502 205.25 87.8802 208.38C86.0102 211.51 77.8202 228.91 102.12 240.12C103.75 240.88 104 244.38 101 244.38C98.0002 244.38 81.8802 250.25 82.1202 263.25C82.3602 276.25 94.0002 282 99.1202 282.25C104.24 282.5 102.5 287.88 99.2502 287.75C96.0002 287.62 90.2502 291.38 90.1202 297.12C89.9902 302.86 93.0002 307.22 101.5 307.5C107.37 307.69 111.21 310.14 111.88 311.62C113 314.12 108 312.38 105.62 313.62C103.24 314.86 95.4802 333.94 115.16 340.22L116.48 346.51Z"
|
d="M116.48 346.51C97.2602 345.19 83.3802 330.08 93.0002 312.67C80.3802 308.62 75.2502 293.25 85.2502 285.12C73.1202 279.62 63.6202 258.5 84.6202 238.38C72.2402 230.38 73.7502 213.38 82.0002 205.5C74.0002 199.25 72.8802 159 98.7502 154.5C92.8802 135.12 111 115.24 122.25 118C124.88 103.76 144.25 87 165.62 99C167.92 100.29 168.51 100.54 169.5 97.25C172.25 88.12 198.5 56.01 223.12 73.88C227.5 76.38 227.93 75.88 228 72.25C228.25 59.88 256.53 45.5 270.75 67.25C272.88 70.5 273.12 70 275.25 67.38C277.38 64.76 303.12 48.25 315.75 86.88C339.12 74.12 359.25 84 359.25 101.38C378.12 94.5 394 116.75 390.12 136.62C413.5 136.88 428.5 160.25 417.88 184.12C442.88 194.25 447.5 226.5 422.5 236.12C442.88 246.75 438.92 271.48 420.12 280.88C418.62 281.62 419.03 282.19 419.5 282.5C425.5 286.5 434.85 317.44 404.5 319.12C400 319.38 400.38 320.88 401.75 322.12C403.12 323.36 415.12 338.12 394.5 340.75C401.38 356.12 384.5 363.5 377.38 362.25C379.25 370.75 366 381.88 348.62 376.5C346.38 385.73 324.88 385 319 379.5C317.873 378.546 316.965 377.36 316.34 376.022C315.715 374.684 315.388 373.227 315.38 371.75L320.63 369.6C320.63 369.6 320.89 377.84 329.73 377.73C338.73 377.61 340.54 373.98 340.02 368.73C339.75 365.98 341.75 366.6 341.75 366.6C341.75 366.6 344.62 367.1 345.75 365.86C346.88 364.62 348.25 364.86 348.75 366.1C349.25 367.34 352.88 375.1 362.62 370.48C372.36 365.86 368 359.25 367 357.38C366 355.51 366.12 353.38 367 353.12C368.606 353.008 370.109 352.294 371.21 351.12C372.6 349.48 373.97 353.4 375.28 354.83C376.41 356.04 385.28 355.56 385.28 345.92C385.28 339.16 381.78 336.04 381.78 336.04C381.78 336.04 399.65 335.54 399.91 329.16C400.17 322.78 393.51 321.76 391.28 321.16C390.227 320.903 389.312 320.254 388.721 319.345C388.13 318.437 387.908 317.337 388.099 316.271C388.29 315.204 388.881 314.25 389.75 313.603C390.62 312.957 391.704 312.666 392.78 312.79C396.89 313.18 417.15 312.17 417.15 295.79C417.15 284.29 410.28 283.16 410.28 283.16C405.53 281.79 407.03 273.36 411.96 273.44C418.53 273.54 426.91 264.66 426.65 253.92C426.65 253.92 428.2 236.68 412.03 239.79C405.53 241.04 406.78 236.92 409.15 234.79C411.52 232.66 437.69 216.58 424.91 199.54C415.53 187.04 407.86 190.54 407.86 190.54C403.53 191.93 400.57 184.54 404.91 181.3C410.15 177.43 421.53 145.93 389.28 143.43C387.15 143.26 386.34 143.95 385.65 145.43C384.96 146.91 382.91 146.15 382.78 144.75C382.68 143.63 382.25 143.39 381.27 143.75C380.29 144.11 376.78 143.22 380.65 137.35C385.49 130.02 378.91 105.88 366.15 105.6C360.53 105.48 355.49 110.43 353.15 110.69C351.5 110.88 349.62 109.89 350.78 103.1C351.53 98.72 348.56 86.18 331.28 88.1C324.53 88.85 318.94 90.25 315.53 95.1C313.9 97.41 312.46 97.96 310.15 97.85C306.97 97.7 305.41 95.1 305.91 89.35C306.41 83.6 299.66 68.48 287.91 68.48C282.15 68.48 275.91 73.1 272.03 77.35C268.28 71.72 258.61 55.77 241.53 63.48C231.25 68 230.62 78.62 230.75 80.75C230.88 82.88 228.5 83.88 226.12 82C223.74 80.12 198 57.5 174.88 99C170.74 106.43 169.48 108.56 163.88 104.88C159.5 102 133.34 95.49 129.75 118.38C128.75 124.75 127.25 125.38 119.15 125.13C113.28 124.95 100.88 136.75 108.88 157.75C88.3802 162.12 83.5602 169.75 83.8802 185.25C84.1202 197.75 85.6202 202.79 88.6202 205.12C88.6202 205.12 89.7502 205.25 87.8802 208.38C86.0102 211.51 77.8202 228.91 102.12 240.12C103.75 240.88 104 244.38 101 244.38C98.0002 244.38 81.8802 250.25 82.1202 263.25C82.3602 276.25 94.0002 282 99.1202 282.25C104.24 282.5 102.5 287.88 99.2502 287.75C96.0002 287.62 90.2502 291.38 90.1202 297.12C89.9902 302.86 93.0002 307.22 101.5 307.5C107.37 307.69 111.21 310.14 111.88 311.62C113 314.12 108 312.38 105.62 313.62C103.24 314.86 95.4802 333.94 115.16 340.22L116.48 346.51Z"
|
||||||
fill="#060500"
|
fill="#060500"
|
||||||
style="fill:color(display-p3 0.0235 0.0196 0.0000);fill-opacity:1;"
|
style="fill:#060500;fill:color(display-p3 0.0235 0.0196 0.0000);fill-opacity:1;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<path
|
<path
|
||||||
d="M365.31 267.69C360.31 267.44 353.69 268.25 350.69 271C351.75 261.75 348 261.18 345 261C342 260.82 342.25 263.79 342.25 263.79C342.25 263.79 349.5 274.54 346.25 315.79C349.238 314.474 351.828 312.396 353.759 309.763C355.69 307.13 356.894 304.035 357.25 300.79C357.25 300.79 362 298.34 365.5 298.44C369 298.54 380 295.54 379.75 284.04C379.5 272.54 370.31 267.94 365.31 267.69ZM360.56 293C357.06 294.69 357 292.81 357.06 290.88C357.12 288.95 357.06 284.25 355.69 282.69C355.295 282.349 355.038 281.875 354.968 281.357C354.898 280.839 355.02 280.314 355.31 279.88C355.31 279.88 369.69 272.56 370.12 279.38C370.55 286.2 364.06 291.31 360.56 293Z"
|
d="M365.31 267.69C360.31 267.44 353.69 268.25 350.69 271C351.75 261.75 348 261.18 345 261C342 260.82 342.25 263.79 342.25 263.79C342.25 263.79 349.5 274.54 346.25 315.79C349.238 314.474 351.828 312.396 353.759 309.763C355.69 307.13 356.894 304.035 357.25 300.79C357.25 300.79 362 298.34 365.5 298.44C369 298.54 380 295.54 379.75 284.04C379.5 272.54 370.31 267.94 365.31 267.69ZM360.56 293C357.06 294.69 357 292.81 357.06 290.88C357.12 288.95 357.06 284.25 355.69 282.69C355.295 282.349 355.038 281.875 354.968 281.357C354.898 280.839 355.02 280.314 355.31 279.88C355.31 279.88 369.69 272.56 370.12 279.38C370.55 286.2 364.06 291.31 360.56 293Z"
|
||||||
fill="#070610"
|
fill="#070610"
|
||||||
style="fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
style="fill:#070610;fill:color(display-p3 0.0275 0.0235 0.0627);fill-opacity:1;"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M355.31 279.88C355.019 280.314 354.898 280.839 354.968 281.357C355.038 281.875 355.294 282.349 355.69 282.69C357.06 284.25 357.12 288.94 357.06 290.88C357 292.82 357.06 294.69 360.56 293C364.06 291.31 370.56 286.19 370.12 279.38C369.68 272.57 355.31 279.88 355.31 279.88Z"
|
d="M355.31 279.88C355.019 280.314 354.898 280.839 354.968 281.357C355.038 281.875 355.294 282.349 355.69 282.69C357.06 284.25 357.12 288.94 357.06 290.88C357 292.82 357.06 294.69 360.56 293C364.06 291.31 370.56 286.19 370.12 279.38C369.68 272.57 355.31 279.88 355.31 279.88Z"
|
||||||
fill="#C3915E"
|
fill="#C3915E"
|
||||||
style="fill:color(display-p3 0.7647 0.5686 0.3686);fill-opacity:1;"
|
style="fill:#C3915E;fill:color(display-p3 0.7647 0.5686 0.3686);fill-opacity:1;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Face slot -->
|
<!-- Face slot -->
|
||||||
|
|
@ -106,19 +106,19 @@
|
||||||
<stop
|
<stop
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.18"
|
stop-opacity="0.18"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.3"
|
offset="0.3"
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.16"
|
stop-opacity="0.16"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.63"
|
offset="0.63"
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.1"
|
stop-opacity="0.1"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.99"
|
offset="0.99"
|
||||||
|
|
@ -144,19 +144,19 @@
|
||||||
<stop
|
<stop
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.18"
|
stop-opacity="0.18"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.18;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.3"
|
offset="0.3"
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.16"
|
stop-opacity="0.16"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.16;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.63"
|
offset="0.63"
|
||||||
stop-color="#E86A58"
|
stop-color="#E86A58"
|
||||||
stop-opacity="0.1"
|
stop-opacity="0.1"
|
||||||
style="stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
style="stop-color:#E86A58;stop-color:color(display-p3 0.9098 0.4157 0.3451);stop-opacity:0.1;"
|
||||||
/>
|
/>
|
||||||
<stop
|
<stop
|
||||||
offset="0.99"
|
offset="0.99"
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 20 KiB |
File diff suppressed because it is too large
Load diff
|
|
@ -1,12 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import LinkCard from './LinkCard.svelte'
|
||||||
import Slideshow from './Slideshow.svelte'
|
import Slideshow from './Slideshow.svelte'
|
||||||
import BackButton from './BackButton.svelte'
|
import BackButton from './BackButton.svelte'
|
||||||
import { formatDate } from '$lib/utils/date'
|
import { formatDate } from '$lib/utils/date'
|
||||||
import { renderEdraContent } from '$lib/utils/content'
|
import { renderEdraContent } from '$lib/utils/content'
|
||||||
|
|
||||||
import type { Post } from '@prisma/client'
|
let { post }: { post: any } = $props()
|
||||||
|
|
||||||
let { post }: { post: Post } = $props()
|
|
||||||
|
|
||||||
const renderedContent = $derived(post.content ? renderEdraContent(post.content) : '')
|
const renderedContent = $derived(post.content ? renderEdraContent(post.content) : '')
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -251,8 +250,8 @@
|
||||||
background: $gray-95;
|
background: $gray-95;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
|
font-family:
|
||||||
monospace;
|
'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { spring } from 'svelte/motion'
|
import { spring } from 'svelte/motion'
|
||||||
import { parse } from 'tinyduration'
|
import { parse } from 'tinyduration'
|
||||||
import type { SerializableGameInfo } from '$lib/types/steam'
|
|
||||||
|
|
||||||
interface GameProps {
|
interface GameProps {
|
||||||
game?: SerializableGameInfo
|
game?: SerializableGameInfo
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, onDestroy } from 'svelte'
|
import { onMount, onDestroy } from 'svelte'
|
||||||
import type { GeoLocation } from '@prisma/client'
|
import type { GeoLocation } from '@prisma/client'
|
||||||
import type * as L from 'leaflet'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
location: GeoLocation
|
location: GeoLocation
|
||||||
|
|
@ -20,9 +19,9 @@
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
let mapContainer: HTMLDivElement
|
let mapContainer: HTMLDivElement
|
||||||
let map: L.Map | null = null
|
let map: any
|
||||||
let marker: L.Marker | null = null
|
let marker: any
|
||||||
let leaflet: typeof L | null = null
|
let leaflet: any
|
||||||
|
|
||||||
// Load Leaflet dynamically
|
// Load Leaflet dynamically
|
||||||
async function loadLeaflet() {
|
async function loadLeaflet() {
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
const projectUrl = $derived(`/labs/${project.slug}`)
|
const projectUrl = $derived(`/labs/${project.slug}`)
|
||||||
|
|
||||||
// Tilt card functionality
|
// Tilt card functionality
|
||||||
let cardElement: HTMLElement | undefined = $state.raw()
|
let cardElement: HTMLElement
|
||||||
let isHovering = $state(false)
|
let isHovering = $state(false)
|
||||||
let transform = $state('')
|
let transform = $state('')
|
||||||
|
|
||||||
|
|
@ -43,11 +43,11 @@
|
||||||
<div
|
<div
|
||||||
class="lab-card clickable"
|
class="lab-card clickable"
|
||||||
bind:this={cardElement}
|
bind:this={cardElement}
|
||||||
onmousemove={handleMouseMove}
|
on:mousemove={handleMouseMove}
|
||||||
onmouseenter={handleMouseEnter}
|
on:mouseenter={handleMouseEnter}
|
||||||
onmouseleave={handleMouseLeave}
|
on:mouseleave={handleMouseLeave}
|
||||||
onclick={() => (window.location.href = projectUrl)}
|
on:click={() => (window.location.href = projectUrl)}
|
||||||
onkeydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)}
|
on:keydown={(e) => e.key === 'Enter' && (window.location.href = projectUrl)}
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
style:transform
|
style:transform
|
||||||
|
|
@ -113,9 +113,9 @@
|
||||||
<article
|
<article
|
||||||
class="lab-card"
|
class="lab-card"
|
||||||
bind:this={cardElement}
|
bind:this={cardElement}
|
||||||
onmousemove={handleMouseMove}
|
on:mousemove={handleMouseMove}
|
||||||
onmouseenter={handleMouseEnter}
|
on:mouseenter={handleMouseEnter}
|
||||||
onmouseleave={handleMouseLeave}
|
on:mouseleave={handleMouseLeave}
|
||||||
style:transform
|
style:transform
|
||||||
>
|
>
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
|
|
|
||||||
|
|
@ -80,19 +80,11 @@
|
||||||
<div
|
<div
|
||||||
class="lightbox-backdrop"
|
class="lightbox-backdrop"
|
||||||
onclick={handleBackgroundClick}
|
onclick={handleBackgroundClick}
|
||||||
onkeydown={(e) => e.key === 'Enter' && handleBackgroundClick()}
|
|
||||||
transition:fade={{ duration: TRANSITION_NORMAL_MS }}
|
transition:fade={{ duration: TRANSITION_NORMAL_MS }}
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
<div
|
<div class="lightbox-content" onclick={(e) => e.stopPropagation()}>
|
||||||
class="lightbox-content"
|
|
||||||
role="dialog"
|
|
||||||
aria-modal="true"
|
|
||||||
tabindex="-1"
|
|
||||||
onclick={(e) => e.stopPropagation()}
|
|
||||||
onkeydown={(e) => e.stopPropagation()}
|
|
||||||
>
|
|
||||||
<div class="lightbox-image-container">
|
<div class="lightbox-image-container">
|
||||||
<img
|
<img
|
||||||
src={images[selectedIndex]}
|
src={images[selectedIndex]}
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,24 @@
|
||||||
) || navItems[0]
|
) || navItems[0]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Get background color based on variant
|
||||||
|
function getBgColor(variant: string): string {
|
||||||
|
switch (variant) {
|
||||||
|
case 'work':
|
||||||
|
return '#ffcdc5'
|
||||||
|
case 'photos':
|
||||||
|
return '#e8c5ff'
|
||||||
|
case 'universe':
|
||||||
|
return '#ffebc5'
|
||||||
|
case 'labs':
|
||||||
|
return '#c5eaff'
|
||||||
|
case 'about':
|
||||||
|
return '#ffcdc5'
|
||||||
|
default:
|
||||||
|
return '#c5eaff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Get text color based on variant
|
// Get text color based on variant
|
||||||
function getTextColor(variant: string): string {
|
function getTextColor(variant: string): string {
|
||||||
switch (variant) {
|
switch (variant) {
|
||||||
|
|
|
||||||
|
|
@ -7,12 +7,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let { album, getAlbumArtwork }: Props = $props()
|
let { album, getAlbumArtwork }: Props = $props()
|
||||||
|
|
||||||
const trackText = $derived(`${album.artist.name} — ${album.name}${
|
const trackText = $derived(
|
||||||
album.appleMusicData?.releaseDate
|
`${album.artist.name} — ${album.name}${
|
||||||
? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})`
|
album.appleMusicData?.releaseDate
|
||||||
: ''
|
? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})`
|
||||||
} — ${album.nowPlayingTrack || album.name}`)
|
: ''
|
||||||
|
} — ${album.nowPlayingTrack || album.name}`
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="now-playing-bar">
|
<nav class="now-playing-bar">
|
||||||
|
|
@ -92,7 +94,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 50px; // Space between repeated text
|
gap: 50px; // Space between repeated text
|
||||||
|
|
||||||
// Gradient overlays
|
// Gradient overlays
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
|
|
@ -104,12 +106,12 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
left: 0;
|
left: 0;
|
||||||
background: linear-gradient(to right, $gray-100, transparent);
|
background: linear-gradient(to right, $gray-100, transparent);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
right: 0;
|
right: 0;
|
||||||
background: linear-gradient(to left, $gray-100, transparent);
|
background: linear-gradient(to left, $gray-100, transparent);
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,7 @@
|
||||||
</Masonry>
|
</Masonry>
|
||||||
{:else if (columns === 1 || columns === 2 || columns === 3) && !masonry}
|
{:else if (columns === 1 || columns === 2 || columns === 3) && !masonry}
|
||||||
<!-- Column-based layout for square thumbnails -->
|
<!-- Column-based layout for square thumbnails -->
|
||||||
{#each columnPhotos as column}
|
{#each columnPhotos as column, colIndex}
|
||||||
<div class="photo-grid__column">
|
<div class="photo-grid__column">
|
||||||
{#each column as photo}
|
{#each column as photo}
|
||||||
<div class="photo-grid__item">
|
<div class="photo-grid__item">
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { PhotoItem } from '$lib/types/photos'
|
import type { PhotoItem, Photo, PhotoAlbum } from '$lib/types/photos'
|
||||||
import { isAlbum } from '$lib/types/photos'
|
import { isAlbum } from '$lib/types/photos'
|
||||||
import { goto } from '$app/navigation'
|
import { goto } from '$app/navigation'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
title?: string
|
title?: string
|
||||||
caption?: string
|
caption?: string
|
||||||
description?: string
|
description?: string
|
||||||
exifData?: Record<string, unknown>
|
exifData?: any
|
||||||
createdAt?: string
|
createdAt?: string
|
||||||
backHref?: string
|
backHref?: string
|
||||||
backLabel?: string
|
backLabel?: string
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
backHref,
|
backHref,
|
||||||
backLabel,
|
backLabel,
|
||||||
showBackButton = false,
|
showBackButton = false,
|
||||||
|
albums = [],
|
||||||
class: className = ''
|
class: className = ''
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
|
|
@ -228,8 +229,8 @@
|
||||||
.metadata-value {
|
.metadata-value {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: $gray-10;
|
color: $gray-10;
|
||||||
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
|
font-family:
|
||||||
monospace;
|
'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -28,9 +28,9 @@
|
||||||
const isSmallScreen = window.innerWidth <= 768
|
const isSmallScreen = window.innerWidth <= 768
|
||||||
isMobile = hasTouch && isSmallScreen
|
isMobile = hasTouch && isSmallScreen
|
||||||
}
|
}
|
||||||
|
|
||||||
checkMobile()
|
checkMobile()
|
||||||
|
|
||||||
// Update on resize
|
// Update on resize
|
||||||
window.addEventListener('resize', checkMobile)
|
window.addEventListener('resize', checkMobile)
|
||||||
return () => window.removeEventListener('resize', checkMobile)
|
return () => window.removeEventListener('resize', checkMobile)
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
<h2>Gallery</h2>
|
<h2>Gallery</h2>
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
{#each project.gallery as image}
|
{#each project.gallery as image}
|
||||||
<img src={image} alt="Gallery item" />
|
<img src={image} alt="Project gallery image" />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -38,8 +38,8 @@
|
||||||
)
|
)
|
||||||
|
|
||||||
// 3D tilt effect
|
// 3D tilt effect
|
||||||
let cardElement: HTMLDivElement | undefined = $state.raw()
|
let cardElement: HTMLDivElement
|
||||||
let logoElement: HTMLElement | undefined = $state.raw()
|
let logoElement: HTMLElement
|
||||||
let isHovering = $state(false)
|
let isHovering = $state(false)
|
||||||
let transform = $state('')
|
let transform = $state('')
|
||||||
let svgContent = $state('')
|
let svgContent = $state('')
|
||||||
|
|
@ -127,8 +127,8 @@
|
||||||
onmouseenter={isClickable ? handleMouseEnter : undefined}
|
onmouseenter={isClickable ? handleMouseEnter : undefined}
|
||||||
onmouseleave={isClickable ? handleMouseLeave : undefined}
|
onmouseleave={isClickable ? handleMouseLeave : undefined}
|
||||||
style="transform: {transform};"
|
style="transform: {transform};"
|
||||||
role={isClickable ? 'button' : undefined}
|
role={isClickable ? 'button' : 'article'}
|
||||||
{...(isClickable ? { tabindex: 0 } : {})}
|
tabindex={isClickable ? 0 : -1}
|
||||||
>
|
>
|
||||||
<div class="project-logo" style="background-color: {backgroundColor}">
|
<div class="project-logo" style="background-color: {backgroundColor}">
|
||||||
{#if svgContent}
|
{#if svgContent}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from 'svelte'
|
|
||||||
import Button from '$lib/components/admin/Button.svelte'
|
import Button from '$lib/components/admin/Button.svelte'
|
||||||
import BackButton from './BackButton.svelte'
|
import BackButton from './BackButton.svelte'
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
@ -8,7 +7,7 @@
|
||||||
projectSlug: string
|
projectSlug: string
|
||||||
correctPassword: string
|
correctPassword: string
|
||||||
projectType?: 'work' | 'labs'
|
projectType?: 'work' | 'labs'
|
||||||
children?: Snippet
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
let { projectSlug, correctPassword, projectType = 'work', children }: Props = $props()
|
let { projectSlug, correctPassword, projectType = 'work', children }: Props = $props()
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@
|
||||||
<section class="recent-albums">
|
<section class="recent-albums">
|
||||||
{#if albums.length > 0}
|
{#if albums.length > 0}
|
||||||
<ul>
|
<ul>
|
||||||
{#each albums.slice(0, 4) as album}
|
{#each albums.slice(0, 4) as album, index}
|
||||||
<li>
|
<li>
|
||||||
<Album
|
<Album
|
||||||
{album}
|
{album}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
items = [],
|
items = [],
|
||||||
alt = 'Image',
|
alt = 'Image',
|
||||||
showThumbnails = true,
|
showThumbnails = true,
|
||||||
|
aspectRatio = '4/3',
|
||||||
maxThumbnails,
|
maxThumbnails,
|
||||||
totalCount,
|
totalCount,
|
||||||
showMoreLink
|
showMoreLink
|
||||||
|
|
@ -93,13 +94,7 @@
|
||||||
{#if items.length === 1}
|
{#if items.length === 1}
|
||||||
<!-- Single image -->
|
<!-- Single image -->
|
||||||
<TiltCard>
|
<TiltCard>
|
||||||
<div
|
<div class="single-image image-container" onclick={() => openLightbox()}>
|
||||||
class="single-image image-container"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
onclick={() => openLightbox()}
|
|
||||||
onkeydown={(e) => e.key === 'Enter' && openLightbox()}
|
|
||||||
>
|
|
||||||
<img src={items[0].url} alt={items[0].alt || alt} />
|
<img src={items[0].url} alt={items[0].alt || alt} />
|
||||||
{#if items[0].caption}
|
{#if items[0].caption}
|
||||||
<div class="image-caption">{items[0].caption}</div>
|
<div class="image-caption">{items[0].caption}</div>
|
||||||
|
|
@ -110,13 +105,7 @@
|
||||||
<!-- Slideshow -->
|
<!-- Slideshow -->
|
||||||
<div class="slideshow">
|
<div class="slideshow">
|
||||||
<TiltCard>
|
<TiltCard>
|
||||||
<div
|
<div class="main-image image-container" onclick={() => openLightbox()}>
|
||||||
class="main-image image-container"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
onclick={() => openLightbox()}
|
|
||||||
onkeydown={(e) => e.key === 'Enter' && openLightbox()}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
src={items[selectedIndex].url}
|
src={items[selectedIndex].url}
|
||||||
alt={items[selectedIndex].alt || `${alt} ${selectedIndex + 1}`}
|
alt={items[selectedIndex].alt || `${alt} ${selectedIndex + 1}`}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
<div
|
<div
|
||||||
class="tilt-card"
|
class="tilt-card"
|
||||||
bind:this={cardElement}
|
bind:this={cardElement}
|
||||||
role="presentation"
|
|
||||||
on:mousemove={handleMouseMove}
|
on:mousemove={handleMouseMove}
|
||||||
on:mouseenter={handleMouseEnter}
|
on:mouseenter={handleMouseEnter}
|
||||||
on:mouseleave={handleMouseLeave}
|
on:mouseleave={handleMouseLeave}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
interface UniverseItem {
|
interface UniverseItem {
|
||||||
slug: string
|
slug: string
|
||||||
publishedAt: string
|
publishedAt: string
|
||||||
[key: string]: unknown
|
[key: string]: any
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { getContext } from 'svelte'
|
||||||
import PhotosIcon from '$icons/photos.svg?component'
|
import PhotosIcon from '$icons/photos.svg?component'
|
||||||
import ViewSingleIcon from '$icons/view-single.svg?component'
|
import ViewSingleIcon from '$icons/view-single.svg?component'
|
||||||
import ViewTwoColumnIcon from '$icons/view-two-column.svg?component'
|
import ViewTwoColumnIcon from '$icons/view-two-column.svg?component'
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from 'svelte'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
left?: Snippet
|
left?: any
|
||||||
right?: Snippet
|
right?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
let { left, right }: Props = $props()
|
let { left, right }: Props = $props()
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string
|
title: string
|
||||||
actions?: unknown
|
actions?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
let { title, actions }: Props = $props()
|
let { title, actions }: Props = $props()
|
||||||
|
|
|
||||||
|
|
@ -8,12 +8,10 @@
|
||||||
|
|
||||||
const currentPath = $derived($page.url.pathname)
|
const currentPath = $derived($page.url.pathname)
|
||||||
|
|
||||||
import type { Component } from 'svelte'
|
|
||||||
|
|
||||||
interface NavItem {
|
interface NavItem {
|
||||||
text: string
|
text: string
|
||||||
href: string
|
href: string
|
||||||
icon: Component
|
icon: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const navItems: NavItem[] = [
|
const navItems: NavItem[] = [
|
||||||
|
|
|
||||||
|
|
@ -3,9 +3,10 @@
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import AdminPage from './AdminPage.svelte'
|
import AdminPage from './AdminPage.svelte'
|
||||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||||
import Button from './Button.svelte'
|
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
|
import Button from './Button.svelte'
|
||||||
import DropdownSelectField from './DropdownSelectField.svelte'
|
import DropdownSelectField from './DropdownSelectField.svelte'
|
||||||
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
||||||
import SmartImage from '../SmartImage.svelte'
|
import SmartImage from '../SmartImage.svelte'
|
||||||
import Composer from './composer'
|
import Composer from './composer'
|
||||||
|
|
@ -33,12 +34,11 @@
|
||||||
|
|
||||||
// State
|
// State
|
||||||
let isLoading = $state(mode === 'edit')
|
let isLoading = $state(mode === 'edit')
|
||||||
let hasLoaded = $state(mode === 'create')
|
|
||||||
let isSaving = $state(false)
|
let isSaving = $state(false)
|
||||||
let validationErrors = $state<Record<string, string>>({})
|
let validationErrors = $state<Record<string, string>>({})
|
||||||
let showBulkAlbumModal = $state(false)
|
let showBulkAlbumModal = $state(false)
|
||||||
let albumMedia = $state<Array<{ media: Media; displayOrder: number }>>([])
|
let albumMedia = $state<any[]>([])
|
||||||
let editorInstance = $state<{ save: () => Promise<JSONContent>; clear: () => void } | undefined>()
|
let editorInstance = $state<any>()
|
||||||
let activeTab = $state('metadata')
|
let activeTab = $state('metadata')
|
||||||
let pendingMediaIds = $state<number[]>([]) // Photos to add after album creation
|
let pendingMediaIds = $state<number[]>([]) // Photos to add after album creation
|
||||||
|
|
||||||
|
|
@ -76,10 +76,9 @@
|
||||||
|
|
||||||
// Watch for album changes and populate form data
|
// Watch for album changes and populate form data
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (album && mode === 'edit' && !hasLoaded) {
|
if (album && mode === 'edit') {
|
||||||
populateFormData(album)
|
populateFormData(album)
|
||||||
loadAlbumMedia()
|
loadAlbumMedia()
|
||||||
hasLoaded = true
|
|
||||||
} else if (mode === 'create') {
|
} else if (mode === 'create') {
|
||||||
isLoading = false
|
isLoading = false
|
||||||
}
|
}
|
||||||
|
|
@ -155,10 +154,11 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSaving = true
|
|
||||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} album...`)
|
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} album...`)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
isSaving = true
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
title: formData.title,
|
title: formData.title,
|
||||||
slug: formData.slug,
|
slug: formData.slug,
|
||||||
|
|
@ -167,8 +167,7 @@
|
||||||
location: formData.location || null,
|
location: formData.location || null,
|
||||||
showInUniverse: formData.showInUniverse,
|
showInUniverse: formData.showInUniverse,
|
||||||
status: formData.status,
|
status: formData.status,
|
||||||
content: formData.content,
|
content: formData.content
|
||||||
updatedAt: mode === 'edit' ? album?.updatedAt : undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = mode === 'edit' ? `/api/albums/${album?.id}` : '/api/albums'
|
const url = mode === 'edit' ? `/api/albums/${album?.id}` : '/api/albums'
|
||||||
|
|
@ -275,13 +274,9 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<Button
|
{#if !isLoading}
|
||||||
variant="primary"
|
<AutoSaveStatus status="idle" lastSavedAt={album?.updatedAt} />
|
||||||
onclick={handleSave}
|
{/if}
|
||||||
disabled={isSaving}
|
|
||||||
>
|
|
||||||
{isSaving ? 'Saving...' : 'Save'}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -300,6 +295,8 @@
|
||||||
bind:value={formData.title}
|
bind:value={formData.title}
|
||||||
placeholder="Album title"
|
placeholder="Album title"
|
||||||
required
|
required
|
||||||
|
error={validationErrors.title}
|
||||||
|
disabled={isSaving}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
|
|
@ -307,7 +304,8 @@
|
||||||
bind:value={formData.slug}
|
bind:value={formData.slug}
|
||||||
placeholder="url-friendly-name"
|
placeholder="url-friendly-name"
|
||||||
required
|
required
|
||||||
disabled={mode === 'edit'}
|
error={validationErrors.slug}
|
||||||
|
disabled={isSaving || mode === 'edit'}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="form-grid">
|
<div class="form-grid">
|
||||||
|
|
@ -315,12 +313,16 @@
|
||||||
label="Location"
|
label="Location"
|
||||||
bind:value={formData.location}
|
bind:value={formData.location}
|
||||||
placeholder="e.g. Tokyo, Japan"
|
placeholder="e.g. Tokyo, Japan"
|
||||||
|
error={validationErrors.location}
|
||||||
|
disabled={isSaving}
|
||||||
/>
|
/>
|
||||||
<Input
|
<Input
|
||||||
label="Year"
|
label="Year"
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={formData.year}
|
bind:value={formData.year}
|
||||||
placeholder="e.g. 2023 or 2023-2025"
|
placeholder="e.g. 2023 or 2023-2025"
|
||||||
|
error={validationErrors.year}
|
||||||
|
disabled={isSaving}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -328,6 +330,7 @@
|
||||||
label="Status"
|
label="Status"
|
||||||
bind:value={formData.status}
|
bind:value={formData.status}
|
||||||
options={statusOptions}
|
options={statusOptions}
|
||||||
|
disabled={isSaving}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -337,6 +340,7 @@
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
bind:checked={formData.showInUniverse}
|
bind:checked={formData.showInUniverse}
|
||||||
|
disabled={isSaving}
|
||||||
class="toggle-input"
|
class="toggle-input"
|
||||||
/>
|
/>
|
||||||
<div class="toggle-content">
|
<div class="toggle-content">
|
||||||
|
|
@ -393,6 +397,7 @@
|
||||||
bind:data={formData.content}
|
bind:data={formData.content}
|
||||||
placeholder="Add album content..."
|
placeholder="Add album content..."
|
||||||
onChange={handleContentUpdate}
|
onChange={handleContentUpdate}
|
||||||
|
editable={!isSaving}
|
||||||
albumId={album?.id}
|
albumId={album?.id}
|
||||||
variant="full"
|
variant="full"
|
||||||
/>
|
/>
|
||||||
|
|
@ -454,6 +459,25 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: $gray-40;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $gray-90;
|
||||||
|
color: $gray-10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.admin-container {
|
.admin-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
createdAt: string
|
createdAt: string
|
||||||
updatedAt: string
|
updatedAt: string
|
||||||
photos: Photo[]
|
photos: Photo[]
|
||||||
content?: unknown
|
content?: any
|
||||||
_count: {
|
_count: {
|
||||||
media: number
|
media: number
|
||||||
}
|
}
|
||||||
|
|
@ -38,7 +38,14 @@
|
||||||
ondelete?: (event: CustomEvent<{ album: Album; event: MouseEvent }>) => void
|
ondelete?: (event: CustomEvent<{ album: Album; event: MouseEvent }>) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
let { album, isDropdownActive = false, ontoggledropdown, onedit, ontogglepublish, ondelete }: Props = $props()
|
let {
|
||||||
|
album,
|
||||||
|
isDropdownActive = false,
|
||||||
|
ontoggledropdown,
|
||||||
|
onedit,
|
||||||
|
ontogglepublish,
|
||||||
|
ondelete
|
||||||
|
}: Props = $props()
|
||||||
|
|
||||||
function formatRelativeTime(dateString: string): string {
|
function formatRelativeTime(dateString: string): string {
|
||||||
const date = new Date(dateString)
|
const date = new Date(dateString)
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import CloseButton from '../icons/CloseButton.svelte'
|
import CloseButton from '../icons/CloseButton.svelte'
|
||||||
import LoadingSpinner from './LoadingSpinner.svelte'
|
import LoadingSpinner from './LoadingSpinner.svelte'
|
||||||
|
import type { Album } from '@prisma/client'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
|
|
|
||||||
|
|
@ -1,142 +1,119 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { AutoSaveStatus } from '$lib/admin/autoSave'
|
import type { AutoSaveStatus } from '$lib/admin/autoSave'
|
||||||
import { formatTimeAgo } from '$lib/utils/time'
|
import { formatTimeAgo } from '$lib/utils/time'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
statusStore?: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
|
statusStore?: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void }
|
||||||
errorStore?: { subscribe: (run: (v: string | null) => void) => () => void }
|
errorStore?: { subscribe: (run: (v: string | null) => void) => () => void }
|
||||||
status?: AutoSaveStatus
|
status?: AutoSaveStatus
|
||||||
error?: string | null
|
error?: string | null
|
||||||
lastSavedAt?: Date | string | null
|
lastSavedAt?: Date | string | null
|
||||||
showTimestamp?: boolean
|
showTimestamp?: boolean
|
||||||
compact?: boolean
|
compact?: boolean
|
||||||
onclick?: () => void
|
}
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
let {
|
||||||
statusStore,
|
statusStore,
|
||||||
errorStore,
|
errorStore,
|
||||||
status: statusProp,
|
status: statusProp,
|
||||||
error: errorProp,
|
error: errorProp,
|
||||||
lastSavedAt,
|
lastSavedAt,
|
||||||
showTimestamp = true,
|
showTimestamp = true,
|
||||||
compact = true,
|
compact = true
|
||||||
onclick
|
}: Props = $props()
|
||||||
}: Props = $props()
|
|
||||||
|
|
||||||
// Support both old subscription-based stores and new reactive values
|
// Support both old subscription-based stores and new reactive values
|
||||||
let status = $state<AutoSaveStatus>('idle')
|
let status = $state<AutoSaveStatus>('idle')
|
||||||
let errorText = $state<string | null>(null)
|
let errorText = $state<string | null>(null)
|
||||||
let refreshKey = $state(0) // Used to force re-render for time updates
|
let refreshKey = $state(0) // Used to force re-render for time updates
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
// If using direct props (new runes-based store)
|
// If using direct props (new runes-based store)
|
||||||
if (statusProp !== undefined) {
|
if (statusProp !== undefined) {
|
||||||
status = statusProp
|
status = statusProp
|
||||||
errorText = errorProp ?? null
|
errorText = errorProp ?? null
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Otherwise use subscriptions (old store)
|
// Otherwise use subscriptions (old store)
|
||||||
if (!statusStore) return
|
if (!statusStore) return
|
||||||
|
|
||||||
const unsub = statusStore.subscribe((v) => (status = v))
|
const unsub = statusStore.subscribe((v) => (status = v))
|
||||||
let unsubErr: (() => void) | null = null
|
let unsubErr: (() => void) | null = null
|
||||||
if (errorStore) unsubErr = errorStore.subscribe((v) => (errorText = v))
|
if (errorStore) unsubErr = errorStore.subscribe((v) => (errorText = v))
|
||||||
return () => {
|
return () => {
|
||||||
unsub()
|
unsub()
|
||||||
if (unsubErr) unsubErr()
|
if (unsubErr) unsubErr()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Auto-refresh timestamp every 30 seconds
|
// Auto-refresh timestamp every 30 seconds
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!lastSavedAt || !showTimestamp) return
|
if (!lastSavedAt || !showTimestamp) return
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
refreshKey++
|
refreshKey++
|
||||||
}, 30000)
|
}, 30000)
|
||||||
|
|
||||||
return () => clearInterval(interval)
|
return () => clearInterval(interval)
|
||||||
})
|
})
|
||||||
|
|
||||||
const label = $derived.by(() => {
|
const label = $derived.by(() => {
|
||||||
// Force dependency on refreshKey to trigger re-computation
|
// Force dependency on refreshKey to trigger re-computation
|
||||||
void refreshKey
|
refreshKey
|
||||||
|
|
||||||
switch (status) {
|
switch (status) {
|
||||||
case 'saving':
|
case 'saving':
|
||||||
return 'Saving…'
|
return 'Saving…'
|
||||||
case 'saved':
|
case 'saved':
|
||||||
case 'idle':
|
case 'idle':
|
||||||
return lastSavedAt && showTimestamp
|
return lastSavedAt && showTimestamp
|
||||||
? `Saved ${formatTimeAgo(lastSavedAt)}`
|
? `Saved ${formatTimeAgo(lastSavedAt)}`
|
||||||
: 'All changes saved'
|
: 'All changes saved'
|
||||||
case 'offline':
|
case 'offline':
|
||||||
return 'Offline'
|
return 'Offline'
|
||||||
case 'error':
|
case 'error':
|
||||||
return errorText ? `Error — ${errorText}` : 'Save failed'
|
return errorText ? `Error — ${errorText}` : 'Save failed'
|
||||||
default:
|
default:
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if label}
|
{#if label}
|
||||||
<button
|
<div class="autosave-status" class:compact>
|
||||||
type="button"
|
{#if status === 'saving'}
|
||||||
class="autosave-status"
|
<span class="spinner" aria-hidden="true"></span>
|
||||||
class:compact
|
{/if}
|
||||||
class:clickable={!!onclick && status !== 'saving'}
|
<span class="text">{label}</span>
|
||||||
onclick={onclick}
|
</div>
|
||||||
disabled={status === 'saving'}
|
|
||||||
>
|
|
||||||
{#if status === 'saving'}
|
|
||||||
<span class="spinner" aria-hidden="true"></span>
|
|
||||||
{/if}
|
|
||||||
<span class="text">{label}</span>
|
|
||||||
</button>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.autosave-status {
|
.autosave-status {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
color: $gray-40;
|
color: $gray-40;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
font-family: inherit;
|
|
||||||
|
|
||||||
&.compact {
|
&.compact {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.clickable {
|
.spinner {
|
||||||
cursor: pointer;
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 2px solid $gray-80;
|
||||||
|
border-top-color: $gray-40;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.9s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
@keyframes spin {
|
||||||
color: $gray-20;
|
to {
|
||||||
}
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
&:disabled {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border: 2px solid $gray-80;
|
|
||||||
border-top-color: $gray-40;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.9s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -81,15 +81,12 @@
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<div
|
<div
|
||||||
class="modal-backdrop"
|
class="modal-backdrop"
|
||||||
role="presentation"
|
on:click={handleBackdropClick}
|
||||||
onclick={handleBackdropClick}
|
|
||||||
transition:fade={{ duration: TRANSITION_FAST_MS }}
|
transition:fade={{ duration: TRANSITION_FAST_MS }}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class={modalClass}
|
class={modalClass}
|
||||||
onclick={(e) => e.stopPropagation()}
|
on:click|stopPropagation
|
||||||
onkeydown={(e) => e.stopPropagation()}
|
|
||||||
tabindex="-1"
|
|
||||||
transition:fade={{ duration: TRANSITION_FAST_MS }}
|
transition:fade={{ duration: TRANSITION_FAST_MS }}
|
||||||
role="dialog"
|
role="dialog"
|
||||||
aria-modal="true"
|
aria-modal="true"
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
toggleChecked?: boolean
|
toggleChecked?: boolean
|
||||||
toggleDisabled?: boolean
|
toggleDisabled?: boolean
|
||||||
showToggle?: boolean
|
showToggle?: boolean
|
||||||
onToggleChange?: (checked: boolean) => void
|
|
||||||
children?: import('svelte').Snippet
|
children?: import('svelte').Snippet
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -15,7 +14,6 @@
|
||||||
toggleChecked = $bindable(false),
|
toggleChecked = $bindable(false),
|
||||||
toggleDisabled = false,
|
toggleDisabled = false,
|
||||||
showToggle = true,
|
showToggle = true,
|
||||||
onToggleChange,
|
|
||||||
children
|
children
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -24,7 +22,7 @@
|
||||||
<header class="branding-section__header">
|
<header class="branding-section__header">
|
||||||
<h2 class="branding-section__title">{title}</h2>
|
<h2 class="branding-section__title">{title}</h2>
|
||||||
{#if showToggle}
|
{#if showToggle}
|
||||||
<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} onchange={onToggleChange} />
|
<BrandingToggle bind:checked={toggleChecked} disabled={toggleDisabled} />
|
||||||
{/if}
|
{/if}
|
||||||
</header>
|
</header>
|
||||||
<div class="branding-section__content">
|
<div class="branding-section__content">
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,6 @@
|
||||||
icon,
|
icon,
|
||||||
children,
|
children,
|
||||||
onclick,
|
onclick,
|
||||||
// eslint-disable-next-line svelte/valid-compile
|
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,8 @@
|
||||||
<div class="draft-banner">
|
<div class="draft-banner">
|
||||||
<div class="draft-banner-content">
|
<div class="draft-banner-content">
|
||||||
<span class="draft-banner-text">
|
<span class="draft-banner-text">
|
||||||
Unsaved draft found{#if timeAgo} (saved {timeAgo}){/if}.
|
Unsaved draft found{#if timeAgo}
|
||||||
|
(saved {timeAgo}){/if}.
|
||||||
</span>
|
</span>
|
||||||
<div class="draft-banner-actions">
|
<div class="draft-banner-actions">
|
||||||
<button class="draft-banner-button" type="button" onclick={onRestore}>Restore</button>
|
<button class="draft-banner-button" type="button" onclick={onRestore}>Restore</button>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte'
|
||||||
import { browser } from '$app/environment'
|
import { browser } from '$app/environment'
|
||||||
import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom'
|
import { computePosition, flip, shift, offset, autoUpdate } from '@floating-ui/dom'
|
||||||
import ChevronRight from '$icons/chevron-right.svg?component'
|
import ChevronRight from '$icons/chevron-right.svg?component'
|
||||||
import DropdownMenu from './DropdownMenu.svelte'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
let { isOpen = $bindable(), triggerElement, items, onClose, isSubmenu = false }: Props = $props()
|
let { isOpen = $bindable(), triggerElement, items, onClose, isSubmenu = false }: Props = $props()
|
||||||
|
|
||||||
let dropdownElement: HTMLDivElement | undefined = $state.raw()
|
let dropdownElement: HTMLDivElement
|
||||||
let cleanup: (() => void) | null = null
|
let cleanup: (() => void) | null = null
|
||||||
|
|
||||||
// Track which submenu is open
|
// Track which submenu is open
|
||||||
|
|
@ -191,11 +191,11 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{#if item.children && openSubmenuId === item.id}
|
{#if item.children && openSubmenuId === item.id}
|
||||||
<div role="presentation"
|
<div
|
||||||
onmouseenter={handleSubmenuMouseEnter}
|
onmouseenter={handleSubmenuMouseEnter}
|
||||||
onmouseleave={() => handleSubmenuMouseLeave(item.id)}
|
onmouseleave={() => handleSubmenuMouseLeave(item.id)}
|
||||||
>
|
>
|
||||||
<DropdownMenu
|
<svelte:self
|
||||||
isOpen={true}
|
isOpen={true}
|
||||||
triggerElement={submenuElements.get(item.id)}
|
triggerElement={submenuElements.get(item.id)}
|
||||||
items={item.children}
|
items={item.children}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation'
|
import { goto, beforeNavigate } from '$app/navigation'
|
||||||
import AdminPage from './AdminPage.svelte'
|
import AdminPage from './AdminPage.svelte'
|
||||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||||
import Editor from './Editor.svelte'
|
import Editor from './Editor.svelte'
|
||||||
|
|
@ -7,6 +7,9 @@
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
import DropdownSelectField from './DropdownSelectField.svelte'
|
import DropdownSelectField from './DropdownSelectField.svelte'
|
||||||
import { toast } from '$lib/stores/toast'
|
import { toast } from '$lib/stores/toast'
|
||||||
|
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
||||||
|
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import type { JSONContent } from '@tiptap/core'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -25,9 +28,11 @@
|
||||||
let { postId, initialData, mode }: Props = $props()
|
let { postId, initialData, mode }: Props = $props()
|
||||||
|
|
||||||
// State
|
// State
|
||||||
let hasLoaded = $state(mode === 'create')
|
let isLoading = $state(false)
|
||||||
|
let hasLoaded = $state(mode === 'create') // Create mode loads immediately
|
||||||
let isSaving = $state(false)
|
let isSaving = $state(false)
|
||||||
let activeTab = $state('metadata')
|
let activeTab = $state('metadata')
|
||||||
|
let updatedAt = $state<string | undefined>(initialData?.updatedAt)
|
||||||
|
|
||||||
// Form data
|
// Form data
|
||||||
let title = $state(initialData?.title || '')
|
let title = $state(initialData?.title || '')
|
||||||
|
|
@ -38,7 +43,53 @@
|
||||||
let tagInput = $state('')
|
let tagInput = $state('')
|
||||||
|
|
||||||
// Ref to the editor component
|
// Ref to the editor component
|
||||||
let editorRef: { save: () => Promise<JSONContent> } | undefined
|
let editorRef: any
|
||||||
|
|
||||||
|
// Draft backup
|
||||||
|
const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
|
||||||
|
let showDraftPrompt = $state(false)
|
||||||
|
let draftTimestamp = $state<number | null>(null)
|
||||||
|
let timeTicker = $state(0)
|
||||||
|
const draftTimeText = $derived.by(() =>
|
||||||
|
draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
|
||||||
|
)
|
||||||
|
|
||||||
|
function buildPayload() {
|
||||||
|
return {
|
||||||
|
title,
|
||||||
|
slug,
|
||||||
|
type: 'essay',
|
||||||
|
status,
|
||||||
|
content,
|
||||||
|
tags,
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Autosave store (edit mode only)
|
||||||
|
let autoSave =
|
||||||
|
mode === 'edit' && postId
|
||||||
|
? createAutoSaveStore({
|
||||||
|
debounceMs: 2000,
|
||||||
|
getPayload: () => (hasLoaded ? buildPayload() : null),
|
||||||
|
save: async (payload, { signal }) => {
|
||||||
|
const response = await fetch(`/api/posts/${postId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
credentials: 'same-origin',
|
||||||
|
signal
|
||||||
|
})
|
||||||
|
if (!response.ok) throw new Error('Failed to save')
|
||||||
|
return await response.json()
|
||||||
|
},
|
||||||
|
onSaved: (saved: any, { prime }) => {
|
||||||
|
updatedAt = saved.updatedAt
|
||||||
|
prime(buildPayload())
|
||||||
|
if (draftKey) clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
: null
|
||||||
|
|
||||||
const tabOptions = [
|
const tabOptions = [
|
||||||
{ value: 'metadata', label: 'Metadata' },
|
{ value: 'metadata', label: 'Metadata' },
|
||||||
|
|
@ -68,13 +119,126 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Mark as loaded for edit mode
|
// Prime autosave on initial load (edit mode only)
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (mode === 'edit' && initialData && !hasLoaded) {
|
if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
|
||||||
|
autoSave.prime(buildPayload())
|
||||||
hasLoaded = true
|
hasLoaded = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Trigger autosave when form data changes
|
||||||
|
$effect(() => {
|
||||||
|
title
|
||||||
|
slug
|
||||||
|
status
|
||||||
|
content
|
||||||
|
tags
|
||||||
|
activeTab
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
autoSave.schedule()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save draft only when autosave fails
|
||||||
|
$effect(() => {
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
const saveStatus = autoSave.status
|
||||||
|
if (saveStatus === 'error' || saveStatus === 'offline') {
|
||||||
|
saveDraft(draftKey, buildPayload())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Show restore prompt if a draft exists
|
||||||
|
$effect(() => {
|
||||||
|
const draft = loadDraft<any>(draftKey)
|
||||||
|
if (draft) {
|
||||||
|
showDraftPrompt = true
|
||||||
|
draftTimestamp = draft.ts
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function restoreDraft() {
|
||||||
|
const draft = loadDraft<any>(draftKey)
|
||||||
|
if (!draft) return
|
||||||
|
const p = draft.payload
|
||||||
|
title = p.title ?? title
|
||||||
|
slug = p.slug ?? slug
|
||||||
|
status = p.status ?? status
|
||||||
|
content = p.content ?? content
|
||||||
|
tags = p.tags ?? tags
|
||||||
|
showDraftPrompt = false
|
||||||
|
clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
function dismissDraft() {
|
||||||
|
showDraftPrompt = false
|
||||||
|
clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-update draft time text every minute when prompt visible
|
||||||
|
$effect(() => {
|
||||||
|
if (showDraftPrompt) {
|
||||||
|
const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
|
||||||
|
return () => clearInterval(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Navigation guard: flush autosave before navigating away (only if unsaved)
|
||||||
|
beforeNavigate(async (navigation) => {
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
if (autoSave.status === 'saved') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// Flush any pending changes before allowing navigation to proceed
|
||||||
|
try {
|
||||||
|
await autoSave.flush()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Autosave flush failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Warn before closing browser tab/window if there are unsaved changes
|
||||||
|
$effect(() => {
|
||||||
|
if (!hasLoaded || !autoSave) return
|
||||||
|
|
||||||
|
function handleBeforeUnload(event: BeforeUnloadEvent) {
|
||||||
|
if (autoSave!.status !== 'saved') {
|
||||||
|
event.preventDefault()
|
||||||
|
event.returnValue = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||||
|
return () => window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Keyboard shortcut: Cmd/Ctrl+S to save immediately
|
||||||
|
$effect(() => {
|
||||||
|
if (!hasLoaded || !autoSave) return
|
||||||
|
|
||||||
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
|
||||||
|
e.preventDefault()
|
||||||
|
autoSave!.flush().catch((error) => {
|
||||||
|
console.error('Autosave flush failed:', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
return () => document.removeEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Cleanup autosave on unmount
|
||||||
|
$effect(() => {
|
||||||
|
if (autoSave) {
|
||||||
|
return () => autoSave.destroy()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
function addTag() {
|
function addTag() {
|
||||||
if (tagInput && !tags.includes(tagInput)) {
|
if (tagInput && !tags.includes(tagInput)) {
|
||||||
tags = [...tags, tagInput]
|
tags = [...tags, tagInput]
|
||||||
|
|
@ -104,18 +268,18 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSaving = true
|
|
||||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} essay...`)
|
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} essay...`)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
isSaving = true
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
title,
|
title,
|
||||||
slug,
|
slug,
|
||||||
type: 'essay',
|
type: 'essay', // No mapping needed anymore
|
||||||
status,
|
status,
|
||||||
content,
|
content,
|
||||||
tags,
|
tags
|
||||||
updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
|
const url = mode === 'edit' ? `/api/posts/${postId}` : '/api/posts'
|
||||||
|
|
@ -142,6 +306,7 @@
|
||||||
|
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
|
toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`)
|
||||||
|
clearDraft(draftKey)
|
||||||
|
|
||||||
if (mode === 'create') {
|
if (mode === 'create') {
|
||||||
goto(`/admin/posts/${savedPost.id}/edit`)
|
goto(`/admin/posts/${savedPost.id}/edit`)
|
||||||
|
|
@ -169,17 +334,40 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<Button
|
{#if mode === 'edit' && autoSave}
|
||||||
variant="primary"
|
<AutoSaveStatus
|
||||||
onclick={handleSave}
|
status={autoSave.status}
|
||||||
disabled={isSaving}
|
error={autoSave.lastError}
|
||||||
>
|
lastSavedAt={initialData?.updatedAt}
|
||||||
{isSaving ? 'Saving...' : 'Save'}
|
/>
|
||||||
</Button>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
{#if showDraftPrompt}
|
||||||
|
<div class="draft-banner">
|
||||||
|
<div class="draft-banner-content">
|
||||||
|
<span class="draft-banner-text">
|
||||||
|
Unsaved draft found{#if draftTimeText}
|
||||||
|
(saved {draftTimeText}){/if}.
|
||||||
|
</span>
|
||||||
|
<div class="draft-banner-actions">
|
||||||
|
<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
|
||||||
|
<button class="draft-banner-button dismiss" onclick={dismissDraft}>Dismiss</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="admin-container">
|
<div class="admin-container">
|
||||||
|
{#if error}
|
||||||
|
<div class="error-message">{error}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if successMessage}
|
||||||
|
<div class="success-message">{successMessage}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="tab-panels">
|
<div class="tab-panels">
|
||||||
<!-- Metadata Panel -->
|
<!-- Metadata Panel -->
|
||||||
<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
|
<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
|
||||||
|
|
@ -201,14 +389,10 @@
|
||||||
|
|
||||||
<Input label="Slug" bind:value={slug} placeholder="essay-url-slug" />
|
<Input label="Slug" bind:value={slug} placeholder="essay-url-slug" />
|
||||||
|
|
||||||
<DropdownSelectField
|
<DropdownSelectField label="Status" bind:value={status} options={statusOptions} />
|
||||||
label="Status"
|
|
||||||
bind:value={status}
|
|
||||||
options={statusOptions}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="tags-field">
|
<div class="tags-field">
|
||||||
<div class="input-label">Tags</div>
|
<label class="input-label">Tags</label>
|
||||||
<div class="tag-input-wrapper">
|
<div class="tag-input-wrapper">
|
||||||
<Input
|
<Input
|
||||||
bind:value={tagInput}
|
bind:value={tagInput}
|
||||||
|
|
@ -308,6 +492,143 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.save-actions {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner {
|
||||||
|
background: $blue-95;
|
||||||
|
border-bottom: 1px solid $blue-80;
|
||||||
|
padding: $unit-2x $unit-5x;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
animation: slideDown 0.2s ease-out;
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: $unit-3x;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-text {
|
||||||
|
color: $blue-20;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
font-weight: $font-weight-med;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: $unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-button {
|
||||||
|
background: $blue-50;
|
||||||
|
border: none;
|
||||||
|
color: $white;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: $unit-half $unit-2x;
|
||||||
|
border-radius: $corner-radius-sm;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
font-weight: $font-weight-med;
|
||||||
|
transition: background $transition-fast;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-40;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dismiss {
|
||||||
|
background: transparent;
|
||||||
|
color: $blue-30;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $blue-90;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom styles for save/publish buttons to maintain grey color scheme
|
||||||
|
:global(.save-button.btn-primary) {
|
||||||
|
background-color: $gray-10;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background-color: $gray-20;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled) {
|
||||||
|
background-color: $gray-30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.save-button {
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
padding-right: $unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.chevron-button.btn-primary) {
|
||||||
|
background-color: $gray-10;
|
||||||
|
|
||||||
|
&:hover:not(:disabled) {
|
||||||
|
background-color: $gray-20;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active:not(:disabled) {
|
||||||
|
background-color: $gray-30;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background-color: $gray-20;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron-button {
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active svg {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.publish-menu {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
right: 0;
|
||||||
|
margin-top: $unit;
|
||||||
|
background: white;
|
||||||
|
border-radius: $unit;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 120px;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.tab-panels {
|
.tab-panels {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -329,6 +650,26 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-message,
|
||||||
|
.success-message {
|
||||||
|
padding: $unit-3x;
|
||||||
|
border-radius: $unit;
|
||||||
|
margin-bottom: $unit-4x;
|
||||||
|
max-width: 700px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: #fee;
|
||||||
|
color: #d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
background-color: #efe;
|
||||||
|
color: #363;
|
||||||
|
}
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-bottom: $unit-6x;
|
margin-bottom: $unit-6x;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Button from './Button.svelte'
|
||||||
import { validateFileType } from '$lib/utils/mediaHelpers'
|
import { validateFileType } from '$lib/utils/mediaHelpers'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -84,8 +85,6 @@
|
||||||
class:active={dragActive}
|
class:active={dragActive}
|
||||||
class:compact
|
class:compact
|
||||||
class:disabled
|
class:disabled
|
||||||
role="region"
|
|
||||||
aria-label="File upload drop zone"
|
|
||||||
ondragover={handleDragOver}
|
ondragover={handleDragOver}
|
||||||
ondragleave={handleDragLeave}
|
ondragleave={handleDragLeave}
|
||||||
ondrop={handleDrop}
|
ondrop={handleDrop}
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,16 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Snippet } from 'svelte'
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label: string
|
label: string
|
||||||
name?: string
|
name?: string
|
||||||
type?: string
|
type?: string
|
||||||
value?: string | number
|
value?: any
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
required?: boolean
|
required?: boolean
|
||||||
error?: string
|
error?: string
|
||||||
helpText?: string
|
helpText?: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
onchange?: (e: Event) => void
|
onchange?: (e: Event) => void
|
||||||
children?: Snippet
|
children?: any
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
|
@ -59,7 +57,7 @@
|
||||||
{disabled}
|
{disabled}
|
||||||
onchange={handleChange}
|
onchange={handleChange}
|
||||||
rows="4"
|
rows="4"
|
||||||
></textarea>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<input
|
<input
|
||||||
id={name}
|
id={name}
|
||||||
|
|
|
||||||
|
|
@ -124,12 +124,12 @@
|
||||||
|
|
||||||
<div class="gallery-manager">
|
<div class="gallery-manager">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="input-label">
|
<label class="input-label">
|
||||||
{label}
|
{label}
|
||||||
{#if required}
|
{#if required}
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</label>
|
||||||
|
|
||||||
{#if hasImages}
|
{#if hasImages}
|
||||||
<span class="items-count">
|
<span class="items-count">
|
||||||
|
|
@ -149,9 +149,6 @@
|
||||||
class="gallery-item"
|
class="gallery-item"
|
||||||
class:drag-over={dragOverIndex === index}
|
class:drag-over={dragOverIndex === index}
|
||||||
draggable="true"
|
draggable="true"
|
||||||
role="button"
|
|
||||||
aria-label="Draggable gallery item"
|
|
||||||
tabindex="0"
|
|
||||||
ondragstart={(e) => handleDragStart(e, index)}
|
ondragstart={(e) => handleDragStart(e, index)}
|
||||||
ondragend={handleDragEnd}
|
ondragend={handleDragEnd}
|
||||||
ondragover={(e) => handleDragOver(e, index)}
|
ondragover={(e) => handleDragOver(e, index)}
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,17 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Media } from '@prisma/client'
|
import type { Media } from '@prisma/client'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
|
import Input from './Input.svelte'
|
||||||
import SmartImage from '../SmartImage.svelte'
|
import SmartImage from '../SmartImage.svelte'
|
||||||
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
||||||
import MediaDetailsModal from './MediaDetailsModal.svelte'
|
import MediaDetailsModal from './MediaDetailsModal.svelte'
|
||||||
|
|
||||||
// Gallery items can be either Media objects or objects with a mediaId reference
|
|
||||||
type GalleryItem = Media | (Partial<Media> & { mediaId?: number })
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
label: string
|
label: string
|
||||||
value?: GalleryItem[]
|
value?: any[] // Changed from Media[] to any[] to be more flexible
|
||||||
onUpload: (media: GalleryItem[]) => void
|
onUpload: (media: any[]) => void
|
||||||
onReorder?: (media: GalleryItem[]) => void
|
onReorder?: (media: any[]) => void
|
||||||
onRemove?: (item: GalleryItem, index: number) => void
|
onRemove?: (item: any, index: number) => void // New callback for removals
|
||||||
maxItems?: number
|
maxItems?: number
|
||||||
allowAltText?: boolean
|
allowAltText?: boolean
|
||||||
required?: boolean
|
required?: boolean
|
||||||
|
|
@ -26,13 +24,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
label,
|
||||||
value = $bindable([]),
|
value = $bindable([]),
|
||||||
onUpload,
|
onUpload,
|
||||||
onReorder,
|
onReorder,
|
||||||
onRemove,
|
onRemove,
|
||||||
maxItems = 20,
|
maxItems = 20,
|
||||||
|
allowAltText = true,
|
||||||
|
required = false,
|
||||||
error,
|
error,
|
||||||
placeholder = 'Drag and drop images here, or click to browse',
|
placeholder = 'Drag and drop images here, or click to browse',
|
||||||
|
helpText,
|
||||||
showBrowseLibrary = false,
|
showBrowseLibrary = false,
|
||||||
maxFileSize = 10,
|
maxFileSize = 10,
|
||||||
disabled = false
|
disabled = false
|
||||||
|
|
@ -48,7 +50,7 @@
|
||||||
let draggedOverIndex = $state<number | null>(null)
|
let draggedOverIndex = $state<number | null>(null)
|
||||||
let isMediaLibraryOpen = $state(false)
|
let isMediaLibraryOpen = $state(false)
|
||||||
let isImageModalOpen = $state(false)
|
let isImageModalOpen = $state(false)
|
||||||
let selectedImage = $state<Media | null>(null)
|
let selectedImage = $state<any | null>(null)
|
||||||
|
|
||||||
// Computed properties
|
// Computed properties
|
||||||
const hasImages = $derived(value && value.length > 0)
|
const hasImages = $derived(value && value.length > 0)
|
||||||
|
|
@ -73,7 +75,7 @@
|
||||||
|
|
||||||
// Upload multiple files to server
|
// Upload multiple files to server
|
||||||
async function uploadFiles(files: File[]): Promise<Media[]> {
|
async function uploadFiles(files: File[]): Promise<Media[]> {
|
||||||
const uploadPromises = files.map(async (file) => {
|
const uploadPromises = files.map(async (file, index) => {
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', file)
|
formData.append('file', file)
|
||||||
|
|
||||||
|
|
@ -314,7 +316,7 @@
|
||||||
isMediaLibraryOpen = true
|
isMediaLibraryOpen = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleMediaSelect(selectedMedia: Media | Media[]) {
|
function handleMediaSelect(selectedMedia: any | any[]) {
|
||||||
// For gallery mode, selectedMedia will be an array
|
// For gallery mode, selectedMedia will be an array
|
||||||
const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]
|
const mediaArray = Array.isArray(selectedMedia) ? selectedMedia : [selectedMedia]
|
||||||
|
|
||||||
|
|
@ -355,10 +357,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle clicking on an image to open details modal
|
// Handle clicking on an image to open details modal
|
||||||
function handleImageClick(media: GalleryItem) {
|
function handleImageClick(media: any) {
|
||||||
// Convert to Media format if needed
|
// Convert to Media format if needed
|
||||||
selectedImage = {
|
selectedImage = {
|
||||||
id: ('mediaId' in media && media.mediaId) || media.id!,
|
id: media.mediaId || media.id,
|
||||||
filename: media.filename,
|
filename: media.filename,
|
||||||
originalName: media.originalName || media.filename,
|
originalName: media.originalName || media.filename,
|
||||||
mimeType: media.mimeType || 'image/jpeg',
|
mimeType: media.mimeType || 'image/jpeg',
|
||||||
|
|
@ -379,9 +381,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle updates from the media details modal
|
// Handle updates from the media details modal
|
||||||
function handleImageUpdate(updatedMedia: Media) {
|
function handleImageUpdate(updatedMedia: any) {
|
||||||
// Update the media in our value array
|
// Update the media in our value array
|
||||||
const index = value.findIndex((m) => (('mediaId' in m && m.mediaId) || m.id) === updatedMedia.id)
|
const index = value.findIndex((m) => (m.mediaId || m.id) === updatedMedia.id)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
value[index] = {
|
value[index] = {
|
||||||
...value[index],
|
...value[index],
|
||||||
|
|
@ -407,14 +409,10 @@
|
||||||
class:uploading={isUploading}
|
class:uploading={isUploading}
|
||||||
class:has-error={!!uploadError}
|
class:has-error={!!uploadError}
|
||||||
class:disabled
|
class:disabled
|
||||||
role="button"
|
|
||||||
aria-label="Upload images drop zone"
|
|
||||||
tabindex={disabled ? -1 : 0}
|
|
||||||
ondragover={disabled ? undefined : handleDragOver}
|
ondragover={disabled ? undefined : handleDragOver}
|
||||||
ondragleave={disabled ? undefined : handleDragLeave}
|
ondragleave={disabled ? undefined : handleDragLeave}
|
||||||
ondrop={disabled ? undefined : handleDrop}
|
ondrop={disabled ? undefined : handleDrop}
|
||||||
onclick={disabled ? undefined : handleBrowseClick}
|
onclick={disabled ? undefined : handleBrowseClick}
|
||||||
onkeydown={disabled ? undefined : (e) => e.key === 'Enter' && handleBrowseClick()}
|
|
||||||
>
|
>
|
||||||
{#if isUploading}
|
{#if isUploading}
|
||||||
<!-- Upload Progress -->
|
<!-- Upload Progress -->
|
||||||
|
|
@ -545,9 +543,6 @@
|
||||||
class:drag-over={draggedOverIndex === index}
|
class:drag-over={draggedOverIndex === index}
|
||||||
class:disabled
|
class:disabled
|
||||||
draggable={!disabled}
|
draggable={!disabled}
|
||||||
role="button"
|
|
||||||
aria-label="Draggable gallery image"
|
|
||||||
tabindex={disabled ? -1 : 0}
|
|
||||||
ondragstart={(e) => handleImageDragStart(e, index)}
|
ondragstart={(e) => handleImageDragStart(e, index)}
|
||||||
ondragover={(e) => handleImageDragOver(e, index)}
|
ondragover={(e) => handleImageDragOver(e, index)}
|
||||||
ondragleave={handleImageDragLeave}
|
ondragleave={handleImageDragLeave}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import { clickOutside } from '$lib/actions/clickOutside'
|
import { clickOutside } from '$lib/actions/clickOutside'
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
|
import FormField from './FormField.svelte'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
|
|
||||||
export interface MetadataField {
|
export interface MetadataField {
|
||||||
|
|
@ -11,8 +12,8 @@
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
rows?: number
|
rows?: number
|
||||||
helpText?: string
|
helpText?: string
|
||||||
component?: unknown // For custom components
|
component?: any // For custom components
|
||||||
props?: Record<string, unknown> // Additional props for custom components
|
props?: any // Additional props for custom components
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MetadataConfig {
|
export interface MetadataConfig {
|
||||||
|
|
@ -26,9 +27,9 @@
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
config: MetadataConfig
|
config: MetadataConfig
|
||||||
data: Record<string, unknown>
|
data: any
|
||||||
triggerElement: HTMLElement
|
triggerElement: HTMLElement
|
||||||
onUpdate?: (key: string, value: unknown) => void
|
onUpdate?: (key: string, value: any) => void
|
||||||
onAddTag?: () => void
|
onAddTag?: () => void
|
||||||
onRemoveTag?: (tag: string) => void
|
onRemoveTag?: (tag: string) => void
|
||||||
onClose?: () => void
|
onClose?: () => void
|
||||||
|
|
@ -109,7 +110,7 @@
|
||||||
popoverElement.style.zIndex = '1200'
|
popoverElement.style.zIndex = '1200'
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFieldUpdate(key: string, value: unknown) {
|
function handleFieldUpdate(key: string, value: any) {
|
||||||
data[key] = value
|
data[key] = value
|
||||||
onUpdate(key, value)
|
onUpdate(key, value)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -63,12 +63,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="image-picker">
|
<div class="image-picker">
|
||||||
<div class="input-label">
|
<label class="input-label">
|
||||||
{label}
|
{label}
|
||||||
{#if required}
|
{#if required}
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</label>
|
||||||
|
|
||||||
<!-- Image Preview Area -->
|
<!-- Image Preview Area -->
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
|
|
@ -30,6 +30,7 @@
|
||||||
aspectRatio,
|
aspectRatio,
|
||||||
required = false,
|
required = false,
|
||||||
error,
|
error,
|
||||||
|
allowAltText = true,
|
||||||
maxFileSize = 10,
|
maxFileSize = 10,
|
||||||
placeholder = 'Drag and drop an image here, or click to browse',
|
placeholder = 'Drag and drop an image here, or click to browse',
|
||||||
helpText,
|
helpText,
|
||||||
|
|
@ -231,12 +232,12 @@
|
||||||
|
|
||||||
<div class="image-uploader" class:compact>
|
<div class="image-uploader" class:compact>
|
||||||
<!-- Label -->
|
<!-- Label -->
|
||||||
<div class="uploader-label">
|
<label class="uploader-label">
|
||||||
{label}
|
{label}
|
||||||
{#if required}
|
{#if required}
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</label>
|
||||||
|
|
||||||
{#if helpText}
|
{#if helpText}
|
||||||
<p class="help-text">{helpText}</p>
|
<p class="help-text">{helpText}</p>
|
||||||
|
|
@ -378,14 +379,10 @@
|
||||||
class:uploading={isUploading}
|
class:uploading={isUploading}
|
||||||
class:has-error={!!uploadError}
|
class:has-error={!!uploadError}
|
||||||
style={aspectRatioStyle}
|
style={aspectRatioStyle}
|
||||||
role="button"
|
|
||||||
aria-label="Upload image drop zone"
|
|
||||||
tabindex="0"
|
|
||||||
ondragover={handleDragOver}
|
ondragover={handleDragOver}
|
||||||
ondragleave={handleDragLeave}
|
ondragleave={handleDragLeave}
|
||||||
ondrop={handleDrop}
|
ondrop={handleDrop}
|
||||||
onclick={handleBrowseClick}
|
onclick={handleBrowseClick}
|
||||||
onkeydown={(e) => e.key === 'Enter' && handleBrowseClick()}
|
|
||||||
>
|
>
|
||||||
{#if isUploading}
|
{#if isUploading}
|
||||||
<!-- Upload Progress -->
|
<!-- Upload Progress -->
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,12 @@
|
||||||
import Modal from './Modal.svelte'
|
import Modal from './Modal.svelte'
|
||||||
import Composer from './composer'
|
import Composer from './composer'
|
||||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||||
|
import FormField from './FormField.svelte'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
import UnifiedMediaModal from './UnifiedMediaModal.svelte'
|
||||||
import MediaDetailsModal from './MediaDetailsModal.svelte'
|
import MediaDetailsModal from './MediaDetailsModal.svelte'
|
||||||
|
import SmartImage from '../SmartImage.svelte'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import type { JSONContent } from '@tiptap/core'
|
||||||
import type { Media } from '@prisma/client'
|
import type { Media } from '@prisma/client'
|
||||||
|
|
||||||
|
|
@ -33,33 +35,30 @@
|
||||||
type PostType = 'post' | 'essay'
|
type PostType = 'post' | 'essay'
|
||||||
type ComposerMode = 'modal' | 'page'
|
type ComposerMode = 'modal' | 'page'
|
||||||
|
|
||||||
let postType: PostType = $state(initialPostType)
|
let postType: PostType = initialPostType
|
||||||
let mode: ComposerMode = $state(initialMode)
|
let mode: ComposerMode = initialMode
|
||||||
let content: JSONContent = $state(
|
let content: JSONContent = initialContent || {
|
||||||
initialContent || {
|
type: 'doc',
|
||||||
type: 'doc',
|
content: [{ type: 'paragraph' }]
|
||||||
content: [{ type: 'paragraph' }]
|
}
|
||||||
}
|
let characterCount = 0
|
||||||
)
|
let editorInstance: any
|
||||||
let characterCount = $state(0)
|
|
||||||
let editorInstance: { save: () => Promise<JSONContent>; clear: () => void } | undefined =
|
|
||||||
$state.raw()
|
|
||||||
|
|
||||||
// Essay metadata
|
// Essay metadata
|
||||||
let essayTitle = $state('')
|
let essayTitle = ''
|
||||||
let essaySlug = $state('')
|
let essaySlug = ''
|
||||||
let essayExcerpt = $state('')
|
let essayExcerpt = ''
|
||||||
let essayTags = $state('')
|
let essayTags = ''
|
||||||
let essayTab = $state(0)
|
let essayTab = 0
|
||||||
|
|
||||||
// Photo attachment state
|
// Photo attachment state
|
||||||
let attachedPhotos: Media[] = $state([])
|
let attachedPhotos: Media[] = []
|
||||||
let isMediaLibraryOpen = $state(false)
|
let isMediaLibraryOpen = false
|
||||||
let fileInput: HTMLInputElement | undefined = $state.raw()
|
let fileInput: HTMLInputElement
|
||||||
|
|
||||||
// Media details modal state
|
// Media details modal state
|
||||||
let selectedMedia: Media | null = $state(null)
|
let selectedMedia: Media | null = null
|
||||||
let isMediaDetailsOpen = $state(false)
|
let isMediaDetailsOpen = false
|
||||||
|
|
||||||
const CHARACTER_LIMIT = 600
|
const CHARACTER_LIMIT = 600
|
||||||
|
|
||||||
|
|
@ -184,7 +183,7 @@
|
||||||
if (!hasContent() && postType !== 'essay') return
|
if (!hasContent() && postType !== 'essay') return
|
||||||
if (postType === 'essay' && !essayTitle) return
|
if (postType === 'essay' && !essayTitle) return
|
||||||
|
|
||||||
let postData: Record<string, unknown> = {
|
let postData: any = {
|
||||||
content,
|
content,
|
||||||
status: 'published',
|
status: 'published',
|
||||||
attachedPhotos: attachedPhotos.map((photo) => photo.id)
|
attachedPhotos: attachedPhotos.map((photo) => photo.id)
|
||||||
|
|
@ -237,7 +236,7 @@
|
||||||
const isOverLimit = $derived(characterCount > CHARACTER_LIMIT)
|
const isOverLimit = $derived(characterCount > CHARACTER_LIMIT)
|
||||||
const canSave = $derived(
|
const canSave = $derived(
|
||||||
(postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) ||
|
(postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) ||
|
||||||
(postType === 'essay' && essayTitle.length > 0 && content)
|
(postType === 'essay' && essayTitle.length > 0 && content)
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,6 @@
|
||||||
maxLength,
|
maxLength,
|
||||||
colorSwatch = false,
|
colorSwatch = false,
|
||||||
id = `input-${Math.random().toString(36).substr(2, 9)}`,
|
id = `input-${Math.random().toString(36).substr(2, 9)}`,
|
||||||
// eslint-disable-next-line svelte/valid-compile
|
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
|
|
@ -66,7 +65,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Color picker functionality
|
// Color picker functionality
|
||||||
let colorPickerInput: HTMLInputElement | undefined = $state.raw()
|
let colorPickerInput: HTMLInputElement
|
||||||
|
|
||||||
function handleColorSwatchClick() {
|
function handleColorSwatchClick() {
|
||||||
if (colorPickerInput) {
|
if (colorPickerInput) {
|
||||||
|
|
@ -127,7 +126,6 @@
|
||||||
class="color-swatch"
|
class="color-swatch"
|
||||||
style="background-color: {value}"
|
style="background-color: {value}"
|
||||||
onclick={handleColorSwatchClick}
|
onclick={handleColorSwatchClick}
|
||||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && handleColorSwatchClick()}
|
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
aria-label="Open color picker"
|
aria-label="Open color picker"
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Modal from './Modal.svelte'
|
import Modal from './Modal.svelte'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
|
import Input from './Input.svelte'
|
||||||
import Textarea from './Textarea.svelte'
|
import Textarea from './Textarea.svelte'
|
||||||
import SmartImage from '../SmartImage.svelte'
|
import SmartImage from '../SmartImage.svelte'
|
||||||
import AlbumSelector from './AlbumSelector.svelte'
|
import AlbumSelector from './AlbumSelector.svelte'
|
||||||
|
|
@ -11,7 +12,7 @@
|
||||||
import MediaMetadataPanel from './MediaMetadataPanel.svelte'
|
import MediaMetadataPanel from './MediaMetadataPanel.svelte'
|
||||||
import MediaUsageList from './MediaUsageList.svelte'
|
import MediaUsageList from './MediaUsageList.svelte'
|
||||||
import { toast } from '$lib/stores/toast'
|
import { toast } from '$lib/stores/toast'
|
||||||
import { getFileType, isVideoFile } from '$lib/utils/mediaHelpers'
|
import { formatFileSize, getFileType, isVideoFile } from '$lib/utils/mediaHelpers'
|
||||||
import type { Media } from '@prisma/client'
|
import type { Media } from '@prisma/client'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -43,6 +44,7 @@
|
||||||
|
|
||||||
// Album management state
|
// Album management state
|
||||||
let albums = $state<Array<{ id: number; title: string; slug: string }>>([])
|
let albums = $state<Array<{ id: number; title: string; slug: string }>>([])
|
||||||
|
let loadingAlbums = $state(false)
|
||||||
let showAlbumSelector = $state(false)
|
let showAlbumSelector = $state(false)
|
||||||
|
|
||||||
// Initialize form when media changes
|
// Initialize form when media changes
|
||||||
|
|
@ -88,6 +90,8 @@
|
||||||
if (!media) return
|
if (!media) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
loadingAlbums = true
|
||||||
|
|
||||||
// Load albums this media belongs to
|
// Load albums this media belongs to
|
||||||
const mediaResponse = await fetch(`/api/media/${media.id}/albums`, {
|
const mediaResponse = await fetch(`/api/media/${media.id}/albums`, {
|
||||||
credentials: 'same-origin'
|
credentials: 'same-origin'
|
||||||
|
|
@ -99,6 +103,8 @@
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error loading albums:', error)
|
console.error('Error loading albums:', error)
|
||||||
albums = []
|
albums = []
|
||||||
|
} finally {
|
||||||
|
loadingAlbums = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -223,7 +229,6 @@
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
<video controls poster={media.thumbnailUrl || undefined} class="preview-video">
|
<video controls poster={media.thumbnailUrl || undefined} class="preview-video">
|
||||||
<source src={media.url} type={media.mimeType} />
|
<source src={media.url} type={media.mimeType} />
|
||||||
<track kind="captions" />
|
|
||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,7 @@
|
||||||
{#if isLoading && media.length === 0}
|
{#if isLoading && media.length === 0}
|
||||||
<!-- Loading skeleton -->
|
<!-- Loading skeleton -->
|
||||||
<div class="media-grid">
|
<div class="media-grid">
|
||||||
{#each Array(12) as _}
|
{#each Array(12) as _, i}
|
||||||
<div class="media-item skeleton" aria-hidden="true">
|
<div class="media-item skeleton" aria-hidden="true">
|
||||||
<div class="media-thumbnail skeleton-bg"></div>
|
<div class="media-thumbnail skeleton-bg"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -90,8 +90,8 @@
|
||||||
{:else if isVideoFile(item.mimeType)}
|
{:else if isVideoFile(item.mimeType)}
|
||||||
{#if item.thumbnailUrl}
|
{#if item.thumbnailUrl}
|
||||||
<div class="video-thumbnail-wrapper">
|
<div class="video-thumbnail-wrapper">
|
||||||
<img
|
<img
|
||||||
src={item.thumbnailUrl}
|
src={item.thumbnailUrl}
|
||||||
alt={item.filename}
|
alt={item.filename}
|
||||||
loading={i < 8 ? 'eager' : 'lazy'}
|
loading={i < 8 ? 'eager' : 'lazy'}
|
||||||
class="media-image video-thumbnail"
|
class="media-image video-thumbnail"
|
||||||
|
|
@ -228,13 +228,13 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.video-thumbnail {
|
.video-thumbnail {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-overlay {
|
.video-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
@ -248,7 +248,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
:global(.play-icon) {
|
:global(.play-icon) {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
@ -257,7 +257,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-placeholder {
|
.media-placeholder {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -265,17 +265,17 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: $gray-60;
|
color: $gray-60;
|
||||||
|
|
||||||
&.video-placeholder {
|
&.video-placeholder {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: $unit;
|
gap: $unit;
|
||||||
|
|
||||||
:global(.video-icon) {
|
:global(.video-icon) {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
color: $gray-60;
|
color: $gray-60;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-label {
|
.video-label {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: $gray-50;
|
color: $gray-50;
|
||||||
|
|
|
||||||
|
|
@ -90,12 +90,12 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="media-input">
|
<div class="media-input">
|
||||||
<div class="input-label">
|
<label class="input-label">
|
||||||
{label}
|
{label}
|
||||||
{#if required}
|
{#if required}
|
||||||
<span class="required">*</span>
|
<span class="required">*</span>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</label>
|
||||||
|
|
||||||
<!-- Selected Media Preview -->
|
<!-- Selected Media Preview -->
|
||||||
{#if hasValue}
|
{#if hasValue}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,12 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import { formatFileSize, getFileType, isVideoFile, formatDuration, formatBitrate } from '$lib/utils/mediaHelpers'
|
import {
|
||||||
|
formatFileSize,
|
||||||
|
getFileType,
|
||||||
|
isVideoFile,
|
||||||
|
formatDuration,
|
||||||
|
formatBitrate
|
||||||
|
} from '$lib/utils/mediaHelpers'
|
||||||
import type { Media } from '@prisma/client'
|
import type { Media } from '@prisma/client'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import FileUploadZone from './FileUploadZone.svelte'
|
import FileUploadZone from './FileUploadZone.svelte'
|
||||||
import FilePreviewList from './FilePreviewList.svelte'
|
import FilePreviewList from './FilePreviewList.svelte'
|
||||||
|
import { formatFileSize } from '$lib/utils/mediaHelpers'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
|
|
@ -58,7 +59,7 @@
|
||||||
files = files.filter((f) => f.name !== id)
|
files = files.filter((f) => f.name !== id)
|
||||||
// Clear any related upload progress
|
// Clear any related upload progress
|
||||||
if (uploadProgress[fileToRemove.name]) {
|
if (uploadProgress[fileToRemove.name]) {
|
||||||
const { [fileToRemove.name]: _, ...rest } = uploadProgress
|
const { [fileToRemove.name]: removed, ...rest } = uploadProgress
|
||||||
uploadProgress = rest
|
uploadProgress = rest
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -91,7 +92,7 @@
|
||||||
successCount++
|
successCount++
|
||||||
uploadProgress = { ...uploadProgress, [file.name]: 100 }
|
uploadProgress = { ...uploadProgress, [file.name]: 100 }
|
||||||
}
|
}
|
||||||
} catch {
|
} catch (error) {
|
||||||
uploadErrors = [...uploadErrors, `${file.name}: Network error`]
|
uploadErrors = [...uploadErrors, `${file.name}: Network error`]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
import type { Post } from '@prisma/client'
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
post: Post
|
post: any
|
||||||
postType: 'post' | 'essay'
|
postType: 'post' | 'essay'
|
||||||
slug: string
|
slug: string
|
||||||
excerpt: string
|
excerpt: string
|
||||||
|
|
|
||||||
|
|
@ -10,20 +10,7 @@
|
||||||
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import type { JSONContent } from '@tiptap/core'
|
||||||
import type { Media, Post } from '@prisma/client'
|
import type { Media } from '@prisma/client'
|
||||||
import type { Editor } from '@tiptap/core'
|
|
||||||
|
|
||||||
// Payload type for photo posts
|
|
||||||
interface PhotoPayload {
|
|
||||||
title: string
|
|
||||||
slug: string
|
|
||||||
type: string
|
|
||||||
status: string
|
|
||||||
content: JSONContent
|
|
||||||
featuredImage: string | null
|
|
||||||
tags: string[]
|
|
||||||
updatedAt?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
postId?: number
|
postId?: number
|
||||||
|
|
@ -53,57 +40,59 @@
|
||||||
let tags = $state(initialData?.tags?.join(', ') || '')
|
let tags = $state(initialData?.tags?.join(', ') || '')
|
||||||
|
|
||||||
// Editor ref
|
// Editor ref
|
||||||
let editorRef: Editor | undefined
|
let editorRef: any
|
||||||
|
|
||||||
// Draft backup
|
// Draft backup
|
||||||
const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
|
const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
|
||||||
let showDraftPrompt = $state(false)
|
let showDraftPrompt = $state(false)
|
||||||
let draftTimestamp = $state<number | null>(null)
|
let draftTimestamp = $state<number | null>(null)
|
||||||
let timeTicker = $state(0)
|
let timeTicker = $state(0)
|
||||||
const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null))
|
const draftTimeText = $derived.by(() =>
|
||||||
|
draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
|
||||||
|
)
|
||||||
|
|
||||||
function buildPayload(): PhotoPayload {
|
function buildPayload() {
|
||||||
return {
|
return {
|
||||||
title: title.trim(),
|
title: title.trim(),
|
||||||
slug: createSlug(title),
|
slug: createSlug(title),
|
||||||
type: 'photo',
|
type: 'photo',
|
||||||
status,
|
status,
|
||||||
content,
|
content,
|
||||||
featuredImage: featuredImage ? featuredImage.url : null,
|
featuredImage: featuredImage ? featuredImage.url : null,
|
||||||
tags: tags
|
tags: tags
|
||||||
? tags
|
? tags
|
||||||
.split(',')
|
.split(',')
|
||||||
.map((tag) => tag.trim())
|
.map((tag) => tag.trim())
|
||||||
.filter(Boolean)
|
.filter(Boolean)
|
||||||
: [],
|
: [],
|
||||||
updatedAt
|
updatedAt
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Autosave store (edit mode only)
|
// Autosave store (edit mode only)
|
||||||
let autoSave = mode === 'edit' && postId
|
let autoSave =
|
||||||
? createAutoSaveStore({
|
mode === 'edit' && postId
|
||||||
debounceMs: 2000,
|
? createAutoSaveStore({
|
||||||
getPayload: () => (hasLoaded ? buildPayload() : null),
|
debounceMs: 2000,
|
||||||
save: async (payload, { signal }) => {
|
getPayload: () => (hasLoaded ? buildPayload() : null),
|
||||||
const response = await fetch(`/api/posts/${postId}`, {
|
save: async (payload, { signal }) => {
|
||||||
method: 'PUT',
|
const response = await fetch(`/api/posts/${postId}`, {
|
||||||
headers: { 'Content-Type': 'application/json' },
|
method: 'PUT',
|
||||||
body: JSON.stringify(payload),
|
headers: { 'Content-Type': 'application/json' },
|
||||||
credentials: 'same-origin',
|
body: JSON.stringify(payload),
|
||||||
signal
|
credentials: 'same-origin',
|
||||||
|
signal
|
||||||
|
})
|
||||||
|
if (!response.ok) throw new Error('Failed to save')
|
||||||
|
return await response.json()
|
||||||
|
},
|
||||||
|
onSaved: (saved: any, { prime }) => {
|
||||||
|
updatedAt = saved.updatedAt
|
||||||
|
prime(buildPayload())
|
||||||
|
if (draftKey) clearDraft(draftKey)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
if (!response.ok) throw new Error('Failed to save')
|
: null
|
||||||
return await response.json()
|
|
||||||
},
|
|
||||||
onSaved: (saved: Post, { prime }) => {
|
|
||||||
updatedAt =
|
|
||||||
typeof saved.updatedAt === 'string' ? saved.updatedAt : saved.updatedAt.toISOString()
|
|
||||||
prime(buildPayload())
|
|
||||||
if (draftKey) clearDraft(draftKey)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
: null
|
|
||||||
|
|
||||||
// Prime autosave on initial load (edit mode only)
|
// Prime autosave on initial load (edit mode only)
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
|
|
@ -115,7 +104,11 @@ let autoSave = mode === 'edit' && postId
|
||||||
|
|
||||||
// Trigger autosave when form data changes
|
// Trigger autosave when form data changes
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
void title; void status; void content; void featuredImage; void tags
|
title
|
||||||
|
status
|
||||||
|
content
|
||||||
|
featuredImage
|
||||||
|
tags
|
||||||
if (hasLoaded && autoSave) {
|
if (hasLoaded && autoSave) {
|
||||||
autoSave.schedule()
|
autoSave.schedule()
|
||||||
}
|
}
|
||||||
|
|
@ -131,16 +124,16 @@ let autoSave = mode === 'edit' && postId
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
const draft = loadDraft<PhotoPayload>(draftKey)
|
const draft = loadDraft<any>(draftKey)
|
||||||
if (draft) {
|
if (draft) {
|
||||||
showDraftPrompt = true
|
showDraftPrompt = true
|
||||||
draftTimestamp = draft.ts
|
draftTimestamp = draft.ts
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function restoreDraft() {
|
function restoreDraft() {
|
||||||
const draft = loadDraft<PhotoPayload>(draftKey)
|
const draft = loadDraft<any>(draftKey)
|
||||||
if (!draft) return
|
if (!draft) return
|
||||||
const p = draft.payload
|
const p = draft.payload
|
||||||
title = p.title ?? title
|
title = p.title ?? title
|
||||||
|
|
@ -163,7 +156,7 @@ $effect(() => {
|
||||||
usedIn: [],
|
usedIn: [],
|
||||||
createdAt: new Date(),
|
createdAt: new Date(),
|
||||||
updatedAt: new Date()
|
updatedAt: new Date()
|
||||||
} as unknown
|
} as any
|
||||||
}
|
}
|
||||||
showDraftPrompt = false
|
showDraftPrompt = false
|
||||||
clearDraft(draftKey)
|
clearDraft(draftKey)
|
||||||
|
|
@ -183,7 +176,7 @@ $effect(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
// Navigation guard: flush autosave before navigating away (only if unsaved)
|
// Navigation guard: flush autosave before navigating away (only if unsaved)
|
||||||
beforeNavigate(async (_navigation) => {
|
beforeNavigate(async (navigation) => {
|
||||||
if (hasLoaded && autoSave) {
|
if (hasLoaded && autoSave) {
|
||||||
if (autoSave.status === 'saved') {
|
if (autoSave.status === 'saved') {
|
||||||
return
|
return
|
||||||
|
|
@ -344,11 +337,11 @@ $effect(() => {
|
||||||
throw new Error(`Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`)
|
throw new Error(`Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`)
|
||||||
}
|
}
|
||||||
|
|
||||||
const savedPost = await response.json()
|
const savedPost = await response.json()
|
||||||
|
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`)
|
toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`)
|
||||||
clearDraft(draftKey)
|
clearDraft(draftKey)
|
||||||
|
|
||||||
// Redirect to posts list or edit page
|
// Redirect to posts list or edit page
|
||||||
if (mode === 'create') {
|
if (mode === 'create') {
|
||||||
|
|
@ -411,7 +404,8 @@ $effect(() => {
|
||||||
<div class="draft-banner">
|
<div class="draft-banner">
|
||||||
<div class="draft-banner-content">
|
<div class="draft-banner-content">
|
||||||
<span class="draft-banner-text">
|
<span class="draft-banner-text">
|
||||||
Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}.
|
Unsaved draft found{#if draftTimeText}
|
||||||
|
(saved {draftTimeText}){/if}.
|
||||||
</span>
|
</span>
|
||||||
<div class="draft-banner-actions">
|
<div class="draft-banner-actions">
|
||||||
<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
|
<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
|
||||||
|
|
@ -450,7 +444,7 @@ $effect(() => {
|
||||||
|
|
||||||
<!-- Caption/Content -->
|
<!-- Caption/Content -->
|
||||||
<div class="form-section">
|
<div class="form-section">
|
||||||
<div class="editor-label">Caption & Description</div>
|
<label class="editor-label">Caption & Description</label>
|
||||||
<p class="editor-help">Add a caption or tell the story behind this photo</p>
|
<p class="editor-help">Add a caption or tell the story behind this photo</p>
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<Editor
|
<Editor
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,11 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="dropdown-container" use:clickOutside={{ enabled: isOpen }} onclickoutside={handleClickOutside}>
|
<div
|
||||||
|
class="dropdown-container"
|
||||||
|
use:clickOutside={{ enabled: isOpen }}
|
||||||
|
onclickoutside={handleClickOutside}
|
||||||
|
>
|
||||||
<Button
|
<Button
|
||||||
bind:this={buttonRef}
|
bind:this={buttonRef}
|
||||||
variant="primary"
|
variant="primary"
|
||||||
|
|
@ -65,13 +69,7 @@
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
<ul class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
{#each postTypes as type}
|
{#each postTypes as type}
|
||||||
<li
|
<li class="dropdown-item" onclick={() => handleSelection(type.value)}>
|
||||||
class="dropdown-item"
|
|
||||||
role="menuitem"
|
|
||||||
tabindex="0"
|
|
||||||
onclick={() => handleSelection(type.value)}
|
|
||||||
onkeydown={(e) => e.key === 'Enter' && handleSelection(type.value)}
|
|
||||||
>
|
|
||||||
<div class="dropdown-icon">
|
<div class="dropdown-icon">
|
||||||
{#if type.value === 'essay'}
|
{#if type.value === 'essay'}
|
||||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||||
|
|
|
||||||
|
|
@ -72,14 +72,14 @@
|
||||||
|
|
||||||
if (typeof post.content === 'object' && post.content.content) {
|
if (typeof post.content === 'object' && post.content.content) {
|
||||||
// BlockNote/TipTap format
|
// BlockNote/TipTap format
|
||||||
function extractText(node: Record<string, unknown>): string {
|
function extractText(node: any): string {
|
||||||
if (typeof node.text === 'string') return node.text
|
if (node.text) return node.text
|
||||||
if (Array.isArray(node.content)) {
|
if (node.content && Array.isArray(node.content)) {
|
||||||
return node.content.map((n) => extractText(n as Record<string, unknown>)).join(' ')
|
return node.content.map(extractText).join(' ')
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
textContent = extractText(post.content as Record<string, unknown>)
|
textContent = extractText(post.content)
|
||||||
} else if (typeof post.content === 'string') {
|
} else if (typeof post.content === 'string') {
|
||||||
textContent = post.content
|
textContent = post.content
|
||||||
}
|
}
|
||||||
|
|
@ -122,13 +122,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<article class="post-item" onclick={handlePostClick}>
|
||||||
class="post-item"
|
|
||||||
role="button"
|
|
||||||
tabindex="0"
|
|
||||||
onclick={handlePostClick}
|
|
||||||
onkeydown={(e) => e.key === 'Enter' && handlePostClick()}
|
|
||||||
>
|
|
||||||
<div class="post-main">
|
<div class="post-main">
|
||||||
{#if post.title}
|
{#if post.title}
|
||||||
<h3 class="post-title">{post.title}</h3>
|
<h3 class="post-title">{post.title}</h3>
|
||||||
|
|
@ -171,9 +165,7 @@
|
||||||
|
|
||||||
{#if isDropdownOpen}
|
{#if isDropdownOpen}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button class="dropdown-item" type="button" onclick={handleEdit}>
|
<button class="dropdown-item" type="button" onclick={handleEdit}> Edit post </button>
|
||||||
Edit post
|
|
||||||
</button>
|
|
||||||
<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
|
<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
|
||||||
{post.status === 'published' ? 'Unpublish' : 'Publish'} post
|
{post.status === 'published' ? 'Unpublish' : 'Publish'} post
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -184,7 +176,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.post-item {
|
.post-item {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
|
import GenericMetadataPopover, { type MetadataConfig } from './GenericMetadataPopover.svelte'
|
||||||
import type { Post } from '@prisma/client'
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
post: Post
|
post: any
|
||||||
|
postType: 'post' | 'essay'
|
||||||
slug: string
|
slug: string
|
||||||
tags: string[]
|
tags: string[]
|
||||||
tagInput: string
|
tagInput: string
|
||||||
|
|
@ -12,11 +12,12 @@
|
||||||
onRemoveTag: (tag: string) => void
|
onRemoveTag: (tag: string) => void
|
||||||
onDelete: () => void
|
onDelete: () => void
|
||||||
onClose?: () => void
|
onClose?: () => void
|
||||||
onFieldUpdate?: (key: string, value: unknown) => void
|
onFieldUpdate?: (key: string, value: any) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
post,
|
post,
|
||||||
|
postType,
|
||||||
slug = $bindable(),
|
slug = $bindable(),
|
||||||
tags = $bindable(),
|
tags = $bindable(),
|
||||||
tagInput = $bindable(),
|
tagInput = $bindable(),
|
||||||
|
|
@ -28,11 +29,11 @@
|
||||||
onFieldUpdate
|
onFieldUpdate
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
function handleFieldUpdate(key: string, value: unknown) {
|
function handleFieldUpdate(key: string, value: any) {
|
||||||
if (key === 'slug' && typeof value === 'string') {
|
if (key === 'slug') {
|
||||||
slug = value
|
slug = value
|
||||||
onFieldUpdate?.(key, value)
|
onFieldUpdate?.(key, value)
|
||||||
} else if (key === 'tagInput' && typeof value === 'string') {
|
} else if (key === 'tagInput') {
|
||||||
tagInput = value
|
tagInput = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,10 @@
|
||||||
interface Props {
|
interface Props {
|
||||||
formData: ProjectFormData
|
formData: ProjectFormData
|
||||||
validationErrors: Record<string, string>
|
validationErrors: Record<string, string>
|
||||||
|
onSave?: () => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
let { formData = $bindable(), validationErrors }: Props = $props()
|
let { formData = $bindable(), validationErrors, onSave }: Props = $props()
|
||||||
|
|
||||||
// ===== Media State Management =====
|
// ===== Media State Management =====
|
||||||
// Convert logoUrl string to Media object for ImageUploader
|
// Convert logoUrl string to Media object for ImageUploader
|
||||||
|
|
@ -80,7 +81,9 @@
|
||||||
const hasFeaturedImage = $derived(
|
const hasFeaturedImage = $derived(
|
||||||
!!(formData.featuredImage && featuredImageMedia) || !!featuredImageMedia
|
!!(formData.featuredImage && featuredImageMedia) || !!featuredImageMedia
|
||||||
)
|
)
|
||||||
const hasBackgroundColor = $derived(!!(formData.backgroundColor && formData.backgroundColor?.trim()))
|
const hasBackgroundColor = $derived(
|
||||||
|
!!(formData.backgroundColor && formData.backgroundColor?.trim())
|
||||||
|
)
|
||||||
const hasLogo = $derived(!!(formData.logoUrl && logoMedia) || !!logoMedia)
|
const hasLogo = $derived(!!(formData.logoUrl && logoMedia) || !!logoMedia)
|
||||||
|
|
||||||
// Auto-disable toggles when content is removed
|
// Auto-disable toggles when content is removed
|
||||||
|
|
@ -90,47 +93,16 @@
|
||||||
if (!hasLogo) formData.showLogoInHeader = false
|
if (!hasLogo) formData.showLogoInHeader = false
|
||||||
})
|
})
|
||||||
|
|
||||||
// Track previous toggle states to detect which one changed
|
|
||||||
let prevShowFeaturedImage: boolean | null = $state(null)
|
|
||||||
let prevShowBackgroundColor: boolean | null = $state(null)
|
|
||||||
|
|
||||||
// Mutual exclusion: only one of featured image or background color can be active
|
|
||||||
$effect(() => {
|
|
||||||
// On first run (initial load), if both are true, default to featured image taking priority
|
|
||||||
if (prevShowFeaturedImage === null && prevShowBackgroundColor === null) {
|
|
||||||
if (formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
|
|
||||||
formData.showBackgroundColorInHeader = false
|
|
||||||
}
|
|
||||||
prevShowFeaturedImage = formData.showFeaturedImageInHeader
|
|
||||||
prevShowBackgroundColor = formData.showBackgroundColorInHeader
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const featuredChanged = formData.showFeaturedImageInHeader !== prevShowFeaturedImage
|
|
||||||
const bgColorChanged = formData.showBackgroundColorInHeader !== prevShowBackgroundColor
|
|
||||||
|
|
||||||
if (featuredChanged && formData.showFeaturedImageInHeader && formData.showBackgroundColorInHeader) {
|
|
||||||
// Featured image was just turned ON while background color was already ON
|
|
||||||
formData.showBackgroundColorInHeader = false
|
|
||||||
} else if (bgColorChanged && formData.showBackgroundColorInHeader && formData.showFeaturedImageInHeader) {
|
|
||||||
// Background color was just turned ON while featured image was already ON
|
|
||||||
formData.showFeaturedImageInHeader = false
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update previous values
|
|
||||||
prevShowFeaturedImage = formData.showFeaturedImageInHeader
|
|
||||||
prevShowBackgroundColor = formData.showBackgroundColorInHeader
|
|
||||||
})
|
|
||||||
|
|
||||||
// ===== Upload Handlers =====
|
// ===== Upload Handlers =====
|
||||||
function handleFeaturedImageUpload(media: Media) {
|
function handleFeaturedImageUpload(media: Media) {
|
||||||
formData.featuredImage = media.url
|
formData.featuredImage = media.url
|
||||||
featuredImageMedia = media
|
featuredImageMedia = media
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleFeaturedImageRemove() {
|
async function handleFeaturedImageRemove() {
|
||||||
formData.featuredImage = ''
|
formData.featuredImage = ''
|
||||||
featuredImageMedia = null
|
featuredImageMedia = null
|
||||||
|
if (onSave) await onSave()
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLogoUpload(media: Media) {
|
function handleLogoUpload(media: Media) {
|
||||||
|
|
@ -138,9 +110,10 @@
|
||||||
logoMedia = media
|
logoMedia = media
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleLogoRemove() {
|
async function handleLogoRemove() {
|
||||||
formData.logoUrl = ''
|
formData.logoUrl = ''
|
||||||
logoMedia = null
|
logoMedia = null
|
||||||
|
if (onSave) await onSave()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,20 @@
|
||||||
import { api } from '$lib/admin/api'
|
import { api } from '$lib/admin/api'
|
||||||
import AdminPage from './AdminPage.svelte'
|
import AdminPage from './AdminPage.svelte'
|
||||||
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
import AdminSegmentedControl from './AdminSegmentedControl.svelte'
|
||||||
import Button from './Button.svelte'
|
|
||||||
import Composer from './composer'
|
import Composer from './composer'
|
||||||
import ProjectMetadataForm from './ProjectMetadataForm.svelte'
|
import ProjectMetadataForm from './ProjectMetadataForm.svelte'
|
||||||
import ProjectBrandingForm from './ProjectBrandingForm.svelte'
|
import ProjectBrandingForm from './ProjectBrandingForm.svelte'
|
||||||
|
import ProjectImagesForm from './ProjectImagesForm.svelte'
|
||||||
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
|
import DraftPrompt from './DraftPrompt.svelte'
|
||||||
import { toast } from '$lib/stores/toast'
|
import { toast } from '$lib/stores/toast'
|
||||||
import type { Project } from '$lib/types/project'
|
import type { Project } from '$lib/types/project'
|
||||||
|
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
import { createProjectFormStore } from '$lib/stores/project-form.svelte'
|
import { createProjectFormStore } from '$lib/stores/project-form.svelte'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import { useDraftRecovery } from '$lib/admin/useDraftRecovery.svelte'
|
||||||
|
import { useFormGuards } from '$lib/admin/useFormGuards.svelte'
|
||||||
|
import { makeDraftKey, saveDraft, clearDraft } from '$lib/admin/draftStore'
|
||||||
|
import type { ProjectFormData } from '$lib/types/project'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
project?: Project | null
|
project?: Project | null
|
||||||
|
|
@ -27,9 +33,41 @@
|
||||||
let hasLoaded = $state(mode === 'create')
|
let hasLoaded = $state(mode === 'create')
|
||||||
let isSaving = $state(false)
|
let isSaving = $state(false)
|
||||||
let activeTab = $state('metadata')
|
let activeTab = $state('metadata')
|
||||||
|
let error = $state<string | null>(null)
|
||||||
|
let successMessage = $state<string | null>(null)
|
||||||
|
|
||||||
// Ref to the editor component
|
// Ref to the editor component
|
||||||
let editorRef: { save: () => Promise<JSONContent> } | undefined = $state.raw()
|
let editorRef: any
|
||||||
|
|
||||||
|
// Draft key for autosave fallback
|
||||||
|
const draftKey = $derived(mode === 'edit' && project ? makeDraftKey('project', project.id) : null)
|
||||||
|
|
||||||
|
// Autosave (edit mode only)
|
||||||
|
const autoSave =
|
||||||
|
mode === 'edit'
|
||||||
|
? createAutoSaveStore({
|
||||||
|
debounceMs: 2000,
|
||||||
|
getPayload: () => (hasLoaded ? formStore.buildPayload() : null),
|
||||||
|
save: async (payload, { signal }) => {
|
||||||
|
return await api.put(`/api/projects/${project?.id}`, payload, { signal })
|
||||||
|
},
|
||||||
|
onSaved: (savedProject: any, { prime }) => {
|
||||||
|
project = savedProject
|
||||||
|
formStore.populateFromProject(savedProject)
|
||||||
|
prime(formStore.buildPayload())
|
||||||
|
if (draftKey) clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
: null
|
||||||
|
|
||||||
|
// Draft recovery helper
|
||||||
|
const draftRecovery = useDraftRecovery<Partial<ProjectFormData>>({
|
||||||
|
draftKey: draftKey,
|
||||||
|
onRestore: (payload) => formStore.setFields(payload)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Form guards (navigation protection, Cmd+S, beforeunload)
|
||||||
|
useFormGuards(autoSave)
|
||||||
|
|
||||||
const tabOptions = [
|
const tabOptions = [
|
||||||
{ value: 'metadata', label: 'Metadata' },
|
{ value: 'metadata', label: 'Metadata' },
|
||||||
|
|
@ -41,12 +79,42 @@
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (project && mode === 'edit' && !hasLoaded) {
|
if (project && mode === 'edit' && !hasLoaded) {
|
||||||
formStore.populateFromProject(project)
|
formStore.populateFromProject(project)
|
||||||
|
if (autoSave) {
|
||||||
|
autoSave.prime(formStore.buildPayload())
|
||||||
|
}
|
||||||
isLoading = false
|
isLoading = false
|
||||||
hasLoaded = true
|
hasLoaded = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function handleEditorChange(content: JSONContent) {
|
// Trigger autosave when formData changes (edit mode)
|
||||||
|
$effect(() => {
|
||||||
|
// Establish dependencies on fields
|
||||||
|
formStore.fields
|
||||||
|
activeTab
|
||||||
|
if (mode === 'edit' && hasLoaded && autoSave) {
|
||||||
|
autoSave.schedule()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save draft only when autosave fails
|
||||||
|
$effect(() => {
|
||||||
|
if (mode === 'edit' && autoSave && draftKey) {
|
||||||
|
const status = autoSave.status
|
||||||
|
if (status === 'error' || status === 'offline') {
|
||||||
|
saveDraft(draftKey, formStore.buildPayload())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Cleanup autosave on unmount
|
||||||
|
$effect(() => {
|
||||||
|
if (autoSave) {
|
||||||
|
return () => autoSave.destroy()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleEditorChange(content: any) {
|
||||||
formStore.setField('caseStudyContent', content)
|
formStore.setField('caseStudyContent', content)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -64,27 +132,22 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSaving = true
|
|
||||||
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} project...`)
|
const loadingToastId = toast.loading(`${mode === 'edit' ? 'Saving' : 'Creating'} project...`)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
isSaving = true
|
||||||
|
|
||||||
const payload = {
|
const payload = {
|
||||||
...formStore.buildPayload(),
|
...formStore.buildPayload(),
|
||||||
// Include updatedAt for concurrency control in edit mode
|
// Include updatedAt for concurrency control in edit mode
|
||||||
updatedAt: mode === 'edit' ? project?.updatedAt : undefined
|
updatedAt: mode === 'edit' ? project?.updatedAt : undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('[ProjectForm] Saving with payload:', {
|
|
||||||
showFeaturedImageInHeader: payload.showFeaturedImageInHeader,
|
|
||||||
showBackgroundColorInHeader: payload.showBackgroundColorInHeader,
|
|
||||||
showLogoInHeader: payload.showLogoInHeader
|
|
||||||
})
|
|
||||||
|
|
||||||
let savedProject: Project
|
let savedProject: Project
|
||||||
if (mode === 'edit') {
|
if (mode === 'edit') {
|
||||||
savedProject = await api.put(`/api/projects/${project?.id}`, payload) as Project
|
savedProject = (await api.put(`/api/projects/${project?.id}`, payload)) as Project
|
||||||
} else {
|
} else {
|
||||||
savedProject = await api.post('/api/projects', payload) as Project
|
savedProject = (await api.post('/api/projects', payload)) as Project
|
||||||
}
|
}
|
||||||
|
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
|
|
@ -94,11 +157,10 @@
|
||||||
goto(`/admin/projects/${savedProject.id}/edit`)
|
goto(`/admin/projects/${savedProject.id}/edit`)
|
||||||
} else {
|
} else {
|
||||||
project = savedProject
|
project = savedProject
|
||||||
formStore.populateFromProject(savedProject)
|
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
if (err && typeof err === 'object' && 'status' in err && (err as { status: number }).status === 409) {
|
if ((err as any)?.status === 409) {
|
||||||
toast.error('This project has changed in another tab. Please reload.')
|
toast.error('This project has changed in another tab. Please reload.')
|
||||||
} else {
|
} else {
|
||||||
toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} project`)
|
toast.error(`Failed to ${mode === 'edit' ? 'save' : 'create'} project`)
|
||||||
|
|
@ -123,20 +185,36 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<Button
|
{#if !isLoading && mode === 'edit' && autoSave}
|
||||||
variant="primary"
|
<AutoSaveStatus
|
||||||
onclick={handleSave}
|
status={autoSave.status}
|
||||||
disabled={isSaving}
|
error={autoSave.lastError}
|
||||||
>
|
lastSavedAt={project?.updatedAt}
|
||||||
{isSaving ? 'Saving...' : 'Save'}
|
/>
|
||||||
</Button>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
{#if draftRecovery.showPrompt}
|
||||||
|
<DraftPrompt
|
||||||
|
timeAgo={draftRecovery.draftTimeText}
|
||||||
|
onRestore={draftRecovery.restore}
|
||||||
|
onDismiss={draftRecovery.dismiss}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="admin-container">
|
<div class="admin-container">
|
||||||
{#if isLoading}
|
{#if isLoading}
|
||||||
<div class="loading">Loading project...</div>
|
<div class="loading">Loading project...</div>
|
||||||
{:else}
|
{:else}
|
||||||
|
{#if error}
|
||||||
|
<div class="error-message">{error}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if successMessage}
|
||||||
|
<div class="success-message">{successMessage}</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="tab-panels">
|
<div class="tab-panels">
|
||||||
<!-- Metadata Panel -->
|
<!-- Metadata Panel -->
|
||||||
<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
|
<div class="panel content-wrapper" class:active={activeTab === 'metadata'}>
|
||||||
|
|
@ -147,7 +225,11 @@
|
||||||
handleSave()
|
handleSave()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ProjectMetadataForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
|
<ProjectMetadataForm
|
||||||
|
bind:formData={formStore.fields}
|
||||||
|
validationErrors={formStore.validationErrors}
|
||||||
|
onSave={handleSave}
|
||||||
|
/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -161,7 +243,11 @@
|
||||||
handleSave()
|
handleSave()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ProjectBrandingForm bind:formData={formStore.fields} validationErrors={formStore.validationErrors} />
|
<ProjectBrandingForm
|
||||||
|
bind:formData={formStore.fields}
|
||||||
|
validationErrors={formStore.validationErrors}
|
||||||
|
onSave={handleSave}
|
||||||
|
/>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -222,6 +308,25 @@
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: $gray-40;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 8px;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $gray-90;
|
||||||
|
color: $gray-10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.admin-container {
|
.admin-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -254,12 +359,37 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading,
|
||||||
|
.error {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: $unit-6x;
|
padding: $unit-6x;
|
||||||
color: $gray-40;
|
color: $gray-40;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message,
|
||||||
|
.success-message {
|
||||||
|
padding: $unit-3x;
|
||||||
|
border-radius: $unit;
|
||||||
|
margin-bottom: $unit-4x;
|
||||||
|
max-width: 700px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: #fee;
|
||||||
|
color: #d33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-message {
|
||||||
|
background-color: #efe;
|
||||||
|
color: #363;
|
||||||
|
}
|
||||||
|
|
||||||
.form-content {
|
.form-content {
|
||||||
@include breakpoint('phone') {
|
@include breakpoint('phone') {
|
||||||
padding: $unit-3x;
|
padding: $unit-3x;
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Input from './Input.svelte'
|
||||||
import ImageUploader from './ImageUploader.svelte'
|
import ImageUploader from './ImageUploader.svelte'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import type { ProjectFormData } from '$lib/types/project'
|
import type { ProjectFormData } from '$lib/types/project'
|
||||||
|
|
@ -6,10 +7,11 @@
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
formData: ProjectFormData
|
formData: ProjectFormData
|
||||||
|
validationErrors: Record<string, string>
|
||||||
onSave?: () => Promise<void>
|
onSave?: () => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
let { formData = $bindable(), onSave }: Props = $props()
|
let { formData = $bindable(), validationErrors, onSave }: Props = $props()
|
||||||
|
|
||||||
// State for collapsible featured image section
|
// State for collapsible featured image section
|
||||||
let showFeaturedImage = $state(
|
let showFeaturedImage = $state(
|
||||||
|
|
|
||||||
|
|
@ -131,9 +131,7 @@
|
||||||
|
|
||||||
{#if isDropdownOpen}
|
{#if isDropdownOpen}
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<button class="dropdown-item" type="button" onclick={handleEdit}>
|
<button class="dropdown-item" type="button" onclick={handleEdit}> Edit project </button>
|
||||||
Edit project
|
|
||||||
</button>
|
|
||||||
<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
|
<button class="dropdown-item" type="button" onclick={handleTogglePublish}>
|
||||||
{project.status === 'published' ? 'Unpublish' : 'Publish'} project
|
{project.status === 'published' ? 'Unpublish' : 'Publish'} project
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
import Textarea from './Textarea.svelte'
|
import Textarea from './Textarea.svelte'
|
||||||
|
import SelectField from './SelectField.svelte'
|
||||||
import SegmentedControlField from './SegmentedControlField.svelte'
|
import SegmentedControlField from './SegmentedControlField.svelte'
|
||||||
import DropdownSelectField from './DropdownSelectField.svelte'
|
import DropdownSelectField from './DropdownSelectField.svelte'
|
||||||
import type { ProjectFormData } from '$lib/types/project'
|
import type { ProjectFormData } from '$lib/types/project'
|
||||||
|
|
@ -8,9 +9,10 @@
|
||||||
interface Props {
|
interface Props {
|
||||||
formData: ProjectFormData
|
formData: ProjectFormData
|
||||||
validationErrors: Record<string, string>
|
validationErrors: Record<string, string>
|
||||||
|
onSave?: () => Promise<void>
|
||||||
}
|
}
|
||||||
|
|
||||||
let { formData = $bindable(), validationErrors }: Props = $props()
|
let { formData = $bindable(), validationErrors, onSave }: Props = $props()
|
||||||
|
|
||||||
const statusOptions = [
|
const statusOptions = [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -50,8 +50,10 @@
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
{#if showDropdown}
|
{#if showDropdown}
|
||||||
<DropdownItem onclick={handleSaveDraftClick}>
|
{#snippet dropdown()}
|
||||||
{saveDraftText}
|
<DropdownItem onclick={handleSaveDraftClick}>
|
||||||
</DropdownItem>
|
{saveDraftText}
|
||||||
|
</DropdownItem>
|
||||||
|
{/snippet}
|
||||||
{/if}
|
{/if}
|
||||||
</BaseDropdown>
|
</BaseDropdown>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,11 @@
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
isLoading?: boolean
|
isLoading?: boolean
|
||||||
canSave?: boolean
|
canSave?: boolean
|
||||||
|
customActions?: Array<{
|
||||||
|
label: string
|
||||||
|
status: string
|
||||||
|
variant?: 'default' | 'danger'
|
||||||
|
}>
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
|
|
@ -15,7 +20,8 @@
|
||||||
onSave,
|
onSave,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
isLoading = false,
|
isLoading = false,
|
||||||
canSave = true
|
canSave = true,
|
||||||
|
customActions = []
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
function handlePublish() {
|
function handlePublish() {
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
onfocus,
|
onfocus,
|
||||||
onblur,
|
onblur,
|
||||||
class: className = '',
|
class: className = '',
|
||||||
// eslint-disable-next-line svelte/valid-compile
|
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
required = false,
|
required = false,
|
||||||
helpText,
|
helpText,
|
||||||
error,
|
error,
|
||||||
// eslint-disable-next-line svelte/valid-compile
|
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,14 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { goto } from '$app/navigation'
|
import { goto, beforeNavigate } from '$app/navigation'
|
||||||
import AdminPage from './AdminPage.svelte'
|
import AdminPage from './AdminPage.svelte'
|
||||||
import type { JSONContent } from '@tiptap/core'
|
import type { JSONContent } from '@tiptap/core'
|
||||||
import Editor from './Editor.svelte'
|
import Editor from './Editor.svelte'
|
||||||
import Button from './Button.svelte'
|
import Button from './Button.svelte'
|
||||||
import Input from './Input.svelte'
|
import Input from './Input.svelte'
|
||||||
import { toast } from '$lib/stores/toast'
|
import { toast } from '$lib/stores/toast'
|
||||||
|
import { makeDraftKey, saveDraft, loadDraft, clearDraft, timeAgo } from '$lib/admin/draftStore'
|
||||||
|
import { createAutoSaveStore } from '$lib/admin/autoSave.svelte'
|
||||||
|
import AutoSaveStatus from './AutoSaveStatus.svelte'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
postType: 'post'
|
postType: 'post'
|
||||||
|
|
@ -25,7 +28,9 @@
|
||||||
|
|
||||||
// State
|
// State
|
||||||
let isSaving = $state(false)
|
let isSaving = $state(false)
|
||||||
|
let hasLoaded = $state(mode === 'create')
|
||||||
let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
|
let status = $state<'draft' | 'published'>(initialData?.status || 'draft')
|
||||||
|
let updatedAt = $state<string | undefined>(initialData?.updatedAt)
|
||||||
|
|
||||||
// Form data
|
// Form data
|
||||||
let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
|
let content = $state<JSONContent>(initialData?.content || { type: 'doc', content: [] })
|
||||||
|
|
@ -38,12 +43,7 @@
|
||||||
const textContent = $derived.by(() => {
|
const textContent = $derived.by(() => {
|
||||||
if (!content.content) return ''
|
if (!content.content) return ''
|
||||||
return content.content
|
return content.content
|
||||||
.map((node) => {
|
.map((node: any) => node.content?.map((n: any) => n.text || '').join('') || '')
|
||||||
if (node.content) {
|
|
||||||
return node.content.map((n) => ('text' in n ? n.text : '') || '').join('')
|
|
||||||
}
|
|
||||||
return ''
|
|
||||||
})
|
|
||||||
.join('\n')
|
.join('\n')
|
||||||
})
|
})
|
||||||
const charCount = $derived(textContent.length)
|
const charCount = $derived(textContent.length)
|
||||||
|
|
@ -51,35 +51,211 @@
|
||||||
|
|
||||||
// Check if form has content
|
// Check if form has content
|
||||||
const hasContent = $derived.by(() => {
|
const hasContent = $derived.by(() => {
|
||||||
|
// For posts, check if either content exists or it's a link with URL
|
||||||
const hasTextContent = textContent.trim().length > 0
|
const hasTextContent = textContent.trim().length > 0
|
||||||
const hasLinkContent = linkUrl && linkUrl.trim().length > 0
|
const hasLinkContent = linkUrl && linkUrl.trim().length > 0
|
||||||
return hasTextContent || hasLinkContent
|
return hasTextContent || hasLinkContent
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// Draft backup
|
||||||
|
const draftKey = $derived(makeDraftKey('post', postId ?? 'new'))
|
||||||
|
let showDraftPrompt = $state(false)
|
||||||
|
let draftTimestamp = $state<number | null>(null)
|
||||||
|
let timeTicker = $state(0)
|
||||||
|
const draftTimeText = $derived.by(() =>
|
||||||
|
draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null
|
||||||
|
)
|
||||||
|
|
||||||
|
function buildPayload() {
|
||||||
|
const payload: any = {
|
||||||
|
type: 'post',
|
||||||
|
status,
|
||||||
|
content,
|
||||||
|
updatedAt
|
||||||
|
}
|
||||||
|
if (linkUrl && linkUrl.trim()) {
|
||||||
|
payload.title = title || linkUrl
|
||||||
|
payload.link_url = linkUrl
|
||||||
|
payload.linkDescription = linkDescription
|
||||||
|
} else if (title) {
|
||||||
|
payload.title = title
|
||||||
|
}
|
||||||
|
return payload
|
||||||
|
}
|
||||||
|
|
||||||
|
// Autosave store (edit mode only)
|
||||||
|
let autoSave =
|
||||||
|
mode === 'edit' && postId
|
||||||
|
? createAutoSaveStore({
|
||||||
|
debounceMs: 2000,
|
||||||
|
getPayload: () => (hasLoaded ? buildPayload() : null),
|
||||||
|
save: async (payload, { signal }) => {
|
||||||
|
const response = await fetch(`/api/posts/${postId}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
credentials: 'same-origin',
|
||||||
|
signal
|
||||||
|
})
|
||||||
|
if (!response.ok) throw new Error('Failed to save')
|
||||||
|
return await response.json()
|
||||||
|
},
|
||||||
|
onSaved: (saved: any, { prime }) => {
|
||||||
|
updatedAt = saved.updatedAt
|
||||||
|
prime(buildPayload())
|
||||||
|
if (draftKey) clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
: null
|
||||||
|
|
||||||
|
// Prime autosave on initial load (edit mode only)
|
||||||
|
$effect(() => {
|
||||||
|
if (mode === 'edit' && initialData && !hasLoaded && autoSave) {
|
||||||
|
autoSave.prime(buildPayload())
|
||||||
|
hasLoaded = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Trigger autosave when form data changes
|
||||||
|
$effect(() => {
|
||||||
|
status
|
||||||
|
content
|
||||||
|
linkUrl
|
||||||
|
linkDescription
|
||||||
|
title
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
autoSave.schedule()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Save draft only when autosave fails
|
||||||
|
$effect(() => {
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
const saveStatus = autoSave.status
|
||||||
|
if (saveStatus === 'error' || saveStatus === 'offline') {
|
||||||
|
saveDraft(draftKey, buildPayload())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
const draft = loadDraft<any>(draftKey)
|
||||||
|
if (draft) {
|
||||||
|
showDraftPrompt = true
|
||||||
|
draftTimestamp = draft.ts
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function restoreDraft() {
|
||||||
|
const draft = loadDraft<any>(draftKey)
|
||||||
|
if (!draft) return
|
||||||
|
const p = draft.payload
|
||||||
|
status = p.status ?? status
|
||||||
|
content = p.content ?? content
|
||||||
|
if (p.link_url) {
|
||||||
|
linkUrl = p.link_url
|
||||||
|
linkDescription = p.linkDescription ?? linkDescription
|
||||||
|
title = p.title ?? title
|
||||||
|
} else {
|
||||||
|
title = p.title ?? title
|
||||||
|
}
|
||||||
|
showDraftPrompt = false
|
||||||
|
clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
function dismissDraft() {
|
||||||
|
showDraftPrompt = false
|
||||||
|
clearDraft(draftKey)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auto-update draft time text every minute when prompt visible
|
||||||
|
$effect(() => {
|
||||||
|
if (showDraftPrompt) {
|
||||||
|
const id = setInterval(() => (timeTicker = timeTicker + 1), 60000)
|
||||||
|
return () => clearInterval(id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Navigation guard: flush autosave before navigating away (only if unsaved)
|
||||||
|
beforeNavigate(async (navigation) => {
|
||||||
|
if (hasLoaded && autoSave) {
|
||||||
|
if (autoSave.status === 'saved') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// Flush any pending changes before allowing navigation to proceed
|
||||||
|
try {
|
||||||
|
await autoSave.flush()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Autosave flush failed:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Warn before closing browser tab/window if there are unsaved changes
|
||||||
|
$effect(() => {
|
||||||
|
if (!hasLoaded || !autoSave) return
|
||||||
|
|
||||||
|
function handleBeforeUnload(event: BeforeUnloadEvent) {
|
||||||
|
if (autoSave!.status !== 'saved') {
|
||||||
|
event.preventDefault()
|
||||||
|
event.returnValue = ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('beforeunload', handleBeforeUnload)
|
||||||
|
return () => window.removeEventListener('beforeunload', handleBeforeUnload)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Keyboard shortcut: Cmd/Ctrl+S to save immediately
|
||||||
|
$effect(() => {
|
||||||
|
if (!hasLoaded || !autoSave) return
|
||||||
|
|
||||||
|
function handleKeydown(e: KeyboardEvent) {
|
||||||
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
|
||||||
|
e.preventDefault()
|
||||||
|
autoSave!.flush().catch((error) => {
|
||||||
|
console.error('Autosave flush failed:', error)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeydown)
|
||||||
|
return () => document.removeEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Cleanup autosave on unmount
|
||||||
|
$effect(() => {
|
||||||
|
if (autoSave) {
|
||||||
|
return () => autoSave.destroy()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
async function handleSave(publishStatus: 'draft' | 'published') {
|
async function handleSave(publishStatus: 'draft' | 'published') {
|
||||||
if (isOverLimit) {
|
if (isOverLimit) {
|
||||||
toast.error('Post is too long')
|
toast.error('Post is too long')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// For link posts, URL is required
|
||||||
if (linkUrl && !linkUrl.trim()) {
|
if (linkUrl && !linkUrl.trim()) {
|
||||||
toast.error('Link URL is required')
|
toast.error('Link URL is required')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
isSaving = true
|
|
||||||
const loadingToastId = toast.loading(
|
const loadingToastId = toast.loading(
|
||||||
`${publishStatus === 'published' ? 'Publishing' : 'Saving'} post...`
|
`${publishStatus === 'published' ? 'Publishing' : 'Saving'} post...`
|
||||||
)
|
)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const payload: Record<string, unknown> = {
|
isSaving = true
|
||||||
type: 'post',
|
|
||||||
|
const payload: any = {
|
||||||
|
type: 'post', // Use simplified post type
|
||||||
status: publishStatus,
|
status: publishStatus,
|
||||||
content: content,
|
content: content
|
||||||
updatedAt: mode === 'edit' ? initialData?.updatedAt : undefined
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add link fields if they're provided
|
||||||
if (linkUrl && linkUrl.trim()) {
|
if (linkUrl && linkUrl.trim()) {
|
||||||
payload.title = title || linkUrl
|
payload.title = title || linkUrl
|
||||||
payload.link_url = linkUrl
|
payload.link_url = linkUrl
|
||||||
|
|
@ -106,11 +282,13 @@
|
||||||
throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
|
throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`)
|
||||||
}
|
}
|
||||||
|
|
||||||
await response.json()
|
const savedPost = await response.json()
|
||||||
|
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
|
toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`)
|
||||||
|
clearDraft(draftKey)
|
||||||
|
|
||||||
|
// Redirect back to posts list after creation
|
||||||
goto('/admin/posts')
|
goto('/admin/posts')
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.dismiss(loadingToastId)
|
toast.dismiss(loadingToastId)
|
||||||
|
|
@ -145,19 +323,37 @@
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
|
{#if mode === 'edit' && autoSave}
|
||||||
|
<AutoSaveStatus status={autoSave.status} error={autoSave.lastError} />
|
||||||
|
{/if}
|
||||||
<Button variant="secondary" onclick={() => handleSave('draft')} disabled={isSaving}>
|
<Button variant="secondary" onclick={() => handleSave('draft')} disabled={isSaving}>
|
||||||
Save Draft
|
Save Draft
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="primary"
|
variant="primary"
|
||||||
onclick={() => handleSave('published')}
|
onclick={() => handleSave('published')}
|
||||||
disabled={isSaving || !hasContent || (postType === 'microblog' && isOverLimit)}
|
disabled={isSaving || !hasContent() || (postType === 'microblog' && isOverLimit)}
|
||||||
>
|
>
|
||||||
Post
|
Post
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
{#if showDraftPrompt}
|
||||||
|
<div class="draft-banner">
|
||||||
|
<div class="draft-banner-content">
|
||||||
|
<span class="draft-banner-text">
|
||||||
|
Unsaved draft found{#if draftTimeText}
|
||||||
|
(saved {draftTimeText}){/if}.
|
||||||
|
</span>
|
||||||
|
<div class="draft-banner-actions">
|
||||||
|
<button class="draft-banner-button" onclick={restoreDraft}>Restore</button>
|
||||||
|
<button class="draft-banner-button dismiss" onclick={dismissDraft}>Dismiss</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="composer-container">
|
<div class="composer-container">
|
||||||
<div class="composer">
|
<div class="composer">
|
||||||
{#if postType === 'microblog'}
|
{#if postType === 'microblog'}
|
||||||
|
|
@ -238,6 +434,15 @@
|
||||||
padding: $unit-3x;
|
padding: $unit-3x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
padding: $unit-2x;
|
||||||
|
border-radius: $unit;
|
||||||
|
margin-bottom: $unit-3x;
|
||||||
|
background-color: #fee;
|
||||||
|
color: #d33;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
.composer {
|
.composer {
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: $unit-2x;
|
border-radius: $unit-2x;
|
||||||
|
|
@ -346,4 +551,103 @@
|
||||||
color: $gray-60;
|
color: $gray-60;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.draft-banner {
|
||||||
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||||
|
border-bottom: 1px solid #f59e0b;
|
||||||
|
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
|
||||||
|
padding: $unit-3x $unit-4x;
|
||||||
|
animation: slideDown 0.3s ease-out;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
padding: $unit-2x $unit-3x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-content {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: $unit-3x;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: $unit-2x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-text {
|
||||||
|
color: #92400e;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: $unit-2x;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draft-banner-button {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #f59e0b;
|
||||||
|
color: #92400e;
|
||||||
|
padding: $unit $unit-3x;
|
||||||
|
border-radius: $unit;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #fffbeb;
|
||||||
|
border-color: #d97706;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dismiss {
|
||||||
|
background: transparent;
|
||||||
|
border-color: #fbbf24;
|
||||||
|
color: #b45309;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
border-color: #f59e0b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint('phone') {
|
||||||
|
flex: 1;
|
||||||
|
padding: $unit-1_5x $unit-2x;
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -66,14 +66,7 @@
|
||||||
>
|
>
|
||||||
<span class="status-dot"></span>
|
<span class="status-dot"></span>
|
||||||
<span class="status-label">{currentConfig.label}</span>
|
<span class="status-label">{currentConfig.label}</span>
|
||||||
<svg
|
<svg class="chevron" class:open={isOpen} width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||||
class="chevron"
|
|
||||||
class:open={isOpen}
|
|
||||||
width="12"
|
|
||||||
height="12"
|
|
||||||
viewBox="0 0 12 12"
|
|
||||||
fill="none"
|
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
d="M3 4.5L6 7.5L9 4.5"
|
d="M3 4.5L6 7.5L9 4.5"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
|
|
@ -96,12 +89,7 @@
|
||||||
|
|
||||||
{#if viewUrl && currentStatus === 'published'}
|
{#if viewUrl && currentStatus === 'published'}
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a
|
<a href={viewUrl} target="_blank" rel="noopener noreferrer" class="dropdown-item view-link">
|
||||||
href={viewUrl}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="dropdown-item view-link"
|
|
||||||
>
|
|
||||||
View on site
|
View on site
|
||||||
</a>
|
</a>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,6 @@
|
||||||
disabled = false,
|
disabled = false,
|
||||||
readonly = false,
|
readonly = false,
|
||||||
id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
|
id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
|
||||||
// eslint-disable-next-line svelte/valid-compile
|
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
|
|
@ -94,7 +93,7 @@
|
||||||
{rows}
|
{rows}
|
||||||
class={getTextareaClasses()}
|
class={getTextareaClasses()}
|
||||||
{...restProps}
|
{...restProps}
|
||||||
></textarea>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if (error || helpText || showCharCount) && !disabled}
|
{#if (error || helpText || showCharCount) && !disabled}
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@
|
||||||
let error = $state('')
|
let error = $state('')
|
||||||
let currentPage = $state(1)
|
let currentPage = $state(1)
|
||||||
let totalPages = $state(1)
|
let totalPages = $state(1)
|
||||||
|
let total = $state(0)
|
||||||
|
|
||||||
// Media selection state
|
// Media selection state
|
||||||
let selectedMediaIds = $state<Set<number>>(new Set(selectedIds))
|
let selectedMediaIds = $state<Set<number>>(new Set(selectedIds))
|
||||||
|
|
@ -136,6 +137,10 @@
|
||||||
selectedMediaIds = new Set()
|
selectedMediaIds = new Set()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getSelectedIds(): number[] {
|
||||||
|
return Array.from(selectedMediaIds)
|
||||||
|
}
|
||||||
|
|
||||||
function getSelected(): Media[] {
|
function getSelected(): Media[] {
|
||||||
return selectedMedia
|
return selectedMedia
|
||||||
}
|
}
|
||||||
|
|
@ -185,8 +190,8 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
// Watch for filter changes
|
// Watch for filter changes
|
||||||
let previousFilterType = $state<typeof filterType | undefined>(undefined)
|
let previousFilterType = filterType
|
||||||
let previousPhotographyFilter = $state<typeof photographyFilter | undefined>(undefined)
|
let previousPhotographyFilter = photographyFilter
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (
|
if (
|
||||||
|
|
@ -220,7 +225,6 @@
|
||||||
// Short delay to prevent flicker
|
// Short delay to prevent flicker
|
||||||
await new Promise((resolve) => setTimeout(resolve, 500))
|
await new Promise((resolve) => setTimeout(resolve, 500))
|
||||||
|
|
||||||
|
|
||||||
let url = `/api/media?page=${page}&limit=24`
|
let url = `/api/media?page=${page}&limit=24`
|
||||||
|
|
||||||
if (filterType !== 'all') {
|
if (filterType !== 'all') {
|
||||||
|
|
@ -253,6 +257,7 @@
|
||||||
|
|
||||||
currentPage = page
|
currentPage = page
|
||||||
totalPages = data.pagination.totalPages
|
totalPages = data.pagination.totalPages
|
||||||
|
total = data.pagination.total
|
||||||
|
|
||||||
// Update loader state
|
// Update loader state
|
||||||
if (currentPage >= totalPages) {
|
if (currentPage >= totalPages) {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
editor: Editor
|
editor: Editor
|
||||||
isOpen: boolean
|
isOpen: boolean
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
features: { textStyles?: boolean; colors?: boolean; [key: string]: unknown }
|
features: any
|
||||||
}
|
}
|
||||||
|
|
||||||
const { editor, isOpen, onClose, features }: Props = $props()
|
const { editor, isOpen, onClose, features }: Props = $props()
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { type Editor } from '@tiptap/core'
|
import { type Editor } from '@tiptap/core'
|
||||||
import { onMount, setContext } from 'svelte'
|
import { onMount, setContext } from 'svelte'
|
||||||
import { initiateEditor } from '$lib/components/edra/editor.ts'
|
import { initiateEditor } from '$lib/components/edra/editor.ts'
|
||||||
import { getEditorExtensions } from '$lib/components/edra/editor-extensions.js'
|
import { getEditorExtensions, EDITOR_PRESETS } from '$lib/components/edra/editor-extensions.js'
|
||||||
import LoaderCircle from 'lucide-svelte/icons/loader-circle'
|
import LoaderCircle from 'lucide-svelte/icons/loader-circle'
|
||||||
import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
|
import LinkMenu from '$lib/components/edra/headless/menus/link-menu.svelte'
|
||||||
import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
|
import TableRowMenu from '$lib/components/edra/headless/menus/table/table-row-menu.svelte'
|
||||||
|
|
@ -113,8 +113,8 @@
|
||||||
|
|
||||||
// Event handlers
|
// Event handlers
|
||||||
const eventHandlers = useComposerEvents({
|
const eventHandlers = useComposerEvents({
|
||||||
editor: () => editor,
|
editor,
|
||||||
mediaHandler: () => mediaHandler,
|
mediaHandler,
|
||||||
features
|
features
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -140,7 +140,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update content when editor changes
|
// Update content when editor changes
|
||||||
function handleUpdate({ editor: updatedEditor, transaction }: { editor: Editor; transaction: unknown }) {
|
function handleUpdate({ editor: updatedEditor, transaction }: any) {
|
||||||
// Dismiss link menus on typing
|
// Dismiss link menus on typing
|
||||||
linkManagerRef?.dismissOnTyping(transaction)
|
linkManagerRef?.dismissOnTyping(transaction)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,8 @@
|
||||||
let linkEditPos = $state<number | null>(null)
|
let linkEditPos = $state<number | null>(null)
|
||||||
|
|
||||||
// URL convert handlers
|
// URL convert handlers
|
||||||
export function handleShowUrlConvertDropdown(pos: number, _url: string) {
|
export function handleShowUrlConvertDropdown(pos: number, url: string) {
|
||||||
if (!editor || !editor.view) return
|
if (!editor) return
|
||||||
const coords = editor.view.coordsAtPos(pos)
|
const coords = editor.view.coordsAtPos(pos)
|
||||||
urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
|
urlConvertDropdownPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||||
urlConvertPos = pos
|
urlConvertPos = pos
|
||||||
|
|
@ -48,7 +48,7 @@
|
||||||
|
|
||||||
// Link context menu handlers
|
// Link context menu handlers
|
||||||
export function handleShowLinkContextMenu(pos: number, url: string) {
|
export function handleShowLinkContextMenu(pos: number, url: string) {
|
||||||
if (!editor || !editor.view) return
|
if (!editor) return
|
||||||
const coords = editor.view.coordsAtPos(pos)
|
const coords = editor.view.coordsAtPos(pos)
|
||||||
linkContextMenuPosition = { x: coords.left, y: coords.bottom + 5 }
|
linkContextMenuPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||||
linkContextUrl = url
|
linkContextUrl = url
|
||||||
|
|
@ -65,7 +65,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleEditLink() {
|
function handleEditLink() {
|
||||||
if (!editor || !editor.view || linkContextPos === null || !linkContextUrl) return
|
if (!editor || linkContextPos === null || !linkContextUrl) return
|
||||||
const coords = editor.view.coordsAtPos(linkContextPos)
|
const coords = editor.view.coordsAtPos(linkContextPos)
|
||||||
linkEditDialogPosition = { x: coords.left, y: coords.bottom + 5 }
|
linkEditDialogPosition = { x: coords.left, y: coords.bottom + 5 }
|
||||||
linkEditUrl = linkContextUrl
|
linkEditUrl = linkContextUrl
|
||||||
|
|
@ -133,10 +133,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dismiss dropdowns on typing
|
// Dismiss dropdowns on typing
|
||||||
export function dismissOnTyping(transaction: unknown) {
|
export function dismissOnTyping(transaction: any) {
|
||||||
if (showUrlConvertDropdown && transaction.docChanged) {
|
if (showUrlConvertDropdown && transaction.docChanged) {
|
||||||
const hasTextChange = transaction.steps.some(
|
const hasTextChange = transaction.steps.some(
|
||||||
(step: unknown) =>
|
(step: any) =>
|
||||||
step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
|
step.toJSON().stepType === 'replace' || step.toJSON().stepType === 'replaceAround'
|
||||||
)
|
)
|
||||||
if (hasTextChange) {
|
if (hasTextChange) {
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,8 @@
|
||||||
editor: Editor
|
editor: Editor
|
||||||
variant: ComposerVariant
|
variant: ComposerVariant
|
||||||
currentTextStyle: string
|
currentTextStyle: string
|
||||||
filteredCommands: unknown
|
filteredCommands: any
|
||||||
colorCommands: unknown[]
|
colorCommands: any[]
|
||||||
excludedCommands: string[]
|
excludedCommands: string[]
|
||||||
showMediaLibrary: boolean
|
showMediaLibrary: boolean
|
||||||
onTextStyleDropdownToggle: () => void
|
onTextStyleDropdownToggle: () => void
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
|
|
||||||
let {
|
let {
|
||||||
editor,
|
editor,
|
||||||
|
variant,
|
||||||
currentTextStyle,
|
currentTextStyle,
|
||||||
filteredCommands,
|
filteredCommands,
|
||||||
colorCommands,
|
colorCommands,
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { Editor } from '@tiptap/core'
|
import type { Editor } from '@tiptap/core'
|
||||||
import type { DropdownPosition, ComposerFeatures } from './types'
|
import type { DropdownPosition, ComposerFeatures } from './types'
|
||||||
|
import { mediaSelectionStore } from '$lib/stores/media-selection'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
editor: Editor
|
editor: Editor
|
||||||
position: DropdownPosition
|
position: DropdownPosition
|
||||||
features: ComposerFeatures
|
features: ComposerFeatures
|
||||||
|
albumId?: number
|
||||||
onDismiss: () => void
|
onDismiss: () => void
|
||||||
onOpenMediaLibrary: () => void
|
onOpenMediaLibrary: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
let { editor, position, features, onDismiss, onOpenMediaLibrary }: Props = $props()
|
let { editor, position, features, albumId, onDismiss, onOpenMediaLibrary }: Props = $props()
|
||||||
|
|
||||||
function insertMedia(type: string) {
|
function insertMedia(type: string) {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,12 @@
|
||||||
import type { Editor } from '@tiptap/core'
|
import type { Editor } from '@tiptap/core'
|
||||||
import type { ComposerVariant, ComposerFeatures } from './types'
|
import type { ComposerVariant, ComposerFeatures } from './types'
|
||||||
import type { EdraCommand } from '$lib/components/edra/commands/types'
|
|
||||||
import { commands } from '$lib/components/edra/commands/commands.js'
|
import { commands } from '$lib/components/edra/commands/commands.js'
|
||||||
|
|
||||||
export interface FilteredCommands {
|
export interface FilteredCommands {
|
||||||
[key: string]: {
|
[key: string]: {
|
||||||
name: string
|
name: string
|
||||||
label: string
|
label: string
|
||||||
commands: EdraCommand[]
|
commands: any[]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -27,7 +26,7 @@ export function getCurrentTextStyle(editor: Editor): string {
|
||||||
// Get filtered commands based on variant and features
|
// Get filtered commands based on variant and features
|
||||||
export function getFilteredCommands(
|
export function getFilteredCommands(
|
||||||
variant: ComposerVariant,
|
variant: ComposerVariant,
|
||||||
_features: ComposerFeatures
|
features: ComposerFeatures
|
||||||
): FilteredCommands {
|
): FilteredCommands {
|
||||||
const filtered = { ...commands }
|
const filtered = { ...commands }
|
||||||
|
|
||||||
|
|
@ -60,20 +59,20 @@ export function getFilteredCommands(
|
||||||
// Reorganize text formatting for toolbar
|
// Reorganize text formatting for toolbar
|
||||||
if (filtered['text-formatting']) {
|
if (filtered['text-formatting']) {
|
||||||
const allCommands = filtered['text-formatting'].commands
|
const allCommands = filtered['text-formatting'].commands
|
||||||
const basicFormatting: EdraCommand[] = []
|
const basicFormatting: any[] = []
|
||||||
const advancedFormatting: EdraCommand[] = []
|
const advancedFormatting: any[] = []
|
||||||
|
|
||||||
// Group basic formatting first
|
// Group basic formatting first
|
||||||
const basicOrder = ['bold', 'italic', 'underline', 'strike']
|
const basicOrder = ['bold', 'italic', 'underline', 'strike']
|
||||||
basicOrder.forEach((name) => {
|
basicOrder.forEach((name) => {
|
||||||
const cmd = allCommands.find((c) => c.name === name)
|
const cmd = allCommands.find((c: any) => c.name === name)
|
||||||
if (cmd) basicFormatting.push(cmd)
|
if (cmd) basicFormatting.push(cmd)
|
||||||
})
|
})
|
||||||
|
|
||||||
// Then link and code
|
// Then link and code
|
||||||
const advancedOrder = ['link', 'code']
|
const advancedOrder = ['link', 'code']
|
||||||
advancedOrder.forEach((name) => {
|
advancedOrder.forEach((name) => {
|
||||||
const cmd = allCommands.find((c) => c.name === name)
|
const cmd = allCommands.find((c: any) => c.name === name)
|
||||||
if (cmd) advancedFormatting.push(cmd)
|
if (cmd) advancedFormatting.push(cmd)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -98,7 +97,7 @@ export function getFilteredCommands(
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get media commands, but filter out based on features
|
// Get media commands, but filter out based on features
|
||||||
export function getMediaCommands(features: ComposerFeatures): EdraCommand[] {
|
export function getMediaCommands(features: ComposerFeatures): any[] {
|
||||||
if (!commands.media) return []
|
if (!commands.media) return []
|
||||||
|
|
||||||
let mediaCommands = [...commands.media.commands]
|
let mediaCommands = [...commands.media.commands]
|
||||||
|
|
@ -112,12 +111,12 @@ export function getMediaCommands(features: ComposerFeatures): EdraCommand[] {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get color commands
|
// Get color commands
|
||||||
export function getColorCommands(): EdraCommand[] {
|
export function getColorCommands(): any[] {
|
||||||
return commands.colors?.commands || []
|
return commands.colors?.commands || []
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get commands for bubble menu
|
// Get commands for bubble menu
|
||||||
export function getBubbleMenuCommands(): EdraCommand[] {
|
export function getBubbleMenuCommands(): any[] {
|
||||||
const textFormattingCommands = commands['text-formatting']?.commands || []
|
const textFormattingCommands = commands['text-formatting']?.commands || []
|
||||||
// Return only the essential formatting commands for bubble menu
|
// Return only the essential formatting commands for bubble menu
|
||||||
return textFormattingCommands.filter((cmd) =>
|
return textFormattingCommands.filter((cmd) =>
|
||||||
|
|
|
||||||
|
|
@ -33,12 +33,10 @@ export interface DropdownPosition {
|
||||||
left: number
|
left: number
|
||||||
}
|
}
|
||||||
|
|
||||||
import type { Media } from '@prisma/client'
|
|
||||||
|
|
||||||
export interface MediaSelectionOptions {
|
export interface MediaSelectionOptions {
|
||||||
mode: 'single' | 'multiple'
|
mode: 'single' | 'multiple'
|
||||||
fileType?: 'image' | 'video' | 'audio' | 'all'
|
fileType?: 'image' | 'video' | 'audio' | 'all'
|
||||||
albumId?: number
|
albumId?: number
|
||||||
onSelect: (media: Media | Media[]) => void
|
onSelect: (media: any) => void
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
import type { Editor, EditorView } from '@tiptap/core'
|
import type { Editor } from '@tiptap/core'
|
||||||
import type { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
|
import type { ComposerMediaHandler } from './ComposerMediaHandler.svelte'
|
||||||
import { focusEditor } from '$lib/components/edra/utils'
|
import { focusEditor } from '$lib/components/edra/utils'
|
||||||
|
|
||||||
|
|
@ -12,7 +12,7 @@ export interface UseComposerEventsOptions {
|
||||||
|
|
||||||
export function useComposerEvents(options: UseComposerEventsOptions) {
|
export function useComposerEvents(options: UseComposerEventsOptions) {
|
||||||
// Handle paste events
|
// Handle paste events
|
||||||
function handlePaste(view: EditorView, event: ClipboardEvent): boolean {
|
function handlePaste(view: any, event: ClipboardEvent): boolean {
|
||||||
const clipboardData = event.clipboardData
|
const clipboardData = event.clipboardData
|
||||||
if (!clipboardData) return false
|
if (!clipboardData) return false
|
||||||
|
|
||||||
|
|
@ -30,7 +30,7 @@ export function useComposerEvents(options: UseComposerEventsOptions) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
|
|
||||||
// Use editor commands to insert HTML content
|
// Use editor commands to insert HTML content
|
||||||
const editorInstance = options.editor
|
const editorInstance = (view as any).editor
|
||||||
if (editorInstance) {
|
if (editorInstance) {
|
||||||
editorInstance
|
editorInstance
|
||||||
.chain()
|
.chain()
|
||||||
|
|
@ -66,7 +66,7 @@ export function useComposerEvents(options: UseComposerEventsOptions) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle drag and drop for images
|
// Handle drag and drop for images
|
||||||
function handleDrop(view: EditorView, event: DragEvent): boolean {
|
function handleDrop(view: any, event: DragEvent): boolean {
|
||||||
if (!options.features.imageUpload || !options.mediaHandler) return false
|
if (!options.features.imageUpload || !options.mediaHandler) return false
|
||||||
|
|
||||||
const files = event.dataTransfer?.files
|
const files = event.dataTransfer?.files
|
||||||
|
|
|
||||||
|
|
@ -189,7 +189,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Block manipulation functions
|
// Block manipulation functions
|
||||||
function convertBlockType(type: string, attrs?: Record<string, unknown>) {
|
function convertBlockType(type: string, attrs?: any) {
|
||||||
console.log('convertBlockType called:', type, attrs)
|
console.log('convertBlockType called:', type, attrs)
|
||||||
// Use menuNode which was captured when menu was opened
|
// Use menuNode which was captured when menu was opened
|
||||||
const nodeToConvert = menuNode || currentNode
|
const nodeToConvert = menuNode || currentNode
|
||||||
|
|
@ -350,7 +350,7 @@
|
||||||
if (!nodeToUse) return
|
if (!nodeToUse) return
|
||||||
|
|
||||||
const { node, pos } = nodeToUse
|
const { node, pos } = nodeToUse
|
||||||
|
|
||||||
// Create a copy of the node
|
// Create a copy of the node
|
||||||
const nodeCopy = node.toJSON()
|
const nodeCopy = node.toJSON()
|
||||||
|
|
||||||
|
|
@ -358,27 +358,24 @@
|
||||||
// We need to find the actual position of the node in the document
|
// We need to find the actual position of the node in the document
|
||||||
const resolvedPos = editor.state.doc.resolve(pos)
|
const resolvedPos = editor.state.doc.resolve(pos)
|
||||||
let nodePos = pos
|
let nodePos = pos
|
||||||
|
|
||||||
// If we're inside a node, get the position before it
|
// If we're inside a node, get the position before it
|
||||||
if (resolvedPos.depth > 0) {
|
if (resolvedPos.depth > 0) {
|
||||||
nodePos = resolvedPos.before(resolvedPos.depth)
|
nodePos = resolvedPos.before(resolvedPos.depth)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the actual node at this position
|
// Get the actual node at this position
|
||||||
const actualNode = editor.state.doc.nodeAt(nodePos)
|
const actualNode = editor.state.doc.nodeAt(nodePos)
|
||||||
if (!actualNode) {
|
if (!actualNode) {
|
||||||
console.error('Could not find node at position', nodePos)
|
console.error('Could not find node at position', nodePos)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate the position after the node
|
// Calculate the position after the node
|
||||||
const afterPos = nodePos + actualNode.nodeSize
|
const afterPos = nodePos + actualNode.nodeSize
|
||||||
|
|
||||||
// Insert the duplicated node
|
// Insert the duplicated node
|
||||||
editor.chain()
|
editor.chain().focus().insertContentAt(afterPos, nodeCopy).run()
|
||||||
.focus()
|
|
||||||
.insertContentAt(afterPos, nodeCopy)
|
|
||||||
.run()
|
|
||||||
|
|
||||||
isMenuOpen = false
|
isMenuOpen = false
|
||||||
}
|
}
|
||||||
|
|
@ -387,24 +384,24 @@
|
||||||
const nodeToUse = menuNode || currentNode
|
const nodeToUse = menuNode || currentNode
|
||||||
if (!nodeToUse) return
|
if (!nodeToUse) return
|
||||||
|
|
||||||
const { pos } = nodeToUse
|
const { node, pos } = nodeToUse
|
||||||
|
|
||||||
// Find the actual position of the node
|
// Find the actual position of the node
|
||||||
const resolvedPos = editor.state.doc.resolve(pos)
|
const resolvedPos = editor.state.doc.resolve(pos)
|
||||||
let nodePos = pos
|
let nodePos = pos
|
||||||
|
|
||||||
// If we're inside a node, get the position before it
|
// If we're inside a node, get the position before it
|
||||||
if (resolvedPos.depth > 0) {
|
if (resolvedPos.depth > 0) {
|
||||||
nodePos = resolvedPos.before(resolvedPos.depth)
|
nodePos = resolvedPos.before(resolvedPos.depth)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get the actual node at this position
|
// Get the actual node at this position
|
||||||
const actualNode = editor.state.doc.nodeAt(nodePos)
|
const actualNode = editor.state.doc.nodeAt(nodePos)
|
||||||
if (!actualNode) {
|
if (!actualNode) {
|
||||||
console.error('Could not find node at position', nodePos)
|
console.error('Could not find node at position', nodePos)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const nodeEnd = nodePos + actualNode.nodeSize
|
const nodeEnd = nodePos + actualNode.nodeSize
|
||||||
|
|
||||||
// Set selection to the entire block
|
// Set selection to the entire block
|
||||||
|
|
@ -413,7 +410,7 @@
|
||||||
// Execute copy command
|
// Execute copy command
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const success = document.execCommand('copy')
|
const success = document.execCommand('copy')
|
||||||
|
|
||||||
// Clear selection after copy
|
// Clear selection after copy
|
||||||
editor.chain().focus().setTextSelection(nodeEnd).run()
|
editor.chain().focus().setTextSelection(nodeEnd).run()
|
||||||
|
|
||||||
|
|
@ -486,11 +483,10 @@
|
||||||
// Find the existing drag handle created by the plugin and add click listener
|
// Find the existing drag handle created by the plugin and add click listener
|
||||||
const checkForDragHandle = setInterval(() => {
|
const checkForDragHandle = setInterval(() => {
|
||||||
const existingDragHandle = document.querySelector('.drag-handle')
|
const existingDragHandle = document.querySelector('.drag-handle')
|
||||||
const element = existingDragHandle as HTMLElement & { __menuListener?: boolean }
|
if (existingDragHandle && !(existingDragHandle as any).__menuListener) {
|
||||||
if (existingDragHandle && !element.__menuListener) {
|
|
||||||
console.log('Found drag handle, adding click listener')
|
console.log('Found drag handle, adding click listener')
|
||||||
existingDragHandle.addEventListener('click', handleMenuClick)
|
existingDragHandle.addEventListener('click', handleMenuClick)
|
||||||
element.__menuListener = true
|
;(existingDragHandle as any).__menuListener = true
|
||||||
|
|
||||||
// Update our reference to use the existing drag handle
|
// Update our reference to use the existing drag handle
|
||||||
dragHandleContainer = existingDragHandle as HTMLElement
|
dragHandleContainer = existingDragHandle as HTMLElement
|
||||||
|
|
|
||||||
|
|
@ -43,13 +43,11 @@ import SlashCommandList from './headless/components/SlashCommandList.svelte'
|
||||||
// Create lowlight instance
|
// Create lowlight instance
|
||||||
const lowlight = createLowlight(all)
|
const lowlight = createLowlight(all)
|
||||||
|
|
||||||
import type { Component } from 'svelte'
|
|
||||||
|
|
||||||
export interface EditorExtensionOptions {
|
export interface EditorExtensionOptions {
|
||||||
showSlashCommands?: boolean
|
showSlashCommands?: boolean
|
||||||
onShowUrlConvertDropdown?: (pos: number, url: string) => void
|
onShowUrlConvertDropdown?: (pos: number, url: string) => void
|
||||||
onShowLinkContextMenu?: (pos: number, url: string, coords: { x: number; y: number }) => void
|
onShowLinkContextMenu?: (pos: number, url: string, coords: { x: number; y: number }) => void
|
||||||
imagePlaceholderComponent?: Component // Allow custom image placeholder component
|
imagePlaceholderComponent?: any // Allow custom image placeholder component
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getEditorExtensions(options: EditorExtensionOptions = {}): Extensions {
|
export function getEditorExtensions(options: EditorExtensionOptions = {}): Extensions {
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import * as pmView from '@tiptap/pm/view'
|
||||||
function getPmView() {
|
function getPmView() {
|
||||||
try {
|
try {
|
||||||
return pmView
|
return pmView
|
||||||
} catch (_error) {
|
} catch (error: Error) {
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import type { Component } from 'svelte'
|
||||||
import type { NodeViewProps } from '@tiptap/core'
|
import type { NodeViewProps } from '@tiptap/core'
|
||||||
|
|
||||||
export interface GalleryOptions {
|
export interface GalleryOptions {
|
||||||
HTMLAttributes: Record<string, unknown>
|
HTMLAttributes: Record<string, any>
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module '@tiptap/core' {
|
declare module '@tiptap/core' {
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@ import type { Component } from 'svelte'
|
||||||
import { SvelteNodeViewRenderer } from 'svelte-tiptap'
|
import { SvelteNodeViewRenderer } from 'svelte-tiptap'
|
||||||
|
|
||||||
export interface GalleryPlaceholderOptions {
|
export interface GalleryPlaceholderOptions {
|
||||||
HTMLAttributes: Record<string, unknown>
|
HTMLAttributes: Record<string, object>
|
||||||
onSelectImages: (images: Array<Record<string, unknown>>, editor: Editor) => void
|
onSelectImages: (images: any[], editor: Editor) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module '@tiptap/core' {
|
declare module '@tiptap/core' {
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import type { Component } from 'svelte'
|
||||||
import { SvelteNodeViewRenderer } from 'svelte-tiptap'
|
import { SvelteNodeViewRenderer } from 'svelte-tiptap'
|
||||||
|
|
||||||
export interface GeolocationExtendedOptions {
|
export interface GeolocationExtendedOptions {
|
||||||
HTMLAttributes: Record<string, unknown>
|
HTMLAttributes: Record<string, any>
|
||||||
}
|
}
|
||||||
|
|
||||||
export const GeolocationExtended = (
|
export const GeolocationExtended = (
|
||||||
|
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue