Amazing UI fallout

.devcontainer/docker-compose.yml

@@ -16,10 +16,11 @@ services:
       # This is where VS Code should expect to find your project's source code
       # and the value of "workspaceFolder" in .devcontainer/devcontainer.json
       - ..:/app
+      - ../custom-themes:/custom-themes:ro
     networks:
       - hashtopolis_dev
 
 networks:
   hashtopolis_dev:
     # This network will also be used by the python-agent
-    name: hashtopolis_dev
+    name: hashtopolis_dev

.gitignore

@@ -47,3 +47,6 @@ git-version.json
 # Config file
 config.json
 .devcontainer/.env
+
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -0,0 +1,9 @@
+import type { StorybookConfig } from '@storybook/angular';
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.stories.@(js|ts)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+  framework: '@storybook/angular',
+  staticDirs: ['../src/assets']
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script>document.body.classList.add('light-theme');</script>

.storybook/preview.ts

@@ -0,0 +1,75 @@
+import { applicationConfig, type Preview } from '@storybook/angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideHttpClient } from '@angular/common/http';
+import { provideRouter } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+import { of } from 'rxjs';
+
+// Styles (tailwind.css + styles.scss) are inherited from the angular build target
+// via browserTarget in angular.json — do NOT import them here, or Storybook's
+// webpack CSS pipeline tries to re-process them without the @tailwindcss/postcss plugin.
+
+import { registerEChartsModules } from '../src/app/shared/graphs/echarts/echarts.config';
+registerEChartsModules();
+
+const stubbedActivatedRoute = {
+  snapshot: {
+    params: {},
+    queryParams: {},
+    data: {},
+    url: [],
+    paramMap: { get: () => null, getAll: () => [], has: () => false, keys: [] },
+    queryParamMap: { get: () => null, getAll: () => [], has: () => false, keys: [] }
+  },
+  params: of({}),
+  queryParams: of({}),
+  data: of({}),
+  url: of([]),
+  fragment: of(null),
+  paramMap: of({ get: () => null, getAll: () => [], has: () => false, keys: [] }),
+  queryParamMap: of({ get: () => null, getAll: () => [], has: () => false, keys: [] })
+};
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Theme',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' }
+        ],
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [
+    (storyFn, ctx) => {
+      const theme = (ctx.globals['theme'] as string) ?? 'light';
+      document.body.classList.toggle('light-theme', theme === 'light');
+      document.body.classList.toggle('dark-theme', theme === 'dark');
+      return storyFn();
+    },
+    applicationConfig({
+      providers: [
+        provideAnimations(),
+        provideRouter([]),
+        provideHttpClient(),
+        { provide: ActivatedRoute, useValue: stubbedActivatedRoute }
+      ]
+    })
+  ],
+  parameters: {
+    layout: 'centered',
+    backgrounds: { disable: true },
+    controls: {
+      expanded: true,
+      matchers: { color: /(background|color)$/i, date: /Date$/i }
+    }
+  }
+};
+
+export default preview;

.storybook/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["node"],
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
+  },
+  "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
+  "include": [
+    "../src/polyfills.ts",
+    "../src/stories/**/*",
+    "./preview.ts"
+  ],
+  "files": ["./typings.d.ts"]
+}

.storybook/typings.d.ts

@@ -0,0 +1,7 @@
+declare module '*.md' {
+  const content: string;
+  export default content;
+}
+
+declare module 'pdfmake/build/pdfmake';
+declare module 'pdfmake/build/vfs_fonts';

Dockerfile

@@ -25,7 +25,6 @@ COPY docker-entrypoint.sh /usr/local/bin
 # BUILD Image
 #----BEGIN----
 FROM hashtopolis-web-ui-base AS hashtopolis-web-ui-build
-# Coping the app into the container
 COPY . ./
 
 # npm package - clean install

angular.json

@@ -131,6 +131,24 @@
               "src/**/*.html"
             ]
           }
+        },
+        "storybook": {
+          "builder": "@storybook/angular:start-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "hashtopolis:build",
+            "compodoc": false,
+            "port": 6006
+          }
+        },
+        "build-storybook": {
+          "builder": "@storybook/angular:build-storybook",
+          "options": {
+            "configDir": ".storybook",
+            "browserTarget": "hashtopolis:build",
+            "compodoc": false,
+            "outputDir": "dist/storybook"
+          }
         }
       }
     }

custom-themes/HOW_TO_CREATE_CUSTOM_THEME.md

