lucalise/ghostv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create theme for common styles

Browse Source
This commit is contained in:
lucalise
2026-01-18 12:17:33 -08:00
parent fb62081ca8
commit a9a69fc1db
3 changed files with 52 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
api/src/endpoints/get_repos.rs
View File

@@ -41,9 +41,8 @@ pub async fn get_repos(
.get_repositories(&user.id)
.await?
.into_iter()
.map(|r| r.id.clone())
.map(|r| r.id)
.collect::<HashSet<String>>();
tracing::debug!(added_response = ?added_ids);
let data = response
.json::<Vec<Repository>>()
.await?

44
src/lib/Repos.svelte
View File

@@ -86,23 +86,20 @@
};
const languageColors: Record<string, string> = {
GDScript: 'bg-blue-500',
'C#': 'bg-green-500',
Rust: 'bg-orange-500',
C: 'bg-gray-500',
'C++': 'bg-pink-500'
GDScript: 'bg-lang-gdscript',
Rust: 'bg-lang-rust'
};
</script>
<div class="rounded-xl bg-gray-900 p-6 shadow-xl ring-1 ring-gray-800">
<div class="rounded-xl bg-surface p-6 shadow-xl ring-1 ring-border">
<div class="mb-6 flex items-center justify-between">
<div class="flex items-center gap-3">
<GitBranch class="h-6 w-6 text-gray-400" />
<h2 class="text-xl font-semibold text-white">Import Git Repository</h2>
<span class="text-xs text-gray-500">repo must be public</span>
<GitBranch class="h-6 w-6 text-icon" />
<h2 class="text-xl font-semibold text-text-primary">Import Git Repository</h2>
<span class="text-xs text-text-muted">repo must be public</span>
</div>
<Button.Root
class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-gray-800 hover:text-white"
class="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-text-secondary transition-colors hover:bg-surface-hover hover:text-text-primary"
onclick={() => (searching ? searchResultsQuery.refetch() : query.refetch())}
>
<RefreshCw class="h-4 w-4" />
@@ -111,34 +108,35 @@
</div>
<div class="relative mb-6">
<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-500" />
<Search class="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-icon-muted" />
<input
type="text"
bind:value={searchQuery}
placeholder="Search repositories..."
class="w-full rounded-lg border border-gray-700 bg-gray-800 py-2.5 pr-4 pl-10 text-white placeholder-gray-500 transition-colors outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
class="w-full rounded-lg border border-border-hover bg-surface-hover py-2.5 pr-4 pl-10 text-text-primary placeholder-text-muted transition-colors outline-none focus:border-border-focus focus:ring-1 focus:ring-border-focus"
/>
</div>
<div class="space-y-3">
{#each repos as repo (repo.id)}
<div
class="group flex items-center justify-between rounded-lg border border-gray-800 bg-gray-800/40 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800"
class="group flex items-center justify-between rounded-lg border border-border bg-surface-muted p-4 transition-colors hover:border-border-hover hover:bg-surface-hover"
>
<div class="flex-1">
<div class="flex items-center gap-2">
<h3 class="truncate font-medium text-white">{repo.name}</h3>
<h3 class="truncate font-medium text-text-primary">{repo.name}</h3>
</div>
{#if repo.description}
<p class="mt-1 truncate text-sm text-gray-400">{repo.description}</p>
<p class="mt-1 truncate text-sm text-text-secondary">{repo.description}</p>
{:else}
<p class="mt-1 text-sm text-gray-500 italic">No description</p>
<p class="mt-1 text-sm text-text-muted italic">No description</p>
{/if}
<div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
<div class="mt-2 flex items-center gap-4 text-xs text-text-muted">
{#if repo.language}
<span class="flex items-center gap-1.5">
<span
class="h-2.5 w-2.5 rounded-full {languageColors[repo.language] ?? 'bg-gray-500'}"
class="h-2.5 w-2.5 rounded-full {languageColors[repo.language] ??
'bg-lang-default'}"
></span>
{repo.language}
</span>
@@ -154,11 +152,11 @@
</div>
</div>
<Button.Root
class="ml-4 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors {added.includes(
class="ml-4 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-text-primary transition-colors {added.includes(
repo.id
)
? 'border-green-800 bg-green-900'
: 'bg-blue-600'} disabled:cursor-default disabled:opacity-50"
? 'border-success-border bg-success'
: 'bg-primary'} disabled:cursor-default disabled:opacity-50"
disabled={adding !== null}
onclick={() => handleImport(repo)}
>
@@ -177,14 +175,14 @@
<LoaderCircle class="animate-spin" />
</div>
{:else}
<div class="py-8 text-center text-gray-500">
<div class="py-8 text-center text-text-muted">
<p>No repositories found matching "{searchQuery}"</p>
</div>
{/if}
{/each}
</div>
<p class="mt-6 text-center text-sm text-gray-500">
<p class="mt-6 text-center text-sm text-text-muted">
You must have a dist/ folder with index.html + index.wasm
</p>
</div>

34
src/routes/layout.css
View File

@@ -1,5 +1,35 @@
@import "tailwindcss";
@theme {
--color-surface: var(--color-gray-900);
--color-surface-hover: var(--color-gray-800);
--color-surface-muted: oklch(from var(--color-gray-800) l c h / 40%);
--color-border: var(--color-gray-800);
--color-border-hover: var(--color-gray-700);
--color-border-focus: var(--color-blue-500);
--color-text-primary: var(--color-white);
--color-text-secondary: var(--color-gray-400);
--color-text-muted: var(--color-gray-500);
--color-icon: var(--color-gray-400);
--color-icon-muted: var(--color-gray-500);
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-500);
--color-success: var(--color-green-900);
--color-success-border: var(--color-green-800);
--color-lang-gdscript: var(--color-blue-500);
--color-lang-csharp: var(--color-green-500);
--color-lang-rust: var(--color-orange-500);
--color-lang-c: var(--color-gray-500);
--color-lang-cpp: var(--color-pink-500);
--color-lang-default: var(--color-gray-500);
}
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -61,10 +91,6 @@ h1 {
@apply hover:bg-gray-800;
}
#nprogress .bar {
top: 3.5rem;
}
button:default {
border-radius: 8px;
border: 1px solid transparent;