Skip to content

feat(shell): add three-column application shell #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ibourgeois merged 1 commit into from
Apr 10, 2026
Merged

feat(shell): add three-column application shell #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions resources/views/components/layouts/app-shell.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
@props([
'title' => config('app.name', 'Replicator'),
'toolbarItems' => [],
'contextItems' => [],
])

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>{{ $title }}</title>

<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />

@if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
@vite(['resources/css/app.css', 'resources/js/app.js'])
Comment on lines +15 to +19
@endif
</head>
<body class="min-h-full bg-gray-100 font-sans text-gray-950 antialiased dark:bg-gray-950 dark:text-gray-50">
<div class="min-h-screen lg:flex">
<aside
aria-label="Application toolbar"
class="bg-gray-950 px-3 py-4 text-gray-100 dark:bg-black lg:flex lg:min-h-screen lg:w-20 lg:flex-col lg:items-center lg:px-0"
>
<div class="flex items-center justify-between lg:mb-6 lg:w-full lg:flex-col lg:gap-4">
<a
href="{{ route('home') }}"
class="flex items-center gap-3 rounded-lg px-2 py-2 text-sm font-semibold text-white lg:flex-col lg:gap-2"
>
<span class="flex size-10 items-center justify-center rounded-lg bg-white/10">
<x-heroicon-o-squares-2x2 class="size-5" />
</span>
<span class="lg:text-[0.7rem]">Apps</span>
</a>

<button
type="button"
class="flex size-10 items-center justify-center rounded-lg bg-white/10 text-white lg:hidden"
aria-label="Open navigation"
Comment on lines +41 to +42
>
<x-heroicon-o-bars-3 class="size-5" />
</button>
</div>

<nav aria-label="Applications" class="mt-4 flex gap-2 overflow-x-auto lg:mt-0 lg:flex-1 lg:flex-col lg:items-center">
@foreach ($toolbarItems as $item)
<a
href="{{ $item['href'] ?? '#' }}"
@class([
'flex min-w-16 flex-col items-center gap-2 rounded-lg px-2 py-3 text-center text-[0.7rem] transition-colors',
'bg-white/12 text-white' => $item['current'] ?? false,
'text-gray-300 hover:bg-white/8 hover:text-white' => ! ($item['current'] ?? false),
])
>
<span class="flex size-9 items-center justify-center rounded-lg bg-white/8">
Comment on lines +54 to +58
<x-dynamic-component :component="$item['icon']" class="size-5" />
</span>
Comment on lines +48 to +60
<span>{{ $item['label'] }}</span>
</a>
@endforeach
</nav>
</aside>

<div class="flex min-w-0 flex-1 flex-col lg:flex-row">
<nav
aria-label="Context navigation"
class="bg-white px-5 py-5 dark:bg-gray-900 lg:w-72 lg:px-6 lg:py-8"
>
<div class="mb-6 flex items-center gap-3">
<span class="flex size-10 items-center justify-center rounded-lg bg-amber-100 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300">
<x-heroicon-o-light-bulb class="size-5" />
</span>
<div>
<p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Current app</p>
<h1 class="text-lg font-semibold">Ideas</h1>
</div>
</div>

<ul class="space-y-1.5">
@foreach ($contextItems as $item)
<li>
<a
href="{{ $item['href'] ?? '#' }}"
@class([
'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm transition-colors',
'bg-gray-100 font-medium text-gray-950 dark:bg-gray-800 dark:text-white' => $item['current'] ?? false,
'text-gray-600 hover:bg-gray-100 hover:text-gray-950 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white' => ! ($item['current'] ?? false),
])
>
<span class="flex size-8 items-center justify-center rounded-lg bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-300">
<x-dynamic-component :component="$item['icon']" class="size-4" />
</span>
Comment on lines +83 to +95
<span>{{ $item['label'] }}</span>
</a>
</li>
@endforeach
</ul>
</nav>

