> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/MatthewSabia1/Joip-Web-App-2/llms.txt
> Use this file to discover all available pages before exploring further.

# Media Vault

> Organize, manage, and share your generated media files

Media Vault is your centralized file management system for all media generated by JOIP tools (Smart Captions, BabeCock Studio, etc.) and direct uploads.

## Overview

The Media Vault provides:

* **Unified Library**: All your media in one place
* **Advanced Filtering**: Search by source, date, filename, creator
* **Bulk Operations**: Select, download, delete multiple files
* **Fullscreen Viewer**: High-quality media viewing with metadata
* **Sharing**: Generate public share links for individual files
* **Organization**: Rename files, add character names, manage folders

## Accessing Your Vault

From the sidebar, click **Media Vault** to open your library.

The main interface shows:

* **Header**: Stats (total files) and quick actions
* **Search & Filters**: Find specific media
* **Grid/List View**: Toggle display mode
* **Selection Mode**: Enable bulk operations
* **Settings Panel**: Customize vault behavior

## Viewing Media

### Grid View (Default)

**Layout**:

* Responsive grid (2-6 columns depending on screen size)
* Square thumbnails with hover effects
* Category badges (Smart Caption, BabeCock, etc.)
* Action buttons on hover

**Card Information**:

* Thumbnail preview
* Filename (truncated if long)
* Creation date
* Source badge (where it was created)
* Subreddit badge (if from Reddit)

### List View

**Layout**:

* Compact rows with small thumbnails
* Full filename visible
* Sortable columns
* More items visible per page

**Best for**: Large libraries where you need to see many files at once

### Fullscreen Viewer

<Steps>
  <Step title="Open Viewer">
    Click any media item to open fullscreen viewer (if enabled in settings)

    Or click the **eye icon** on hover
  </Step>

  <Step title="Navigate">
    **Keyboard Shortcuts** (if enabled):

    * **Arrow Left/Right**: Previous/Next image
    * **+/-**: Zoom in/out
    * **0**: Reset zoom
    * **H**: Toggle UI visibility
    * **Escape**: Close viewer

    **Mouse Controls**:

    * Click navigation arrows
    * Use zoom buttons in bottom bar
    * Click outside image to toggle UI
  </Step>

  <Step title="View Metadata">
    The viewer displays (if enabled in settings):

    * **Resolution**: Image dimensions (e.g., 1920×1080)
    * **File Size**: In MB (fetched via HEAD request)
    * **Creation Date**: When file was created
    * **Source Category**: Which tool created it
    * **Subreddit**: If sourced from Reddit

    <Note>
      File size may not appear if CORS blocks the Content-Length header.
    </Note>
  </Step>

  <Step title="Quick Actions">
    Top-right action buttons:

    * **Download**: Save to device
    * **Copy Image**: Copy to clipboard
    * **Open Original**: New tab with direct image URL
    * **Toggle UI**: Hide/show controls
    * **Close**: Exit viewer (or press Escape)
  </Step>
</Steps>

## Search and Filtering

### Text Search

Search bar finds matches in:

* Filenames
* Character names
* Captions (if saved with media)
* Subreddit names
* Creator names

**Features**:

* Debounced input (300ms delay)
* Case-insensitive matching
* Real-time results
* Clear button (X) to reset

### Filter by Source

Dropdown options:

* **All**: Show all media
* **Smart Captions**: Only AI-captioned images
* **BabeCock**: Only BabeCock combinations
* **HypnoCocks**: Only HypnoCocks creations
* **Upload**: Only directly uploaded files

### Filter by Date

Dropdown options:

* **All Time**: No date filter
* **Today**: Last 24 hours
* **This Week**: Last 7 days
* **This Month**: Last 30 days
* **This Year**: Last 365 days

### Sort Options

Choose sorting:

* **Newest**: Most recent first (default)
* **Oldest**: Oldest first
* **Name A-Z**: Alphabetical ascending
* **Name Z-A**: Alphabetical descending

<Note>
  Filters and sorts persist in localStorage. Your preferences are remembered between sessions.
</Note>

## File Operations

### Individual Actions

Hover over any media card to reveal:

<CardGroup cols={2}>
  <Card title="Download" icon="download">
    Saves file to your device with proper filename and extension.
  </Card>

  <Card title="Copy Link" icon="link">
    Copies public URL to clipboard for sharing.
  </Card>

  <Card title="Rename" icon="pencil">
    Opens dialog to change filename and add character name.
  </Card>

  <Card title="Share" icon="share">
    Generates shareable link and optional community publishing.
  </Card>

  <Card title="Delete" icon="trash">
    Permanently removes file (with confirmation).
  </Card>

  <Card title="View" icon="eye">
    Opens fullscreen viewer at this item.
  </Card>
