mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 20:41:09 +02:00
feat(community,feedback): +5 reward chip + Phase 3.F legacy-cleanup
UI:
- FeedbackQuickModal Success-State + Onboarding-Wish Confirm zeigen
+5-Mana-Reward-Chip mit reward-in-Animation. Sofortiger Sichtbarer
Reziprozitäts-Loop.
Legacy-Cleanup (Phase 3.F):
- @mana/feedback dropped:
- FeedbackPage.svelte, FeedbackCard.svelte, FeedbackList.svelte,
FeedbackForm.svelte, VoteButton.svelte, StatusBadge.svelte
(alles Pre-Reactions-Markup, durch Community-Modul ersetzt)
- vote/unvote/toggleVote/getPublicFeedback service-shims
- VoteResponse, voteCount, userHasVoted Types
- mana-web dropped:
- lib/modules/feedback/ListView.svelte
- routes/(app)/feedback/+page.svelte
- app-registry-Eintrag 'feedback' (nur Bug-Reports — Community macht
das ohnehin besser via /community)
Pre-launch saubere Lösung: keine Backward-Compat-Shims, keine alten
Markup-Reste. ReactionBar bleibt der einzige Voting-Surface, /community
ist die einzige Feedback-Surface.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
dbe24acfc4
commit
eecf64c1c6
15 changed files with 90 additions and 1017 deletions
|
|
@ -1323,16 +1323,6 @@ registerApp({
|
|||
},
|
||||
});
|
||||
|
||||
registerApp({
|
||||
id: 'feedback',
|
||||
name: 'Feedback',
|
||||
color: '#8B5CF6',
|
||||
icon: ChatCircleDots,
|
||||
views: {
|
||||
list: { load: () => import('$lib/modules/feedback/ListView.svelte') },
|
||||
},
|
||||
});
|
||||
|
||||
registerApp({
|
||||
id: 'community',
|
||||
name: 'Community',
|
||||
|
|
|
|||
|
|
@ -105,6 +105,10 @@
|
|||
Dein Feedback ist eingegangen — sichtbar als
|
||||
<strong>{submittedDisplayName}</strong>.
|
||||
</p>
|
||||
<div class="reward-chip" aria-live="polite">
|
||||
<span class="reward-amount">+5</span>
|
||||
<span class="reward-label">Mana Credits</span>
|
||||
</div>
|
||||
{#if isPublic}
|
||||
<p class="muted">Es taucht in der Community-Page auf, sobald wir es freigeben.</p>
|
||||
{:else}
|
||||
|
|
@ -261,6 +265,45 @@
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.reward-chip {
|
||||
align-self: flex-start;
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem;
|
||||
padding: 0.4375rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
hsl(var(--color-primary) / 0.18),
|
||||
hsl(var(--color-primary) / 0.08)
|
||||
);
|
||||
color: hsl(var(--color-primary));
|
||||
border: 1px solid hsl(var(--color-primary) / 0.3);
|
||||
font-weight: 600;
|
||||
animation: reward-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.reward-amount {
|
||||
font-size: 1rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.reward-label {
|
||||
font-size: 0.8125rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@keyframes reward-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px) scale(0.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.context-badge {
|
||||
align-self: flex-start;
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
<!--
|
||||
Feedback — Workbench-embedded feedback/bug-report form.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { FeedbackPage } from '@mana/feedback';
|
||||
import { feedbackService } from '$lib/api/feedback';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
</script>
|
||||
|
||||
<div class="feedback-page">
|
||||
<FeedbackPage {feedbackService} appName="Mana" currentUserId={authStore.user?.id} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.feedback-page {
|
||||
padding: 0.75rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { FeedbackPage } from '@mana/feedback';
|
||||
import { feedbackService } from '$lib/api/feedback';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { RoutePage } from '$lib/components/shell';
|
||||
</script>
|
||||
|
||||
<RoutePage appId="feedback">
|
||||
<FeedbackPage {feedbackService} appName="Mana" currentUserId={authStore.user?.id} />
|
||||
</RoutePage>
|
||||
|
|
@ -138,7 +138,11 @@
|
|||
|
||||
{#if submittedDisplayName}
|
||||
<aside class="preview" aria-live="polite">
|
||||
Gesendet — sichtbar als <strong>{submittedDisplayName}</strong>
|
||||
<div>Gesendet — sichtbar als <strong>{submittedDisplayName}</strong></div>
|
||||
<div class="reward-chip">
|
||||
<span class="reward-amount">+5</span>
|
||||
<span class="reward-label">Mana Credits</span>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -319,11 +323,52 @@
|
|||
}
|
||||
|
||||
.preview {
|
||||
padding: 0.625rem 0.875rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 0.875rem;
|
||||
border-radius: 0.625rem;
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
color: hsl(var(--color-primary));
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reward-chip {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.375rem;
|
||||
padding: 0.4375rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
hsl(var(--color-primary) / 0.18),
|
||||
hsl(var(--color-primary) / 0.08)
|
||||
);
|
||||
border: 1px solid hsl(var(--color-primary) / 0.35);
|
||||
font-weight: 600;
|
||||
animation: reward-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.reward-amount {
|
||||
font-size: 1rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.reward-label {
|
||||
font-size: 0.8125rem;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
@keyframes reward-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-6px) scale(0.92);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,165 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { Feedback } from './feedback';
|
||||
import StatusBadge from './StatusBadge.svelte';
|
||||
import VoteButton from './VoteButton.svelte';
|
||||
|
||||
interface Props {
|
||||
feedback: Feedback;
|
||||
onVote: (feedbackId: string, hasVoted: boolean) => void;
|
||||
showStatus?: boolean;
|
||||
isOwner?: boolean;
|
||||
votingDisabled?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
feedback,
|
||||
onVote,
|
||||
showStatus = true,
|
||||
isOwner = false,
|
||||
votingDisabled = false,
|
||||
}: Props = $props();
|
||||
|
||||
function handleVote() {
|
||||
onVote(feedback.id, feedback.userHasVoted ?? false);
|
||||
}
|
||||
|
||||
function formatDate(dateString: string): string {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="feedback-card" class:feedback-card--owner={isOwner}>
|
||||
<div class="feedback-card__vote">
|
||||
<VoteButton
|
||||
count={feedback.voteCount}
|
||||
hasVoted={feedback.userHasVoted ?? false}
|
||||
onToggle={handleVote}
|
||||
disabled={votingDisabled || !feedback.isPublic}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="feedback-card__content">
|
||||
<div class="feedback-card__header">
|
||||
{#if feedback.title}
|
||||
<h3 class="feedback-card__title">{feedback.title}</h3>
|
||||
{/if}
|
||||
{#if showStatus}
|
||||
<StatusBadge status={feedback.status} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<p class="feedback-card__text">{feedback.feedbackText}</p>
|
||||
|
||||
{#if feedback.adminResponse}
|
||||
<div class="feedback-card__response">
|
||||
<span class="feedback-card__response-label">Admin-Antwort:</span>
|
||||
<p class="feedback-card__response-text">{feedback.adminResponse}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="feedback-card__footer">
|
||||
<span class="feedback-card__date">{formatDate(feedback.createdAt)}</span>
|
||||
{#if isOwner}
|
||||
<span class="feedback-card__owner-badge">Dein Feedback</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.feedback-card {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(var(--color-surface, 0 0% 100%));
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-card:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feedback-card--owner {
|
||||
border-left: 3px solid hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.feedback-card__vote {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feedback-card__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feedback-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.feedback-card__title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-card__text {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.feedback-card__response {
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.1);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.feedback-card__response-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.feedback-card__response-text {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-card__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.feedback-card__date {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
|
||||
.feedback-card__owner-badge {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.1);
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,191 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { CreateFeedbackInput } from './api';
|
||||
|
||||
interface Props {
|
||||
onSubmit: (input: CreateFeedbackInput) => Promise<void>;
|
||||
onCancel?: () => void;
|
||||
isSubmitting?: boolean;
|
||||
feedbackLabel?: string;
|
||||
submitLabel?: string;
|
||||
cancelLabel?: string;
|
||||
feedbackPlaceholder?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
onSubmit,
|
||||
onCancel,
|
||||
isSubmitting = false,
|
||||
feedbackLabel = 'Dein Feedback',
|
||||
submitLabel = 'Feedback senden',
|
||||
cancelLabel = 'Abbrechen',
|
||||
feedbackPlaceholder = 'Was gefällt dir? Was können wir verbessern?',
|
||||
}: Props = $props();
|
||||
|
||||
let feedbackText = $state('');
|
||||
let error = $state('');
|
||||
|
||||
async function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
|
||||
if (feedbackText.trim().length < 10) {
|
||||
error = 'Bitte gib mindestens 10 Zeichen ein.';
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSubmit({
|
||||
feedbackText: feedbackText.trim(),
|
||||
});
|
||||
|
||||
// Reset form on success
|
||||
feedbackText = '';
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten.';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form class="feedback-form" onsubmit={handleSubmit}>
|
||||
<div class="feedback-form__field">
|
||||
<label for="feedback-text" class="feedback-form__label">{feedbackLabel}</label>
|
||||
<textarea
|
||||
id="feedback-text"
|
||||
class="feedback-form__textarea"
|
||||
placeholder={feedbackPlaceholder}
|
||||
bind:value={feedbackText}
|
||||
rows="5"
|
||||
maxlength="2000"
|
||||
disabled={isSubmitting}
|
||||
required
|
||||
></textarea>
|
||||
<span class="feedback-form__counter">{feedbackText.length}/2000</span>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<div class="feedback-form__error">{error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="feedback-form__actions">
|
||||
{#if onCancel}
|
||||
<button
|
||||
type="button"
|
||||
class="feedback-form__button feedback-form__button--secondary"
|
||||
onclick={onCancel}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
type="submit"
|
||||
class="feedback-form__button feedback-form__button--primary"
|
||||
disabled={isSubmitting || feedbackText.trim().length < 10}
|
||||
>
|
||||
{#if isSubmitting}
|
||||
Wird gesendet...
|
||||
{:else}
|
||||
{submitLabel}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.feedback-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feedback-form__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.feedback-form__label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-form__textarea {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
background: hsl(var(--color-input, 0 0% 100%));
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-form__textarea::placeholder {
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
|
||||
.feedback-form__textarea:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.feedback-form__textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.feedback-form__counter {
|
||||
align-self: flex-end;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
|
||||
.feedback-form__error {
|
||||
padding: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-error, 6 78% 57%) / 0.1);
|
||||
color: hsl(var(--color-error, 6 78% 57%));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.feedback-form__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.feedback-form__button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-form__button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feedback-form__button--primary {
|
||||
background: hsl(var(--color-primary, 47 95% 58%));
|
||||
color: hsl(var(--color-primary-foreground, 0 0% 0%));
|
||||
}
|
||||
|
||||
.feedback-form__button--primary:hover:not(:disabled) {
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.9);
|
||||
}
|
||||
|
||||
.feedback-form__button--secondary {
|
||||
background: transparent;
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-form__button--secondary:hover:not(:disabled) {
|
||||
background: hsl(var(--color-muted, 0 0% 90%));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { Feedback } from './feedback';
|
||||
import FeedbackCard from './FeedbackCard.svelte';
|
||||
|
||||
interface Props {
|
||||
items: Feedback[];
|
||||
currentUserId?: string;
|
||||
onVote: (feedbackId: string, hasVoted: boolean) => void;
|
||||
votingDisabled?: boolean;
|
||||
emptyMessage?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
items,
|
||||
currentUserId,
|
||||
onVote,
|
||||
votingDisabled = false,
|
||||
emptyMessage = 'Noch kein Feedback vorhanden',
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="feedback-list">
|
||||
{#if items.length === 0}
|
||||
<div class="feedback-list__empty">
|
||||
<p>{emptyMessage}</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#each items as feedback (feedback.id)}
|
||||
<FeedbackCard
|
||||
{feedback}
|
||||
{onVote}
|
||||
{votingDisabled}
|
||||
isOwner={currentUserId === feedback.userId}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.feedback-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.feedback-list__empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(var(--color-surface, 0 0% 100%) / 0.5);
|
||||
border: 1px dashed hsl(var(--color-border, 0 0% 90%));
|
||||
}
|
||||
|
||||
.feedback-list__empty p {
|
||||
margin: 0;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,395 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { FeedbackService } from './createFeedbackService';
|
||||
import type { Feedback } from './feedback';
|
||||
import type { CreateFeedbackInput } from './api';
|
||||
import FeedbackForm from './FeedbackForm.svelte';
|
||||
import FeedbackList from './FeedbackList.svelte';
|
||||
|
||||
interface Props {
|
||||
/** Pre-configured feedback service instance */
|
||||
feedbackService: FeedbackService;
|
||||
/** App name for display */
|
||||
appName: string;
|
||||
/** Current user ID for highlighting own feedback */
|
||||
currentUserId?: string;
|
||||
/** Page title */
|
||||
pageTitle?: string;
|
||||
/** Page subtitle */
|
||||
pageSubtitle?: string;
|
||||
/** Tab label for own feedback */
|
||||
myFeedbackLabel?: string;
|
||||
/** Tab label for community feedback */
|
||||
communityLabel?: string;
|
||||
/** Empty state message for own feedback */
|
||||
myFeedbackEmptyMessage?: string;
|
||||
/** Empty state message for community feedback */
|
||||
communityEmptyMessage?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
feedbackService,
|
||||
appName,
|
||||
currentUserId,
|
||||
pageTitle = 'Feedback & Vorschläge',
|
||||
pageSubtitle = 'Teile deine Ideen und stimme für Feature-Wünsche ab',
|
||||
myFeedbackLabel = 'Mein Feedback',
|
||||
communityLabel = 'Community',
|
||||
myFeedbackEmptyMessage = 'Du hast noch kein Feedback eingereicht',
|
||||
communityEmptyMessage = 'Noch keine öffentlichen Vorschläge',
|
||||
}: Props = $props();
|
||||
|
||||
// State
|
||||
let activeTab = $state<'my' | 'community'>('community');
|
||||
let myFeedback = $state<Feedback[]>([]);
|
||||
let publicFeedback = $state<Feedback[]>([]);
|
||||
let isLoading = $state(true);
|
||||
let isSubmitting = $state(false);
|
||||
let showForm = $state(false);
|
||||
let successMessage = $state('');
|
||||
|
||||
// Load data on mount
|
||||
$effect(() => {
|
||||
loadFeedback();
|
||||
});
|
||||
|
||||
async function loadFeedback() {
|
||||
isLoading = true;
|
||||
try {
|
||||
const [myResult, publicResult] = await Promise.all([
|
||||
feedbackService.getMyFeedback(),
|
||||
feedbackService.getPublicFeedback({ sort: 'score' }),
|
||||
]);
|
||||
myFeedback = myResult.items;
|
||||
publicFeedback = publicResult.items;
|
||||
} catch (error) {
|
||||
console.error('[FeedbackPage] Error loading feedback:', error);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(input: CreateFeedbackInput) {
|
||||
isSubmitting = true;
|
||||
try {
|
||||
await feedbackService.createFeedback(input);
|
||||
showForm = false;
|
||||
successMessage = 'Feedback erfolgreich gesendet!';
|
||||
setTimeout(() => {
|
||||
successMessage = '';
|
||||
}, 3000);
|
||||
await loadFeedback();
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVote(feedbackId: string, _hasVoted: boolean) {
|
||||
try {
|
||||
await feedbackService.toggleVote(feedbackId);
|
||||
await loadFeedback();
|
||||
} catch (error) {
|
||||
console.error('[FeedbackPage] Error voting:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveTab(tab: 'my' | 'community') {
|
||||
activeTab = tab;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{pageTitle} - {appName}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="feedback-page">
|
||||
<div class="feedback-page__container">
|
||||
<!-- Header -->
|
||||
<div class="feedback-page__header">
|
||||
<div class="feedback-page__icon">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="feedback-page__title">{pageTitle}</h1>
|
||||
<p class="feedback-page__subtitle">{pageSubtitle}</p>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
{#if successMessage}
|
||||
<div class="feedback-page__success">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
{successMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- New Feedback Button / Form -->
|
||||
<div class="feedback-page__form-section">
|
||||
{#if showForm}
|
||||
<div class="feedback-page__form-card">
|
||||
<h2 class="feedback-page__form-title">Neues Feedback</h2>
|
||||
<FeedbackForm
|
||||
onSubmit={handleSubmit}
|
||||
onCancel={() => (showForm = false)}
|
||||
{isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="feedback-page__new-button" onclick={() => (showForm = true)}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Feedback geben
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="feedback-page__tabs">
|
||||
<button
|
||||
class="feedback-page__tab"
|
||||
class:feedback-page__tab--active={activeTab === 'community'}
|
||||
onclick={() => setActiveTab('community')}
|
||||
>
|
||||
{communityLabel}
|
||||
<span class="feedback-page__tab-count">{publicFeedback.length}</span>
|
||||
</button>
|
||||
<button
|
||||
class="feedback-page__tab"
|
||||
class:feedback-page__tab--active={activeTab === 'my'}
|
||||
onclick={() => setActiveTab('my')}
|
||||
>
|
||||
{myFeedbackLabel}
|
||||
<span class="feedback-page__tab-count">{myFeedback.length}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="feedback-page__content">
|
||||
{#if isLoading}
|
||||
<div class="feedback-page__loading">
|
||||
<div class="feedback-page__spinner"></div>
|
||||
<p>Lade Feedback...</p>
|
||||
</div>
|
||||
{:else if activeTab === 'community'}
|
||||
<FeedbackList
|
||||
items={publicFeedback}
|
||||
{currentUserId}
|
||||
onVote={handleVote}
|
||||
emptyMessage={communityEmptyMessage}
|
||||
/>
|
||||
{:else}
|
||||
<FeedbackList
|
||||
items={myFeedback}
|
||||
{currentUserId}
|
||||
onVote={handleVote}
|
||||
votingDisabled={true}
|
||||
emptyMessage={myFeedbackEmptyMessage}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.feedback-page {
|
||||
min-height: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.feedback-page__container {
|
||||
max-width: 48rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.feedback-page__header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.feedback-page__icon {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 auto 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1rem;
|
||||
background: hsl(var(--color-surface, 0 0% 100%));
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.feedback-page__icon svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.feedback-page__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-page__subtitle {
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
|
||||
.feedback-page__success {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-success, 145 63% 42%) / 0.1);
|
||||
color: hsl(var(--color-success, 145 63% 42%));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feedback-page__success svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.feedback-page__form-section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feedback-page__new-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 2px dashed hsl(var(--color-border, 0 0% 90%));
|
||||
border-radius: 0.75rem;
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-page__new-button:hover {
|
||||
border-color: hsl(var(--color-primary, 47 95% 58%));
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.05);
|
||||
}
|
||||
|
||||
.feedback-page__new-button svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.feedback-page__form-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: hsl(var(--color-surface, 0 0% 100%));
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
}
|
||||
|
||||
.feedback-page__form-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-page__tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.5rem;
|
||||
background: hsl(var(--color-muted, 0 0% 90%));
|
||||
}
|
||||
|
||||
.feedback-page__tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
background: transparent;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.feedback-page__tab:hover {
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
}
|
||||
|
||||
.feedback-page__tab--active {
|
||||
background: hsl(var(--color-surface, 0 0% 100%));
|
||||
color: hsl(var(--color-foreground, 0 0% 17%));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feedback-page__tab-count {
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
background: hsl(var(--color-muted, 0 0% 90%));
|
||||
}
|
||||
|
||||
.feedback-page__tab--active .feedback-page__tab-count {
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.1);
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.feedback-page__content {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.feedback-page__loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 3rem;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
}
|
||||
|
||||
.feedback-page__spinner {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 2px solid hsl(var(--color-border, 0 0% 90%));
|
||||
border-top-color: hsl(var(--color-primary, 47 95% 58%));
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { FeedbackStatus } from './feedback';
|
||||
import { FEEDBACK_STATUS_CONFIG } from './feedback';
|
||||
|
||||
interface Props {
|
||||
status: FeedbackStatus;
|
||||
}
|
||||
|
||||
let { status }: Props = $props();
|
||||
|
||||
const config = $derived(FEEDBACK_STATUS_CONFIG[status]);
|
||||
</script>
|
||||
|
||||
<span class="status-badge" style="--badge-color: {config.color};">
|
||||
{config.label}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: color-mix(in srgb, var(--badge-color) 15%, transparent);
|
||||
color: var(--badge-color);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
count: number;
|
||||
hasVoted: boolean;
|
||||
onToggle: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
let { count, hasVoted, onToggle, disabled = false }: Props = $props();
|
||||
|
||||
let isAnimating = $state(false);
|
||||
|
||||
function handleClick() {
|
||||
if (disabled) return;
|
||||
isAnimating = true;
|
||||
onToggle();
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
}, 300);
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="vote-button"
|
||||
class:vote-button--voted={hasVoted}
|
||||
class:vote-button--animating={isAnimating}
|
||||
onclick={handleClick}
|
||||
{disabled}
|
||||
type="button"
|
||||
aria-label={hasVoted ? 'Stimme entfernen' : 'Abstimmen'}
|
||||
>
|
||||
<svg
|
||||
class="vote-button__icon"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 15l-6-6-6 6" />
|
||||
</svg>
|
||||
<span class="vote-button__count">{count}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.vote-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid hsl(var(--color-border, 0 0% 90%));
|
||||
border-radius: 0.5rem;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: hsl(var(--color-muted-foreground, 0 0% 40%));
|
||||
min-width: 3rem;
|
||||
}
|
||||
|
||||
.vote-button:hover:not(:disabled) {
|
||||
border-color: hsl(var(--color-primary, 47 95% 58%));
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.vote-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.vote-button--voted {
|
||||
background: hsl(var(--color-primary, 47 95% 58%) / 0.1);
|
||||
border-color: hsl(var(--color-primary, 47 95% 58%));
|
||||
color: hsl(var(--color-primary, 47 95% 58%));
|
||||
}
|
||||
|
||||
.vote-button--animating {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.vote-button__icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.vote-button__count {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -73,10 +73,3 @@ export interface AdminPatchInput {
|
|||
}
|
||||
|
||||
export type ReactInput = { emoji: ReactionEmoji };
|
||||
|
||||
export interface VoteResponse {
|
||||
success: boolean;
|
||||
newVoteCount?: number;
|
||||
userHasVoted?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import type {
|
|||
ReactionResponse,
|
||||
AdminPatchInput,
|
||||
ReactInput,
|
||||
VoteResponse,
|
||||
} from './api';
|
||||
import type { FeedbackServiceConfig } from './types';
|
||||
import type { PublicFeedbackItem, ReactionEmoji } from './feedback';
|
||||
|
|
@ -148,27 +147,6 @@ export function createFeedbackService(config: FeedbackServiceConfig) {
|
|||
});
|
||||
}
|
||||
|
||||
// ── Legacy (back-compat shims) ─────────────────────────────────
|
||||
// Older callers still use vote/unvote — translate to 👍-reaction toggles.
|
||||
|
||||
async function vote(feedbackId: string): Promise<VoteResponse> {
|
||||
const res = await toggleReaction(feedbackId, '👍');
|
||||
return {
|
||||
success: true,
|
||||
newVoteCount: res.reactions['👍'] ?? 0,
|
||||
userHasVoted: res.userHasReacted,
|
||||
};
|
||||
}
|
||||
const unvote = vote; // toggle, semantically idempotent for legacy callers
|
||||
async function toggleVote(feedbackId: string): Promise<VoteResponse> {
|
||||
return vote(feedbackId);
|
||||
}
|
||||
|
||||
async function getPublicFeedback(query?: FeedbackQueryParams): Promise<FeedbackListResponse> {
|
||||
const items = await getPublicFeed(query);
|
||||
return { items: items as unknown as FeedbackListResponse['items'] };
|
||||
}
|
||||
|
||||
return {
|
||||
createFeedback,
|
||||
getPublicFeed,
|
||||
|
|
@ -180,11 +158,6 @@ export function createFeedbackService(config: FeedbackServiceConfig) {
|
|||
deleteFeedback,
|
||||
adminListAll,
|
||||
adminPatch,
|
||||
// Legacy (deprecated):
|
||||
getPublicFeedback,
|
||||
vote,
|
||||
unvote,
|
||||
toggleVote,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,6 @@ export interface Feedback {
|
|||
status: FeedbackStatus;
|
||||
isPublic: boolean;
|
||||
adminResponse?: string;
|
||||
voteCount: number;
|
||||
displayHash?: string;
|
||||
displayName?: string;
|
||||
moduleContext?: string;
|
||||
|
|
@ -90,8 +89,6 @@ export interface Feedback {
|
|||
updatedAt: string;
|
||||
publishedAt?: string;
|
||||
completedAt?: string;
|
||||
// Legacy / derived for older UI surfaces:
|
||||
userHasVoted?: boolean;
|
||||
}
|
||||
|
||||
export const FEEDBACK_CATEGORY_LABELS: Record<FeedbackCategory, string> = {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ export {
|
|||
type ReactionResponse,
|
||||
type AdminPatchInput,
|
||||
type ReactInput,
|
||||
type VoteResponse,
|
||||
} from './api';
|
||||
|
||||
// Services
|
||||
|
|
@ -43,10 +42,4 @@ export {
|
|||
export type { FeedbackServiceConfig, PublicFeedbackServiceConfig } from './types';
|
||||
|
||||
// UI Components
|
||||
export { default as FeedbackPage } from './FeedbackPage.svelte';
|
||||
export { default as FeedbackForm } from './FeedbackForm.svelte';
|
||||
export { default as FeedbackList } from './FeedbackList.svelte';
|
||||
export { default as FeedbackCard } from './FeedbackCard.svelte';
|
||||
export { default as VoteButton } from './VoteButton.svelte';
|
||||
export { default as ReactionBar } from './ReactionBar.svelte';
|
||||
export { default as StatusBadge } from './StatusBadge.svelte';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue