toolshed/coop-cloud-front
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: toolshed:dev-nomock
Branches Tags
toolshed:main toolshed:zip-back-front toolshed:dev-nomock toolshed:dev toolshed:recipes
...
pull from: toolshed:main
Branches Tags
toolshed:main toolshed:zip-back-front toolshed:dev-nomock toolshed:dev toolshed:recipes

23 Commits
dev-nomock ... main

Author SHA1 Message Date
BornDeleuze
e95be083b9 Merge pull request 'preload fonts' (#15) from dev into main 
Reviewed-on: BornDeleuze/coop-cloud-front#15
 2026-05-17 02:20:45 +00:00
Matt Beaudoin
2bc1bc77ce Merge branch 'main' of https://git.coopcloud.tech/BornDeleuze/coop-cloud-front into dev 2026-05-16 19:18:25 -07:00
Matt Beaudoin
577eabd6fc preload fonts 2026-05-16 19:16:48 -07:00
BornDeleuze
d08fdd8082 delete lock file 2026-05-17 02:01:07 +00:00
BornDeleuze
7f86e6bcc8 Merge pull request 'Merge pull request 'recipe-cards' (#13) from recipe-cards into dev' (#14) from dev into main 
Reviewed-on: BornDeleuze/coop-cloud-front#14
 2026-05-17 01:52:45 +00:00
BornDeleuze
9aa692d877 Merge branch 'main' into dev 2026-05-17 01:52:12 +00:00
BornDeleuze
87f320376c Merge pull request 'recipe-cards' (#13) from recipe-cards into dev 
Reviewed-on: BornDeleuze/coop-cloud-front#13
 2026-05-17 01:51:17 +00:00
BornDeleuze
3727cebace Merge pull request 'recipe-cards' (#12) from recipe-cards into main 
Reviewed-on: BornDeleuze/coop-cloud-front#12
 2026-05-17 01:50:06 +00:00
BornDeleuze
f24340176f Merge pull request 'update README, add build script for NoMock' (#11) from README into recipe-cards 
Reviewed-on: BornDeleuze/coop-cloud-front#11
 2026-05-17 01:48:27 +00:00
Matt Beaudoin
e80fdce1c8 update README, add build script for NoMock 2026-05-16 18:47:31 -07:00
Matt Beaudoin
915c5d8a97 make recipe form styles, clean up recipe cards, remove uneeded styles 2026-05-16 18:14:39 -07:00
BornDeleuze
1f7e91b871 Merge pull request 'Add Recipes and style updates' (#10) from dev into main 
Reviewed-on: BornDeleuze/coop-cloud-front#10
 2026-05-16 21:17:08 +00:00
Matt Beaudoin
e4e9eea438 default pointer for filters 2026-05-16 14:11:20 -07:00
Matt Beaudoin
c1aca60809 add recipe nav and align nav bar 2026-05-16 14:07:48 -07:00
Matt Beaudoin
3a753030c8 Merge branch 'dev' of https://git.coopcloud.tech/BornDeleuze/coop-cloud-front into dev 2026-05-16 13:52:30 -07:00
Matt Beaudoin
02d86dee4d Merge branch 'card-style' into dev 2026-05-16 13:43:22 -07:00
Matt Beaudoin
46e812d925 remove comments 2026-05-16 13:43:04 -07:00
Matt Beaudoin
5c2ce8b385 remove filter clearing logic 2026-05-16 13:37:49 -07:00
Matt Beaudoin
b36a63d6f9 remove redundant app button 2026-05-16 13:37:01 -07:00
Matt Beaudoin
9313fbb6f0 make cards square for box shadow effect 2026-05-16 13:36:08 -07:00
Matt Beaudoin
1b5907be78 fix filter toggles, fix bad color declarations 2026-05-16 12:18:51 -07:00
Matt Beaudoin
e6f159bbea first big style pass, consolidate to mixins 2026-05-15 20:00:29 -07:00
Matt Beaudoin
b7e8bab6d1 Add card mixins for consistent styling across server and app components 2026-05-14 22:19:15 -07:00
30 changed files with 444 additions and 3366 deletions
Expand all files Collapse all files

5
.env.example
View File

@ -1,5 +0,0 @@
# API base URL for the backend that wraps the abra CLI
VITE_API_URL=http://localhost:3000/api
# Set to 'true' to use mock data
VITE_MOCK_AUTH=true

1
.gitignore vendored
View File

@ -8,6 +8,7 @@ pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
node_modules node_modules
pnpm-lock.yaml
dist dist
dist-ssr dist-ssr
*.local *.local

51
README.md
View File

@ -1,7 +1,52 @@
# Coop Cloud Front # Coop Cloud Front
This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users set up and manage VPSs and docker images through a web UI. Frontend for Coop Cloud — a web UI wrapper around the `abra` CLI for
managing VPSs, containers and application deployments.
## Still a work in progess! This repository contains a Vite + React + TypeScript app styled
with SCSS.
## This is built with react, typescript, scss, and vite ## Quick start
- Install dependencies (pnpm is recommended):
pnpm install
pnpm dev
```
The app uses Vite; start the dev server with `pnpm dev`.
## Environment
- The app reads runtime flags from Vite env variables. The default build uses mocked api data.
-To deploy on a real API without mocking, run:
pnpm start:prod
Modify `.env` file at the project root if you need to override values for
development (see Vite docs for env var conventions).
## Scripts
- `pnpm dev` — start dev server
- `pnpm build` — run TypeScript and build production assets
- `pnpm preview` — preview production build locally
- `pnpm lint` — run ESLint
- `pnpm lint:scss` — run Stylelint
- `pnpm format` — format with Prettier
## Notes about local development
- The repo contains mock JSON and a `mockApi` service to develop UI without
a backend. Toggle mock mode with `VITE_MOCK_AUTH=true`.
- Routes are client-side using `react-router-dom`.
## Next steps / suggested work items
- Add form validation and better UX for `RecipeForm`.
- Improve accessibility.
- Add unit tests.
- Improve responsive layouts and card grid behaviour on narrow screens.
- Add deployment docs and production environment variables.
---

4
index.html
View File

@ -5,6 +5,10 @@
<link rel="shortcut icon" href="/favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>coopcloud-frontend</title> <title>coopcloud-frontend</title>
<link rel="preload" href="/fonts/manrope.light.woff2" as="font" type="font/woff2">
<link rel="preload" href="/fonts/manrope.medium.woff2" as="font" type="font/woff2">
<link rel="preload" href="/fonts/manrope.bold.woff2" as="font" type="font/woff2">
<link rel="preload" href="/fonts/Lora-Italic.woff2" as="font" type="font/woff2">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

1
package.json
View File

@ -6,6 +6,7 @@
"scripts": { "scripts": {
"start": "vite", "start": "vite",
"dev": "vite", "dev": "vite",
"start:prod": "VITE_MOCK_AUTH=false pnpm start",
"build": "tsc && vite build", "build": "tsc && vite build",
"preview": "vite preview", "preview": "vite preview",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

3042
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

BIN
public/fonts/Lora-Italic.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/manrope.bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/manrope.light.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/manrope.medium.woff2 Normal file
View File

Binary file not shown.

8
src/assets/scss/_fonts.scss
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: 'Lora'; font-family: 'Lora';
src: url('https://coopcloud.tech/font/Lora-Italic.woff2') format('woff2'); src: url('/fonts/Lora-Italic.woff2') format('woff2');
font-style: italic; font-style: italic;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
@ -8,7 +8,7 @@
@font-face { @font-face {
font-family: 'Manrope'; font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.light.woff2') format('woff2'); src: url('/fonts/manrope.light.woff2') format('woff2');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
@ -16,7 +16,7 @@
@font-face { @font-face {
font-family: 'Manrope'; font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.medium.woff2') format('woff2'); src: url('/fonts/manrope.medium.woff2') format('woff2');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
@ -24,7 +24,7 @@
@font-face { @font-face {
font-family: 'Manrope'; font-family: 'Manrope';
src: url('https://coopcloud.tech/font/manrope.bold.woff2') format('woff2'); src: url('/fonts/manrope.bold.woff2') format('woff2');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;

13
src/assets/scss/_global.scss
View File

@ -86,6 +86,7 @@ body {
// Modifier classes for colored borders // Modifier classes for colored borders
&.upgrade { &.upgrade {
border-left: 4px solid $primary-light; border-left: 4px solid $primary-light;
cursor: none;
} }
&.chaos { &.chaos {
@ -235,6 +236,18 @@ body {
color: $text-secondary; color: $text-secondary;
} }
// Ensure stat-chip shows primary-dark outline on hover and when active
.stat-chip {
&:hover:not(:disabled),
&.active {
border-color: $primary-dark;
box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
}
}
.filter-chip {
cursor: default;
}
// Results count // Results count
.results-count { .results-count {
text-align: center; text-align: center;

149
src/assets/scss/_mixins.scss
View File

@ -23,11 +23,98 @@
// Card style // Card style
@mixin card { @mixin card {
background: $bg-primary; background: $bg-primary;
border-radius: $radius-lg;
box-shadow: $shadow-md; box-shadow: $shadow-md;
padding: $spacing-xl; padding: $spacing-xl;
} }
// Ensure cards occupy consistent vertical space and can stretch horizontally
@mixin card-dimensions($min-width: 320px, $min-height: 180px) {
min-width: $min-width;
min-height: $min-height;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/// Standard vertical stack for card-style list rows (dashboard recent apps, server detail apps, etc.)
@mixin card-list-vertical($gap: $spacing-md) {
display: flex;
flex-direction: column;
gap: $gap;
}
/// Hover lift used by dashboard list cards, server grid cards, and similar surfaces
@mixin card-hover-lift($translate-y: -2px, $hover-shadow: $shadow-lg) {
transition: transform $transition-base, box-shadow $transition-base;
&:hover {
transform: translateY($translate-y);
box-shadow: $hover-shadow;
}
}
/// Card shell with horizontal scroll (e.g. data tables)
@mixin scrollable-card {
@include card;
overflow-x: auto;
}
/// Header block inside a card: title area with a bottom rule (server cards, etc.)
@mixin card-header-rule {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: $spacing-lg;
padding-bottom: $spacing-md;
border-bottom: 2px solid $bg-secondary;
}
/// Primary title + muted monospace/meta line (server cards, resource headers)
@mixin card-title-stack(
$title-size: $font-size-xl,
$title-weight: $font-weight-bold,
$meta-size: $font-size-sm
) {
h3 {
margin: 0 0 $spacing-xs;
font-size: $title-size;
color: $text-primary;
font-weight: $title-weight;
}
.server-host {
font-size: $meta-size;
color: $text-muted;
font-family: monospace;
}
}
/// Label + value row inside a card body (server stats, etc.)
@mixin card-stat-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: $spacing-sm 0;
border-bottom: 1px solid $bg-secondary;
&:last-child {
border-bottom: none;
}
}
/// Full-width edge bleed for highlighted rows inside padded cards (matches card horizontal padding)
@mixin card-row-highlight-bleed($clear-bottom-border: true) {
padding: $spacing-sm $spacing-md;
margin: $spacing-sm (-$spacing-xl);
padding-left: calc($spacing-xl + $spacing-md);
padding-right: calc($spacing-xl + $spacing-md);
@if $clear-bottom-border {
border-bottom: none;
}
}
// Button base // Button base
@mixin button-base { @mixin button-base {
padding: $spacing-sm $spacing-lg; padding: $spacing-sm $spacing-lg;
@ -62,4 +149,64 @@
font-size: $font-size-sm; font-size: $font-size-sm;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
background-color: rgba($color, 0.1); background-color: rgba($color, 0.1);
// color: darken($color, 20%);
}
// Compact chip used for stat chips and small interactive chips
@mixin chip(
$bg: white,
$border-color: $border-color,
$radius: $radius-md,
$padding: $spacing-md $spacing-lg,
$gap: $spacing-md,
$hover-translate: -2px,
$hover-shadow: $shadow-sm,
$font-size: $font-size-base
) {
display: flex;
align-items: center;
gap: $gap;
padding: $padding;
background: $bg;
border: 2px solid $border-color;
border-radius: $radius;
cursor: pointer;
transition: all $transition-base;
font-size: $font-size;
&:hover:not(:disabled) {
border-color: $primary;
transform: translateY($hover-translate);
box-shadow: $hover-shadow;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
// Reusable action button styles; accepts border width and radius
@mixin action-btn($border-width: 1px, $radius: $radius-sm, $padding: $spacing-xs $spacing-md, $font-size: $font-size-sm) {
background: none;
border: $border-width solid $border-color;
padding: $padding;
border-radius: $radius;
cursor: pointer;
font-size: $font-size;
color: $text-primary;
font-weight: $font-weight-medium;
transition: all $transition-base;
&:hover {
background-color: rgba($primary, 0.05);
color: $text-primary;
transform: translateY(-1px);
border-color: $primary;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
} }

6
src/components/Header/Header.tsx
View File

@ -17,15 +17,15 @@ return(
<img className="logo" src={logo}/> <img className="logo" src={logo}/>
</h1> </h1>
<nav className="nav"> <nav className="nav">
<button onClick={() => navigate('/dashboard')} className="nav-link">
Dashboard
</button>
<button onClick={() => navigate('/apps')} className="nav-link"> <button onClick={() => navigate('/apps')} className="nav-link">
Apps Apps
</button> </button>
<button onClick={() => navigate('/servers')} className="nav-link"> <button onClick={() => navigate('/servers')} className="nav-link">
Servers Servers
</button> </button>
<button onClick={() => navigate('/recipes')} className="nav-link">
Recipes
</button>
</nav> </nav>
</div> </div>
</header> </header>

2
src/components/Header/_Header.scss
View File

@ -27,12 +27,14 @@
margin: 0; margin: 0;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
cursor: pointer;
} }
.nav { .nav {
display: flex; display: flex;
gap: $spacing-sm; gap: $spacing-sm;
flex: 1; flex: 1;
text-align: center;
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;

38
src/routes/Apps/App.scss
View File

@ -49,25 +49,7 @@
// Action buttons // Action buttons
.action-btn { .action-btn {
padding: $spacing-sm $spacing-lg; @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
border: 2px solid $border-color;
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all $transition-base;
background: white;
color: $text-primary;
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: $shadow-md;
}
&.primary { &.primary {
background: $primary; background: $primary;
@ -166,7 +148,7 @@
} }
} }
.link { .domain-link {
color: $primary-dark; color: $primary-dark;
text-decoration: none; text-decoration: none;
font-size: $font-size-base; font-size: $font-size-base;
@ -178,6 +160,22 @@
} }
} }
.server-link {
background: none;
border: none;
color: $primary-dark;
cursor: pointer;
padding: 0;
font-size: $font-size-base;
text-align: left;
transition: color $transition-base;
&:hover {
color: $primary-light;
text-decoration: underline;
}
}
// Version information // Version information
.version-info { .version-info {
display: flex; display: flex;

2
src/routes/Apps/App.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom'; import { Link, useNavigate, useParams } from 'react-router-dom';
import { Header } from '../../components/Header/Header'; import { Header } from '../../components/Header/Header';
import { Terminal } from '../../components/Terminal/Terminal'; import { Terminal } from '../../components/Terminal/Terminal';
import { apiService } from '../../services/api'; import { apiService } from '../../services/api';

76
src/routes/Apps/Apps.scss
View File

@ -21,31 +21,12 @@
} }
.stat-chip { .stat-chip {
display: flex; @include chip();
align-items: center;
gap: $spacing-sm;
padding: $spacing-sm $spacing-md;
background: white;
border: 2px solid $border-color;
border-radius: $radius-md;
cursor: pointer;
transition: all $transition-base;
font-size: $font-size-base;
&:hover:not(:disabled) {
border-color: $primary;
transform: translateY(-2px);
box-shadow: $shadow-sm;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&.active { &.active {
border-color: $primary; border-color: $primary-dark;
background: rgba($primary, 0.05); background: $bg-primary;
box-shadow: 0 0 0 3px rgba($primary-dark, 0.08);
} }
.stat-label { .stat-label {
@ -63,28 +44,11 @@
} }
} }
.reset-filters-btn { /* reset-filters-btn removed — outline on stat-chip indicates active filters */
padding: $spacing-sm $spacing-md;
background: $bg-secondary;
border: 2px solid $border-color;
border-radius: $radius-md;
cursor: pointer;
transition: all $transition-base;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
color: $text-secondary;
&:hover {
background: white;
color: $text-primary;
border-color: $primary;
}
}
// Apps table specific styles // Apps table specific styles
.apps-table-container { .apps-table-container {
@include card; @include scrollable-card;
overflow-x: auto;
margin-bottom: $spacing-lg; margin-bottom: $spacing-lg;
} }
@ -141,19 +105,19 @@
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
color: $text-primary; color: $text-primary;
} }
} .domain-link {
color: $primary-dark;
text-decoration: none;
transition: color $transition-base;
.domain-link { &:hover {
color: $primary-dark; color: $primary-light;
text-decoration: none; text-decoration: underline;
transition: color $transition-base; }
&:hover {
color: $primary-light;
text-decoration: underline;
} }
} }
.no-domain { .no-domain {
color: $text-muted; color: $text-muted;
font-style: italic; font-style: italic;
@ -182,15 +146,7 @@
gap: $spacing-sm; gap: $spacing-sm;
.action-btn { .action-btn {
background: none; @include action-btn(1px, $radius-sm, $spacing-xs $spacing-md, $font-size-sm);
border: 1px solid $border-color;
padding: $spacing-xs $spacing-md;
border-radius: $radius-sm;
cursor: pointer;
font-size: $font-size-sm;
color: $text-primary;
font-weight: $font-weight-medium;
transition: all $transition-base;
&:hover { &:hover {
background-color: $primary; background-color: $primary;

46
src/routes/Apps/Apps.tsx
View File

@ -1,3 +1,8 @@
// TODOS:
// make the two filters non-exlusive
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Header } from '../../components/Header/Header'; import { Header } from '../../components/Header/Header';
@ -12,7 +17,6 @@ export const Apps: React.FC = () => {
const [error, setError] = useState(''); const [error, setError] = useState('');
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [filterServer, setFilterServer] = useState<string>('all'); const [filterServer, setFilterServer] = useState<string>('all');
const [filterStatus, setFilterStatus] = useState<string>('all');
const [showUpgradesOnly, setShowUpgradesOnly] = useState(false); const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
const [showChaosOnly, setShowChaosOnly] = useState(false); const [showChaosOnly, setShowChaosOnly] = useState(false);
@ -60,7 +64,7 @@ export const Apps: React.FC = () => {
return Object.keys(appsData); return Object.keys(appsData);
}, [appsData]); }, [appsData]);
// Filter apps // Filter apps (additive filters: upgrades AND chaos can be applied together)
const filteredApps = useMemo(() => { const filteredApps = useMemo(() => {
return allApps.filter(app => { return allApps.filter(app => {
const matchesSearch = const matchesSearch =
@ -69,14 +73,12 @@ export const Apps: React.FC = () => {
(app.domain || '').toLowerCase().includes(searchTerm.toLowerCase()); (app.domain || '').toLowerCase().includes(searchTerm.toLowerCase());
const matchesServer = filterServer === 'all' || app.server === filterServer; const matchesServer = filterServer === 'all' || app.server === filterServer;
const matchesChaos = filterStatus === 'all' || const matchesChaos = !showChaosOnly || app.chaos === 'true';
(filterStatus === 'chaos' && app.chaos === 'true') ||
(filterStatus === 'stable' && app.chaos === 'false');
const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest'; const matchesUpgrade = !showUpgradesOnly || app.upgrade !== 'latest';
return matchesSearch && matchesServer && matchesChaos && matchesUpgrade; return matchesSearch && matchesServer && matchesChaos && matchesUpgrade;
}); });
}, [allApps, searchTerm, filterServer, filterStatus, showUpgradesOnly]); }, [allApps, searchTerm, filterServer, showUpgradesOnly, showChaosOnly]);
const stats = useMemo(() => { const stats = useMemo(() => {
const total = allApps.length; const total = allApps.length;
@ -87,28 +89,9 @@ export const Apps: React.FC = () => {
return { total, needsUpgrade, chaosApps, totalServers }; return { total, needsUpgrade, chaosApps, totalServers };
}, [allApps, servers]); }, [allApps, servers]);
const resetFilters = () => {
setSearchTerm('');
setFilterServer('all');
setShowChaosOnly(false);
setShowUpgradesOnly(false);
};
const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev); const toggleUpgrades = () => setShowUpgradesOnly(prev => !prev);
const toggleChaos = () => setShowChaosOnly(prev => !prev); const toggleChaos = () => setShowChaosOnly(prev => !prev);
// Show only apps that need upgrades
const filterByUpgrades = () => {
setShowUpgradesOnly(true);
setFilterStatus('all');
};
// Show only chaos apps
const filterByChaos = () => {
setFilterStatus('chaos');
setShowUpgradesOnly(false);
};
if (loading) { if (loading) {
return ( return (
<div className="apps-page"> <div className="apps-page">
@ -142,15 +125,6 @@ export const Apps: React.FC = () => {
{/* Compact Stats Overview */} {/* Compact Stats Overview */}
<div className="stats-row"> <div className="stats-row">
<button
className="stat-chip"
onClick={resetFilters}
title="Click to show all apps"
>
<span className="stat-label">Apps</span>
<span className="stat-value">{stats.total}</span>
</button>
<button <button
className="stat-chip" className="stat-chip"
onClick={() => navigate('/servers')} onClick={() => navigate('/servers')}
@ -161,7 +135,7 @@ export const Apps: React.FC = () => {
</button> </button>
<button <button
className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`} className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
onClick={toggleUpgrades} onClick={toggleUpgrades}
title="Click to toggle apps with upgrades available" title="Click to toggle apps with upgrades available"
disabled={stats.needsUpgrade === 0} disabled={stats.needsUpgrade === 0}
@ -171,7 +145,7 @@ export const Apps: React.FC = () => {
</button> </button>
<button <button
className={`stat-chip ${showChaosOnly ? 'active' : ''}`} className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
onClick={toggleChaos} onClick={toggleChaos}
title="Click to toggle chaos mode apps" title="Click to toggle chaos mode apps"
disabled={stats.chaosApps === 0} disabled={stats.chaosApps === 0}

12
src/routes/Dashboard/_Dashboard.scss
View File

@ -23,29 +23,21 @@
} }
.apps-list { .apps-list {
display: flex; @include card-list-vertical;
flex-direction: column;
gap: $spacing-md;
} }
.app-item { .app-item {
@include card; @include card;
@include card-hover-lift(-2px, $shadow-lg);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: transform $transition-base, box-shadow $transition-base;
cursor: pointer; cursor: pointer;
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-lg;
}
.app-info { .app-info {
flex: 1; flex: 1;
h4 { h4 {
margin: 0 0 $spacing-xs;
font-size: $font-size-lg; font-size: $font-size-lg;
color: $text-primary; color: $text-primary;
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;

100
src/routes/Recipes/RecipeForm.scss
View File

@ -0,0 +1,100 @@
@use '../../assets/scss/variables' as *;
@use '../../assets/scss/mixins' as *;
@use '../../assets/scss/global' as *;
.recipe-form {
@include card;
max-width: 680px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: $spacing-lg;
padding: $spacing-lg;
h2 {
margin: 0;
font-size: $font-size-xl;
color: $text-primary;
}
.field {
display: flex;
flex-direction: column;
gap: $spacing-xs;
&.field-inline {
flex-direction: row;
align-items: center;
gap: $spacing-md;
}
label {
color: $text-secondary;
font-size: $font-size-sm;
display: flex;
flex-direction: column;
gap: $spacing-xs;
input[type="text"],
input[type="email"],
input:not([type]),
select {
padding: $spacing-sm $spacing-md;
border: 2px solid $border-color;
border-radius: $radius-md;
font-size: $font-size-base;
background: $bg-primary;
color: $text-primary;
transition: border-color $transition-base, box-shadow $transition-base;
}
input:focus,
select:focus {
outline: none;
border-color: $primary;
box-shadow: 0 0 0 4px rgba($primary, 0.06);
}
}
.checkbox-label {
display: inline-flex;
align-items: center;
gap: $spacing-sm;
font-size: $font-size-base;
color: $text-primary;
input[type="checkbox"] {
width: 18px;
height: 18px;
}
}
}
.form-actions {
display: flex;
gap: $spacing-sm;
justify-content: flex-end;
.action-btn {
@include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
}
}
}
.form-subtitle {
margin: 0;
color: $text-secondary;
font-size: $font-size-sm;
}
.form-error {
background: rgba($error, 0.08);
color: $error;
padding: $spacing-sm $spacing-md;
border-radius: $radius-sm;
}
.select-input {
width: 100%;
}

53
src/routes/Recipes/RecipeForm.tsx
View File

@ -1,6 +1,7 @@
import { useState, useEffect } from "react"; import { useEffect, useState } from "react";
import { apiService } from '../../services/api'; import { apiService } from '../../services/api';
import type { AbraServer } from '../../types'; import type { AbraServer } from '../../types';
import './RecipeForm.scss';
@ -50,14 +51,19 @@ function RecipeForm({ recipe, onClose }) {
}; };
return ( return (
<form onSubmit={handleSubmit}> <form className="recipe-form" onSubmit={handleSubmit}>
<h2>{recipe.name}</h2> <h2>{recipe.name}</h2>
{ loading ? (<p> Loading servers...</p> <p className="form-subtitle">Configure and deploy this recipe.</p>
{error && <div className="form-error">{error}</div>}
{ loading ? (
<p className="loading">Loading servers...</p>
) : ( ) : (
<div> <div className="field">
<label> <label>
Choose a server to deploy to: Choose a server to deploy to:
<select <select
className="select-input"
value={selectedServer} value={selectedServer}
onChange={(e) => setSelectedServer(e.target.value)} onChange={(e) => setSelectedServer(e.target.value)}
> >
@ -68,43 +74,48 @@ function RecipeForm({ recipe, onClose }) {
</option> </option>
))} ))}
</select> </select>
</label> </label>
</div> </div>
)} )}
<div>
<div className="field">
<label> <label>
Domain: Domain:
<input <input
name="Domain" name="domain"
value={formData.name} placeholder="example.com"
value={formData.domain}
onChange={handleChange} onChange={handleChange}
/> />
</label> </label>
</div> </div>
<div>
<label> <div className="field field-inline">
Chaos Mode Enabled: <label className="checkbox-label">
<input <input
type="checkbox" type="checkbox"
name="chaos" name="chaos"
onChange={handleChange} checked={formData.chaos}
onChange={(e) => setFormData({ ...formData, chaos: e.target.checked })}
/> />
Chaos Mode
</label> </label>
</div>
<div> <label className="checkbox-label">
<label>
Autogenerate Secrets:
<input <input
type="checkbox" type="checkbox"
name="secrets" name="secrets"
onChange={handleChange} checked={formData.secrets}
onChange={(e) => setFormData({ ...formData, secrets: e.target.checked })}
/> />
Autogenerate Secrets
</label> </label>
</div> </div>
<button type="submit">Submit</button> <div className="form-actions">
<button type="button" onClick={onClose}>Cancel</button> <button className="action-btn primary" type="submit">Submit</button>
<button className="action-btn" type="button" onClick={onClose}>Cancel</button>
</div>
</form> </form>
); );
} }

32
src/routes/Recipes/Recipes.scss
View File

@ -11,10 +11,11 @@
@extend .page-content; @extend .page-content;
} }
// Servers grid // Recipes grid
.recipes-grid { .recipes-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); justify-content: stretch;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: $spacing-xl; gap: $spacing-xl;
margin-bottom: $spacing-xl; margin-bottom: $spacing-xl;
@ -23,19 +24,16 @@
} }
} }
// Server card // Recipe card
.recipe-card { .recipe-card {
@include card; @include card;
display: grid; @include card-dimensions(320px, 180px);
row-gap: 1em;
grid-template-rows: 1fr 2fr auto 0.9fr; grid-template-rows: 1fr 2fr auto 0.9fr;
transition: transform $transition-base, box-shadow $transition-base; transition: transform $transition-base, box-shadow $transition-base;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
max-width: 30em;
&:hover {
transform: translateY(-4px);
box-shadow: $shadow-xl;
}
.recipe-header { .recipe-header {
display: flex; display: flex;
@ -110,21 +108,7 @@
gap: $spacing-sm; gap: $spacing-sm;
.action-btn { .action-btn {
flex: 1; flex: 1;
padding: $spacing-sm $spacing-md; @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
border: 2px solid $border-color;
background: none;
color: $text-primary;
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all $transition-base;
&:hover {
background-color: rgba($primary, 0.1);
border-color: $primary;
transform: translateY(-1px);
}
&.primary { &.primary {
background-color: $primary; background-color: $primary;

25
src/routes/Recipes/Recipes.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { Header } from '../../components/Header/Header'; import { Header } from '../../components/Header/Header';
import { apiService } from '../../services/api'; import { apiService } from '../../services/api';
import type { AbraApp, AppWithServer, AbraRecipe } from '../../types'; import type { AbraApp, AbraRecipe, AppWithServer } from '../../types';
import RecipeForm from './RecipeForm.tsx' import RecipeForm from './RecipeForm.tsx'
import './Recipes.scss'; import './Recipes.scss';
@ -51,7 +51,7 @@ export const Recipes: React.FC = () => {
}, [recipesData]); }, [recipesData]);
// Filter apps // Filter recipes
const filteredRecipes = useMemo(() => { const filteredRecipes = useMemo(() => {
return allRecipes.filter(recipe => { return allRecipes.filter(recipe => {
const matchesSearch = const matchesSearch =
@ -94,36 +94,20 @@ export const Recipes: React.FC = () => {
<Header /> <Header />
<main className="recipes-content"> <main className="recipes-content">
<div className="page-header"> <div className="page-header">
<h1>Applications</h1> <h1>Recipes</h1>
<p className="subtitle">{stats.total} recipes</p> <p className="subtitle">{stats.total} recipes</p>
</div> </div>
{/* Stats Overview */}
<div className="stats-grid">
<div className="stat-card">
<div className="stat-info">
<p className="stat-number">{stats.total}</p>
<p className="stat-label">Total Recipes</p>
</div>
</div>
</div>
{/* Filters */} {/* Filters */}
<div className="filters"> <div className="filters">
<input <input
type="text" type="text"
placeholder="Search apps by name, recipe, or domain..." placeholder="Search recipes by name or description..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
className="search-input" className="search-input"
/> />
<select value={filterStatus} onChange={(e) => setFilterStatus(e.target.value)}>
<option value="all">All Status</option>
<option value="stable">Stable</option>
<option value="chaos">Chaos Mode</option>
</select>
</div> </div>
{/* Server Cards */} {/* Server Cards */}
@ -135,7 +119,6 @@ export const Recipes: React.FC = () => {
<div <div
key={recipe.name} key={recipe.name}
className="recipe-card" className="recipe-card"
style={{ cursor: 'pointer' }}
> >
<div className="recipe-header"> <div className="recipe-header">
<div className="recipe-title"> <div className="recipe-title">

24
src/routes/Servers/Server.scss
View File

@ -48,25 +48,7 @@
// Action buttons (shared with App view, could be moved to global) // Action buttons (shared with App view, could be moved to global)
.action-btn { .action-btn {
padding: $spacing-sm $spacing-lg; @include action-btn(2px, $radius-md, $spacing-sm $spacing-lg, $font-size-sm);
border: 2px solid $border-color;
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all $transition-base;
background: white;
color: $text-primary;
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
&:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: $shadow-md;
}
&.primary { &.primary {
background: $primary; background: $primary;
@ -213,9 +195,7 @@
} }
.apps-list { .apps-list {
display: flex; @include card-list-vertical;
flex-direction: column;
gap: $spacing-md;
} }
.app-item { .app-item {

2
src/routes/Servers/Server.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useNavigate, useParams } from 'react-router-dom';
import { Header } from '../../components/Header/Header'; import { Header } from '../../components/Header/Header';
import { Terminal } from '../../components/Terminal/Terminal'; import { Terminal } from '../../components/Terminal/Terminal';
import { apiService } from '../../services/api'; import { apiService } from '../../services/api';

69
src/routes/Servers/Servers.scss
View File

@ -14,10 +14,12 @@
// Servers grid // Servers grid
.servers-grid { .servers-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: $spacing-xl; gap: $spacing-xl;
margin-bottom: $spacing-xl; margin-bottom: $spacing-xl;
align-items: stretch;
@media (max-width: 768px) { @media (max-width: 768px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -26,38 +28,18 @@
// Server card // Server card
.server-card { .server-card {
@include card; @include card;
@include card-hover-lift(-4px, $shadow-xl);
@include card-dimensions(320px, 180px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform $transition-base, box-shadow $transition-base;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&:hover {
transform: translateY(-4px);
box-shadow: $shadow-xl;
}
.server-header { .server-header {
display: flex; @include card-header-rule;
justify-content: space-between;
align-items: flex-start;
margin-bottom: $spacing-lg;
padding-bottom: $spacing-md;
border-bottom: 2px solid $bg-secondary;
.server-title { .server-title {
h3 { @include card-title-stack;
margin: 0 0 $spacing-xs;
font-size: $font-size-xl;
color: $text-primary;
font-weight: $font-weight-bold;
}
.server-host {
font-size: $font-size-sm;
color: $text-muted;
font-family: monospace;
}
} }
.server-status { .server-status {
@ -80,24 +62,12 @@
margin-bottom: $spacing-lg; margin-bottom: $spacing-lg;
.stat-row { .stat-row {
display: flex; @include card-stat-row;
justify-content: space-between;
align-items: center;
padding: $spacing-sm 0;
border-bottom: 1px solid $bg-secondary;
&:last-child {
border-bottom: none;
}
// Highlighted rows // Highlighted rows
&.highlight { &.highlight {
@include card-row-highlight-bleed;
background-color: rgba($warning, 0.05); background-color: rgba($warning, 0.05);
padding: $spacing-sm $spacing-md;
margin: $spacing-sm (-$spacing-xl);
padding-left: calc($spacing-xl + $spacing-md);
padding-right: calc($spacing-xl + $spacing-md);
border-bottom: none;
.stat-label { .stat-label {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
@ -109,11 +79,8 @@
} }
&.chaos-row { &.chaos-row {
@include card-row-highlight-bleed(false);
background-color: rgba($info, 0.05); background-color: rgba($info, 0.05);
padding: $spacing-sm $spacing-md;
margin: $spacing-sm (-$spacing-xl);
padding-left: calc($spacing-xl + $spacing-md);
padding-right: calc($spacing-xl + $spacing-md);
.stat-label { .stat-label {
font-weight: $font-weight-semibold; font-weight: $font-weight-semibold;
@ -152,21 +119,7 @@
.action-btn { .action-btn {
flex: 1; flex: 1;
padding: $spacing-sm $spacing-md; @include action-btn(2px, $radius-md, $spacing-sm $spacing-md, $font-size-sm);
border: 2px solid $border-color;
background: none;
color: $text-primary;
border-radius: $radius-md;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
cursor: pointer;
transition: all $transition-base;
&:hover {
background-color: rgba($primary, 0.1);
border-color: $primary;
transform: translateY(-1px);
}
&.primary { &.primary {
// background-color: $primary; // background-color: $primary;

39
src/routes/Servers/Servers.tsx
View File

@ -21,6 +21,7 @@ export const Servers: React.FC = () => {
const [searchTerm, setSearchTerm] = useState(''); const [searchTerm, setSearchTerm] = useState('');
const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name'); const [sortBy, setSortBy] = useState<'name' | 'apps' | 'upgrades'>('name');
const [showUpgradesOnly, setShowUpgradesOnly] = useState(false); const [showUpgradesOnly, setShowUpgradesOnly] = useState(false);
const [showChaosOnly, setShowChaosOnly] = useState(false);
const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true'; const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
@ -79,14 +80,15 @@ export const Servers: React.FC = () => {
return { totalServers, totalApps, totalUpgrades, totalChaos }; return { totalServers, totalApps, totalUpgrades, totalChaos };
}, [servers]); }, [servers]);
// Filter and sort servers // Filter and sort servers (additive filters allowed)
const filteredServers = useMemo(() => { const filteredServers = useMemo(() => {
const filtered = servers.filter(server => { const filtered = servers.filter(server => {
const matchesSearch = const matchesSearch =
server.name.toLowerCase().includes(searchTerm.toLowerCase()) || server.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
server.host.toLowerCase().includes(searchTerm.toLowerCase()); server.host.toLowerCase().includes(searchTerm.toLowerCase());
const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0; const matchesUpgrades = !showUpgradesOnly || server.upgradeCount > 0;
return matchesSearch && matchesUpgrades; const matchesChaos = !showChaosOnly || server.chaosCount > 0;
return matchesSearch && matchesUpgrades && matchesChaos;
}); });
filtered.sort((a, b) => { filtered.sort((a, b) => {
@ -102,12 +104,6 @@ export const Servers: React.FC = () => {
return filtered; return filtered;
}, [servers, searchTerm, sortBy, showUpgradesOnly]); }, [servers, searchTerm, sortBy, showUpgradesOnly]);
const resetFilters = () => {
setSearchTerm('');
setSortBy('name');
setShowUpgradesOnly(false);
};
if (loading) { if (loading) {
return ( return (
<div className="servers-page"> <div className="servers-page">
@ -141,15 +137,6 @@ const resetFilters = () => {
{/* Compact Stats Row */} {/* Compact Stats Row */}
<div className="stats-row"> <div className="stats-row">
<button
className="stat-chip"
onClick={resetFilters}
title="Click to reset filters"
>
<span className="stat-label">Servers</span>
<span className="stat-value">{stats.totalServers}</span>
</button>
<button <button
className="stat-chip" className="stat-chip"
onClick={() => navigate('/apps')} onClick={() => navigate('/apps')}
@ -160,7 +147,7 @@ const resetFilters = () => {
</button> </button>
<button <button
className={`stat-chip ${showUpgradesOnly ? 'active' : ''}`} className={`stat-chip filter-chip ${showUpgradesOnly ? 'active' : ''}`}
onClick={() => setShowUpgradesOnly(prev => !prev)} onClick={() => setShowUpgradesOnly(prev => !prev)}
title="Click to filter by servers with upgrades" title="Click to filter by servers with upgrades"
disabled={stats.totalUpgrades === 0} disabled={stats.totalUpgrades === 0}
@ -170,22 +157,16 @@ const resetFilters = () => {
</button> </button>
<button <button
className={`stat-chip ${sortBy === 'apps' ? 'active' : ''}`} className={`stat-chip filter-chip ${showChaosOnly ? 'active' : ''}`}
onClick={() => setSortBy(sortBy === 'apps' ? 'name' : 'apps')} onClick={() => setShowChaosOnly(prev => !prev)}
title="Click to sort by app count" title="Click to filter servers with chaos apps"
disabled={stats.totalChaos === 0}
> >
<span className="stat-label">Chaos</span> <span className="stat-label">Chaos</span>
<span className="stat-value">{stats.totalChaos}</span> <span className="stat-value">{stats.totalChaos}</span>
</button> </button>
{(searchTerm || sortBy !== 'name' || showUpgradesOnly) && ( {/* Clear filters button removed — use stat-chip outlines for active filters */}
<button
className="reset-filters-btn"
onClick={resetFilters}
>
Clear filters
</button>
)}
</div> </div>
{/* Filters */} {/* Filters */}

2
src/services/api.ts
View File

@ -1,4 +1,4 @@
import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types'; import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
// Log entry type // Log entry type
export type LogEntry = { export type LogEntry = {

2
src/services/mockApi.ts
View File

@ -1,4 +1,4 @@
import type { AbraServer, AbraRecipe, ServerAppsResponse } from '../types'; import type { AbraRecipe, AbraServer, ServerAppsResponse } from '../types';
import appsData from './mock-apps.json'; import appsData from './mock-apps.json';
import serversData from './mock-servers.json'; import serversData from './mock-servers.json';
import logsData from './mock-logs.json'; import logsData from './mock-logs.json';