</CardGroup>

### Renaming Files

<Steps>
  <Step title="Open Rename Dialog">
    Click the **pencil icon** on any media item.
  </Step>

  <Step title="Edit Filename">
    Change the display name (without extension):

    * Original: `smart-caption-1234567890.png`
    * New name: `Goddess Blonde JOI`
    * Saved as: `Goddess Blonde JOI.png`
  </Step>

  <Step title="Add Character Name (Optional)">
    Enter a character/person name:

    * Used for filtering and search
    * Shows as purple badge on card
    * Useful for organizing by person/character

    <Note>
      Character names are searchable and help organize media by subject.
    </Note>
  </Step>

  <Step title="Save Changes">
    Click **Rename** to apply changes.

    The system:

    * Updates database record
    * Renames file in storage (maintains extension)
    * Updates all references
    * Refreshes vault view
  </Step>
</Steps>

### Sharing Files

<Steps>
  <Step title="Open Share Dialog">
    Click the **share icon** on any media item.
  </Step>

  <Step title="Configure Sharing">
    Options in share dialog:

    **Share to Community** (toggle)

    * ON: File appears in community feed (discoverable by all users)
    * OFF: File is private (only you can access)

    **Copy Share Link**

    * Generates unique public URL
    * Link works regardless of community toggle
    * Anyone with link can view

    <Warning>
      Share links are permanent and public. Anyone with the URL can view the media.
    </Warning>
  </Step>

  <Step title="Manage Sharing">
    After sharing:

    * **Unshare**: Click share icon again, toggle community off
    * **Copy Link Again**: Share icon shows "Shared" state, click to copy link
    * **View in Community**: Navigate to Community to see your shared media
  </Step>
</Steps>

## Bulk Operations

<Steps>
  <Step title="Enter Selection Mode">
    Click the **Select** button in the header.

    **Changes**:

    * Checkboxes appear on all media cards
    * Bulk action toolbar appears
    * Individual hover actions disabled
  </Step>

  <Step title="Select Items">
    Choose files using:

    **Click Selection**

    * Click checkbox on each item
    * Click again to deselect

    **Select All**

    * Click **Select All** button in toolbar
    * Selects all items in current filter

    **Rubber-Band Selection** (mouse drag)

    * Click and hold on empty space
    * Drag to create selection box
    * Release to select all items within box

    <Note>
      Selection count appears in toolbar: "5 items selected"
    </Note>
  </Step>

  <Step title="Perform Bulk Action">
    Available actions:

    **Bulk Download**

    * Creates ZIP file with all selected media
    * Server-side ZIP creation (handles large selections)
    * Download as: `joip-media-{date}.zip`
    * Progress indicator during creation

    **Bulk Delete**

    * Permanently removes all selected files
    * Confirmation dialog shows count
    * Processes deletions sequentially
    * Shows success/failure summary

    <Warning>
      Bulk delete is permanent and cannot be undone. Review your selection carefully.
    </Warning>
  </Step>

  <Step title="Exit Selection Mode">
    Click **Cancel** or **Done** to exit selection mode.

    Selection state is cleared and normal view returns.
  </Step>
</Steps>

## Uploading Media

### Direct Upload

Add files directly to your vault:

<Steps>
  <Step title="Drag and Drop">
    Drag image files anywhere in the vault:

    * Overlay appears with drop zone
    * Release to upload
    * Supports multiple files (up to 50)
  </Step>

  <Step title="Browse Files">
    Or click **Upload** button:

    * File picker opens
    * Select 1-50 images
    * Supported: JPEG, PNG, GIF, WebP
  </Step>

  <Step title="Monitor Progress">
    Upload progress shows:

    * Current file count (e.g., "15 / 30")
    * Progress bar
    * Success/failure summary on completion
  </Step>
</Steps>

**Limitations**:

* Maximum 50 files per upload
* No file size limit per file
* Batch processing in groups of 10

<Note>
  Uploads automatically switch filter to "All" or "Upload" so you can see your new files immediately.
</Note>

## Vault Settings

Click the **settings icon** (gear) to customize vault behavior:

### Display Settings

