merge(08-03): Favorites widget with backend persistence
This commit is contained in:
@@ -0,0 +1,172 @@
|
|||||||
|
---
|
||||||
|
phase: 08-dashboard-widgets-vollimplementierung
|
||||||
|
plan: "03"
|
||||||
|
subsystem: dashboard-widgets
|
||||||
|
tags: [favorites, widget, tdd, dashboard, persistence, ssrf, i18n, icons]
|
||||||
|
status: complete
|
||||||
|
|
||||||
|
dependency_graph:
|
||||||
|
requires:
|
||||||
|
- 08-01 (wireFavoritesWidget, WIDGET_CONSTRAINTS.favorites, i18n keys)
|
||||||
|
- 08-02 (no direct dep, wave-3 parallel)
|
||||||
|
provides:
|
||||||
|
- FavoritesWidget component (add/edit/delete, list/grid, letter fallback)
|
||||||
|
- FavoriteLink Prisma model (userId/tenantId/widgetId scoped)
|
||||||
|
- FavoritesModule NestJS (CRUD + SSRF icon discovery)
|
||||||
|
- favorites-api.ts client (fetchFavorites/createFavorite/updateFavorite/deleteFavorite)
|
||||||
|
- wireFavoritesWidget() now connected in page.tsx
|
||||||
|
affects:
|
||||||
|
- apps/api/prisma/schema.prisma
|
||||||
|
- apps/api/src/app.module.ts
|
||||||
|
- apps/web/src/app/(portal)/page.tsx
|
||||||
|
|
||||||
|
tech_stack:
|
||||||
|
added: []
|
||||||
|
patterns:
|
||||||
|
- TDD Red/Green cycle (FavoritesWidget behavioral contract)
|
||||||
|
- SSRF protection ported from personal-dashboard/favorite-icons.ts
|
||||||
|
- redirect: 'manual' with per-hop DNS check (T-08-05)
|
||||||
|
- userId + widgetId scoping for all DB queries (T-08-06 / Pitfall 3)
|
||||||
|
- useEffect dep array excludes t() to prevent re-fetch on each render
|
||||||
|
- letter fallback span always in DOM (img layered on top via absolute positioning)
|
||||||
|
|
||||||
|
key_files:
|
||||||
|
created:
|
||||||
|
- apps/api/src/favorites/favorites.module.ts
|
||||||
|
- apps/api/src/favorites/favorites.controller.ts
|
||||||
|
- apps/api/src/favorites/favorites.service.ts
|
||||||
|
- apps/api/src/favorites/icon-discovery.service.ts
|
||||||
|
- apps/api/src/favorites/dto/create-favorite.dto.ts
|
||||||
|
- apps/api/src/favorites/dto/update-favorite.dto.ts
|
||||||
|
- apps/web/src/lib/favorites-api.ts
|
||||||
|
- apps/web/src/components/dashboard/widgets/favorites-widget.tsx
|
||||||
|
- apps/web/src/components/dashboard/widgets/favorites-widget.test.tsx
|
||||||
|
modified:
|
||||||
|
- apps/api/prisma/schema.prisma (FavoriteLink model added)
|
||||||
|
- apps/api/src/app.module.ts (FavoritesModule registered)
|
||||||
|
- apps/web/src/app/(portal)/page.tsx (wireFavoritesWidget added)
|
||||||
|
|
||||||
|
decisions:
|
||||||
|
- "useEffect deps: [instanceId] only — t() mock creates new fn ref on each render, causing re-fetch loops in tests; excluded intentionally"
|
||||||
|
- "dangerouslySetInnerHTML comment-only occurrences (2) are explanation comments, not actual usage — XSS threat T-08-07 mitigated"
|
||||||
|
- "Letter fallback span always rendered (absolute positioned), img layered on top and hidden via onError — avoids flash-of-no-icon"
|
||||||
|
- "Sync act() + waitFor() pattern in tests — async act() hangs when component uses void async handlers; waitFor polls until promise chain settles"
|
||||||
|
|
||||||
|
metrics:
|
||||||
|
duration: "~25 minutes"
|
||||||
|
completed: "2026-07-01"
|
||||||
|
tasks_completed: 3
|
||||||
|
tests_added: 7
|
||||||
|
files_created: 9
|
||||||
|
files_modified: 3
|
||||||
|
---
|
||||||
|
|
||||||
|
# Phase 08 Plan 03: Favorites Widget Summary
|
||||||
|
|
||||||
|
Favorites-Widget Vollimplementierung (DASH-09) via TDD Red/Green-Zyklus: persistente Favoritenliste mit server-seitiger Icon-Discovery (SSRF-Schutz), Inline-CRUD im Edit-Modus, Liste/Kacheln-Ansicht und Buchstaben-Fallback.
|
||||||
|
|
||||||
|
## What Was Built
|
||||||
|
|
||||||
|
- **FavoriteLink Prisma Model**: Felder userId, tenantId, widgetId, title, url, iconUrl (nullable), position. Indizes auf userId, tenantId, widgetId (Pitfall 3 — jede Widget-Instanz hat ihre eigene Favoritenliste).
|
||||||
|
|
||||||
|
- **IconDiscoveryService** (`icon-discovery.service.ts`): Port aus `personal-dashboard/src/lib/favorite-icons.ts`. SSRF-Schutz: DNS-Aufloesung jeder URL und jedes Redirect-Ziels, private IPv4/IPv6-Ranges blockiert, blocked hostnames (localhost/.local/0.0.0.0), `redirect: 'manual'` mit manueller Redirect-Verfolgung bis MAX_REDIRECTS=2, 4000ms AbortController-Timeout, 200k-Zeichen HTML-Cap (T-08-05, T-08-09). User-Agent geaendert auf `tessera/1.0`.
|
||||||
|
|
||||||
|
- **FavoritesModule** (NestJS): FavoritesController (GET/POST/PATCH/DELETE /favorites), FavoritesService (list/create/update/remove — alle Queries scoped by userId, T-08-06), IconDiscoveryService als Provider. In AppModule registriert.
|
||||||
|
|
||||||
|
- **favorites-api.ts**: FavoriteLink-Typ + fetchFavorites(widgetId)/createFavorite(payload)/updateFavorite(id, payload)/deleteFavorite(id). Alle Requests mit `credentials: 'include'` und API_URL/favorites.
|
||||||
|
|
||||||
|
- **FavoritesWidget** (`favorites-widget.tsx`): 'use client', useTranslations. Laedt Favoriten beim Mount via fetchFavorites(instanceId). Sortierung nach position asc + title asc. Listenansicht (default) und Kachelansicht (umschaltbar im Edit-Modus, persists via updateWidgetConfig). Inline-CRUD im Edit-Modus: '+'-Formular, Bearbeiten-Inline-Form, Loeschen-Button. Icons: `<img>` mit onError-Hide + `<span data-testid="letter-fallback-{id}">` als Buchstaben-Fallback. Links: target="_blank" rel="noreferrer" (T-08-08). Kein dangerouslySetInnerHTML (T-08-07).
|
||||||
|
|
||||||
|
- **page.tsx Wiring**: `wireFavoritesWidget(FavoritesWidget)` hinzugefuegt.
|
||||||
|
|
||||||
|
## Tasks
|
||||||
|
|
||||||
|
| Task | Description | Status | Commit |
|
||||||
|
|------|-------------|--------|--------|
|
||||||
|
| 1 | RED: Failing tests fuer FavoritesWidget CRUD + view toggle + letter fallback | Complete | a3bb3f2 |
|
||||||
|
| 2 | FavoriteLink schema + FavoritesModule (CRUD + SSRF icon discovery) | Complete | 758d246 |
|
||||||
|
| 3 | GREEN: FavoritesWidget frontend + API client + page.tsx wiring | Complete | cc6f5ae |
|
||||||
|
|
||||||
|
## Test Results
|
||||||
|
|
||||||
|
- **favorites-widget.test.tsx**: 7 Tests — fetchFavorites mit instanceId aufgerufen, empty state, add-Formular, inline edit, delete mit DOM-Entfernung, list/grid toggle, Buchstaben-Fallback
|
||||||
|
- **Full Web Suite**: 81/81 Tests bestehen (17 Test-Dateien)
|
||||||
|
- **Web TypeScript**: sauber (0 Fehler)
|
||||||
|
- **API TypeScript**: sauber (0 Fehler, prisma generate erfolgreich)
|
||||||
|
|
||||||
|
## Deviations from Plan
|
||||||
|
|
||||||
|
### Worktree Fast-Forward (auto-fix, Rule 3)
|
||||||
|
|
||||||
|
**Found during:** Pre-task setup
|
||||||
|
|
||||||
|
**Issue:** Das Worktree-Branch `worktree-agent-a80275c51086517d1` war bei `88db54f` (vor phase-08-Commits), nicht am erwarteten Basis-Commit `4645a5f` (Main nach Wave 2). Phase-08 wave-1 und wave-2 Artefakte (wireFavoritesWidget, WIDGET_CONSTRAINTS, i18n-Keys) fehlten.
|
||||||
|
|
||||||
|
**Fix:** `git merge main --ff-only` — Fast-Forward auf `4645a5f`. Keine Konflikte. Node-Modules-Symlinks danach erstellt.
|
||||||
|
|
||||||
|
**Impact:** Keiner. Alle Plan-01 und Plan-02-Artefakte standen danach vollstaendig zur Verfuegung.
|
||||||
|
|
||||||
|
### useEffect Dependency Array: t() ausgeschlossen (auto-fix, Rule 1)
|
||||||
|
|
||||||
|
**Found during:** Task 3 GREEN — test 'edit' scheiterte bei waitFor (saveButton nicht sichtbar)
|
||||||
|
|
||||||
|
**Issue:** `t()` aus `useTranslations()` war in `useEffect([instanceId, t])`-Abhaengigkeiten. Der Mock erzeugt bei jedem Render eine neue Funktionsreferenz -> useEffect feuert bei jedem State-Update neu -> `setLoading(true)` loescht die geladenen Favoriten.
|
||||||
|
|
||||||
|
**Fix:** Dependency-Array auf `[instanceId]` reduziert; error-Fallback nutzt stabilen String-Key statt `t()`. Kommentar erklaert Entscheidung.
|
||||||
|
|
||||||
|
**Files modified:** `favorites-widget.tsx` (useEffect)
|
||||||
|
|
||||||
|
**Commit:** cc6f5ae
|
||||||
|
|
||||||
|
### Testmuster: Sync act() + waitFor() statt async act() (auto-fix, Rule 1)
|
||||||
|
|
||||||
|
**Found during:** Task 3 GREEN — add/edit/delete Tests timeout nach 5000ms
|
||||||
|
|
||||||
|
**Issue:** `await act(async () => { fireEvent.click(btn); })` bei Komponenten die `void asyncHandler(e)` nutzen: act() wartet nicht auf asynchrone Fortsetzungen in `void`-discarded Promises.
|
||||||
|
|
||||||
|
**Fix:** Interaktions-Events mit sync `act(() => { fireEvent...; })` aufgerufen; assertions in `await waitFor(() => ...)` verschoben. waitFor pollt bis die async-Kette (API-Mock -> setState) abgeschlossen ist.
|
||||||
|
|
||||||
|
**Files modified:** `favorites-widget.test.tsx`
|
||||||
|
|
||||||
|
**Commit:** cc6f5ae
|
||||||
|
|
||||||
|
### dangerouslySetInnerHTML grep-count = 2 (kein Problem)
|
||||||
|
|
||||||
|
Beide Vorkommen sind in **Kommentaren** (Zeile 24 und 354) die erklaeren WARUM dangerouslySetInnerHTML nicht verwendet wird. Kein tatsaechlicher JSX-Attribut-Einsatz. T-08-07 korrekt mitigiert.
|
||||||
|
|
||||||
|
## Known Stubs
|
||||||
|
|
||||||
|
Keine Stubs. FavoritesWidget ist vollstaendig implementiert und mit Backend verbunden.
|
||||||
|
|
||||||
|
## Threat Surface Scan
|
||||||
|
|
||||||
|
Alle Threats aus dem Plan-Threat-Register wurden mitigiert:
|
||||||
|
|
||||||
|
| Threat ID | Status |
|
||||||
|
|-----------|--------|
|
||||||
|
| T-08-05 (SSRF via IconDiscoveryService) | Mitigiert — vollstaendiger SSRF-Guard portiert: DNS-Check, private IPs, redirect:manual, 4000ms Timeout, 200k HTML-Cap |
|
||||||
|
| T-08-06 (Spoofing via FavoritesService) | Mitigiert — jede Query scoped by userId + widgetId; NotFoundException bei Ownership-Mismatch |
|
||||||
|
| T-08-07 (XSS via icon render) | Mitigiert — iconUrl nur via `<img src>`; kein dangerouslySetInnerHTML |
|
||||||
|
| T-08-08 (open redirect) | Mitigiert — Links mit target="_blank" rel="noreferrer"; kein server-seitiger Redirect |
|
||||||
|
| T-08-09 (DoS via HTML fetch) | Mitigiert — MAX_HTML_CHARS 200000 Truncation + 4000ms AbortController |
|
||||||
|
|
||||||
|
Keine neuen Sicherheitsoberflaechen eingefuehrt, die nicht im Threat-Modell erwaehnt waren.
|
||||||
|
|
||||||
|
## Self-Check: PASSED
|
||||||
|
|
||||||
|
| Item | Status |
|
||||||
|
|------|--------|
|
||||||
|
| favorites-widget.tsx | FOUND |
|
||||||
|
| favorites-widget.test.tsx | FOUND |
|
||||||
|
| favorites-api.ts | FOUND |
|
||||||
|
| favorites.module.ts | FOUND |
|
||||||
|
| icon-discovery.service.ts | FOUND |
|
||||||
|
| FavoriteLink in schema.prisma | FOUND |
|
||||||
|
| FavoritesModule in app.module.ts | FOUND |
|
||||||
|
| page.tsx: wireFavoritesWidget(FavoritesWidget) | FOUND |
|
||||||
|
| Commit a3bb3f2 (RED) | FOUND |
|
||||||
|
| Commit 758d246 (backend) | FOUND |
|
||||||
|
| Commit cc6f5ae (GREEN) | FOUND |
|
||||||
|
| Full suite 81/81 | PASSED |
|
||||||
|
| Web TypeScript: 0 errors | PASSED |
|
||||||
|
| API TypeScript: 0 errors | PASSED |
|
||||||
@@ -233,3 +233,20 @@ model SmtpConfig {
|
|||||||
createdAt DateTime @default(now())
|
createdAt DateTime @default(now())
|
||||||
updatedAt DateTime @updatedAt
|
updatedAt DateTime @updatedAt
|
||||||
}
|
}
|
||||||
|
|
||||||
|
model FavoriteLink {
|
||||||
|
id String @id @default(uuid())
|
||||||
|
userId String
|
||||||
|
tenantId String
|
||||||
|
widgetId String
|
||||||
|
title String
|
||||||
|
url String
|
||||||
|
iconUrl String?
|
||||||
|
position Int @default(0)
|
||||||
|
createdAt DateTime @default(now())
|
||||||
|
updatedAt DateTime @updatedAt
|
||||||
|
|
||||||
|
@@index([userId])
|
||||||
|
@@index([tenantId])
|
||||||
|
@@index([widgetId])
|
||||||
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { MailModule } from './mail/mail.module';
|
|||||||
import { CalendarModule } from './calendar/calendar.module';
|
import { CalendarModule } from './calendar/calendar.module';
|
||||||
import { DashboardModule } from './dashboard/dashboard.module';
|
import { DashboardModule } from './dashboard/dashboard.module';
|
||||||
import { DkvModule } from './dkv/dkv.module';
|
import { DkvModule } from './dkv/dkv.module';
|
||||||
|
import { FavoritesModule } from './favorites/favorites.module';
|
||||||
import { DomaincheckModule } from './domaincheck/domaincheck.module';
|
import { DomaincheckModule } from './domaincheck/domaincheck.module';
|
||||||
import { ModuleRegistryModule } from './module-registry/module-registry.module';
|
import { ModuleRegistryModule } from './module-registry/module-registry.module';
|
||||||
import { PrismaModule } from './prisma/prisma.module';
|
import { PrismaModule } from './prisma/prisma.module';
|
||||||
@@ -37,6 +38,7 @@ import { UserModule } from './user/user.module';
|
|||||||
CalendarModule,
|
CalendarModule,
|
||||||
SettingsModule,
|
SettingsModule,
|
||||||
DkvModule,
|
DkvModule,
|
||||||
|
FavoritesModule,
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
// Global JWT guard: all routes require auth unless @Public()
|
// Global JWT guard: all routes require auth unless @Public()
|
||||||
|
|||||||
@@ -0,0 +1,32 @@
|
|||||||
|
import {
|
||||||
|
IsInt,
|
||||||
|
IsNotEmpty,
|
||||||
|
IsOptional,
|
||||||
|
IsString,
|
||||||
|
IsUrl,
|
||||||
|
IsUUID,
|
||||||
|
} from 'class-validator';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO for creating a new FavoriteLink.
|
||||||
|
* widgetId scopes the link to a specific widget instance (T-08-06 / Pitfall 3).
|
||||||
|
*/
|
||||||
|
export class CreateFavoriteDto {
|
||||||
|
@IsUUID()
|
||||||
|
widgetId!: string;
|
||||||
|
|
||||||
|
@IsString()
|
||||||
|
@IsNotEmpty()
|
||||||
|
title!: string;
|
||||||
|
|
||||||
|
@IsUrl()
|
||||||
|
url!: string;
|
||||||
|
|
||||||
|
@IsOptional()
|
||||||
|
@IsString()
|
||||||
|
iconUrl?: string;
|
||||||
|
|
||||||
|
@IsOptional()
|
||||||
|
@IsInt()
|
||||||
|
position?: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { IsInt, IsOptional, IsString, IsUrl } from 'class-validator';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DTO for updating an existing FavoriteLink.
|
||||||
|
* All fields are optional — only provided fields are updated.
|
||||||
|
* iconUrl accepts null explicitly to clear a stored icon.
|
||||||
|
*/
|
||||||
|
export class UpdateFavoriteDto {
|
||||||
|
@IsOptional()
|
||||||
|
@IsString()
|
||||||
|
title?: string;
|
||||||
|
|
||||||
|
@IsOptional()
|
||||||
|
@IsUrl()
|
||||||
|
url?: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* iconUrl can be a string (updated URL), null (clear icon), or absent (no change).
|
||||||
|
* No strict type validation so null passes through to Prisma.
|
||||||
|
*/
|
||||||
|
@IsOptional()
|
||||||
|
iconUrl?: string | null;
|
||||||
|
|
||||||
|
@IsOptional()
|
||||||
|
@IsInt()
|
||||||
|
position?: number;
|
||||||
|
}
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
import {
|
||||||
|
Body,
|
||||||
|
Controller,
|
||||||
|
Delete,
|
||||||
|
ForbiddenException,
|
||||||
|
Get,
|
||||||
|
Param,
|
||||||
|
Patch,
|
||||||
|
Post,
|
||||||
|
Query,
|
||||||
|
Req,
|
||||||
|
} from '@nestjs/common';
|
||||||
|
import { Request } from 'express';
|
||||||
|
import { CreateFavoriteDto } from './dto/create-favorite.dto';
|
||||||
|
import { UpdateFavoriteDto } from './dto/update-favorite.dto';
|
||||||
|
import { FavoritesService } from './favorites.service';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* REST controller for per-user, per-widget favorite links.
|
||||||
|
*
|
||||||
|
* All routes are protected by the global JwtAuthGuard + TenantGuard.
|
||||||
|
*
|
||||||
|
* Routes:
|
||||||
|
* - GET /favorites?widgetId= — list favorites for a widget instance
|
||||||
|
* - POST /favorites — create a favorite (triggers server-side icon discovery)
|
||||||
|
* - PATCH /favorites/:id — update a favorite (ownership verified in service)
|
||||||
|
* - DELETE /favorites/:id — delete a favorite (ownership verified in service)
|
||||||
|
*/
|
||||||
|
@Controller('favorites')
|
||||||
|
export class FavoritesController {
|
||||||
|
constructor(private readonly favoritesService: FavoritesService) {}
|
||||||
|
|
||||||
|
private extractContext(req: Request) {
|
||||||
|
const userId = (req as any).user?.id;
|
||||||
|
const tenantId =
|
||||||
|
(req as any).tenantId ?? (req as any).user?.tenantId;
|
||||||
|
|
||||||
|
if (!tenantId) {
|
||||||
|
throw new ForbiddenException('No tenant context');
|
||||||
|
}
|
||||||
|
if (!userId) {
|
||||||
|
throw new ForbiddenException('No user context');
|
||||||
|
}
|
||||||
|
|
||||||
|
return { userId, tenantId };
|
||||||
|
}
|
||||||
|
|
||||||
|
@Get()
|
||||||
|
async list(
|
||||||
|
@Query('widgetId') widgetId: string,
|
||||||
|
@Req() req: Request,
|
||||||
|
) {
|
||||||
|
const { userId } = this.extractContext(req);
|
||||||
|
|
||||||
|
return this.favoritesService.list(userId, widgetId);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Post()
|
||||||
|
async create(
|
||||||
|
@Body() dto: CreateFavoriteDto,
|
||||||
|
@Req() req: Request,
|
||||||
|
) {
|
||||||
|
const { userId, tenantId } = this.extractContext(req);
|
||||||
|
|
||||||
|
return this.favoritesService.create(userId, tenantId, dto);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Patch(':id')
|
||||||
|
async update(
|
||||||
|
@Param('id') id: string,
|
||||||
|
@Body() dto: UpdateFavoriteDto,
|
||||||
|
@Req() req: Request,
|
||||||
|
) {
|
||||||
|
const { userId } = this.extractContext(req);
|
||||||
|
|
||||||
|
return this.favoritesService.update(id, userId, dto);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Delete(':id')
|
||||||
|
async remove(
|
||||||
|
@Param('id') id: string,
|
||||||
|
@Req() req: Request,
|
||||||
|
) {
|
||||||
|
const { userId } = this.extractContext(req);
|
||||||
|
|
||||||
|
return this.favoritesService.remove(id, userId);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import { Module } from '@nestjs/common';
|
||||||
|
import { FavoritesController } from './favorites.controller';
|
||||||
|
import { FavoritesService } from './favorites.service';
|
||||||
|
import { IconDiscoveryService } from './icon-discovery.service';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* NestJS module for per-user favorite link management.
|
||||||
|
*
|
||||||
|
* Provides:
|
||||||
|
* - FavoritesController: REST API under /favorites (CRUD scoped by user + widget)
|
||||||
|
* - FavoritesService: Business logic with userId-scoped queries (T-08-06)
|
||||||
|
* - IconDiscoveryService: Server-side icon/favicon discovery with SSRF protection (T-08-05)
|
||||||
|
*
|
||||||
|
* PrismaModule is global — no need to re-import here.
|
||||||
|
*/
|
||||||
|
@Module({
|
||||||
|
controllers: [FavoritesController],
|
||||||
|
providers: [FavoritesService, IconDiscoveryService],
|
||||||
|
})
|
||||||
|
export class FavoritesModule {}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
import { Injectable, NotFoundException } from '@nestjs/common';
|
||||||
|
import { PrismaService } from '../prisma/prisma.service';
|
||||||
|
import { CreateFavoriteDto } from './dto/create-favorite.dto';
|
||||||
|
import { UpdateFavoriteDto } from './dto/update-favorite.dto';
|
||||||
|
import { IconDiscoveryService } from './icon-discovery.service';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Service for managing per-user, per-widget favorite links.
|
||||||
|
*
|
||||||
|
* Access control (T-08-06 / Pitfall 3):
|
||||||
|
* - Every query is scoped by userId (prevents cross-user access).
|
||||||
|
* - list() additionally scopes by widgetId so each widget instance has its own set.
|
||||||
|
* - update() and remove() verify userId ownership before mutating.
|
||||||
|
*/
|
||||||
|
@Injectable()
|
||||||
|
export class FavoritesService {
|
||||||
|
constructor(
|
||||||
|
private readonly prisma: PrismaService,
|
||||||
|
private readonly iconDiscovery: IconDiscoveryService,
|
||||||
|
) {}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns all favorites for a user's widget instance, ordered by position asc.
|
||||||
|
* Scoped by userId AND widgetId (Pitfall 3 — separate widgets must not share links).
|
||||||
|
*/
|
||||||
|
async list(userId: string, widgetId: string) {
|
||||||
|
return this.prisma.favoriteLink.findMany({
|
||||||
|
where: { userId, widgetId },
|
||||||
|
orderBy: [{ position: 'asc' }, { title: 'asc' }],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Creates a new favorite link.
|
||||||
|
* If iconUrl is not provided, triggers server-side icon discovery with SSRF protection.
|
||||||
|
*/
|
||||||
|
async create(userId: string, tenantId: string, dto: CreateFavoriteDto) {
|
||||||
|
let iconUrl = dto.iconUrl ?? null;
|
||||||
|
|
||||||
|
// Server-side icon discovery (D-05) — only when caller did not supply an icon
|
||||||
|
if (!iconUrl) {
|
||||||
|
iconUrl = await this.iconDiscovery.discoverFavoriteIconUrl(dto.url);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.prisma.favoriteLink.create({
|
||||||
|
data: {
|
||||||
|
userId,
|
||||||
|
tenantId,
|
||||||
|
widgetId: dto.widgetId,
|
||||||
|
title: dto.title,
|
||||||
|
url: dto.url,
|
||||||
|
iconUrl,
|
||||||
|
position: dto.position ?? 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates an existing favorite.
|
||||||
|
* Verifies userId ownership before applying changes (T-08-06).
|
||||||
|
* Accepts null as an explicit value for iconUrl (clears stored icon).
|
||||||
|
*/
|
||||||
|
async update(id: string, userId: string, dto: UpdateFavoriteDto) {
|
||||||
|
const link = await this.prisma.favoriteLink.findUnique({ where: { id } });
|
||||||
|
|
||||||
|
if (!link || link.userId !== userId) {
|
||||||
|
throw new NotFoundException('FavoriteLink not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: Record<string, unknown> = {};
|
||||||
|
|
||||||
|
if (dto.title !== undefined) data.title = dto.title;
|
||||||
|
if (dto.url !== undefined) data.url = dto.url;
|
||||||
|
if ('iconUrl' in dto) data.iconUrl = dto.iconUrl; // Allows explicit null
|
||||||
|
if (dto.position !== undefined) data.position = dto.position;
|
||||||
|
|
||||||
|
return this.prisma.favoriteLink.update({
|
||||||
|
where: { id },
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Deletes a favorite link.
|
||||||
|
* Verifies userId ownership before deleting (T-08-06).
|
||||||
|
*/
|
||||||
|
async remove(id: string, userId: string) {
|
||||||
|
const link = await this.prisma.favoriteLink.findUnique({ where: { id } });
|
||||||
|
|
||||||
|
if (!link || link.userId !== userId) {
|
||||||
|
throw new NotFoundException('FavoriteLink not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.prisma.favoriteLink.delete({ where: { id } });
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,283 @@
|
|||||||
|
import { Injectable } from '@nestjs/common';
|
||||||
|
import { lookup } from 'dns/promises';
|
||||||
|
import { isIP } from 'net';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Server-side favicon / icon discovery with SSRF protection (T-08-05).
|
||||||
|
*
|
||||||
|
* Ported from personal-dashboard/src/lib/favorite-icons.ts.
|
||||||
|
* Security guards:
|
||||||
|
* - DNS resolves every URL (including redirects) and checks for private IP ranges
|
||||||
|
* - redirect: 'manual' — follows redirects manually so each hop is re-validated
|
||||||
|
* - 4000 ms AbortController timeout per request
|
||||||
|
* - 200 000 character HTML cap to prevent memory exhaustion (T-08-09)
|
||||||
|
* - Blocked hostnames: localhost, .local, 0.0.0.0
|
||||||
|
*/
|
||||||
|
|
||||||
|
const FALLBACK_ICON_PATH = '/favicon.ico';
|
||||||
|
const HTML_FETCH_TIMEOUT_MS = 4000;
|
||||||
|
const MAX_REDIRECTS = 2;
|
||||||
|
const MAX_HTML_CHARS = 200000;
|
||||||
|
|
||||||
|
type FetchHtmlResult = {
|
||||||
|
html: string;
|
||||||
|
finalUrl: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function isPrivateIpv4(address: string): boolean {
|
||||||
|
const parts = address.split('.').map((part) => Number.parseInt(part, 10));
|
||||||
|
|
||||||
|
if (
|
||||||
|
parts.length !== 4 ||
|
||||||
|
parts.some(
|
||||||
|
(part) => !Number.isInteger(part) || part < 0 || part > 255,
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [a, b] = parts;
|
||||||
|
|
||||||
|
return (
|
||||||
|
a === 0 ||
|
||||||
|
a === 10 ||
|
||||||
|
a === 127 ||
|
||||||
|
(a === 100 && b !== undefined && b >= 64 && b <= 127) ||
|
||||||
|
(a === 169 && b === 254) ||
|
||||||
|
(a === 172 && b !== undefined && b >= 16 && b <= 31) ||
|
||||||
|
(a === 192 && b === 168) ||
|
||||||
|
(a === 192 && b === 0) ||
|
||||||
|
(a === 198 && (b === 18 || b === 19)) ||
|
||||||
|
a >= 224
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPrivateIpv6(address: string): boolean {
|
||||||
|
const lower = address.toLowerCase();
|
||||||
|
|
||||||
|
return (
|
||||||
|
lower === '::' ||
|
||||||
|
lower === '::1' ||
|
||||||
|
lower.startsWith('fc') ||
|
||||||
|
lower.startsWith('fd') ||
|
||||||
|
lower.startsWith('fe80:') ||
|
||||||
|
lower.startsWith('::ffff:127.') ||
|
||||||
|
lower.startsWith('::ffff:10.') ||
|
||||||
|
lower.startsWith('::ffff:192.168.')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isPrivateIpAddress(address: string): boolean {
|
||||||
|
const version = isIP(address);
|
||||||
|
|
||||||
|
if (version === 4) return isPrivateIpv4(address);
|
||||||
|
if (version === 6) return isPrivateIpv6(address);
|
||||||
|
|
||||||
|
return true; // Unknown format → block by default
|
||||||
|
}
|
||||||
|
|
||||||
|
function isBlockedHostname(hostname: string): boolean {
|
||||||
|
const h = hostname.trim().toLowerCase();
|
||||||
|
|
||||||
|
return (
|
||||||
|
h === 'localhost' ||
|
||||||
|
h.endsWith('.localhost') ||
|
||||||
|
h.endsWith('.local') ||
|
||||||
|
h === '0.0.0.0'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function isPublicHttpUrl(url: URL): Promise<boolean> {
|
||||||
|
if (url.protocol !== 'http:' && url.protocol !== 'https:') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isBlockedHostname(url.hostname)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const directVersion = isIP(url.hostname);
|
||||||
|
|
||||||
|
if (directVersion !== 0) {
|
||||||
|
return !isPrivateIpAddress(url.hostname);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const addresses = await lookup(url.hostname, { all: true });
|
||||||
|
|
||||||
|
if (addresses.length === 0) return false;
|
||||||
|
|
||||||
|
return addresses.every((a) => !isPrivateIpAddress(a.address));
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getOriginFaviconUrl(pageUrl: string): string {
|
||||||
|
try {
|
||||||
|
const url = new URL(pageUrl);
|
||||||
|
|
||||||
|
return new URL(FALLBACK_ICON_PATH, url.origin).toString();
|
||||||
|
} catch {
|
||||||
|
return FALLBACK_ICON_PATH;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseAttributes(tag: string): Record<string, string> {
|
||||||
|
const attrs: Record<string, string> = {};
|
||||||
|
const re = /([a-zA-Z_:.-]+)\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
|
||||||
|
let m: RegExpExecArray | null;
|
||||||
|
|
||||||
|
while ((m = re.exec(tag)) !== null) {
|
||||||
|
const key = m[1].toLowerCase();
|
||||||
|
const value = m[3] ?? m[4] ?? m[5] ?? '';
|
||||||
|
|
||||||
|
attrs[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return attrs;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toAbsoluteUrl(value: string | undefined, base: string): string | null {
|
||||||
|
if (!value) return null;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = new URL(value, base);
|
||||||
|
|
||||||
|
if (url.protocol !== 'http:' && url.protocol !== 'https:') return null;
|
||||||
|
|
||||||
|
return url.toString();
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function extractIconFromHtml(html: string, baseUrl: string): string | null {
|
||||||
|
const linkTags = html.match(/<link\b[^>]*>/gi) ?? [];
|
||||||
|
const metaTags = html.match(/<meta\b[^>]*>/gi) ?? [];
|
||||||
|
|
||||||
|
const linkCandidates = linkTags
|
||||||
|
.map((tag) => parseAttributes(tag))
|
||||||
|
.map((a) => ({
|
||||||
|
rel: (a.rel ?? '').toLowerCase(),
|
||||||
|
href: toAbsoluteUrl(a.href, baseUrl),
|
||||||
|
}))
|
||||||
|
.filter((c) => c.href);
|
||||||
|
|
||||||
|
const appleTouchIcon = linkCandidates.find((c) =>
|
||||||
|
c.rel.includes('apple-touch-icon'),
|
||||||
|
)?.href;
|
||||||
|
|
||||||
|
if (appleTouchIcon) return appleTouchIcon;
|
||||||
|
|
||||||
|
const icon = linkCandidates.find((c) =>
|
||||||
|
c.rel.split(/\s+/).includes('icon'),
|
||||||
|
)?.href;
|
||||||
|
|
||||||
|
if (icon) return icon;
|
||||||
|
|
||||||
|
const shortcutIcon = linkCandidates.find((c) =>
|
||||||
|
c.rel.includes('shortcut icon'),
|
||||||
|
)?.href;
|
||||||
|
|
||||||
|
if (shortcutIcon) return shortcutIcon;
|
||||||
|
|
||||||
|
const imageSrc = linkCandidates.find((c) =>
|
||||||
|
c.rel.includes('image_src'),
|
||||||
|
)?.href;
|
||||||
|
|
||||||
|
if (imageSrc) return imageSrc;
|
||||||
|
|
||||||
|
const metaImage = metaTags
|
||||||
|
.map((tag) => parseAttributes(tag))
|
||||||
|
.map((a) => ({
|
||||||
|
property: (a.property ?? a.name ?? '').toLowerCase(),
|
||||||
|
content: toAbsoluteUrl(a.content, baseUrl),
|
||||||
|
}))
|
||||||
|
.find(
|
||||||
|
(c) =>
|
||||||
|
c.content &&
|
||||||
|
(c.property === 'og:image' ||
|
||||||
|
c.property === 'og:logo' ||
|
||||||
|
c.property === 'twitter:image'),
|
||||||
|
)?.content;
|
||||||
|
|
||||||
|
return metaImage ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchHtml(pageUrl: URL): Promise<FetchHtmlResult | null> {
|
||||||
|
let currentUrl = pageUrl;
|
||||||
|
|
||||||
|
for (let redirectCount = 0; redirectCount <= MAX_REDIRECTS; redirectCount++) {
|
||||||
|
const isPublic = await isPublicHttpUrl(currentUrl);
|
||||||
|
|
||||||
|
if (!isPublic) return null;
|
||||||
|
|
||||||
|
const controller = new AbortController();
|
||||||
|
const timeout = setTimeout(() => controller.abort(), HTML_FETCH_TIMEOUT_MS);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(currentUrl.toString(), {
|
||||||
|
redirect: 'manual', // SSRF: follow manually so each hop is re-validated
|
||||||
|
signal: controller.signal,
|
||||||
|
headers: {
|
||||||
|
Accept: 'text/html,application/xhtml+xml,*/*',
|
||||||
|
'User-Agent': 'tessera/1.0',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status >= 300 && response.status < 400) {
|
||||||
|
const location = response.headers.get('location');
|
||||||
|
|
||||||
|
if (!location) return null;
|
||||||
|
|
||||||
|
currentUrl = new URL(location, currentUrl);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!response.ok) return null;
|
||||||
|
|
||||||
|
const contentType = response.headers.get('content-type') ?? '';
|
||||||
|
|
||||||
|
if (!contentType.toLowerCase().includes('text/html')) return null;
|
||||||
|
|
||||||
|
const html = await response.text();
|
||||||
|
|
||||||
|
return {
|
||||||
|
html: html.slice(0, MAX_HTML_CHARS), // T-08-09: HTML cap
|
||||||
|
finalUrl: currentUrl.toString(),
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
} finally {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
export class IconDiscoveryService {
|
||||||
|
/**
|
||||||
|
* Discover the best icon URL for a given web page URL.
|
||||||
|
* Falls back to <origin>/favicon.ico when discovery fails or URL is private.
|
||||||
|
*
|
||||||
|
* SSRF protection: every URL and redirect target is validated against
|
||||||
|
* private IP ranges, blocked hostnames, and forced-proxy vectors (T-08-05).
|
||||||
|
*/
|
||||||
|
async discoverFavoriteIconUrl(pageUrl: string): Promise<string> {
|
||||||
|
const fallback = getOriginFaviconUrl(pageUrl);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const url = new URL(pageUrl);
|
||||||
|
const htmlResult = await fetchHtml(url);
|
||||||
|
|
||||||
|
if (!htmlResult) return fallback;
|
||||||
|
|
||||||
|
return extractIconFromHtml(htmlResult.html, htmlResult.finalUrl) ?? fallback;
|
||||||
|
} catch {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,13 +5,14 @@ import { useTranslations } from 'next-intl';
|
|||||||
import { DashboardGrid } from '@/components/dashboard/dashboard-grid';
|
import { DashboardGrid } from '@/components/dashboard/dashboard-grid';
|
||||||
import { EditModeToggle } from '@/components/dashboard/edit-mode-toggle';
|
import { EditModeToggle } from '@/components/dashboard/edit-mode-toggle';
|
||||||
import { WidgetCatalogModal } from '@/components/dashboard/widget-catalog-modal';
|
import { WidgetCatalogModal } from '@/components/dashboard/widget-catalog-modal';
|
||||||
import { wireClockWidget, wireSearchWidget, wireCalendarWidget, wireNoteWidget, wireCalculatorWidget, wireStopwatchWidget } from '@/components/dashboard/widget-registry';
|
import { wireClockWidget, wireSearchWidget, wireCalendarWidget, wireNoteWidget, wireCalculatorWidget, wireStopwatchWidget, wireFavoritesWidget } from '@/components/dashboard/widget-registry';
|
||||||
import { ClockWidget } from '@/components/dashboard/widgets/clock-widget';
|
import { ClockWidget } from '@/components/dashboard/widgets/clock-widget';
|
||||||
import { SearchWidget } from '@/components/dashboard/widgets/search-widget';
|
import { SearchWidget } from '@/components/dashboard/widgets/search-widget';
|
||||||
import { CalendarWidget } from '@/components/dashboard/widgets/calendar-widget';
|
import { CalendarWidget } from '@/components/dashboard/widgets/calendar-widget';
|
||||||
import { NoteWidget } from '@/components/dashboard/widgets/note-widget';
|
import { NoteWidget } from '@/components/dashboard/widgets/note-widget';
|
||||||
import { CalculatorWidget } from '@/components/dashboard/widgets/calculator-widget';
|
import { CalculatorWidget } from '@/components/dashboard/widgets/calculator-widget';
|
||||||
import { StopwatchWidget } from '@/components/dashboard/widgets/stopwatch-widget';
|
import { StopwatchWidget } from '@/components/dashboard/widgets/stopwatch-widget';
|
||||||
|
import { FavoritesWidget } from '@/components/dashboard/widgets/favorites-widget';
|
||||||
import { useDashboardStore } from '@/lib/stores/dashboard-store';
|
import { useDashboardStore } from '@/lib/stores/dashboard-store';
|
||||||
import type { WidgetType } from '@/components/dashboard/widget-registry';
|
import type { WidgetType } from '@/components/dashboard/widget-registry';
|
||||||
|
|
||||||
@@ -22,6 +23,7 @@ wireCalendarWidget(CalendarWidget);
|
|||||||
wireNoteWidget(NoteWidget);
|
wireNoteWidget(NoteWidget);
|
||||||
wireCalculatorWidget(CalculatorWidget);
|
wireCalculatorWidget(CalculatorWidget);
|
||||||
wireStopwatchWidget(StopwatchWidget);
|
wireStopwatchWidget(StopwatchWidget);
|
||||||
|
wireFavoritesWidget(FavoritesWidget);
|
||||||
|
|
||||||
export default function DashboardPage() {
|
export default function DashboardPage() {
|
||||||
const t = useTranslations('widgets');
|
const t = useTranslations('widgets');
|
||||||
|
|||||||
@@ -0,0 +1,290 @@
|
|||||||
|
import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||||
|
|
||||||
|
// Mock next-intl — passthrough t(key) => key (Pitfall: must be before imports)
|
||||||
|
vi.mock('next-intl', () => ({
|
||||||
|
useTranslations: () => (key: string) => key,
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock favorites-api — all 4 functions as controllable vi.fn() spies
|
||||||
|
vi.mock('@/lib/favorites-api', () => ({
|
||||||
|
fetchFavorites: vi.fn(),
|
||||||
|
createFavorite: vi.fn(),
|
||||||
|
updateFavorite: vi.fn(),
|
||||||
|
deleteFavorite: vi.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock dashboard-api for updateWidgetConfig (view mode persistence)
|
||||||
|
vi.mock('@/lib/dashboard-api', () => ({
|
||||||
|
updateWidgetConfig: vi.fn().mockResolvedValue(undefined),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import {
|
||||||
|
fetchFavorites,
|
||||||
|
createFavorite,
|
||||||
|
updateFavorite,
|
||||||
|
deleteFavorite,
|
||||||
|
} from '@/lib/favorites-api';
|
||||||
|
|
||||||
|
// Must import AFTER mocks
|
||||||
|
import { FavoritesWidget } from './favorites-widget';
|
||||||
|
|
||||||
|
// Typed mock helpers
|
||||||
|
const mockFetch = fetchFavorites as ReturnType<typeof vi.fn>;
|
||||||
|
const mockCreate = createFavorite as ReturnType<typeof vi.fn>;
|
||||||
|
const mockUpdate = updateFavorite as ReturnType<typeof vi.fn>;
|
||||||
|
const mockDelete = deleteFavorite as ReturnType<typeof vi.fn>;
|
||||||
|
|
||||||
|
const BASE_FAVORITES = [
|
||||||
|
{
|
||||||
|
id: 'fav-id-1',
|
||||||
|
widgetId: 'fav-1',
|
||||||
|
title: 'GitHub',
|
||||||
|
url: 'https://github.com',
|
||||||
|
iconUrl: 'https://github.com/favicon.ico',
|
||||||
|
position: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'fav-id-2',
|
||||||
|
widgetId: 'fav-1',
|
||||||
|
title: 'Notion',
|
||||||
|
url: 'https://notion.so',
|
||||||
|
iconUrl: null, // null iconUrl → letter fallback 'N'
|
||||||
|
position: 1,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
describe('FavoritesWidget', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
// Default: return the base favorites list
|
||||||
|
mockFetch.mockResolvedValue([...BASE_FAVORITES]);
|
||||||
|
mockCreate.mockResolvedValue({
|
||||||
|
id: 'fav-id-new',
|
||||||
|
widgetId: 'fav-1',
|
||||||
|
title: 'New Link',
|
||||||
|
url: 'https://example.com',
|
||||||
|
iconUrl: null,
|
||||||
|
position: 2,
|
||||||
|
});
|
||||||
|
mockUpdate.mockResolvedValue({
|
||||||
|
...BASE_FAVORITES[0],
|
||||||
|
title: 'GitHub Updated',
|
||||||
|
});
|
||||||
|
mockDelete.mockResolvedValue(undefined);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.restoreAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('calls fetchFavorites with instanceId on mount and renders link titles', async () => {
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={false}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
// fetchFavorites must be called with the instanceId (widgetId scope — Pitfall 3)
|
||||||
|
expect(mockFetch).toHaveBeenCalledWith('fav-1');
|
||||||
|
|
||||||
|
// After async resolution, link titles should be visible
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('GitHub')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('Notion')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows empty message when fetchFavorites resolves to empty array', async () => {
|
||||||
|
mockFetch.mockResolvedValue([]);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={false}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('favorites.empty')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('add: submit form in edit mode calls createFavorite with widgetId, title, url', async () => {
|
||||||
|
mockFetch.mockResolvedValue([]);
|
||||||
|
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={true}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('favorites.empty')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fill in the add form (inputs are identified by placeholder translation keys)
|
||||||
|
const titleInput = screen.getByPlaceholderText('favorites.addTitle');
|
||||||
|
const urlInput = screen.getByPlaceholderText('favorites.addUrl');
|
||||||
|
|
||||||
|
// Use sync fireEvent — RTL will flush state updates automatically
|
||||||
|
act(() => {
|
||||||
|
fireEvent.change(titleInput, { target: { value: 'New Link' } });
|
||||||
|
fireEvent.change(urlInput, { target: { value: 'https://example.com' } });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit the form
|
||||||
|
const addButton = screen.getByRole('button', { name: /favorites\.addButton/i });
|
||||||
|
act(() => {
|
||||||
|
fireEvent.click(addButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
// waitFor polls until the async chain (createFavorite → setFavorites) completes
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(mockCreate).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
widgetId: 'fav-1',
|
||||||
|
title: 'New Link',
|
||||||
|
url: 'https://example.com',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// The new link title should appear in the list
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('New Link')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('edit: clicking edit, changing title, saving calls updateFavorite with id and new title', async () => {
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={true}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('GitHub')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click the edit button for 'GitHub' (aria-label is the translation key)
|
||||||
|
const editButtons = screen.getAllByRole('button', {
|
||||||
|
name: /favorites\.editButton/i,
|
||||||
|
});
|
||||||
|
act(() => {
|
||||||
|
fireEvent.click(editButtons[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Change the title in the inline edit form
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByDisplayValue('GitHub')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
const editTitleInput = screen.getByDisplayValue('GitHub');
|
||||||
|
act(() => {
|
||||||
|
fireEvent.change(editTitleInput, { target: { value: 'GitHub Updated' } });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click Save
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByRole('button', { name: /favorites\.saveButton/i })).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
const saveButton = screen.getByRole('button', {
|
||||||
|
name: /favorites\.saveButton/i,
|
||||||
|
});
|
||||||
|
act(() => {
|
||||||
|
fireEvent.click(saveButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
// updateFavorite called with the favorite id and new title
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(mockUpdate).toHaveBeenCalledWith(
|
||||||
|
'fav-id-1',
|
||||||
|
expect.objectContaining({ title: 'GitHub Updated' }),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('delete: clicking delete calls deleteFavorite with id and removes the row', async () => {
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={true}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('GitHub')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click the delete button for 'GitHub' (first delete button)
|
||||||
|
const deleteButtons = screen.getAllByRole('button', {
|
||||||
|
name: /favorites\.deleteButton/i,
|
||||||
|
});
|
||||||
|
act(() => {
|
||||||
|
fireEvent.click(deleteButtons[0]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// deleteFavorite called with the correct id
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(mockDelete).toHaveBeenCalledWith('fav-id-1');
|
||||||
|
});
|
||||||
|
|
||||||
|
// The deleted favorite is removed from the list
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.queryByText('GitHub')).not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('view toggle: switching to grid in edit mode renders grid container', async () => {
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{ viewMode: 'list' }}
|
||||||
|
isEditMode={true}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('GitHub')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Default list view — list container should be present
|
||||||
|
expect(screen.getByTestId('favorites-list')).toBeInTheDocument();
|
||||||
|
|
||||||
|
// Click the 'Kacheln' (grid) toggle button
|
||||||
|
const gridButton = screen.getByRole('button', {
|
||||||
|
name: /favorites\.gridView/i,
|
||||||
|
});
|
||||||
|
await act(async () => {
|
||||||
|
fireEvent.click(gridButton);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Grid container should now be rendered
|
||||||
|
expect(screen.getByTestId('favorites-grid')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('letter fallback: link with iconUrl null renders first uppercase letter of title', async () => {
|
||||||
|
render(
|
||||||
|
<FavoritesWidget
|
||||||
|
instanceId="fav-1"
|
||||||
|
config={{}}
|
||||||
|
isEditMode={false}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
|
||||||
|
await waitFor(() => {
|
||||||
|
expect(screen.getByText('Notion')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 'Notion' has iconUrl null — the letter fallback span should show 'N'
|
||||||
|
expect(screen.getByTestId('letter-fallback-fav-id-2')).toHaveTextContent('N');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,462 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { FormEvent, useEffect, useMemo, useState } from 'react';
|
||||||
|
import { useTranslations } from 'next-intl';
|
||||||
|
import { updateWidgetConfig } from '@/lib/dashboard-api';
|
||||||
|
import {
|
||||||
|
createFavorite,
|
||||||
|
deleteFavorite,
|
||||||
|
fetchFavorites,
|
||||||
|
updateFavorite,
|
||||||
|
type FavoriteLink,
|
||||||
|
} from '@/lib/favorites-api';
|
||||||
|
import type { WidgetProps } from '@/components/dashboard/widget-registry';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* FavoritesWidget — persistent per-widget list of favorite links (DASH-09).
|
||||||
|
*
|
||||||
|
* Features:
|
||||||
|
* - Loads favorites scoped to this widget instance via instanceId (Pitfall 3)
|
||||||
|
* - Add / edit / delete in edit mode with inline forms
|
||||||
|
* - List view (default, D-03) and grid view switchable in edit mode
|
||||||
|
* - Server-side icon discovery (letter fallback when iconUrl is null)
|
||||||
|
* - Links open in new tab with rel="noreferrer" (T-08-08 open-redirect mitigation)
|
||||||
|
* - No dangerouslySetInnerHTML (T-08-07 XSS mitigation)
|
||||||
|
*/
|
||||||
|
export function FavoritesWidget({
|
||||||
|
instanceId,
|
||||||
|
config,
|
||||||
|
isEditMode,
|
||||||
|
}: WidgetProps) {
|
||||||
|
const t = useTranslations('widgets');
|
||||||
|
|
||||||
|
const [favorites, setFavorites] = useState<FavoriteLink[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// View mode: read from config, default 'list' (D-03)
|
||||||
|
const [viewMode, setViewMode] = useState<'list' | 'grid'>(
|
||||||
|
(config.viewMode as 'list' | 'grid') ?? 'list',
|
||||||
|
);
|
||||||
|
|
||||||
|
// Add-form state
|
||||||
|
const [newTitle, setNewTitle] = useState('');
|
||||||
|
const [newUrl, setNewUrl] = useState('');
|
||||||
|
const [newIconUrl, setNewIconUrl] = useState('');
|
||||||
|
|
||||||
|
// Inline edit state
|
||||||
|
const [editingId, setEditingId] = useState<string | null>(null);
|
||||||
|
const [editTitle, setEditTitle] = useState('');
|
||||||
|
const [editUrl, setEditUrl] = useState('');
|
||||||
|
const [editIconUrl, setEditIconUrl] = useState('');
|
||||||
|
|
||||||
|
// Sorted favorites: position asc, then title asc
|
||||||
|
const sortedFavorites = useMemo(
|
||||||
|
() =>
|
||||||
|
[...favorites].sort((a, b) => {
|
||||||
|
if (a.position !== b.position) return a.position - b.position;
|
||||||
|
return a.title.localeCompare(b.title);
|
||||||
|
}),
|
||||||
|
[favorites],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
try {
|
||||||
|
const data = await fetchFavorites(instanceId);
|
||||||
|
if (!cancelled) setFavorites(data);
|
||||||
|
} catch {
|
||||||
|
// Use a stable error key — t is excluded from deps intentionally
|
||||||
|
if (!cancelled) setError('favorites.error');
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
void load();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
// instanceId is the only meaningful dependency — t is stable at runtime
|
||||||
|
// and excluded to prevent re-fetching on every render (mock creates new fn)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [instanceId]);
|
||||||
|
|
||||||
|
function getFallbackLetter(title: string): string {
|
||||||
|
const clean = title.trim();
|
||||||
|
return clean ? clean.slice(0, 1).toUpperCase() : '?';
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- View mode toggle (edit mode only, D-03) ---
|
||||||
|
function handleViewMode(next: 'list' | 'grid') {
|
||||||
|
setViewMode(next);
|
||||||
|
void updateWidgetConfig(instanceId, { viewMode: next });
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Add favorite ---
|
||||||
|
async function handleAdd(e: FormEvent<HTMLFormElement>) {
|
||||||
|
e.preventDefault();
|
||||||
|
const cleanTitle = newTitle.trim();
|
||||||
|
const cleanUrl = newUrl.trim();
|
||||||
|
const cleanIconUrl = newIconUrl.trim();
|
||||||
|
|
||||||
|
if (!cleanTitle || !cleanUrl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const created = await createFavorite({
|
||||||
|
widgetId: instanceId,
|
||||||
|
title: cleanTitle,
|
||||||
|
url: cleanUrl,
|
||||||
|
iconUrl: cleanIconUrl || undefined,
|
||||||
|
});
|
||||||
|
setFavorites((prev) => [...prev, created]);
|
||||||
|
setNewTitle('');
|
||||||
|
setNewUrl('');
|
||||||
|
setNewIconUrl('');
|
||||||
|
} catch {
|
||||||
|
setError(t('favorites.error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Edit favorite ---
|
||||||
|
function startEdit(fav: FavoriteLink) {
|
||||||
|
setEditingId(fav.id);
|
||||||
|
setEditTitle(fav.title);
|
||||||
|
setEditUrl(fav.url);
|
||||||
|
setEditIconUrl(fav.iconUrl ?? '');
|
||||||
|
setError(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelEdit() {
|
||||||
|
setEditingId(null);
|
||||||
|
setEditTitle('');
|
||||||
|
setEditUrl('');
|
||||||
|
setEditIconUrl('');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSaveEdit(id: string) {
|
||||||
|
const cleanTitle = editTitle.trim();
|
||||||
|
const cleanUrl = editUrl.trim();
|
||||||
|
const cleanIconUrl = editIconUrl.trim();
|
||||||
|
|
||||||
|
if (!cleanTitle || !cleanUrl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const updated = await updateFavorite(id, {
|
||||||
|
title: cleanTitle,
|
||||||
|
url: cleanUrl,
|
||||||
|
iconUrl: cleanIconUrl || null,
|
||||||
|
});
|
||||||
|
setFavorites((prev) => prev.map((f) => (f.id === id ? updated : f)));
|
||||||
|
cancelEdit();
|
||||||
|
} catch {
|
||||||
|
setError(t('favorites.error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Delete favorite ---
|
||||||
|
async function handleDelete(id: string) {
|
||||||
|
try {
|
||||||
|
await deleteFavorite(id);
|
||||||
|
setFavorites((prev) => prev.filter((f) => f.id !== id));
|
||||||
|
if (editingId === id) cancelEdit();
|
||||||
|
} catch {
|
||||||
|
setError(t('favorites.error'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Render ---
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full overflow-auto p-2 gap-2">
|
||||||
|
{/* View mode toggle (edit mode only) */}
|
||||||
|
{isEditMode && (
|
||||||
|
<div className="flex gap-1 widgetNoDrag" aria-label={t('favorites.name')}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleViewMode('list')}
|
||||||
|
className={`px-2 py-1 text-xs rounded ${
|
||||||
|
viewMode === 'list'
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'bg-muted text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t('favorites.listView')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleViewMode('grid')}
|
||||||
|
className={`px-2 py-1 text-xs rounded ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'bg-muted text-muted-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t('favorites.gridView')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Status messages */}
|
||||||
|
{loading && (
|
||||||
|
<p className="text-xs text-muted-foreground">{t('favorites.loading')}</p>
|
||||||
|
)}
|
||||||
|
{error && (
|
||||||
|
<p className="text-xs text-destructive">{error}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Favorites list / grid */}
|
||||||
|
{!loading && sortedFavorites.length === 0 && (
|
||||||
|
<p className="text-xs text-muted-foreground">{t('favorites.empty')}</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && sortedFavorites.length > 0 && (
|
||||||
|
viewMode === 'grid' ? (
|
||||||
|
<div
|
||||||
|
data-testid="favorites-grid"
|
||||||
|
className="grid grid-cols-3 gap-2"
|
||||||
|
>
|
||||||
|
{sortedFavorites.map((fav) => (
|
||||||
|
<FavoriteTile
|
||||||
|
key={fav.id}
|
||||||
|
fav={fav}
|
||||||
|
isEditMode={isEditMode}
|
||||||
|
editingId={editingId}
|
||||||
|
editTitle={editTitle}
|
||||||
|
editUrl={editUrl}
|
||||||
|
editIconUrl={editIconUrl}
|
||||||
|
getFallbackLetter={getFallbackLetter}
|
||||||
|
onStartEdit={startEdit}
|
||||||
|
onCancelEdit={cancelEdit}
|
||||||
|
onSaveEdit={handleSaveEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
onEditTitleChange={setEditTitle}
|
||||||
|
onEditUrlChange={setEditUrl}
|
||||||
|
onEditIconUrlChange={setEditIconUrl}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
data-testid="favorites-list"
|
||||||
|
className="flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
{sortedFavorites.map((fav) => (
|
||||||
|
<FavoriteTile
|
||||||
|
key={fav.id}
|
||||||
|
fav={fav}
|
||||||
|
isEditMode={isEditMode}
|
||||||
|
editingId={editingId}
|
||||||
|
editTitle={editTitle}
|
||||||
|
editUrl={editUrl}
|
||||||
|
editIconUrl={editIconUrl}
|
||||||
|
getFallbackLetter={getFallbackLetter}
|
||||||
|
onStartEdit={startEdit}
|
||||||
|
onCancelEdit={cancelEdit}
|
||||||
|
onSaveEdit={handleSaveEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
onEditTitleChange={setEditTitle}
|
||||||
|
onEditUrlChange={setEditUrl}
|
||||||
|
onEditIconUrlChange={setEditIconUrl}
|
||||||
|
t={t}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Add form (edit mode only, D-04) */}
|
||||||
|
{isEditMode && (
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => void handleAdd(e)}
|
||||||
|
className="flex flex-col gap-1 pt-1 border-t border-border widgetNoDrag"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
|
||||||
|
value={newTitle}
|
||||||
|
onChange={(e) => setNewTitle(e.target.value)}
|
||||||
|
placeholder={t('favorites.addTitle')}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
|
||||||
|
value={newUrl}
|
||||||
|
onChange={(e) => setNewUrl(e.target.value)}
|
||||||
|
placeholder={t('favorites.addUrl')}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
{t('favorites.addButton')}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- FavoriteTile sub-component ---
|
||||||
|
|
||||||
|
type FavoriteTileProps = {
|
||||||
|
fav: FavoriteLink;
|
||||||
|
isEditMode: boolean;
|
||||||
|
editingId: string | null;
|
||||||
|
editTitle: string;
|
||||||
|
editUrl: string;
|
||||||
|
editIconUrl: string;
|
||||||
|
getFallbackLetter: (title: string) => string;
|
||||||
|
onStartEdit: (fav: FavoriteLink) => void;
|
||||||
|
onCancelEdit: () => void;
|
||||||
|
onSaveEdit: (id: string) => Promise<void>;
|
||||||
|
onDelete: (id: string) => Promise<void>;
|
||||||
|
onEditTitleChange: (v: string) => void;
|
||||||
|
onEditUrlChange: (v: string) => void;
|
||||||
|
onEditIconUrlChange: (v: string) => void;
|
||||||
|
t: (key: string) => string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function FavoriteTile({
|
||||||
|
fav,
|
||||||
|
isEditMode,
|
||||||
|
editingId,
|
||||||
|
editTitle,
|
||||||
|
editUrl,
|
||||||
|
editIconUrl,
|
||||||
|
getFallbackLetter,
|
||||||
|
onStartEdit,
|
||||||
|
onCancelEdit,
|
||||||
|
onSaveEdit,
|
||||||
|
onDelete,
|
||||||
|
onEditTitleChange,
|
||||||
|
onEditUrlChange,
|
||||||
|
onEditIconUrlChange,
|
||||||
|
t,
|
||||||
|
}: FavoriteTileProps) {
|
||||||
|
const isEditing = editingId === fav.id;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col">
|
||||||
|
{/* Main link row */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{/* Anchor — opens in new tab, no server-side redirect (T-08-08) */}
|
||||||
|
<a
|
||||||
|
href={fav.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
className="flex items-center gap-2 flex-1 min-w-0 hover:underline widgetNoDrag"
|
||||||
|
onClick={(e) => isEditMode && e.preventDefault()} // block navigation in edit mode
|
||||||
|
>
|
||||||
|
{/* Icon container with letter fallback (T-08-07 — no dangerouslySetInnerHTML) */}
|
||||||
|
<div className="relative flex-shrink-0 w-5 h-5">
|
||||||
|
<span
|
||||||
|
data-testid={`letter-fallback-${fav.id}`}
|
||||||
|
className="absolute inset-0 flex items-center justify-center text-xs font-semibold bg-muted rounded"
|
||||||
|
>
|
||||||
|
{getFallbackLetter(fav.title)}
|
||||||
|
</span>
|
||||||
|
{fav.iconUrl && (
|
||||||
|
<img
|
||||||
|
src={fav.iconUrl}
|
||||||
|
alt=""
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
loading="lazy"
|
||||||
|
className="absolute inset-0 w-5 h-5 rounded"
|
||||||
|
onError={(e) => {
|
||||||
|
(e.currentTarget as HTMLImageElement).style.display = 'none';
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="text-xs truncate">{fav.title}</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Action buttons (edit mode only, D-04) */}
|
||||||
|
{isEditMode && !isEditing && (
|
||||||
|
<div className="flex gap-1 flex-shrink-0 widgetNoDrag">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={t('favorites.editButton')}
|
||||||
|
title={t('favorites.editButton')}
|
||||||
|
className="p-0.5 text-muted-foreground hover:text-foreground"
|
||||||
|
onClick={() => onStartEdit(fav)}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M4 20h4.6L19.2 9.4a2.1 2.1 0 0 0 0-3l-1.6-1.6a2.1 2.1 0 0 0-3 0L4 15.4V20Zm2-2v-1.8L16.1 6.1l1.8 1.8L7.8 18H6Zm9.1-12.9 1.8-1.8 1.8 1.8-1.8 1.8-1.8-1.8Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label={t('favorites.deleteButton')}
|
||||||
|
title={t('favorites.deleteButton')}
|
||||||
|
className="p-0.5 text-muted-foreground hover:text-destructive"
|
||||||
|
onClick={() => void onDelete(fav.id)}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="currentColor"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<path d="M7 21c-.6 0-1.1-.2-1.5-.7A2 2 0 0 1 5 18.9V8H4V6h5V4h6v2h5v2h-1v10.9c0 .6-.2 1.1-.7 1.5-.4.4-.9.6-1.5.6H7ZM17 8H7v10.9l.1.1h9.8l.1-.1V8Zm-8 9h2v-7H9v7Zm4 0h2v-7h-2v7Z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Inline edit form */}
|
||||||
|
{isEditMode && isEditing && (
|
||||||
|
<div className="flex flex-col gap-1 mt-1 pl-7 widgetNoDrag">
|
||||||
|
<input
|
||||||
|
className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
|
||||||
|
value={editTitle}
|
||||||
|
onChange={(e) => onEditTitleChange(e.target.value)}
|
||||||
|
placeholder={t('favorites.addTitle')}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
|
||||||
|
value={editUrl}
|
||||||
|
onChange={(e) => onEditUrlChange(e.target.value)}
|
||||||
|
placeholder={t('favorites.addUrl')}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
|
||||||
|
value={editIconUrl}
|
||||||
|
onChange={(e) => onEditIconUrlChange(e.target.value)}
|
||||||
|
placeholder="Logo-URL (optional)"
|
||||||
|
/>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex-1 rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
|
||||||
|
onClick={() => void onSaveEdit(fav.id)}
|
||||||
|
>
|
||||||
|
{t('favorites.saveButton')}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex-1 rounded bg-muted px-2 py-1 text-xs text-muted-foreground hover:bg-muted/80 transition-colors"
|
||||||
|
onClick={onCancelEdit}
|
||||||
|
>
|
||||||
|
{t('favorites.cancelButton')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
/**
|
||||||
|
* Favorites API client functions.
|
||||||
|
* Mirrors the NestJS FavoritesController routes (08-03).
|
||||||
|
* All calls use credentials: 'include' for cookie-based auth.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
|
||||||
|
|
||||||
|
export interface FavoriteLink {
|
||||||
|
id: string;
|
||||||
|
widgetId: string;
|
||||||
|
title: string;
|
||||||
|
url: string;
|
||||||
|
iconUrl: string | null;
|
||||||
|
position: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch all favorite links for a specific widget instance.
|
||||||
|
* The widgetId parameter scopes the query to the correct widget (Pitfall 3).
|
||||||
|
*/
|
||||||
|
export async function fetchFavorites(widgetId: string): Promise<FavoriteLink[]> {
|
||||||
|
const res = await fetch(
|
||||||
|
`${API_URL}/favorites?widgetId=${encodeURIComponent(widgetId)}`,
|
||||||
|
{ credentials: 'include' },
|
||||||
|
);
|
||||||
|
if (!res.ok) throw new Error('Failed to fetch favorites');
|
||||||
|
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a new favorite link.
|
||||||
|
* Server-side icon discovery runs automatically if iconUrl is not provided.
|
||||||
|
*/
|
||||||
|
export async function createFavorite(payload: {
|
||||||
|
widgetId: string;
|
||||||
|
title: string;
|
||||||
|
url: string;
|
||||||
|
iconUrl?: string;
|
||||||
|
}): Promise<FavoriteLink> {
|
||||||
|
const res = await fetch(`${API_URL}/favorites`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Failed to create favorite');
|
||||||
|
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Update an existing favorite link.
|
||||||
|
* Pass iconUrl: null to clear a stored icon.
|
||||||
|
*/
|
||||||
|
export async function updateFavorite(
|
||||||
|
id: string,
|
||||||
|
payload: Partial<{ title: string; url: string; iconUrl: string | null; position: number }>,
|
||||||
|
): Promise<FavoriteLink> {
|
||||||
|
const res = await fetch(`${API_URL}/favorites/${encodeURIComponent(id)}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
credentials: 'include',
|
||||||
|
body: JSON.stringify(payload),
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Failed to update favorite');
|
||||||
|
|
||||||
|
return res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete a favorite link by id.
|
||||||
|
*/
|
||||||
|
export async function deleteFavorite(id: string): Promise<void> {
|
||||||
|
const res = await fetch(`${API_URL}/favorites/${encodeURIComponent(id)}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
credentials: 'include',
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Failed to delete favorite');
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user