@@ -0,0 +1,195 @@
+# Custom Theme Authoring Guide
+
+This project supports runtime custom themes from CSS files.
+
+For normal usage, custom theme creation is intentionally low-complexity: add one CSS file and recreate the container.
+
+## 1) Add theme files
+
+Place a `.css` file in the `custom-themes` folder.
+If needed, place related assets in the same folder (for example logo images).
+
+Examples:
+
+- `custom-themes/ocean.css`
+- `custom-themes/cyber-night.css`
+
+The file name is converted to the theme id using lowercase kebab-case.
+
+- `Ocean Night.css` -> `ocean-night`
+
+## 2) Define your theme scope
+
+Use the generated id as a body class in the format `.<theme-id>-theme`.
+
+Example for `ocean.css`:
+
+```css
+.ocean-theme {
+  --background: #07131f;
+  --foreground: #d9f2ff;
+  --primary: #4db5ff;
+  --border: rgba(77, 181, 255, 0.35);
+  color-scheme: dark;
+}
+```
+
+At minimum, define the color tokens your components rely on.
+
+## 3) Recreate container
+
+When the container starts, `docker-entrypoint.sh` scans `custom-themes`, copies CSS files into served assets, and generates a manifest.
+
+Apply changes with:
+
+```bash
+docker compose up -d --build --force-recreate
+```
+
+If your stack is already running and mounted correctly, a restart may be enough:
+
+```bash
+docker compose restart
+```
+
+## 4) Verify in browser
+
+Open:
+
+- `/assets/themes/custom-themes.json`
+- `/assets/custom-themes/<theme-id>.css`
+
+If your theme uses local assets, also verify:
+
+- `/assets/custom-themes/<asset-file-name>`
+
+If both are available, the theme appears in theme selectors.
+
+## Notes
+
+- Custom theme ids must match `^[a-z0-9-]+$`.
+- Built-in ids are reserved and ignored in custom manifest: `light`, `dark`, `fallout`.
+- Use absolute URLs in CSS for assets. For custom-theme local assets, use `/assets/custom-themes/...`.
+- Custom menu icons are currently generated as `style` by default.
+- Do not add JavaScript or TypeScript to create a theme unless you are extending platform behavior.
+
+## LLM Prompt Template
+
+Copy and adapt this prompt when asking an LLM to generate a new theme CSS file.
+
+```text
+Generate a single CSS file for a Hashtopolis custom theme.
+
+Requirements:
+- Output CSS only, no markdown.
+- Use this class selector exactly: .<theme-id>-theme
+- Define all variables below with visually coherent values:
+  --background
+  --muted
+  --well
+  --card
+  --card-hover
+  --input
+  --sidebar
+  --foreground
+  --muted-foreground
+  --subtle-foreground
+  --heading-foreground
+  --primary
+  --primary-hover
+  --primary-muted
+  --primary-foreground
+  --secondary
+  --border
+  --border-strong
+  --border-faint
+  --surface-faint
+  --surface-soft
+  --surface-soft-hover
+  --cell-hover
+  --success
+  --warning
+  --destructive
+  --info
+  --link
+  --link-hover
+  --success-bg
+  --destructive-bg
+  --info-bg
+  --header
+  --shell-frame-image
+  --brand-backdrop
+  --shadow-sm
+  --shadow-md
+  --shadow-lg
+  --gradient-accent
+- Include color-scheme: dark; or color-scheme: light; to match the palette.
+- Keep contrast accessible for body text and headings.
+- Avoid changing any selector outside .<theme-id>-theme.
+
+Theme request:
+- Theme id: <theme-id>
+- Mood/style: <describe visual direction>
+- Preferred primary hue: <color>
+- Dark or light: <dark|light>
+```
+
+## Example Output
+
+This is the kind of CSS structure the prompt should generate.
+
+```css
+.ocean-night-theme {
+  --background: #06131f;
+  --muted: #0d1d2c;
+  --well: #10263a;
+  --card: rgba(255, 255, 255, 0.05);
+  --card-hover: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.06);
+  --sidebar: #081520;
+
+  --foreground: #e6f4ff;
+  --muted-foreground: rgba(230, 244, 255, 0.75);
+  --subtle-foreground: rgba(230, 244, 255, 0.55);
+  --heading-foreground: #ffffff;
+
+  --primary: #4db5ff;
+  --primary-hover: #7ac8ff;
+  --primary-muted: rgba(77, 181, 255, 0.2);
+  --primary-foreground: #04111b;
+  --secondary: #7df9ff;
+
+  --border: rgba(77, 181, 255, 0.25);
+  --border-strong: rgba(77, 181, 255, 0.45);
+  --border-faint: rgba(77, 181, 255, 0.15);
+
+  --surface-faint: rgba(255, 255, 255, 0.03);
+  --surface-soft: rgba(255, 255, 255, 0.06);
+  --surface-soft-hover: rgba(255, 255, 255, 0.1);
+
+  --cell-hover: rgba(77, 181, 255, 0.16);
+
+  --success: #76e39b;
+  --warning: #ffd26a;
+  --destructive: #ff7f96;
+  --info: #7df9ff;
+  --link: #7df9ff;
+  --link-hover: #b7fdff;
+
+  --success-bg: color-mix(in oklch, var(--success) 18%, var(--well));
+  --destructive-bg: color-mix(in oklch, var(--destructive) 18%, var(--well));
+  --info-bg: color-mix(in oklch, var(--info) 18%, var(--well));
+
+  --header: rgba(6, 19, 31, 0.72);
+  --shell-frame-image: linear-gradient(135deg, rgba(77, 181, 255, 0.18), rgba(125, 249, 255, 0.08));
+  --brand-backdrop: #4db5ff;
+
+  --shadow-sm: none;
+  --shadow-md: 0 3px 12px rgba(3, 11, 20, 0.42);
+  --shadow-lg: 0 10px 30px rgba(3, 11, 20, 0.58);
+
+  --gradient-accent: linear-gradient(130deg, #4db5ff 0%, #7df9ff 100%);
+
+  color-scheme: dark;
+}
+```