feat: finish demo — Angular 22 + Material UI, role management, schema and Docker cleanup

Frontend
- Upgrade Angular 19 -> 22 (TypeScript 6, new control flow), drop unused
  packages (bootstrap, jquery, popper, ng-bootstrap, webpack)
- Move the UI to Angular Material: toolbar with user menu, tutorials list,
  add/edit forms, admin users table with role editing dialog, profile,
  home page with published tutorials, registration form, login dialog
- Guard routes: login required for add/edit/profile, admin role for /admin
- Remove the /login, Moderator and User pages, event bus, auth interceptor
  and other dead code

Backend
- Add PUT /api/users/{id}/roles (admin only) that keeps at least one admin
  and does not let an admin drop their own admin role
- Tighten security: read tutorials publicly, change them only when logged
  in, users/roles API for admins only; hide password hashes in JSON
- Remove unused Settings and Test endpoints, DTO mappers, commented code
- Flyway V2 aligns the schema with the entities (bigint ids, tutorials PK,
  identity ids); Hibernate now runs with ddl-auto: validate

Docker
- Three-stage Dockerfile (Node build, Gradle build, JRE runtime) with
  layer caching, non-root user and healthcheck; add .dockerignore
- docker-compose waits for a healthy Postgres, always rebuilds the image,
  no longer mounts the Docker socket

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

spring-angular-ui/src/app/app.component.scss

@@ -1,6 +1,85 @@
-//#header_panel{
-//  background-color: #181d1f;
-//}
-.example-spacer {
+@use '@angular/material' as mat;
+
+.app-toolbar {
+  @include mat.toolbar-overrides((
+    container-background-color: var(--mat-sys-surface-container),
+    container-text-color: var(--mat-sys-on-surface),
+  ));
+
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  gap: 8px;
+  padding: 0 16px;
+  box-shadow: var(--mat-sys-level2);
+}
+
+// Bootstrap (CDN) подчёркивает ссылки при наведении — для кнопок это лишнее
+a,
+a:hover {
+  text-decoration: none;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-right: 16px;
+  color: var(--mat-sys-primary);
+  font: var(--mat-sys-title-large);
+  white-space: nowrap;
+}
+
+.nav {
+  display: flex;
+  gap: 4px;
+}
+
+.nav a {
+  @include mat.button-overrides((
+    text-label-text-color: var(--mat-sys-on-surface-variant),
+  ));
+}
+
+.nav a.active {
+  @include mat.button-overrides((
+    text-label-text-color: var(--mat-sys-on-secondary-container),
+  ));
+
+  background-color: var(--mat-sys-secondary-container);
+}
+
+.spacer {
   flex: 1 1 auto;
 }
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+// На узких экранах оставляем только иконки
+@media (max-width: 768px) {
+  .brand span,
+  .label {
+    display: none;
+  }
+
+  .user-button mat-icon[iconPositionEnd] {
+    display: none;
+  }
+
+  // Без подписи иконка должна стоять по центру кнопки
+  .nav a,
+  .actions > *,
+  .user-button {
+    min-width: 48px;
+    padding: 0 12px;
+  }
+
+  .nav mat-icon,
+  .actions mat-icon,
+  .user-button mat-icon {
+    margin: 0;
+  }
+}