style the shell app

Co-authored-by: Codex <noreply@openai.com>
This commit is contained in:
Harivansh Rathi 2026-03-31 21:25:53 +00:00
parent eea46f28ad
commit e5619bb002
5 changed files with 191 additions and 0 deletions

View file

@ -0,0 +1,85 @@
.ainas-shell {
max-width: 1100px;
margin: 0 auto;
padding: 32px;
}
.ainas-shell__hero {
margin-bottom: 28px;
padding: 28px;
border-radius: 24px;
background: linear-gradient(135deg, #10212d 0%, #184152 100%);
color: #f6fafc;
}
.ainas-shell__eyebrow {
margin: 0 0 12px;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.8;
}
.ainas-shell__title {
margin: 0 0 12px;
font-size: 32px;
line-height: 1.1;
}
.ainas-shell__copy {
margin: 0;
max-width: 70ch;
font-size: 15px;
line-height: 1.6;
}
.ainas-shell__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.ainas-shell__card {
padding: 24px;
border: 1px solid rgba(16, 33, 45, 0.12);
border-radius: 20px;
background: #ffffff;
box-shadow: 0 20px 40px rgba(16, 33, 45, 0.06);
}
.ainas-shell__card h2 {
margin-top: 0;
}
.ainas-shell__card dl {
display: grid;
grid-template-columns: minmax(120px, 160px) 1fr;
gap: 8px 16px;
margin: 0;
}
.ainas-shell__card dt {
font-weight: 600;
}
.ainas-shell__card dd {
margin: 0;
}
.ainas-shell__card code {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
background: #eef4f7;
}
.ainas-shell__card ul {
margin: 0;
padding-left: 20px;
}
.ainas-shell__error {
margin-top: 16px;
color: #b42318;
}

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" fill="none">
<rect width="128" height="128" rx="28" fill="#0D1720"/>
<path d="M26 88L47 42H59L80 88H69L64 75H42L37 88H26ZM46 66H60L53 49L46 66Z" fill="#F6FAFC"/>
<path d="M78 88V42H90V78H110V88H78Z" fill="#4EC2B2"/>
</svg>

After

Width:  |  Height:  |  Size: 292 B

View file

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" fill="none">
<rect width="128" height="128" rx="28" fill="#184152"/>
<path d="M26 88L47 42H59L80 88H69L64 75H42L37 88H26ZM46 66H60L53 49L46 66Z" fill="#F6FAFC"/>
<path d="M78 88V42H90V78H110V88H78Z" fill="#7CE0D2"/>
</svg>

After

Width:  |  Height:  |  Size: 292 B

View file

@ -0,0 +1,43 @@
<?php
declare(strict_types=1);
use OCA\AinasControlplane\AppInfo\Application;
use OCP\Util;
Util::addStyle(Application::APP_ID, 'ainascontrolplane');
$snapshot = $_['snapshot'];
$reachable = !empty($snapshot['available']) ? 'yes' : 'no';
$version = $snapshot['version']['version'] ?? 'unreachable';
?>
<div class="ainas-shell ainas-shell--admin">
<div class="ainas-shell__hero">
<p class="ainas-shell__eyebrow">Admin settings</p>
<h1 class="ainas-shell__title">aiNAS control-plane wiring</h1>
<p class="ainas-shell__copy">
The local scaffold wires this app to the control plane through the <code>AINAS_CONTROL_PLANE_URL</code> environment variable in the Nextcloud container.
</p>
</div>
<div class="ainas-shell__grid">
<section class="ainas-shell__card">
<h2>Current wiring</h2>
<dl>
<dt>Control-plane URL</dt>
<dd><code><?php p($_['controlPlaneUrl']); ?></code></dd>
<dt>Reachable</dt>
<dd><?php p($reachable); ?></dd>
<dt>Reported version</dt>
<dd><?php p($version); ?></dd>
</dl>
</section>
<section class="ainas-shell__card">
<h2>Next step</h2>
<p>Keep storage policy, sharing logic, and orchestration in the control-plane service. This page should remain a thin integration surface.</p>
</section>
</div>
</div>

View file

@ -0,0 +1,51 @@
<?php
declare(strict_types=1);
use OCA\AinasControlplane\AppInfo\Application;
use OCP\Util;
Util::addStyle(Application::APP_ID, 'ainascontrolplane');
$snapshot = $_['snapshot'];
$version = $snapshot['version']['version'] ?? 'unreachable';
$status = !empty($snapshot['available']) ? 'Connected' : 'Unavailable';
$error = $snapshot['error'] ?? null;
?>
<div class="ainas-shell">
<div class="ainas-shell__hero">
<p class="ainas-shell__eyebrow">aiNAS inside Nextcloud</p>
<h1 class="ainas-shell__title"><?php p($_['appName']); ?></h1>
<p class="ainas-shell__copy">
This shell app stays intentionally thin. It exposes aiNAS entry points inside Nextcloud and delegates business logic to the external control-plane service.
</p>
</div>
<div class="ainas-shell__grid">
<section class="ainas-shell__card">
<h2>Control plane</h2>
<dl>
<dt>Configured URL</dt>
<dd><code><?php p($_['controlPlaneUrl']); ?></code></dd>
<dt>Status</dt>
<dd><?php p($status); ?></dd>
<dt>Version</dt>
<dd><?php p($version); ?></dd>
</dl>
<?php if ($error !== null): ?>
<p class="ainas-shell__error"><?php p($error); ?></p>
<?php endif; ?>
</section>
<section class="ainas-shell__card">
<h2>Boundary</h2>
<ul>
<li>Nextcloud provides file and client primitives.</li>
<li>aiNAS owns control-plane policy and orchestration.</li>
<li>The shell app only adapts between the two.</li>
</ul>
</section>
</div>
</div>