<AccordionGroup>
  <Accordion title="View Mode">
    * **Grid**: Thumbnail grid (default)
    * **List**: Compact list view

    Saved to localStorage.
  </Accordion>

  <Accordion title="Items Per Page">
    Choose pagination size:

    * 12, 24, 48, 96 items

    Default: 24 items
  </Accordion>

  <Accordion title="Hover Overlay">
    Toggle filename overlay on hover:

    * ON: Filename appears on hover
    * OFF: Filename always hidden
  </Accordion>

  <Accordion title="Category Badge">
    Toggle source badges:

    * ON: Shows "Smart Caption", "BabeCock", etc.
    * OFF: Badges hidden
  </Accordion>

  <Accordion title="Always Show Actions">
    Action button visibility:

    * ON: Buttons always visible
    * OFF: Buttons appear on hover only
  </Accordion>
</AccordionGroup>

### Viewer Settings

<AccordionGroup>
  <Accordion title="Open Fullscreen on Click">
    Click behavior:

    * ON: Clicking card opens fullscreen viewer
    * OFF: Clicking card does nothing (use eye icon)
  </Accordion>

  <Accordion title="Show Metadata in Viewer">
    Display technical info:

    * ON: Shows resolution, file size, date
    * OFF: Metadata hidden
  </Accordion>

  <Accordion title="Keyboard Shortcuts">
    Enable keyboard navigation:

    * ON: Arrow keys, zoom keys, etc. work
    * OFF: Keyboard shortcuts disabled
  </Accordion>
</AccordionGroup>

### Advanced Settings

<AccordionGroup>
  <Accordion title="Auto Load More">
    Infinite scroll behavior:

    * ON: Automatically loads next page when scrolling to bottom
    * OFF: Manual "Load More" button

    <Note>
      Auto-load reduces clicks but may impact performance on slow connections.
    </Note>
  </Accordion>

  <Accordion title="Group By">
    Organize items:

    * **None**: Flat list (default)
    * **Month**: Group by creation month

    Grouping shows headers like "December 2024", "January 2025".
  </Accordion>
</AccordionGroup>

## Best Practices

<AccordionGroup>
  <Accordion title="Organization">
    **Keep vault organized**:

    * Rename files with descriptive names immediately
    * Add character names for easy filtering
    * Delete failed or unwanted generations regularly
    * Use consistent naming conventions (e.g., "Goddess Name - Theme")
  </Accordion>

  <Accordion title="Storage Management">
    **Avoid clutter**:

    * Review and delete duplicates
    * Use bulk delete for cleanup sessions
    * Export important files to local storage as backup
    * Share best creations to community
  </Accordion>

  <Accordion title="Sharing Strategy">
    **Selective sharing**:

    * Only share your best work to community
    * Use private share links for specific recipients
    * Review shared items periodically
    * Unshare outdated or low-quality content
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Files not loading">
    **Possible causes**:

    * Network connection lost
    * Supabase storage paused/unavailable
    * Too many files (pagination issue)

    **Solutions**:

    * Check internet connection
    * Verify Supabase project status
    * Reduce items per page in settings
    * Try refreshing the page
  </Accordion>

  <Accordion title="Upload fails">
    **Possible causes**:

    * File size too large
    * Storage quota exceeded
    * Network timeout
    * Invalid file format

    **Solutions**:

    * Compress images before upload
    * Delete old files to free space
    * Try smaller batch sizes
    * Verify file format is supported
  </Accordion>

  <Accordion title="Bulk download creates empty ZIP">
    **Possible causes**:

    * Server timeout (too many files)
    * Network interruption
    * Invalid file references

    **Solutions**:

    * Select fewer files (try 10-20 at a time)
    * Check internet connection stability
    * Try downloading individually if issue persists
  </Accordion>

  <Accordion title="Fullscreen viewer not showing metadata">
    **Possible causes**:

    * CORS blocking Content-Length header
    * Metadata setting disabled
    * File missing metadata

    **Solutions**:

    * Enable "Show Metadata in Viewer" in settings
    * Resolution always appears; file size may be unavailable due to CORS
    * This is expected behavior for some CDN configurations
  </Accordion>
</AccordionGroup>

## Integration

Media Vault integrates with:

* **Smart Captions**: Save generated captions
* **BabeCock Studio**: Save combinations
* **Community**: Share vault items to community feed
* **Sessions**: Use vault images in custom sessions

## Related Features

* [Smart Captions](/features/smart-captions) - Generate captioned images
* [BabeCock Studio](/features/babecock-studio) - Create image combinations
* [Community](/features/community) - Share and discover media