gilles/home_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(notes): ajout de liens nommés (label + url) sur les notes

Browse Source 
Backend :
- Migration 006 : colonne urls JSONB nullable sur notes.items
- Modèle NoteItem : champ urls list[dict]
- Schémas : NoteUrl (label + url avec validation http/https),
  NoteCreate/NoteUpdate/NoteResponse exposent urls

Frontend :
- api/notes.ts : interface NoteUrl + champ urls sur Note/NoteCreate
- NoteForm : section "Liens" avec ajout (libellé + URL), suppression,
  validation http/https, confirmation par Enter
- NotesPage : badge compteur liens dans metaLine (semi/collapsed),
  section liens cliquables dans le mode expanded

v0.5.13

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
gilles soulier
2026-05-30 09:47:49 +02:00
parent b084905226
commit 031708ad8f
7 changed files with 185 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/alembic/versions/006_notes_urls.py
+27
View File
@@ -0,0 +1,27 @@
"""006 - ajout colonne urls (JSONB) sur notes.items
Revision ID: 006
Revises: 005
Create Date: 2026-05-30
"""
from alembic import op
import sqlalchemy as sa
from sqlalchemy.dialects.postgresql import JSONB
revision = '006'
down_revision = '005'
branch_labels = None
depends_on = None
def upgrade():
op.add_column(
'items',
sa.Column('urls', JSONB, nullable=True),
schema='notes',
)
def downgrade():
op.drop_column('items', 'urls', schema='notes')
backend/app/models/notes.py
+1
View File
@@ -18,6 +18,7 @@ class NoteItem(Base):
tags: Mapped[list[str]] = mapped_column(ARRAY(String(50)), server_default=text("'{}'::varchar[]"))
gps_lat: Mapped[Decimal | None] = mapped_column(Numeric(10, 7))
gps_lon: Mapped[Decimal | None] = mapped_column(Numeric(10, 7))
urls: Mapped[list[dict] | None] = mapped_column(JSONB, nullable=True)
metadata_: Mapped[dict | None] = mapped_column("metadata", JSONB)
created_at: Mapped[datetime] = mapped_column(TIMESTAMP(timezone=True), server_default=text("now()"))
owner_id: Mapped[uuid.UUID | None] = mapped_column(UUID(as_uuid=True))
backend/app/schemas/notes.py
+16 -1
View File
@@ -1,6 +1,18 @@
import uuid
from datetime import datetime
from pydantic import BaseModel, ConfigDict
from pydantic import BaseModel, ConfigDict, HttpUrl, field_validator
class NoteUrl(BaseModel):
label: str
url: str
@field_validator('url')
@classmethod
def validate_url(cls, v: str) -> str:
if not v.startswith(('http://', 'https://')):
raise ValueError('URL doit commencer par http:// ou https://')
return v
class AttachmentResponse(BaseModel):
@@ -20,6 +32,7 @@ class NoteCreate(BaseModel):
tags: list[str] = []
gps_lat: float | None = None
gps_lon: float | None = None
urls: list[NoteUrl] = []
class NoteUpdate(BaseModel):
@@ -29,6 +42,7 @@ class NoteUpdate(BaseModel):
tags: list[str] | None = None
gps_lat: float | None = None
gps_lon: float | None = None
urls: list[NoteUrl] | None = None
class NoteResponse(BaseModel):
@@ -40,5 +54,6 @@ class NoteResponse(BaseModel):
tags: list[str]
gps_lat: float | None
gps_lon: float | None
urls: list[NoteUrl] = []
created_at: datetime
attachments: list[AttachmentResponse]
frontend/package.json
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "homehub-frontend",
"private": true,
"version": "0.5.12",
"version": "0.5.13",
"type": "module",
"scripts": {
"dev": "vite",
frontend/src/api/notes.ts
+7
View File
@@ -1,3 +1,8 @@
export interface NoteUrl {
label: string
url: string
}
export interface NoteAttachment {
id: string
file_path: string | null
@@ -15,6 +20,7 @@ export interface Note {
tags: string[]
gps_lat: number | null
gps_lon: number | null
urls: NoteUrl[]
created_at: string
attachments: NoteAttachment[]
}
@@ -26,6 +32,7 @@ export interface NoteCreate {
tags?: string[]
gps_lat?: number
gps_lon?: number
urls?: NoteUrl[]
}
export interface NoteFilters {
frontend/src/components/notes/NoteForm.tsx
+97 -2
View File
@@ -1,5 +1,5 @@
import { useState, useRef } from 'react'
import type { Note, NoteCreate } from '../../api/notes'
import type { Note, NoteCreate, NoteUrl } from '../../api/notes'
interface NoteFormProps {
initialValues?: Note
@@ -22,11 +22,24 @@ const inputStyle: React.CSSProperties = {
boxSizing: 'border-box',
}
const labelStyle: React.CSSProperties = {
color: 'var(--ink-3)',
fontSize: 11,
fontFamily: 'var(--font-ui)',
textTransform: 'uppercase',
letterSpacing: 0.5,
marginBottom: 6,
}
export default function NoteForm({ initialValues, onSubmit, onCancel, submitLabel = 'Créer' }: NoteFormProps) {
const [title, setTitle] = useState(initialValues?.title ?? '')
const [content, setContent] = useState(initialValues?.content ?? '')
const [category, setCategory] = useState(initialValues?.category ?? '')
const [tagInput, setTagInput] = useState(initialValues?.tags.join(', ') ?? '')
const [urls, setUrls] = useState<NoteUrl[]>(initialValues?.urls ?? [])
const [urlLabel, setUrlLabel] = useState('')
const [urlHref, setUrlHref] = useState('')
const [urlError, setUrlError] = useState<string | null>(null)
const [gpsLat, setGpsLat] = useState<number | undefined>(initialValues?.gps_lat ?? undefined)
const [gpsLon, setGpsLon] = useState<number | undefined>(initialValues?.gps_lon ?? undefined)
const [gpsLoading, setGpsLoading] = useState(false)
@@ -40,6 +53,24 @@ export default function NoteForm({ initialValues, onSubmit, onCancel, submitLabe
return raw.split(',').map(t => t.trim()).filter(Boolean)
}
function addUrl() {
const href = urlHref.trim()
const label = urlLabel.trim() || href
if (!href) return
if (!href.startsWith('http://') && !href.startsWith('https://')) {
setUrlError('URL doit commencer par http:// ou https://')
return
}
setUrls(prev => [...prev, { label, url: href }])
setUrlLabel('')
setUrlHref('')
setUrlError(null)
}
function removeUrl(idx: number) {
setUrls(prev => prev.filter((_, i) => i !== idx))
}
function handleGps() {
setGpsError(null)
if (!navigator.geolocation) {
@@ -84,6 +115,7 @@ export default function NoteForm({ initialValues, onSubmit, onCancel, submitLabe
tags: parseTags(tagInput),
gps_lat: gpsLat,
gps_lon: gpsLon,
urls: urls.length > 0 ? urls : [],
})
} catch {
setError('Erreur lors de la sauvegarde')
@@ -131,6 +163,69 @@ export default function NoteForm({ initialValues, onSubmit, onCancel, submitLabe
/>
</div>
{/* URLs */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={labelStyle}>Liens</div>
{urls.map((u, idx) => (
<div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--bg-4)', borderRadius: 8, padding: '6px 10px' }}>
<i className="fa-solid fa-link" style={{ color: 'var(--ink-4)', fontSize: 12, flexShrink: 0 }} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ color: 'var(--ink-2)', fontFamily: 'var(--font-ui)', fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{u.label}
</div>
<div style={{ color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', fontSize: 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{u.url}
</div>
</div>
<button
type="button"
onClick={() => removeUrl(idx)}
style={{ background: 'transparent', border: 'none', color: 'var(--err)', cursor: 'pointer', fontSize: 14, flexShrink: 0, padding: '2px 4px' }}
>✕</button>
</div>
))}
{/* Formulaire ajout */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ display: 'flex', gap: 6 }}>
<input
style={{ ...inputStyle, flex: 1 }}
placeholder="Libellé (ex: Tuto vidéo)"
value={urlLabel}
onChange={e => setUrlLabel(e.target.value)}
onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), addUrl())}
/>
</div>
<div style={{ display: 'flex', gap: 6 }}>
<input
style={{ ...inputStyle, flex: 1 }}
placeholder="https://…"
value={urlHref}
onChange={e => { setUrlHref(e.target.value); setUrlError(null) }}
onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), addUrl())}
type="url"
/>
<button
type="button"
onClick={addUrl}
disabled={!urlHref.trim()}
style={{
padding: '6px 14px', borderRadius: 8, border: 'none',
background: urlHref.trim() ? 'var(--accent)' : 'var(--bg-5)',
color: urlHref.trim() ? '#1d2021' : 'var(--ink-4)',
cursor: urlHref.trim() ? 'pointer' : 'default',
fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600,
minHeight: 36, flexShrink: 0,
}}
>+ Ajouter</button>
</div>
{urlError && (
<span style={{ color: 'var(--err)', fontSize: 11, fontFamily: 'var(--font-ui)' }}>{urlError}</span>
)}
</div>
</div>
{/* GPS */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
@@ -147,7 +242,7 @@ export default function NoteForm({ initialValues, onSubmit, onCancel, submitLabe
fontFamily: 'var(--font-ui)', fontSize: 13, minHeight: 36,
}}
>
<i className={`fa-solid fa-location-dot`} style={{ marginRight: 6 }} />
<i className="fa-solid fa-location-dot" style={{ marginRight: 6 }} />
{gpsLoading ? '…' : gpsLat != null ? 'GPS capturé' : 'Ajouter GPS'}
</button>
{gpsLat != null && (
frontend/src/pages/NotesPage.tsx
+36
View File
@@ -256,12 +256,47 @@ function NoteCard({ note, onEdit, onDelete, onAddPhoto, onAddAudio, onAddVideo,
{images.length > 0 && <i className="fa-solid fa-image" style={{ color: 'var(--ink-4)', fontSize: 11 }} title={`${images.length} photo(s)`} />}
{audios.length > 0 && <i className="fa-solid fa-microphone" style={{ color: 'var(--ink-4)', fontSize: 11 }} title={`${audios.length} audio(s)`} />}
{videos.length > 0 && <i className="fa-solid fa-video" style={{ color: 'var(--ink-4)', fontSize: 11 }} title={`${videos.length} vidéo(s)`} />}
{note.urls.length > 0 && (
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: 'var(--info)', fontSize: 11 }} title={`${note.urls.length} lien(s)`}>
<i className="fa-solid fa-link" style={{ fontSize: 10 }} />
{note.urls.length}
</span>
)}
{note.gps_lat != null && (
<i className="fa-solid fa-location-dot" style={{ color: 'var(--ok)', fontSize: 12 }} title={`${note.gps_lat.toFixed(4)}, ${note.gps_lon?.toFixed(4)}`} />
)}
</div>
)
const urlsSection = note.urls.length > 0 ? (
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
{note.urls.map((u, i) => (
<a
key={i}
href={u.url}
target="_blank"
rel="noopener noreferrer"
style={{
display: 'flex', alignItems: 'center', gap: 8,
background: 'var(--bg-4)', borderRadius: 8, padding: '6px 10px',
textDecoration: 'none', overflow: 'hidden',
}}
onClick={e => e.stopPropagation()}
>
<i className="fa-solid fa-arrow-up-right-from-square" style={{ color: 'var(--info)', fontSize: 11, flexShrink: 0 }} />
<div style={{ flex: 1, minWidth: 0 }}>
<div style={{ color: 'var(--ink-1)', fontFamily: 'var(--font-ui)', fontSize: 13, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{u.label}
</div>
<div style={{ color: 'var(--ink-4)', fontFamily: 'var(--font-mono)', fontSize: 10, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{u.url}
</div>
</div>
</a>
))}
</div>
) : null
const mediaSection = (
<>
{images.length > 0 && (
@@ -383,6 +418,7 @@ function NoteCard({ note, onEdit, onDelete, onAddPhoto, onAddAudio, onAddVideo,
{toggleBtn}
</div>
<div style={{ overflowWrap: 'anywhere', minWidth: 0 }}>{renderMarkdown(note.content)}</div>
{urlsSection}
{mediaSection}
{metaLine}
{actionButtons}