Initial commit: Aurora Moments self-hosted photo/video sharing platform
Django/DRF + PostgreSQL/Redis/Celery backend with accounts, library, moments, and notifications apps; React/TypeScript/Vite frontend with Instagram-style sidebar nav, feed, profiles, nested comment replies, notifications, and photo/video upload with ffmpeg-generated posters. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
Kris
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
dist
|
||||
.env
|
||||
@@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json* ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 5173
|
||||
|
||||
CMD ["npm", "run", "dev", "--", "--host"]
|
||||
@@ -0,0 +1,32 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the Oxlint configuration
|
||||
|
||||
If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||
"plugins": ["react", "typescript", "oxc"],
|
||||
"options": {
|
||||
"typeAware": true
|
||||
},
|
||||
"rules": {
|
||||
"react/rules-of-hooks": "error",
|
||||
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Aurora Moments</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1385
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "web",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "oxlint",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.8",
|
||||
"react-dom": "^19.2.8",
|
||||
"react-router-dom": "^7.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.13.3",
|
||||
"@types/react": "^19.2.17",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.4",
|
||||
"oxlint": "^1.75.0",
|
||||
"typescript": "~6.0.2",
|
||||
"vite": "^8.2.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
@@ -0,0 +1,81 @@
|
||||
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
|
||||
import { ProtectedRoute } from './components/ProtectedRoute'
|
||||
import { Sidebar } from './components/Sidebar'
|
||||
import { AuthProvider } from './context/AuthContext'
|
||||
import { CreatePage } from './pages/CreatePage'
|
||||
import { FeedPage } from './pages/FeedPage'
|
||||
import { LibraryPage } from './pages/LibraryPage'
|
||||
import { LoginPage } from './pages/LoginPage'
|
||||
import { NotificationsPage } from './pages/NotificationsPage'
|
||||
import { ProfilePage } from './pages/ProfilePage'
|
||||
import { RegisterPage } from './pages/RegisterPage'
|
||||
import { SettingsPage } from './pages/SettingsPage'
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AuthProvider>
|
||||
<div className="app-shell">
|
||||
<Sidebar />
|
||||
<main className="app-main">
|
||||
<Routes>
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<FeedPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/create"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<CreatePage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/library"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<LibraryPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/notifications"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<NotificationsPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/profile/:username"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<ProfilePage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/settings"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<SettingsPage />
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</AuthProvider>
|
||||
</BrowserRouter>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,22 @@
|
||||
import { api } from './client'
|
||||
import type { Profile, User } from './types'
|
||||
|
||||
export function getProfile(username: string): Promise<Profile> {
|
||||
return api.get<Profile>(`/api/accounts/users/${username}/`)
|
||||
}
|
||||
|
||||
export function updateProfile(data: { display_name?: string; bio?: string; avatar?: File }): Promise<User> {
|
||||
const formData = new FormData()
|
||||
if (data.display_name !== undefined) formData.append('display_name', data.display_name)
|
||||
if (data.bio !== undefined) formData.append('bio', data.bio)
|
||||
if (data.avatar) formData.append('avatar', data.avatar)
|
||||
return api.patch<User>('/api/accounts/me/', formData)
|
||||
}
|
||||
|
||||
export function followUser(userId: number): Promise<{ id: number }> {
|
||||
return api.post<{ id: number }>('/api/accounts/follows/', { following_id: userId })
|
||||
}
|
||||
|
||||
export function unfollowUser(followId: number): Promise<void> {
|
||||
return api.delete(`/api/accounts/follows/${followId}/`)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { api, tokenStorage } from './client'
|
||||
import type { User } from './types'
|
||||
|
||||
interface TokenPair {
|
||||
access: string
|
||||
refresh: string
|
||||
}
|
||||
|
||||
export async function login(email: string, password: string): Promise<void> {
|
||||
const tokens = await api.post<TokenPair>('/api/auth/token/', { email, password })
|
||||
tokenStorage.set(tokens.access, tokens.refresh)
|
||||
}
|
||||
|
||||
export async function register(email: string, username: string, password: string): Promise<void> {
|
||||
await api.post<User>('/api/accounts/register/', { email, username, password })
|
||||
await login(email, password)
|
||||
}
|
||||
|
||||
export function logout(): void {
|
||||
tokenStorage.clear()
|
||||
}
|
||||
|
||||
export function getMe(): Promise<User> {
|
||||
return api.get<User>('/api/accounts/me/')
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000'
|
||||
|
||||
const ACCESS_TOKEN_KEY = 'aurora_access_token'
|
||||
const REFRESH_TOKEN_KEY = 'aurora_refresh_token'
|
||||
|
||||
export const tokenStorage = {
|
||||
getAccess: () => localStorage.getItem(ACCESS_TOKEN_KEY),
|
||||
getRefresh: () => localStorage.getItem(REFRESH_TOKEN_KEY),
|
||||
set: (access: string, refresh: string) => {
|
||||
localStorage.setItem(ACCESS_TOKEN_KEY, access)
|
||||
localStorage.setItem(REFRESH_TOKEN_KEY, refresh)
|
||||
},
|
||||
clear: () => {
|
||||
localStorage.removeItem(ACCESS_TOKEN_KEY)
|
||||
localStorage.removeItem(REFRESH_TOKEN_KEY)
|
||||
},
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
status: number
|
||||
body: unknown
|
||||
|
||||
constructor(status: number, body: unknown) {
|
||||
super(`API error ${status}`)
|
||||
this.status = status
|
||||
this.body = body
|
||||
}
|
||||
}
|
||||
|
||||
// Called when a refresh attempt fails outright (refresh token missing,
|
||||
// expired, or revoked) so the app can drop back to a logged-out state.
|
||||
let onAuthFailure: (() => void) | null = null
|
||||
|
||||
export function setAuthFailureHandler(handler: () => void): void {
|
||||
onAuthFailure = handler
|
||||
}
|
||||
|
||||
// Access tokens are short-lived (30 min, see SIMPLE_JWT in api/config/settings.py).
|
||||
// Concurrent requests that all hit a 401 at once should trigger a single
|
||||
// refresh call, not one each — this promise is shared across them.
|
||||
let refreshPromise: Promise<string | null> | null = null
|
||||
|
||||
async function refreshAccessToken(): Promise<string | null> {
|
||||
const refresh = tokenStorage.getRefresh()
|
||||
if (!refresh) return null
|
||||
|
||||
if (!refreshPromise) {
|
||||
refreshPromise = fetch(`${API_BASE_URL}/api/auth/token/refresh/`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ refresh }),
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (!response.ok) return null
|
||||
const body = await response.json()
|
||||
tokenStorage.set(body.access, body.refresh ?? refresh)
|
||||
return body.access as string
|
||||
})
|
||||
.catch(() => null)
|
||||
.finally(() => {
|
||||
refreshPromise = null
|
||||
})
|
||||
}
|
||||
|
||||
return refreshPromise
|
||||
}
|
||||
|
||||
async function request<T>(path: string, options: RequestInit = {}, isRetry = false): Promise<T> {
|
||||
const access = tokenStorage.getAccess()
|
||||
const headers = new Headers(options.headers)
|
||||
if (access) headers.set('Authorization', `Bearer ${access}`)
|
||||
const isFormData = options.body instanceof FormData
|
||||
if (!isFormData && options.body) headers.set('Content-Type', 'application/json')
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}${path}`, { ...options, headers })
|
||||
|
||||
if (response.status === 401 && !isRetry) {
|
||||
const newAccess = await refreshAccessToken()
|
||||
if (newAccess) return request<T>(path, options, true)
|
||||
|
||||
tokenStorage.clear()
|
||||
onAuthFailure?.()
|
||||
}
|
||||
|
||||
if (response.status === 204) return undefined as T
|
||||
|
||||
const body = await response.json().catch(() => undefined)
|
||||
if (!response.ok) throw new ApiError(response.status, body)
|
||||
return body as T
|
||||
}
|
||||
|
||||
export const api = {
|
||||
get: <T>(path: string) => request<T>(path),
|
||||
post: <T>(path: string, data?: unknown) =>
|
||||
request<T>(path, { method: 'POST', body: data instanceof FormData ? data : JSON.stringify(data) }),
|
||||
patch: <T>(path: string, data?: unknown) =>
|
||||
request<T>(path, { method: 'PATCH', body: data instanceof FormData ? data : JSON.stringify(data) }),
|
||||
delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { api } from './client'
|
||||
import type { LibraryItem, Paginated } from './types'
|
||||
|
||||
export function listLibraryItems(): Promise<Paginated<LibraryItem>> {
|
||||
return api.get<Paginated<LibraryItem>>('/api/library/items/')
|
||||
}
|
||||
|
||||
export function uploadLibraryItem(file: File): Promise<LibraryItem> {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
formData.append('media_type', file.type.startsWith('video') ? 'video' : 'photo')
|
||||
formData.append('original_filename', file.name)
|
||||
return api.post<LibraryItem>('/api/library/items/', formData)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { api } from './client'
|
||||
import type { Audience, Comment, Moment, Paginated, Reaction } from './types'
|
||||
|
||||
export function listFeed(): Promise<Paginated<Moment>> {
|
||||
return api.get<Paginated<Moment>>('/api/moments/')
|
||||
}
|
||||
|
||||
export function listUserMoments(username: string): Promise<Paginated<Moment>> {
|
||||
return api.get<Paginated<Moment>>(`/api/moments/?owner__username=${encodeURIComponent(username)}`)
|
||||
}
|
||||
|
||||
export function shareMoment(params: {
|
||||
caption: string
|
||||
location?: string
|
||||
audience: Audience
|
||||
libraryItemIds: string[]
|
||||
}): Promise<Moment> {
|
||||
return api.post<Moment>('/api/moments/', {
|
||||
caption: params.caption,
|
||||
location: params.location ?? '',
|
||||
audience: params.audience,
|
||||
library_item_ids: params.libraryItemIds,
|
||||
})
|
||||
}
|
||||
|
||||
export function listComments(momentId: number): Promise<Paginated<Comment>> {
|
||||
return api.get<Paginated<Comment>>(`/api/moments/${momentId}/comments/`)
|
||||
}
|
||||
|
||||
export function addComment(momentId: number, body: string, parentId?: number): Promise<Comment> {
|
||||
return api.post<Comment>(`/api/moments/${momentId}/comments/`, {
|
||||
body,
|
||||
...(parentId ? { parent: parentId } : {}),
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteComment(momentId: number, commentId: number): Promise<void> {
|
||||
return api.delete(`/api/moments/${momentId}/comments/${commentId}/`)
|
||||
}
|
||||
|
||||
export function addReaction(momentId: number): Promise<Reaction> {
|
||||
return api.post<Reaction>(`/api/moments/${momentId}/reactions/`, { reaction_type: 'like' })
|
||||
}
|
||||
|
||||
export function removeReaction(momentId: number, reactionId: number): Promise<void> {
|
||||
return api.delete(`/api/moments/${momentId}/reactions/${reactionId}/`)
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { api } from './client'
|
||||
import type { AppNotification, Paginated } from './types'
|
||||
|
||||
export function listNotifications(): Promise<Paginated<AppNotification>> {
|
||||
return api.get<Paginated<AppNotification>>('/api/notifications/')
|
||||
}
|
||||
|
||||
export function getUnreadCount(): Promise<{ unread_count: number }> {
|
||||
return api.get<{ unread_count: number }>('/api/notifications/unread-count/')
|
||||
}
|
||||
|
||||
export function markAllNotificationsRead(): Promise<void> {
|
||||
return api.post<void>('/api/notifications/mark-read/')
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
export interface User {
|
||||
id: number
|
||||
username: string
|
||||
display_name: string
|
||||
bio: string
|
||||
avatar: string | null
|
||||
is_private: boolean
|
||||
date_joined: string
|
||||
}
|
||||
|
||||
export interface MediaRendition {
|
||||
kind: 'thumbnail' | 'feed' | 'large'
|
||||
file: string
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface LibraryItem {
|
||||
id: string
|
||||
file: string
|
||||
media_type: 'photo' | 'video'
|
||||
original_filename: string
|
||||
file_size: number
|
||||
width: number | null
|
||||
height: number | null
|
||||
duration_seconds: number | null
|
||||
captured_at: string | null
|
||||
camera_make: string
|
||||
camera_model: string
|
||||
processing_status: 'pending' | 'processing' | 'ready' | 'failed'
|
||||
renditions: MediaRendition[]
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface MomentItem {
|
||||
id: number
|
||||
library_item: LibraryItem
|
||||
order: number
|
||||
}
|
||||
|
||||
export type Audience = 'public' | 'followers' | 'friends' | 'family' | 'custom' | 'only_me'
|
||||
|
||||
export interface Moment {
|
||||
id: number
|
||||
owner: User
|
||||
caption: string
|
||||
location: string
|
||||
audience: Audience
|
||||
items: MomentItem[]
|
||||
comment_count: number
|
||||
reaction_count: number
|
||||
viewer_reaction_id: number | null
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface Comment {
|
||||
id: number
|
||||
moment: number
|
||||
author: User
|
||||
parent: number | null
|
||||
body: string
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface Reaction {
|
||||
id: number
|
||||
moment: number
|
||||
user: User
|
||||
reaction_type: 'like'
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export type FollowStatus = 'pending' | 'accepted'
|
||||
|
||||
export interface Profile extends User {
|
||||
follower_count: number
|
||||
following_count: number
|
||||
viewer_follow_id: number | null
|
||||
viewer_follow_status: FollowStatus | null
|
||||
}
|
||||
|
||||
export type NotificationVerb = 'like' | 'comment' | 'reply'
|
||||
|
||||
export interface AppNotification {
|
||||
id: number
|
||||
actor: User
|
||||
verb: NotificationVerb
|
||||
moment_id: number
|
||||
comment_id: number | null
|
||||
is_read: boolean
|
||||
created_at: string
|
||||
}
|
||||
|
||||
export interface Paginated<T> {
|
||||
count: number
|
||||
next: string | null
|
||||
previous: string | null
|
||||
results: T[]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,7 @@
|
||||
export function Avatar({ user }: { user: { username: string; avatar: string | null } }) {
|
||||
return user.avatar ? (
|
||||
<img src={user.avatar} alt={user.username} className="avatar" />
|
||||
) : (
|
||||
<span className="avatar">{user.username.slice(0, 1).toUpperCase()}</span>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
import { useState } from 'react'
|
||||
import type { FormEvent } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { addComment, addReaction, listComments, removeReaction } from '../api/moments'
|
||||
import type { Comment, Moment, MomentItem } from '../api/types'
|
||||
import { Avatar } from './Avatar'
|
||||
import { formatRelativeTime } from '../utils/formatRelativeTime'
|
||||
|
||||
function itemImageUrl(item: MomentItem): string {
|
||||
const rendition = item.library_item.renditions.find((r) => r.kind === 'feed')
|
||||
return rendition?.file ?? item.library_item.file
|
||||
}
|
||||
|
||||
function itemPosterUrl(item: MomentItem): string | undefined {
|
||||
return item.library_item.renditions.find((r) => r.kind === 'feed')?.file
|
||||
}
|
||||
|
||||
function MomentCarousel({ moment }: { moment: Moment }) {
|
||||
const [index, setIndex] = useState(0)
|
||||
const items = moment.items
|
||||
|
||||
if (items.length === 0) return null
|
||||
|
||||
const goTo = (next: number) => setIndex((next + items.length) % items.length)
|
||||
const current = items[index]
|
||||
|
||||
return (
|
||||
<div className="moment-carousel">
|
||||
{current.library_item.media_type === 'video' ? (
|
||||
<video key={current.id} src={current.library_item.file} poster={itemPosterUrl(current)} controls playsInline />
|
||||
) : (
|
||||
<img src={itemImageUrl(current)} alt={moment.caption} />
|
||||
)}
|
||||
{items.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="carousel-arrow carousel-arrow-prev"
|
||||
onClick={() => goTo(index - 1)}
|
||||
aria-label="Previous photo"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="carousel-arrow carousel-arrow-next"
|
||||
onClick={() => goTo(index + 1)}
|
||||
aria-label="Next photo"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
<div className="carousel-dots">
|
||||
{items.map((item, i) => (
|
||||
<span key={item.id} className={i === index ? 'carousel-dot carousel-dot-active' : 'carousel-dot'} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function MomentCard({ moment }: { moment: Moment }) {
|
||||
const [reactionId, setReactionId] = useState(moment.viewer_reaction_id)
|
||||
const [reactionCount, setReactionCount] = useState(moment.reaction_count)
|
||||
const [reacting, setReacting] = useState(false)
|
||||
|
||||
const [commentsOpen, setCommentsOpen] = useState(false)
|
||||
const [commentsLoaded, setCommentsLoaded] = useState(false)
|
||||
const [comments, setComments] = useState<Comment[]>([])
|
||||
const [commentCount, setCommentCount] = useState(moment.comment_count)
|
||||
const [newComment, setNewComment] = useState('')
|
||||
const [submittingComment, setSubmittingComment] = useState(false)
|
||||
|
||||
const [replyTarget, setReplyTarget] = useState<{ parentId: number; username: string } | null>(null)
|
||||
const [replyBody, setReplyBody] = useState('')
|
||||
const [submittingReply, setSubmittingReply] = useState(false)
|
||||
|
||||
const liked = reactionId !== null
|
||||
|
||||
const toggleLike = async () => {
|
||||
if (reacting) return
|
||||
setReacting(true)
|
||||
try {
|
||||
if (liked && reactionId !== null) {
|
||||
await removeReaction(moment.id, reactionId)
|
||||
setReactionId(null)
|
||||
setReactionCount((count) => count - 1)
|
||||
} else {
|
||||
const reaction = await addReaction(moment.id)
|
||||
setReactionId(reaction.id)
|
||||
setReactionCount((count) => count + 1)
|
||||
}
|
||||
} finally {
|
||||
setReacting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleComments = async () => {
|
||||
const opening = !commentsOpen
|
||||
setCommentsOpen(opening)
|
||||
if (opening && !commentsLoaded) {
|
||||
const page = await listComments(moment.id)
|
||||
setComments(page.results)
|
||||
setCommentsLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
const submitComment = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
const body = newComment.trim()
|
||||
if (!body || submittingComment) return
|
||||
setSubmittingComment(true)
|
||||
try {
|
||||
const comment = await addComment(moment.id, body)
|
||||
setComments((existing) => [...existing, comment])
|
||||
setCommentCount((count) => count + 1)
|
||||
setNewComment('')
|
||||
} finally {
|
||||
setSubmittingComment(false)
|
||||
}
|
||||
}
|
||||
|
||||
const startReply = (parentId: number, username: string) => {
|
||||
setReplyTarget({ parentId, username })
|
||||
setReplyBody(`@${username} `)
|
||||
}
|
||||
|
||||
const cancelReply = () => {
|
||||
setReplyTarget(null)
|
||||
setReplyBody('')
|
||||
}
|
||||
|
||||
const submitReply = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
const body = replyBody.trim()
|
||||
if (!body || !replyTarget || submittingReply) return
|
||||
setSubmittingReply(true)
|
||||
try {
|
||||
const reply = await addComment(moment.id, body, replyTarget.parentId)
|
||||
setComments((existing) => [...existing, reply])
|
||||
setCommentCount((count) => count + 1)
|
||||
cancelReply()
|
||||
} finally {
|
||||
setSubmittingReply(false)
|
||||
}
|
||||
}
|
||||
|
||||
const topLevelComments = comments.filter((comment) => comment.parent === null)
|
||||
const repliesByParent = new Map<number, Comment[]>()
|
||||
for (const comment of comments) {
|
||||
if (comment.parent === null) continue
|
||||
const existing = repliesByParent.get(comment.parent) ?? []
|
||||
existing.push(comment)
|
||||
repliesByParent.set(comment.parent, existing)
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="moment-card">
|
||||
<header>
|
||||
<Link to={`/profile/${moment.owner.username}`} className="moment-author">
|
||||
<Avatar user={moment.owner} />@{moment.owner.username}
|
||||
</Link>
|
||||
<span className="moment-audience">{formatRelativeTime(moment.created_at)}</span>
|
||||
</header>
|
||||
<MomentCarousel moment={moment} />
|
||||
{moment.caption && <p className="moment-caption">{moment.caption}</p>}
|
||||
<footer>
|
||||
<button
|
||||
type="button"
|
||||
className={liked ? 'reaction-button reaction-button-active' : 'reaction-button'}
|
||||
onClick={toggleLike}
|
||||
disabled={reacting}
|
||||
>
|
||||
{liked ? '♥' : '♡'} {reactionCount}
|
||||
</button>
|
||||
<button type="button" className="reaction-button" onClick={toggleComments}>
|
||||
💬 {commentCount}
|
||||
</button>
|
||||
</footer>
|
||||
{commentsOpen && (
|
||||
<div className="moment-comments">
|
||||
{topLevelComments.map((comment) => (
|
||||
<div key={comment.id} className="moment-comment-thread">
|
||||
<p className="moment-comment">
|
||||
<Link to={`/profile/${comment.author.username}`} className="moment-comment-author">
|
||||
<Avatar user={comment.author} />@{comment.author.username}
|
||||
</Link>{' '}
|
||||
{comment.body}
|
||||
<button
|
||||
type="button"
|
||||
className="moment-comment-reply-link"
|
||||
onClick={() => startReply(comment.id, comment.author.username)}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
</p>
|
||||
{(repliesByParent.get(comment.id) ?? []).map((reply) => (
|
||||
<p key={reply.id} className="moment-comment moment-comment-reply">
|
||||
<Link to={`/profile/${reply.author.username}`} className="moment-comment-author">
|
||||
<Avatar user={reply.author} />@{reply.author.username}
|
||||
</Link>{' '}
|
||||
{reply.body}
|
||||
<button
|
||||
type="button"
|
||||
className="moment-comment-reply-link"
|
||||
onClick={() => startReply(comment.id, reply.author.username)}
|
||||
>
|
||||
Reply
|
||||
</button>
|
||||
</p>
|
||||
))}
|
||||
{replyTarget?.parentId === comment.id && (
|
||||
<form className="moment-comment-form moment-reply-form" onSubmit={submitReply}>
|
||||
<input
|
||||
type="text"
|
||||
value={replyBody}
|
||||
onChange={(e) => setReplyBody(e.target.value)}
|
||||
disabled={submittingReply}
|
||||
autoFocus
|
||||
/>
|
||||
<button type="submit" disabled={submittingReply || !replyBody.trim()}>
|
||||
Reply
|
||||
</button>
|
||||
<button type="button" className="composer-cancel" onClick={cancelReply}>
|
||||
Cancel
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{comments.length === 0 && <p className="moment-comments-empty">No comments yet.</p>}
|
||||
<form className="moment-comment-form" onSubmit={submitComment}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add a comment…"
|
||||
value={newComment}
|
||||
onChange={(e) => setNewComment(e.target.value)}
|
||||
disabled={submittingComment}
|
||||
/>
|
||||
<button type="submit" disabled={submittingComment || !newComment.trim()}>
|
||||
Post
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { Navigate } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
export function ProtectedRoute({ children }: { children: ReactNode }) {
|
||||
const { user, loading } = useAuth()
|
||||
|
||||
if (loading) return <div className="page-loading">Loading…</div>
|
||||
if (!user) return <Navigate to="/login" replace />
|
||||
return <>{children}</>
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link, NavLink, useNavigate } from 'react-router-dom'
|
||||
import { getUnreadCount } from '../api/notifications'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { Avatar } from './Avatar'
|
||||
import { CreateIcon, HomeIcon, LibraryIcon, LogoutIcon, NotificationsIcon } from './icons'
|
||||
|
||||
const linkClassName = ({ isActive }: { isActive: boolean }) =>
|
||||
isActive ? 'sidebar-link sidebar-link-active' : 'sidebar-link'
|
||||
|
||||
export function Sidebar() {
|
||||
const { user, logout } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [unreadCount, setUnreadCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
if (!user) return
|
||||
let cancelled = false
|
||||
const poll = () => {
|
||||
getUnreadCount()
|
||||
.then(({ unread_count }) => {
|
||||
if (!cancelled) setUnreadCount(unread_count)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
poll()
|
||||
const interval = setInterval(poll, 15000)
|
||||
return () => {
|
||||
cancelled = true
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, [user])
|
||||
|
||||
if (!user) return null
|
||||
|
||||
return (
|
||||
<nav className="sidebar">
|
||||
<Link to="/" className="sidebar-brand">
|
||||
<img src="/logo.png" alt="Aurora Moments" className="sidebar-logo" />
|
||||
<span className="sidebar-brand-full">Aurora Moments</span>
|
||||
</Link>
|
||||
<div className="sidebar-links-center">
|
||||
<NavLink to="/" end className={linkClassName}>
|
||||
<HomeIcon />
|
||||
<span>Home</span>
|
||||
</NavLink>
|
||||
<NavLink to="/create" className={linkClassName}>
|
||||
<CreateIcon />
|
||||
<span>Create</span>
|
||||
</NavLink>
|
||||
<NavLink to="/library" className={linkClassName}>
|
||||
<LibraryIcon />
|
||||
<span>Library</span>
|
||||
</NavLink>
|
||||
<NavLink to="/notifications" className={linkClassName}>
|
||||
<span className="sidebar-icon-wrap">
|
||||
<NotificationsIcon />
|
||||
{unreadCount > 0 && <span className="sidebar-badge">{unreadCount > 9 ? '9+' : unreadCount}</span>}
|
||||
</span>
|
||||
<span>Notifications</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
<div className="sidebar-bottom">
|
||||
<NavLink to={`/profile/${user.username}`} className={linkClassName}>
|
||||
<Avatar user={user} />
|
||||
<span>Profile</span>
|
||||
</NavLink>
|
||||
<button
|
||||
type="button"
|
||||
className="sidebar-link sidebar-logout"
|
||||
onClick={() => {
|
||||
logout()
|
||||
navigate('/login')
|
||||
}}
|
||||
>
|
||||
<LogoutIcon />
|
||||
<span>Log out</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
type IconProps = { className?: string }
|
||||
|
||||
export function HomeIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<path d="M3 9.5 12 3l9 6.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5Z" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function CreateIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<rect x="3" y="3" width="18" height="18" rx="4" />
|
||||
<path d="M12 8v8M8 12h8" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function LibraryIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||||
<path d="m21 15-5-5L5 21" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function NotificationsIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<path
|
||||
d="M12 21c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2Zm6-6v-5a6 6 0 0 0-5-5.917V3a1 1 0 1 0-2 0v1.083A6 6 0 0 0 6 10v5l-1.7 1.7A1 1 0 0 0 5 18h14a1 1 0 0 0 .7-1.7L18 15Z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function VideoIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<path d="m9.5 8.5 6 3.5-6 3.5v-7Z" fill="currentColor" strokeLinejoin="round" />
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function LogoutIcon({ className }: IconProps) {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className={className}>
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="m16 17 5-5-5-5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21 12H9" strokeLinecap="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { createContext, useCallback, useContext, useEffect, useState } from 'react'
|
||||
import type { ReactNode } from 'react'
|
||||
import * as authApi from '../api/auth'
|
||||
import { setAuthFailureHandler, tokenStorage } from '../api/client'
|
||||
import type { User } from '../api/types'
|
||||
|
||||
interface AuthContextValue {
|
||||
user: User | null
|
||||
loading: boolean
|
||||
login: (email: string, password: string) => Promise<void>
|
||||
register: (email: string, username: string, password: string) => Promise<void>
|
||||
logout: () => void
|
||||
refreshUser: () => Promise<void>
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextValue | undefined>(undefined)
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
const refreshMe = useCallback(async () => {
|
||||
if (!tokenStorage.getAccess()) {
|
||||
setUser(null)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
try {
|
||||
setUser(await authApi.getMe())
|
||||
} catch {
|
||||
tokenStorage.clear()
|
||||
setUser(null)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
refreshMe()
|
||||
}, [refreshMe])
|
||||
|
||||
// Fires when a request's 401 survives a refresh attempt (refresh token
|
||||
// missing/expired/revoked) — drop back to logged-out state so
|
||||
// ProtectedRoute sends the user to /login instead of the app silently
|
||||
// failing every request.
|
||||
useEffect(() => {
|
||||
setAuthFailureHandler(() => setUser(null))
|
||||
return () => setAuthFailureHandler(() => {})
|
||||
}, [])
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
await authApi.login(email, password)
|
||||
await refreshMe()
|
||||
}
|
||||
|
||||
const register = async (email: string, username: string, password: string) => {
|
||||
await authApi.register(email, username, password)
|
||||
await refreshMe()
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
authApi.logout()
|
||||
setUser(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, register, logout, refreshUser: refreshMe }}>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useAuth(): AuthContextValue {
|
||||
const ctx = useContext(AuthContext)
|
||||
if (!ctx) throw new Error('useAuth must be used within AuthProvider')
|
||||
return ctx
|
||||
}
|
||||
@@ -0,0 +1,766 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--aurora-bg: #0b0d12;
|
||||
--aurora-surface: #14161d;
|
||||
--aurora-border: #262a35;
|
||||
--aurora-text: #e8e9ee;
|
||||
--aurora-text-dim: #9199a8;
|
||||
--aurora-accent: #7c5cff;
|
||||
--aurora-accent-2: #ff5c9e;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--aurora-bg);
|
||||
color: var(--aurora-text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--aurora-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.2rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
background: var(--aurora-surface);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem;
|
||||
color: var(--aurora-text);
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 0 1.5rem 1.75rem;
|
||||
background: var(--aurora-bg);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
transition: width 0.2s ease;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.sidebar:hover {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-brand-full {
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-brand-full {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-links-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.9rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--aurora-text);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
background: var(--aurora-surface);
|
||||
}
|
||||
|
||||
.sidebar-link-active {
|
||||
background: var(--aurora-surface);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.sidebar-link svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-link span:not(.sidebar-icon-wrap):not(.sidebar-badge) {
|
||||
opacity: 0;
|
||||
transform: translateX(-8px);
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
}
|
||||
|
||||
.sidebar:hover .sidebar-link span:not(.sidebar-icon-wrap):not(.sidebar-badge) {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-icon-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.sidebar-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -6px;
|
||||
background: var(--aurora-accent-2);
|
||||
color: white;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
border-radius: 999px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
color: white;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-main {
|
||||
min-width: 0;
|
||||
max-width: 720px;
|
||||
margin-left: max(120px, calc(50% - 360px));
|
||||
margin-right: auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.create-panel {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-loading,
|
||||
.feed-empty {
|
||||
text-align: center;
|
||||
color: var(--aurora-text-dim);
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.notification-row-unread {
|
||||
background: var(--aurora-surface);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.notification-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.notification-link .avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notification-time {
|
||||
color: var(--aurora-text-dim);
|
||||
font-size: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.auth-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
padding: 2rem;
|
||||
background: var(--aurora-surface);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.auth-form h1 {
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.auth-tagline {
|
||||
margin: 0 0 0.5rem;
|
||||
color: var(--aurora-text-dim);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
color: var(--aurora-accent-2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.library-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.library-subtitle {
|
||||
color: var(--aurora-text-dim);
|
||||
}
|
||||
|
||||
.library-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.library-tile {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--aurora-surface);
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.grid-video-badge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: white;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
|
||||
}
|
||||
|
||||
.library-tile-selected {
|
||||
border-color: var(--aurora-accent);
|
||||
}
|
||||
|
||||
.library-tile img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.library-tile-pending {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--aurora-text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.moment-card {
|
||||
background: var(--aurora-surface);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.moment-card header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.9rem 1rem;
|
||||
color: var(--aurora-text-dim);
|
||||
}
|
||||
|
||||
.moment-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.moment-carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.moment-carousel img,
|
||||
.moment-carousel video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.carousel-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(11, 13, 18, 0.6);
|
||||
color: var(--aurora-text);
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.carousel-arrow-prev {
|
||||
left: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel-arrow-next {
|
||||
right: 0.6rem;
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
position: absolute;
|
||||
bottom: 0.7rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.carousel-dot-active {
|
||||
background: var(--aurora-text);
|
||||
}
|
||||
|
||||
.moment-caption {
|
||||
padding: 0.9rem 1rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.moment-card footer {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
padding: 0.9rem 1rem;
|
||||
}
|
||||
|
||||
.reaction-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 999px;
|
||||
padding: 0.35rem 0.8rem;
|
||||
color: var(--aurora-text-dim);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.reaction-button-active {
|
||||
color: var(--aurora-accent-2);
|
||||
border-color: var(--aurora-accent-2);
|
||||
}
|
||||
|
||||
.moment-comments {
|
||||
border-top: 1px solid var(--aurora-border);
|
||||
padding: 0.9rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.moment-comment-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.moment-comment {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.moment-comment-reply {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.moment-comment-reply-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--aurora-text-dim);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.moment-comment-reply-link:hover {
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.moment-reply-form {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.moment-comment-author {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
color: var(--aurora-accent);
|
||||
font-weight: 600;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.moment-comments-empty {
|
||||
margin: 0;
|
||||
color: var(--aurora-text-dim);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.moment-comment-form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.moment-comment-form input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.selection-bar {
|
||||
position: sticky;
|
||||
bottom: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
background: var(--aurora-surface);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 12px;
|
||||
padding: 0.9rem 1.2rem;
|
||||
}
|
||||
|
||||
.selection-bar div {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.composer-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid var(--aurora-border);
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.composer-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.composer-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: var(--aurora-surface);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.composer-panel h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.composer-thumbs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.composer-thumb {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.composer-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.composer-panel textarea {
|
||||
background: var(--aurora-bg);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.8rem;
|
||||
color: var(--aurora-text);
|
||||
font-family: inherit;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.composer-audience-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
color: var(--aurora-text-dim);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.composer-audience-label select {
|
||||
background: var(--aurora-bg);
|
||||
border: 1px solid var(--aurora-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.7rem;
|
||||
color: var(--aurora-text);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.composer-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
flex-shrink: 0;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
}
|
||||
|
||||
.profile-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.profile-name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.profile-name-row h1 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin: 0.2rem 0 0;
|
||||
color: var(--aurora-text-dim);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.profile-counts {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
margin-top: 0.9rem;
|
||||
color: var(--aurora-text-dim);
|
||||
}
|
||||
|
||||
.profile-counts strong {
|
||||
color: var(--aurora-text);
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.profile-grid-tile {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: var(--aurora-surface);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-grid-tile img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.profile-modal {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.settings-avatar {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: linear-gradient(135deg, var(--aurora-accent), var(--aurora-accent-2));
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.settings-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.settings-avatar-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: white;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.settings-avatar:hover .settings-avatar-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,158 @@
|
||||
import { useState } from 'react'
|
||||
import type { FormEvent } from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
import { listLibraryItems } from '../api/library'
|
||||
import { shareMoment } from '../api/moments'
|
||||
import type { Audience, LibraryItem } from '../api/types'
|
||||
import { VideoIcon } from '../components/icons'
|
||||
|
||||
const AUDIENCE_OPTIONS: { value: Audience; label: string }[] = [
|
||||
{ value: 'public', label: 'Public' },
|
||||
{ value: 'followers', label: 'Followers' },
|
||||
{ value: 'friends', label: 'Friends' },
|
||||
{ value: 'family', label: 'Family' },
|
||||
{ value: 'only_me', label: 'Only me' },
|
||||
]
|
||||
|
||||
function thumbnailUrl(item: LibraryItem): string {
|
||||
const thumb = item.renditions.find((r) => r.kind === 'thumbnail')
|
||||
return thumb?.file ?? item.file
|
||||
}
|
||||
|
||||
interface CreatePageState {
|
||||
preselectedItems?: LibraryItem[]
|
||||
}
|
||||
|
||||
export function CreatePage() {
|
||||
const location = useLocation()
|
||||
const navigate = useNavigate()
|
||||
const preselected = (location.state as CreatePageState | null)?.preselectedItems ?? []
|
||||
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(preselected.map((item) => item.id)))
|
||||
const [selectedItems, setSelectedItems] = useState<LibraryItem[]>(preselected)
|
||||
|
||||
const [pickerOpen, setPickerOpen] = useState(false)
|
||||
const [pickerItems, setPickerItems] = useState<LibraryItem[]>([])
|
||||
const [pickerLoaded, setPickerLoaded] = useState(false)
|
||||
|
||||
const [caption, setCaption] = useState('')
|
||||
const [locationText, setLocationText] = useState('')
|
||||
const [audience, setAudience] = useState<Audience>('public')
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const openPicker = async () => {
|
||||
setPickerOpen((open) => !open)
|
||||
if (!pickerLoaded) {
|
||||
const page = await listLibraryItems()
|
||||
setPickerItems(page.results.filter((item) => item.processing_status === 'ready'))
|
||||
setPickerLoaded(true)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleItem = (item: LibraryItem) => {
|
||||
setSelectedIds((existing) => {
|
||||
const next = new Set(existing)
|
||||
if (next.has(item.id)) next.delete(item.id)
|
||||
else next.add(item.id)
|
||||
return next
|
||||
})
|
||||
setSelectedItems((items) => {
|
||||
const alreadySelected = items.some((existingItem) => existingItem.id === item.id)
|
||||
return alreadySelected ? items.filter((existingItem) => existingItem.id !== item.id) : [...items, item]
|
||||
})
|
||||
}
|
||||
|
||||
const canSubmit = caption.trim().length > 0 || selectedItems.length > 0
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
if (!canSubmit || submitting) return
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
await shareMoment({
|
||||
caption,
|
||||
location: locationText,
|
||||
audience,
|
||||
libraryItemIds: selectedItems.map((item) => item.id),
|
||||
})
|
||||
navigate('/')
|
||||
} catch {
|
||||
setError('Could not share this Moment. Try again.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="composer-panel create-panel" onSubmit={handleSubmit}>
|
||||
<h1>Create a Moment</h1>
|
||||
{selectedItems.length > 0 && (
|
||||
<div className="composer-thumbs">
|
||||
{selectedItems.map((item) => (
|
||||
<div key={item.id} className="composer-thumb">
|
||||
<img src={thumbnailUrl(item)} alt={item.original_filename} />
|
||||
{item.media_type === 'video' && <VideoIcon className="grid-video-badge" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<textarea
|
||||
placeholder="What's on your mind?"
|
||||
value={caption}
|
||||
onChange={(e) => setCaption(e.target.value)}
|
||||
rows={4}
|
||||
autoFocus
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Location (optional)"
|
||||
value={locationText}
|
||||
onChange={(e) => setLocationText(e.target.value)}
|
||||
/>
|
||||
<label className="composer-audience-label">
|
||||
Who can see this
|
||||
<select value={audience} onChange={(e) => setAudience(e.target.value as Audience)}>
|
||||
{AUDIENCE_OPTIONS.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button type="button" className="composer-cancel" onClick={openPicker}>
|
||||
{pickerOpen ? 'Hide photos' : selectedItems.length > 0 ? 'Change photos' : 'Add photos (optional)'}
|
||||
</button>
|
||||
|
||||
{pickerOpen && (
|
||||
<div className="library-grid">
|
||||
{pickerLoaded && pickerItems.length === 0 && (
|
||||
<p className="profile-bio">No photos in your library yet.</p>
|
||||
)}
|
||||
{pickerItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={selectedIds.has(item.id) ? 'library-tile library-tile-selected' : 'library-tile'}
|
||||
onClick={() => toggleItem(item)}
|
||||
>
|
||||
<img src={thumbnailUrl(item)} alt={item.original_filename} />
|
||||
{item.media_type === 'video' && <VideoIcon className="grid-video-badge" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="auth-error">{error}</p>}
|
||||
<div className="composer-actions">
|
||||
<button type="button" className="composer-cancel" onClick={() => navigate(-1)} disabled={submitting}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={submitting || !canSubmit}>
|
||||
{submitting ? 'Sharing…' : 'Share'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { MomentCard } from '../components/MomentCard'
|
||||
import { listFeed } from '../api/moments'
|
||||
import type { Moment } from '../api/types'
|
||||
|
||||
export function FeedPage() {
|
||||
const [moments, setMoments] = useState<Moment[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
listFeed()
|
||||
.then((page) => setMoments(page.results))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
if (loading) return <div className="page-loading">Loading feed…</div>
|
||||
|
||||
if (moments.length === 0) {
|
||||
return (
|
||||
<div className="feed-empty">
|
||||
<p>No Moments yet. Share something from your Library to get started.</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="feed-page">
|
||||
{moments.map((moment) => (
|
||||
<MomentCard key={moment.id} moment={moment} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { listLibraryItems, uploadLibraryItem } from '../api/library'
|
||||
import type { LibraryItem } from '../api/types'
|
||||
import { VideoIcon } from '../components/icons'
|
||||
|
||||
function thumbnailUrl(item: LibraryItem): string {
|
||||
const thumb = item.renditions.find((r) => r.kind === 'thumbnail')
|
||||
return thumb?.file ?? item.file
|
||||
}
|
||||
|
||||
export function LibraryPage() {
|
||||
const navigate = useNavigate()
|
||||
const [items, setItems] = useState<LibraryItem[]>([])
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
const page = await listLibraryItems()
|
||||
setItems(page.results)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
refresh()
|
||||
}, [refresh])
|
||||
|
||||
// Renditions are generated asynchronously by the Celery worker, so a
|
||||
// freshly uploaded item comes back 'pending'/'processing' at first. Poll
|
||||
// until nothing is left in flight, then stop.
|
||||
useEffect(() => {
|
||||
const hasUnsettledItems = items.some(
|
||||
(item) => item.processing_status === 'pending' || item.processing_status === 'processing'
|
||||
)
|
||||
if (!hasUnsettledItems) return
|
||||
|
||||
const interval = setInterval(refresh, 2000)
|
||||
return () => clearInterval(interval)
|
||||
}, [items, refresh])
|
||||
|
||||
const handleFiles = async (files: FileList | null) => {
|
||||
if (!files || files.length === 0) return
|
||||
setUploading(true)
|
||||
try {
|
||||
for (const file of Array.from(files)) {
|
||||
await uploadLibraryItem(file)
|
||||
}
|
||||
await refresh()
|
||||
} finally {
|
||||
setUploading(false)
|
||||
if (fileInputRef.current) fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSelected = (item: LibraryItem) => {
|
||||
if (item.processing_status !== 'ready') return
|
||||
setSelectedIds((existing) => {
|
||||
const next = new Set(existing)
|
||||
if (next.has(item.id)) next.delete(item.id)
|
||||
else next.add(item.id)
|
||||
return next
|
||||
})
|
||||
}
|
||||
|
||||
const selectedItems = items.filter((item) => selectedIds.has(item.id))
|
||||
|
||||
return (
|
||||
<div className="library-page">
|
||||
<div className="library-header">
|
||||
<h1>My Library</h1>
|
||||
<p className="library-subtitle">Private by default. Nothing here is shared until you pick a Moment.</p>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
multiple
|
||||
onChange={(e) => handleFiles(e.target.files)}
|
||||
disabled={uploading}
|
||||
/>
|
||||
{uploading && <span>Uploading…</span>}
|
||||
</div>
|
||||
<div className="library-grid">
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={
|
||||
selectedIds.has(item.id) ? 'library-tile library-tile-selected' : 'library-tile'
|
||||
}
|
||||
onClick={() => toggleSelected(item)}
|
||||
>
|
||||
{item.processing_status === 'ready' ? (
|
||||
<>
|
||||
<img src={thumbnailUrl(item)} alt={item.original_filename} />
|
||||
{item.media_type === 'video' && <VideoIcon className="grid-video-badge" />}
|
||||
</>
|
||||
) : (
|
||||
<div className="library-tile-pending">{item.processing_status}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{selectedItems.length > 0 && (
|
||||
<div className="selection-bar">
|
||||
<span>{selectedItems.length} selected</span>
|
||||
<div>
|
||||
<button type="button" className="composer-cancel" onClick={() => setSelectedIds(new Set())}>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate('/create', { state: { preselectedItems: selectedItems } })}
|
||||
>
|
||||
Share a Moment
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { useState } from 'react'
|
||||
import type { FormEvent } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
export function LoginPage() {
|
||||
const { login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await login(email, password)
|
||||
navigate('/')
|
||||
} catch {
|
||||
setError('Invalid email or password.')
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<form className="auth-form" onSubmit={handleSubmit}>
|
||||
<h1>Aurora Moments</h1>
|
||||
<p className="auth-tagline">Your photos. Your moments. Your people.</p>
|
||||
<input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{error && <p className="auth-error">{error}</p>}
|
||||
<button type="submit" disabled={submitting}>
|
||||
{submitting ? 'Signing in…' : 'Sign in'}
|
||||
</button>
|
||||
<p>
|
||||
No account? <Link to="/register">Create one</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { listNotifications, markAllNotificationsRead } from '../api/notifications'
|
||||
import type { AppNotification } from '../api/types'
|
||||
import { Avatar } from '../components/Avatar'
|
||||
import { formatRelativeTime } from '../utils/formatRelativeTime'
|
||||
|
||||
function verbText(notification: AppNotification): string {
|
||||
switch (notification.verb) {
|
||||
case 'like':
|
||||
return 'liked your post'
|
||||
case 'comment':
|
||||
return 'commented on your post'
|
||||
case 'reply':
|
||||
return 'replied to your comment'
|
||||
}
|
||||
}
|
||||
|
||||
export function NotificationsPage() {
|
||||
const [notifications, setNotifications] = useState<AppNotification[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
listNotifications()
|
||||
.then((page) => setNotifications(page.results))
|
||||
.finally(() => setLoading(false))
|
||||
markAllNotificationsRead()
|
||||
}, [])
|
||||
|
||||
if (loading) return <p className="page-loading">Loading…</p>
|
||||
|
||||
return (
|
||||
<div className="notifications-page">
|
||||
<h1>Notifications</h1>
|
||||
{notifications.length === 0 ? (
|
||||
<p className="feed-empty">No notifications yet.</p>
|
||||
) : (
|
||||
<ul className="notifications-list">
|
||||
{notifications.map((notification) => (
|
||||
<li
|
||||
key={notification.id}
|
||||
className={notification.is_read ? 'notification-row' : 'notification-row notification-row-unread'}
|
||||
>
|
||||
<Link to={`/profile/${notification.actor.username}`} className="notification-link">
|
||||
<Avatar user={notification.actor} />
|
||||
<span className="notification-text">
|
||||
<strong>@{notification.actor.username}</strong> {verbText(notification)}
|
||||
</span>
|
||||
<span className="notification-time">{formatRelativeTime(notification.created_at)}</span>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { followUser, getProfile, unfollowUser } from '../api/accounts'
|
||||
import { listUserMoments } from '../api/moments'
|
||||
import type { Moment, Profile } from '../api/types'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
import { MomentCard } from '../components/MomentCard'
|
||||
import { VideoIcon } from '../components/icons'
|
||||
|
||||
function gridThumbnailUrl(moment: Moment): string | null {
|
||||
const first = moment.items[0]
|
||||
if (!first) return null
|
||||
const rendition = first.library_item.renditions.find((r) => r.kind === 'thumbnail')
|
||||
return rendition?.file ?? first.library_item.file
|
||||
}
|
||||
|
||||
function gridIsVideo(moment: Moment): boolean {
|
||||
return moment.items[0]?.library_item.media_type === 'video'
|
||||
}
|
||||
|
||||
export function ProfilePage() {
|
||||
const { username } = useParams<{ username: string }>()
|
||||
const navigate = useNavigate()
|
||||
const { user: viewer } = useAuth()
|
||||
const [profile, setProfile] = useState<Profile | null>(null)
|
||||
const [moments, setMoments] = useState<Moment[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [followBusy, setFollowBusy] = useState(false)
|
||||
const [selectedMoment, setSelectedMoment] = useState<Moment | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!username) return
|
||||
setLoading(true)
|
||||
Promise.all([getProfile(username), listUserMoments(username)])
|
||||
.then(([profileData, momentsPage]) => {
|
||||
setProfile(profileData)
|
||||
setMoments(momentsPage.results)
|
||||
})
|
||||
.finally(() => setLoading(false))
|
||||
}, [username])
|
||||
|
||||
const toggleFollow = async () => {
|
||||
if (!profile || followBusy) return
|
||||
setFollowBusy(true)
|
||||
try {
|
||||
if (profile.viewer_follow_id !== null) {
|
||||
await unfollowUser(profile.viewer_follow_id)
|
||||
setProfile({
|
||||
...profile,
|
||||
viewer_follow_id: null,
|
||||
viewer_follow_status: null,
|
||||
follower_count: profile.follower_count - 1,
|
||||
})
|
||||
} else {
|
||||
const follow = await followUser(profile.id)
|
||||
setProfile({
|
||||
...profile,
|
||||
viewer_follow_id: follow.id,
|
||||
viewer_follow_status: profile.is_private ? 'pending' : 'accepted',
|
||||
follower_count: profile.is_private ? profile.follower_count : profile.follower_count + 1,
|
||||
})
|
||||
}
|
||||
} finally {
|
||||
setFollowBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) return <div className="page-loading">Loading profile…</div>
|
||||
if (!profile) return <div className="page-loading">User not found.</div>
|
||||
|
||||
const isOwnProfile = viewer?.username === profile.username
|
||||
const followLabel =
|
||||
profile.viewer_follow_status === 'accepted'
|
||||
? 'Following'
|
||||
: profile.viewer_follow_status === 'pending'
|
||||
? 'Requested'
|
||||
: 'Follow'
|
||||
|
||||
return (
|
||||
<div className="profile-page">
|
||||
<header className="profile-header">
|
||||
<div className="profile-avatar">
|
||||
{profile.avatar ? (
|
||||
<img src={profile.avatar} alt={profile.username} />
|
||||
) : (
|
||||
profile.username.slice(0, 1).toUpperCase()
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-info">
|
||||
<div className="profile-name-row">
|
||||
<h1>@{profile.username}</h1>
|
||||
{isOwnProfile ? (
|
||||
<button type="button" className="composer-cancel" onClick={() => navigate('/settings')}>
|
||||
Edit profile
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className={followLabel === 'Follow' ? '' : 'composer-cancel'}
|
||||
onClick={toggleFollow}
|
||||
disabled={followBusy}
|
||||
>
|
||||
{followLabel}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{profile.bio && <p className="profile-bio">{profile.bio}</p>}
|
||||
<div className="profile-counts">
|
||||
<span>
|
||||
<strong>{moments.length}</strong> posts
|
||||
</span>
|
||||
<span>
|
||||
<strong>{profile.follower_count}</strong> followers
|
||||
</span>
|
||||
<span>
|
||||
<strong>{profile.following_count}</strong> following
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{moments.length === 0 ? (
|
||||
<p className="feed-empty">No Moments shared yet.</p>
|
||||
) : (
|
||||
<div className="profile-grid">
|
||||
{moments.map((moment) => {
|
||||
const thumb = gridThumbnailUrl(moment)
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={moment.id}
|
||||
className="profile-grid-tile"
|
||||
onClick={() => setSelectedMoment(moment)}
|
||||
>
|
||||
{thumb && <img src={thumb} alt={moment.caption} />}
|
||||
{gridIsVideo(moment) && <VideoIcon className="grid-video-badge" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedMoment && (
|
||||
<div className="composer-backdrop" onClick={() => setSelectedMoment(null)}>
|
||||
<div className="profile-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<MomentCard moment={selectedMoment} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useState } from 'react'
|
||||
import type { FormEvent } from 'react'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { ApiError } from '../api/client'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
export function RegisterPage() {
|
||||
const { register } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [email, setEmail] = useState('')
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
setError(null)
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await register(email, username, password)
|
||||
navigate('/')
|
||||
} catch (err) {
|
||||
if (err instanceof ApiError) {
|
||||
setError(JSON.stringify(err.body))
|
||||
} else {
|
||||
setError('Could not create account.')
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<form className="auth-form" onSubmit={handleSubmit}>
|
||||
<h1>Create your account</h1>
|
||||
<input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} required />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Username"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
/>
|
||||
{error && <p className="auth-error">{error}</p>}
|
||||
<button type="submit" disabled={submitting}>
|
||||
{submitting ? 'Creating…' : 'Create account'}
|
||||
</button>
|
||||
<p>
|
||||
Already have an account? <Link to="/login">Sign in</Link>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { useRef, useState } from 'react'
|
||||
import type { ChangeEvent, FormEvent } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { updateProfile } from '../api/accounts'
|
||||
import { useAuth } from '../context/AuthContext'
|
||||
|
||||
export function SettingsPage() {
|
||||
const { user, refreshUser } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const [displayName, setDisplayName] = useState(user?.display_name ?? '')
|
||||
const [bio, setBio] = useState(user?.bio ?? '')
|
||||
const [avatarFile, setAvatarFile] = useState<File | null>(null)
|
||||
const [avatarPreview, setAvatarPreview] = useState<string | null>(null)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const avatarInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
if (!user) return null
|
||||
|
||||
const handleAvatarChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0]
|
||||
if (!file) return
|
||||
setAvatarFile(file)
|
||||
if (avatarPreview) URL.revokeObjectURL(avatarPreview)
|
||||
setAvatarPreview(URL.createObjectURL(file))
|
||||
}
|
||||
|
||||
const handleSubmit = async (event: FormEvent) => {
|
||||
event.preventDefault()
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
try {
|
||||
await updateProfile({ display_name: displayName, bio, avatar: avatarFile ?? undefined })
|
||||
await refreshUser()
|
||||
navigate(`/profile/${user.username}`)
|
||||
} catch {
|
||||
setError('Could not save changes.')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const avatarSrc = avatarPreview ?? user.avatar
|
||||
|
||||
return (
|
||||
<div className="auth-page">
|
||||
<form className="auth-form" onSubmit={handleSubmit}>
|
||||
<h1>Edit profile</h1>
|
||||
<button
|
||||
type="button"
|
||||
className="settings-avatar"
|
||||
onClick={() => avatarInputRef.current?.click()}
|
||||
>
|
||||
{avatarSrc ? (
|
||||
<img src={avatarSrc} alt="Profile" />
|
||||
) : (
|
||||
<span>{user.username.slice(0, 1).toUpperCase()}</span>
|
||||
)}
|
||||
<span className="settings-avatar-overlay">Change photo</span>
|
||||
</button>
|
||||
<input
|
||||
ref={avatarInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleAvatarChange}
|
||||
hidden
|
||||
/>
|
||||
<label className="composer-audience-label">
|
||||
Name
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
placeholder="Your full name"
|
||||
/>
|
||||
</label>
|
||||
<label className="composer-audience-label">
|
||||
Bio
|
||||
<textarea
|
||||
value={bio}
|
||||
onChange={(e) => setBio(e.target.value)}
|
||||
rows={3}
|
||||
placeholder="Tell people about yourself"
|
||||
/>
|
||||
</label>
|
||||
{error && <p className="auth-error">{error}</p>}
|
||||
<div className="composer-actions">
|
||||
<button type="button" className="composer-cancel" onClick={() => navigate(-1)} disabled={saving}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={saving}>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
const UNITS: [seconds: number, label: string][] = [
|
||||
[60, 'sec'],
|
||||
[60 * 60, 'min'],
|
||||
[60 * 60 * 24, 'hr'],
|
||||
[60 * 60 * 24 * 7, 'day'],
|
||||
[60 * 60 * 24 * 30, 'wk'],
|
||||
[60 * 60 * 24 * 365, 'mth'],
|
||||
]
|
||||
|
||||
export function formatRelativeTime(dateString: string): string {
|
||||
const elapsedSeconds = Math.floor((Date.now() - new Date(dateString).getTime()) / 1000)
|
||||
if (elapsedSeconds < 60) return 'just now'
|
||||
|
||||
let previousThreshold = 1
|
||||
for (const [threshold, label] of UNITS) {
|
||||
if (elapsedSeconds < threshold) {
|
||||
const value = Math.floor(elapsedSeconds / previousThreshold)
|
||||
return `${value} ${label}${value === 1 ? '' : 's'} ago`
|
||||
}
|
||||
previousThreshold = threshold
|
||||
}
|
||||
|
||||
const years = Math.floor(elapsedSeconds / (60 * 60 * 24 * 365))
|
||||
return `${years} yr${years === 1 ? '' : 's'} ago`
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023", "DOM"],
|
||||
"module": "esnext",
|
||||
"types": ["vite/client"],
|
||||
"allowArbitraryExtensions": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "es2023",
|
||||
"lib": ["ES2023"],
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"module": "nodenext",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user