<main aria-label="Main content" class="min-w-0 flex-1 bg-gray-50 px-5 py-5 dark:bg-gray-950 lg:px-8 lg:py-8">
{{ $slot }}
</main>
</div>
</div>
</body>
</html>
121 changes: 121 additions & 0 deletions resources/views/home.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
@php
$toolbarItems = [
[
'label' => 'Ideas',
'href' => '#ideas',
'current' => true,
'icon' => 'heroicon-o-light-bulb',
],
[
'label' => 'Planning',
'href' => '#planning',
'icon' => 'heroicon-o-clipboard-document-list',
],
[
'label' => 'Development',
'href' => '#development',
'icon' => 'heroicon-o-code-bracket-square',
],
[
'label' => 'Testing',
'href' => '#testing',
'icon' => 'heroicon-o-beaker',
],
[
'label' => 'Security',
'href' => '#security',
'icon' => 'heroicon-o-shield-check',
],
[
'label' => 'Ops',
'href' => '#ops',
'icon' => 'heroicon-o-command-line',
],
[
'label' => 'Admin',
'href' => '#admin',
'icon' => 'heroicon-o-cog-6-tooth',
],
];

$contextItems = [
[
'label' => 'Inbox',
'href' => '#inbox',
'icon' => 'heroicon-o-inbox-stack',
],
[
'label' => 'Drafts',
'href' => '#drafts',
'current' => true,
'icon' => 'heroicon-o-pencil-square',
],
[
'label' => 'Shared',
'href' => '#shared',
'icon' => 'heroicon-o-users',
],
[
'label' => 'Proposals',
'href' => '#proposals',
'icon' => 'heroicon-o-rocket-launch',
],
];
@endphp

<x-layouts.app-shell :title="config('app.name', 'Replicator')" :toolbar-items="$toolbarItems" :context-items="$contextItems">
<div class="mx-auto max-w-5xl space-y-8">
<section class="space-y-3">
<p class="text-sm font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">Workspace</p>
<h2 class="max-w-3xl text-3xl font-semibold text-gray-950 dark:text-white">Turn rough product thoughts into team-ready software proposals.</h2>
<p class="max-w-3xl text-base leading-7 text-gray-600 dark:text-gray-300">
This shell is the first pass at the shared product frame: app switcher on the left, context navigation beside it,
and a main work area ready for ideas, planning, development, testing, security, ops, and admin tools.
</p>
</section>

<section class="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(18rem,1fr)]">
<div class="space-y-5 rounded-lg bg-white px-5 py-5 dark:bg-gray-900">
<div class="flex items-start justify-between gap-4">
<div class="space-y-2">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">Current draft</p>
<h3 class="text-xl font-semibold text-gray-950 dark:text-white">Private idea workspace</h3>
</div>
<span class="rounded-lg bg-amber-100 px-3 py-1 text-sm font-medium text-amber-800 dark:bg-amber-400/10 dark:text-amber-300">
Draft
</span>
</div>

<div class="space-y-4 text-sm leading-7 text-gray-600 dark:text-gray-300">
<p>
Start with a quick note, leave it alone for a week, come back sharper, and keep shaping the idea until it is ready
to propose. The layout keeps navigation stable while the work area can become richer over time.
</p>
<p>
The main content region is intentionally plain here. It is a working surface, not a marketing panel, so future
features can slot in without rewriting the frame.
</p>
</div>
</div>

<section class="space-y-4 rounded-lg bg-white px-5 py-5 dark:bg-gray-900">
<h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Next in this app</h3>

<ul class="space-y-3 text-sm text-gray-600 dark:text-gray-300">
<li class="flex items-center gap-3">
<span class="size-2 rounded-full bg-amber-500"></span>
Capture a new rough idea
</li>
<li class="flex items-center gap-3">
<span class="size-2 rounded-full bg-amber-500"></span>
Revisit saved drafts later
</li>
<li class="flex items-center gap-3">
<span class="size-2 rounded-full bg-amber-500"></span>
Propose a polished draft to the team
</li>
</ul>
</section>
</section>
</div>
</x-layouts.app-shell>
4 changes: 2 additions & 2 deletions routes/web.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
return view('welcome');
});
return view('home');
})->name('home');
13 changes: 13 additions & 0 deletions tests/Feature/Shell/HomeShellTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<?php

it('renders the application shell preview', function () {
$response = $this->get(route('home'));

$response->assertSuccessful();
$response->assertSee('Application toolbar');
$response->assertSee('Context navigation');
$response->assertSee('Main content');
$response->assertSee('Ideas');
$response->assertSee('Drafts');
$response->assertSee('Private idea workspace');
});
Loading