opencode/NSCT-FrontEnd
Public Access
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dynamic research detail route

Browse Source
This commit is contained in:
faligam
2026-09-06 17:44:59 +02:00
parent 77b71c6e9d
commit 5022ef4fd7
8 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/routes/research/[id]/components/SourcesTab.svelte Normal file
View File

@@ -0,0 +1,109 @@
<script lang="ts">
import { domainFavicon, getIndependenceBadge, formatDate } from '$lib/utils/formatters';
import type { SourceInfo } from '$lib/types';
export let sources: SourceInfo[] = [];
export let loading = false;
export let error: string | null = null;
function sourceTypeLabel(type: string): string {
const map: Record<string, string> = {
academic: 'Akademisch',
news: 'Nachrichten',
blog: 'Blog',
government: 'Regierung',
forum: 'Forum',
social: 'Social Media',
wikipedia: 'Wikipedia',
other: 'Sonstige',
};
return map[type] ?? type;
}
function sourceTypeColor(type: string): string {
const map: Record<string, string> = {
academic: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300',
news: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300',
blog: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300',
government: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300',
forum: 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300',
social: 'bg-pink-100 text-pink-700 dark:bg-pink-900 dark:text-pink-300',
wikipedia: 'bg-gray-100 text-gray-700 dark:bg-gray-600 dark:text-gray-300',
};
return map[type] ?? 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400';
}
</script>
<div class="space-y-3">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">
Gefundene Quellen ({sources.length})
</h3>
</div>
{#if loading}
<div class="space-y-3">
{#each [1, 2, 3, 4] as _}
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg animate-pulse">
<div class="h-4 w-48 bg-gray-300 dark:bg-gray-600 rounded mb-2"></div>
<div class="h-3 w-32 bg-gray-300 dark:bg-gray-600 rounded mb-2"></div>
<div class="flex gap-2">
<div class="h-5 w-16 bg-gray-300 dark:bg-gray-600 rounded"></div>
<div class="h-5 w-24 bg-gray-300 dark:bg-gray-600 rounded"></div>
</div>
</div>
{/each}
</div>
{:else if error}
<div class="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
<p class="text-sm text-red-700 dark:text-red-300">{error}</p>
</div>
{:else if sources.length === 0}
<p class="text-sm text-gray-500">Noch keine Quellen gefunden.</p>
{:else}
{#each sources as source, i}
<div class="group p-4 bg-gray-50 dark:bg-gray-800/50 rounded-lg border border-gray-100 dark:border-gray-700 hover:border-gray-200 dark:hover:border-gray-600 transition-colors">
<div class="flex items-start gap-3">
<!-- Favicon Placeholder -->
<div class="flex-shrink-0 w-8 h-8 rounded bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-500 dark:text-gray-400">
{domainFavicon(source.domain)}
</div>
<div class="flex-1 min-w-0">
<p class="text-sm font-semibold text-gray-900 dark:text-white truncate">
{source.title}
</p>
<a
href={source.url}
target="_blank"
rel="noopener noreferrer"
class="text-xs text-blue-600 dark:text-blue-400 hover:underline truncate block mt-0.5"
title={source.url}
>
{source.url}
</a>
<div class="flex flex-wrap items-center gap-2 mt-2">
{#if source.domain}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400">
{source.domain}
</span>
{/if}
{#if source.source_type}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {sourceTypeColor(source.source_type)}">
{sourceTypeLabel(source.source_type)}
</span>
{/if}
{#if source.independence_score !== undefined}
<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium {getIndependenceBadge(source.independence_score).color}">
Unabhängigkeit: {(source.independence_score * 100).toFixed(0)}%
</span>
{/if}
{#if source.id}
<span class="text-xs text-gray-400 font-mono">ID: {source.id}</span>
{/if}
</div>
</div>
</div>
</div>
{/each}
{/if}
</div>