@things-factory/gallery 10.1.233 → 10.1.236

package/client/bootstrap.ts

@@ -1,5 +1,11 @@
+import { html } from 'lit'
+
 import { navigate, store } from '@operato/shell'
 import { ADD_USER_MENU } from '@things-factory/apptool-base/client'
+import { ADD_SETTING } from '@things-factory/setting-base/dist-client'
+
+import './components/gallery-saver-setting-let.js'
+import { watchForSaver } from './utils/gallery-saver.js'
 
 /* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */
 export default function bootstrap() {
@@ -13,4 +19,10 @@ export default function bootstrap() {
       action: () => navigate('gallery-page?tab=mine')
     }
   })
+  /* The screen saver is the device's, so it is set among one's own settings (ADR-0165 decision 9). */
+  store.dispatch({
+    type: ADD_SETTING,
+    setting: { seq: 30, template: html`<gallery-saver-setting-let></gallery-saver-setting-let>` }
+  })
+  watchForSaver()
 }

package/client/components/gallery-forms.ts

@@ -153,7 +153,7 @@ export class GalleryTagForm extends localize(i18next)(LitElement) {
           >${t('gallery.field.new-tag')}<input
             .value=${this.to}
             placeholder=${this.tag}
-            maxlength="31"
+            maxlength="30"
             @input=${(e: any) => (this.to = e.target.value)}
         /></label>
         <div class="note">${t('gallery.text.tag-form-note', { tag: this.tag })}</div>

package/client/components/gallery-saver-setting-let.ts

@@ -0,0 +1,78 @@
+/*
+ * Settings › the gallery as the screen saver on this device (ADR-0165 decision 9): off, or after a few quiet minutes.
+ */
+import '@material/web/radio/radio.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+
+import { SAVER_MINUTES, saverMinutes, setSaverMinutes } from '../utils/gallery-saver.js'
+import { reasonOf, t } from '../utils/gallery-words.js'
+
+@customElement('gallery-saver-setting-let')
+export class GallerySaverSettingLet extends localize(i18next)(LitElement) {
+  static styles = css`
+    div[slot='content'] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-medium, 8px);
+    }
+    .choices {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-small, 4px) var(--spacing-large, 12px);
+    }
+    label {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+      font: var(--label-font);
+      color: var(--md-sys-color-on-surface);
+    }
+    .note {
+      margin: 0;
+      font-size: var(--ui-t-small, 12px);
+      color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+    }
+  `
+
+  @state() private minutes = 0
+
+  render() {
+    return html`<setting-let>
+      <span slot="title">${t('gallery.title.saver')}</span>
+      <div slot="content">
+        <div class="choices" role="radiogroup">
+          ${SAVER_MINUTES.map(
+            minutes => html`<label>
+              <md-radio
+                name="gallery-saver"
+                value=${String(minutes)}
+                ?checked=${this.minutes === minutes}
+                @change=${() => this.choose(minutes)}
+              ></md-radio>
+              ${minutes ? t('gallery.text.saver-after', { minutes }) : t('gallery.text.saver-off')}
+            </label>`
+          )}
+        </div>
+        <p class="note">${t('gallery.text.saver-note')}</p>
+      </div>
+    </setting-let>`
+  }
+
+  async firstUpdated() {
+    this.minutes = await saverMinutes()
+  }
+
+  private async choose(minutes: number) {
+    try {
+      await setSaverMinutes(minutes)
+      this.minutes = minutes
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    }
+  }
+}

package/client/components/gallery-show.ts

@@ -0,0 +1,312 @@
+/*
+ * The gallery's photos across the whole window, one at a time (ADR-0165 decision 9): seen large from a post, played as
+ * a slideshow from the gallery, and the screen saver after the person has been away. One show for the three - what
+ * differs is where it starts, whether it plays, and whether anything the person does closes it (the saver).
+ */
+import '@material/web/icon/icon.js'
+
+import { css, html, LitElement, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+
+import { galleryApi, type Filter, type Photo, type Post } from '../utils/gallery-api.js'
+import { day, t } from '../utils/gallery-words.js'
+
+/** How long one photo stays while it plays. */
+const DWELL = 7000
+/** The most photos one show walks through - pages of the gallery's own size are asked until this. */
+const MOST = 300
+const PAGE = 60
+
+type Frame = { post: Post; photo: Photo }
+
+export type ShowOptions = {
+  /** The posts the show walks through - the gallery's narrowing where it was opened. */
+  filter: Filter
+  /** Where it starts: a post and the photo in it. Without it, the first photo. */
+  start?: { postId: string; index: number }
+  /** Plays at once. */
+  playing?: boolean
+  /** The screen saver: plays in a random order, and closes at anything the person does. */
+  saver?: boolean
+}
+
+@customElement('gallery-show')
+export class GalleryShow extends localize(i18next)(LitElement) {
+  static styles = css`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      display: block;
+      background: #000;
+      color: #fff;
+      user-select: none;
+    }
+    :host([saver]) {
+      cursor: none;
+    }
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: appear 800ms ease-out;
+    }
+    @keyframes appear {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+    .about {
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      padding: 48px 24px 20px;
+      background: linear-gradient(transparent, rgb(0 0 0 / 60%));
+      font-size: 14px;
+      line-height: 1.5;
+    }
+    .about .caption {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      white-space: pre-wrap;
+      font-size: 16px;
+    }
+    .about .who {
+      opacity: 0.75;
+    }
+    .bar {
+      position: absolute;
+      top: 12px;
+      inset-inline-end: 12px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .bar .count {
+      padding: 0 8px;
+      font-size: 13px;
+      opacity: 0.8;
+    }
+    button {
+      display: inline-flex;
+      padding: 8px;
+      border: 0;
+      border-radius: 50%;
+      background: rgb(0 0 0 / 45%);
+      color: #fff;
+      cursor: pointer;
+    }
+    button:hover {
+      background: rgb(255 255 255 / 20%);
+    }
+    .turn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .previous {
+      inset-inline-start: 12px;
+    }
+    .next {
+      inset-inline-end: 12px;
+    }
+    .empty {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0.8;
+    }
+  `
+
+  /** Opens a show over the whole window, and the whole screen when the browser lets it. */
+  static open(options: ShowOptions): GalleryShow {
+    const show = document.createElement('gallery-show') as GalleryShow
+    show.options = options
+    document.body.appendChild(show)
+    return show
+  }
+
+  @property({ type: Boolean, reflect: true }) saver = false
+  options!: ShowOptions
+
+  @state() private frames: Frame[] = []
+  @state() private at = 0
+  @state() private playing = false
+  @state() private loaded = false
+
+  private timer?: ReturnType<typeof setTimeout>
+  private wholeScreen = false
+  private disposed = false
+
+  render() {
+    const frame = this.frames[this.at]
+    if (!frame)
+      return this.loaded
+        ? html`<div class="empty">${t('gallery.text.show-empty')}</div>${this.saver ? nothing : this.renderBar()}`
+        : nothing
+    const { post, photo } = frame
+    return html`
+      ${/* A new element for each photo, so it fades in. */ [photo.id].map(() => html`<img src=${photo.fullpath} alt=${post.caption ?? ''} />`)}
+      <div class="about">
+        ${post.caption ? html`<div class="caption">${post.caption}</div>` : nothing}
+        <div class="who">${post.creator?.name ?? ''} · ${day(post.takenAt)}${post.event ? ` · ${post.event.name}` : ''}</div>
+      </div>
+      ${
+        this.saver
+          ? nothing
+          : html`${this.renderBar()}
+              ${this.frames.length > 1
+                ? html`<button class="turn previous" aria-label=${t('gallery.button.previous')} @click=${() => this.step(-1)}>
+                      <md-icon>chevron_left</md-icon>
+                    </button>
+                    <button class="turn next" aria-label=${t('gallery.button.next')} @click=${() => this.step(1)}>
+                      <md-icon>chevron_right</md-icon>
+                    </button>`
+                : nothing}`
+      }
+    `
+  }
+
+  private renderBar() {
+    return html`<div class="bar">
+      ${this.frames.length ? html`<span class="count">${this.at + 1} / ${this.frames.length}</span>` : nothing}
+      ${
+        this.frames.length > 1
+          ? html`<button
+              aria-label=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              title=${t(this.playing ? 'gallery.button.pause' : 'gallery.button.play')}
+              @click=${() => this.play(!this.playing)}
+            >
+              <md-icon>${this.playing ? 'pause' : 'play_arrow'}</md-icon>
+            </button>`
+          : nothing
+      }
+      <button aria-label=${t('gallery.button.close')} title=${t('gallery.button.close')} @click=${() => this.close()}>
+        <md-icon>close</md-icon>
+      </button>
+    </div>`
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.saver = !!this.options?.saver
+    window.addEventListener('keydown', this.onKey, true)
+    document.addEventListener('fullscreenchange', this.onFullscreen)
+    if (this.saver) for (const name of WAKE) window.addEventListener(name, this.onWake, true)
+    /* The whole screen needs the press that opened it - the saver has none, and covers the window only. */
+    if (!this.saver && this.requestFullscreen)
+      this.requestFullscreen()
+        .then(() => (this.wholeScreen = true))
+        .catch(() => {})
+    this.load()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.disposed = true
+    clearTimeout(this.timer)
+    window.removeEventListener('keydown', this.onKey, true)
+    document.removeEventListener('fullscreenchange', this.onFullscreen)
+    for (const name of WAKE) window.removeEventListener(name, this.onWake, true)
+  }
+
+  private async load() {
+    const { filter, start, saver } = this.options
+    const frames: Frame[] = []
+    try {
+      for (let skip = 0; frames.length < MOST; skip += PAGE) {
+        const page = await galleryApi.posts(filter, skip, PAGE)
+        for (const post of page.items) if (!post.hiddenAt) for (const photo of post.photos) frames.push({ post, photo })
+        if (this.disposed || skip + PAGE >= page.total) break
+      }
+    } catch {
+      /* The show has what came; a saver with nothing closes itself below. */
+    }
+    if (this.disposed) return
+    if (saver) shuffle(frames)
+    this.frames = frames.slice(0, MOST)
+    const found = start ? this.frames.findIndex(one => one.post.id === start.postId) : -1
+    this.at = found < 0 ? 0 : Math.min(found + start!.index, this.frames.length - 1)
+    this.loaded = true
+    if (saver && !this.frames.length) return this.close()
+    this.play(!!this.options.playing || !!saver)
+  }
+
+  private play(on: boolean) {
+    this.playing = on
+    this.schedule()
+  }
+
+  /** The next photo after the dwell, asked ahead so it is there when it turns. */
+  private schedule() {
+    clearTimeout(this.timer)
+    if (!this.playing || this.frames.length < 2) return
+    const next = this.frames[(this.at + 1) % this.frames.length]
+    new Image().src = next.photo.fullpath
+    this.timer = setTimeout(() => this.step(1), DWELL)
+  }
+
+  private step(by: number) {
+    const count = this.frames.length
+    if (!count) return
+    this.at = (this.at + by + count) % count
+    this.schedule()
+  }
+
+  private onKey = (e: KeyboardEvent) => {
+    if (this.saver) return
+    const handled: Record<string, () => void> = {
+      ArrowLeft: () => this.step(-1),
+      ArrowRight: () => this.step(1),
+      ' ': () => this.play(!this.playing),
+      Escape: () => this.close()
+    }
+    const act = handled[e.key]
+    if (!act) return
+    e.preventDefault()
+    e.stopPropagation()
+    act()
+  }
+
+  /** Leaving the whole screen (Esc there is the browser's) leaves the show too. */
+  private onFullscreen = () => {
+    if (this.wholeScreen && !document.fullscreenElement) this.close()
+  }
+
+  private onWake = (e: Event) => {
+    /* The pointer resting on the screen still says it moved, by a pixel or so - a real move is farther. */
+    if (e.type === 'pointermove' && Math.abs((e as PointerEvent).movementX) + Math.abs((e as PointerEvent).movementY) < 4)
+      return
+    e.preventDefault()
+    e.stopPropagation()
+    this.close()
+  }
+
+  close() {
+    if (this.disposed) return
+    if (this.wholeScreen && document.fullscreenElement) document.exitFullscreen().catch(() => {})
+    this.remove()
+    this.dispatchEvent(new CustomEvent('closed'))
+  }
+}
+
+/** What wakes the screen from the saver. */
+const WAKE = ['pointermove', 'pointerdown', 'keydown', 'wheel', 'touchstart']
+
+function shuffle<T>(list: T[]) {
+  for (let i = list.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[list[i], list[j]] = [list[j], list[i]]
+  }
+}

package/client/components/gallery-uploader.ts

@@ -31,6 +31,7 @@ import { shrunk, takenAtOf } from '../utils/photo-prep.js'
 const MAX_PHOTOS = 20
 const MAX_CAPTION = 500
 const MAX_TAGS = 10
+const MAX_TAG = 30
 /* The events shown before 「more」 - the near ones are among them. */
 const FIRST_CHOICES = 4
 
@@ -139,6 +140,10 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
         font-size: var(--ui-t-small, 12px);
         color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
       }
+      .refusal {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--md-sys-color-error);
+      }
       .chips {
         display: flex;
         flex-wrap: wrap;
@@ -218,8 +223,12 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
   @state() private caption = ''
   @state() private tags: string[] = []
   @state() private tagText = ''
+  /** Why the tag being typed was not taken - said under the tags, the text kept so it can be shortened. */
+  @state() private tagRefusal = ''
   @state() private suggestions: { tag: string; count: number }[] = []
   @state() private chosenSpace: Space = 'COMPANY'
+  /** A post of the own gallery is the person's alone until shared (decision 2) - off when posting. */
+  @state() private shared = false
   @state() private chosenEvent: string | null = null
   @state() private takenOn = dateText(new Date())
   @state() private choices: EventChoice[] = []
@@ -322,6 +331,7 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
                 : nothing
             }
           </div>
+          ${this.tagRefusal ? html`<div class="refusal" role="alert">${this.tagRefusal}</div>` : nothing}
           ${
             this.suggestions.length
               ? html`<div class="chips suggest">
@@ -376,7 +386,18 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
                   }
                 </div>
               </section>`
-            : html`<div class="muted">${t('gallery.text.personal-note')}</div>`
+            : html`<section>
+                <h4>${t('gallery.field.shared')}</h4>
+                <div class="chips">
+                  <button class="chip" aria-pressed=${String(!this.shared)} @click=${() => (this.shared = false)}>
+                    <md-icon>lock</md-icon>${t('gallery.text.only-me')}
+                  </button>
+                  <button class="chip" aria-pressed=${String(this.shared)} @click=${() => (this.shared = true)}>
+                    <md-icon>group</md-icon>${t('gallery.text.everyone')}
+                  </button>
+                </div>
+                <div class="muted">${t(this.shared ? 'gallery.text.shared-note' : 'gallery.text.only-me-note')}</div>
+              </section>`
         }
       </div>
       <ox-popup-actions>
@@ -408,6 +429,7 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
       this.caption = post.caption ?? ''
       this.tags = [...(post.tags ?? [])]
       this.chosenSpace = post.space
+      this.shared = post.shared
       this.chosenEvent = post.event?.id ?? null
       this.takenOn = dateText(new Date(post.takenAt))
     } else {
@@ -510,20 +532,28 @@ export class GalleryUploader extends localize(i18next)(LitElement) {
     }
   }
 
-  private addTag(raw: string) {
+  /** Takes the typed tag, or says why not and keeps it - a longer tag was cut at 30 without a word (2026-10-30). */
+  private addTag(raw: string): boolean {
     const tag = raw.replace(/[,]/g, ' ').trim().replace(/^#+/, '').replace(/\s+/g, ' ').trim()
+    if (tag.length > MAX_TAG) {
+      this.tagRefusal = t('gallery.text.tag-too-long-typed', { max: MAX_TAG, length: tag.length })
+      return false
+    }
+    this.tagRefusal = ''
     this.tagText = ''
-    if (!tag || this.tags.length >= MAX_TAGS || this.tags.some(one => one.toLowerCase() === tag.toLowerCase())) return
-    this.tags = [...this.tags, tag.slice(0, 30)]
+    if (!tag || this.tags.length >= MAX_TAGS || this.tags.some(one => one.toLowerCase() === tag.toLowerCase())) return true
+    this.tags = [...this.tags, tag]
+    return true
   }
 
   private async save() {
-    this.addTag(this.tagText)
+    if (!this.addTag(this.tagText)) return
     this.busy = true
     try {
       const files = await Promise.all(this.added.map(one => shrunk(one.file)))
       const input = {
         space: this.chosenSpace,
+        shared: this.chosenSpace === 'PERSONAL' && this.shared,
         caption: this.caption.trim(),
         takenAt: this.takenAt(),
         tags: this.tags,

package/client/components/gallery-viewer.ts

@@ -1,5 +1,5 @@
 /*
- * One post seen large (ADR-0165 decisions 4-6): its photos one by one, the like (the heart, or a double press on the
+ * One post seen large (ADR-0165 decisions 4-6): its photos one by one - and across the whole screen (decision 9) - the like (the heart, or a double press on the
  * photo), who posted it and when, its event and tags - each opens the gallery narrowed to it. Its owner changes or
  * deletes it here; a moderator hides it here, with the reason, or shows it again. Where to go next is the popup's result
  * - a popup closes by going back in the history, so a page opened before it is gone would be gone with it.
@@ -70,6 +70,18 @@ export class GalleryViewer extends localize(i18next)(LitElement) {
       .stage .next {
         inset-inline-end: var(--spacing-small, 4px);
       }
+      .stage .large {
+        position: absolute;
+        top: var(--spacing-small, 4px);
+        inset-inline-end: var(--spacing-small, 4px);
+        display: inline-flex;
+        padding: 4px;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(0 0 0 / 45%);
+        color: #fff;
+        cursor: pointer;
+      }
       .stage .index {
         position: absolute;
         bottom: var(--spacing-small, 4px);
@@ -198,6 +210,7 @@ export class GalleryViewer extends localize(i18next)(LitElement) {
         ${post.hiddenAt ? html`<div class="hidden">${t('gallery.text.hidden-note')}${post.hiddenReason ? ` · ${post.hiddenReason}` : ''}</div>` : nothing}
         <div class="stage" @dblclick=${() => this.like(true, true)}>
           ${photo ? html`<img src=${photo.fullpath} alt=${post.caption ?? ''} />` : nothing}
+          ${photo ? html`<button class="large" aria-label=${t('gallery.button.large')} title=${t('gallery.button.large')} @click=${() => this.close({ show: { postId: post.id, index: this.index } })}><md-icon>fullscreen</md-icon></button>` : nothing}
           ${this.burst ? html`<md-icon class="burst" style="font-variation-settings:'FILL' 1">favorite</md-icon>` : nothing}
           ${
             many
@@ -239,7 +252,7 @@ export class GalleryViewer extends localize(i18next)(LitElement) {
               : nothing
           }
           ${(post.tags ?? []).map(tag => html`<button class="link" @click=${() => this.go(`gallery-page?tag=${encodeURIComponent(tag)}`)}>#${tag}</button>`)}
-          ${post.space === 'PERSONAL' ? html`<span>${t('gallery.space.PERSONAL')}</span>` : nothing}
+          ${post.space === 'PERSONAL' ? html`<span>${t('gallery.space.PERSONAL')}${post.shared ? '' : ` · ${t('gallery.text.only-me')}`}</span>` : nothing}
         </div>
 
         ${
@@ -390,8 +403,8 @@ export class GalleryViewer extends localize(i18next)(LitElement) {
     this.close({ go: address })
   }
 
-  /** The next step - a page to go to, or the post to change - goes as the popup's result: the page takes it once the popup is gone. */
-  private close(next?: { go?: string; edit?: Post }) {
+  /** The next step - a page to go to, the post to change, or the photo to see large - goes as the popup's result: the page takes it once the popup is gone. */
+  private close(next?: { go?: string; edit?: Post; show?: { postId: string; index: number } }) {
     this.dispatchEvent(new CustomEvent('done', { detail: next, bubbles: true, composed: true }))
   }
 }

package/client/pages/gallery-page.ts

@@ -9,11 +9,12 @@ import { customElement, query, state } from 'lit/decorators.js'
 
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
-import { navigate, PageView, store } from '@operato/shell'
+import { navigate, PageView } from '@operato/shell'
 import { ScrollbarStyles } from '@operato/styles'
 import { isMobileDevice } from '@operato/utils'
 import { hasPrivilege } from '@things-factory/auth-base/dist-client'
 
+import { GalleryShow } from '../components/gallery-show.js'
 import {
   galleryApi,
   type EventCard,
@@ -186,6 +187,10 @@ export class GalleryPage extends localize(i18next)(PageView) {
         top: 4px;
         inset-inline-end: 4px;
       }
+      .badge.private {
+        bottom: 4px;
+        inset-inline-end: 4px;
+      }
       .badge.hidden {
         top: 4px;
         inset-inline-start: 4px;
@@ -268,10 +273,6 @@ export class GalleryPage extends localize(i18next)(PageView) {
 
   private onChanged = () => this.load()
 
-  private get me(): string | undefined {
-    return (store.getState() as any).auth?.user?.id
-  }
-
   get context() {
     const actions: any[] = []
     if (this.tag && this.moderator)
@@ -281,6 +282,8 @@ export class GalleryPage extends localize(i18next)(PageView) {
     if (this.tab !== 'events' || this.eventId) {
       if (isMobileDevice())
         actions.push({ title: t('gallery.button.shoot'), icon: 'photo_camera', action: () => this.camera?.pick() })
+      if (this.total)
+        actions.push({ title: t('gallery.button.slideshow'), icon: 'slideshow', action: () => GalleryShow.open({ filter: this.filter(), playing: true }) })
       actions.push({
         title: t('gallery.button.post'),
         icon: 'add_photo_alternate',
@@ -319,7 +322,7 @@ export class GalleryPage extends localize(i18next)(PageView) {
   }
 
   private get narrowed() {
-    return !!(this.eventId || this.tag || (this.authorId && this.authorId !== this.me))
+    return !!(this.eventId || this.tag || this.authorId)
   }
 
   private renderNarrowing() {
@@ -333,7 +336,7 @@ export class GalleryPage extends localize(i18next)(PageView) {
         </button>
       </div>`
     }
-    if (this.authorId && this.authorId !== this.me) {
+    if (this.authorId) {
       const name = this.posts[0]?.creator?.name ?? ''
       return html`<div class="narrow"><h2>${t('gallery.text.persons-gallery', { name })}</h2></div>`
     }
@@ -371,6 +374,7 @@ export class GalleryPage extends localize(i18next)(PageView) {
                 ${post.photos[0] ? html`<img loading="lazy" src=${post.photos[0].thumbnail || post.photos[0].fullpath} alt=${post.caption ?? ''} />` : nothing}
                 ${post.hiddenAt ? html`<span class="badge hidden"><md-icon>visibility_off</md-icon>${t('gallery.text.hidden')}</span>` : nothing}
                 ${post.photos.length > 1 ? html`<span class="badge count"><md-icon>photo_library</md-icon>${post.photos.length}</span>` : nothing}
+                ${post.space === 'PERSONAL' && !post.shared ? html`<span class="badge private" title=${t('gallery.text.only-me')}><md-icon>lock</md-icon></span>` : nothing}
                 ${post.likeCount || post.liked ? html`<span class="badge likes" ?liked=${post.liked}><md-icon>favorite</md-icon>${post.likeCount}</span>` : nothing}
               </div>
               <div class="under">
@@ -432,14 +436,9 @@ export class GalleryPage extends localize(i18next)(PageView) {
     const params = lifecycle?.params ?? {}
     this.eventId = params.event || undefined
     this.tag = params.tag || undefined
-    this.authorId = params.author === 'me' ? this.me : params.author || undefined
-    this.tab = this.eventId
-      ? 'events'
-      : this.authorId === this.me && this.authorId
-        ? 'mine'
-        : TABS.includes(params.tab)
-          ? params.tab
-          : 'company'
+    /* 「me」 is the own gallery - the server knows who asks; the client holds no user id. */
+    this.authorId = params.author === 'me' ? undefined : params.author || undefined
+    this.tab = this.eventId ? 'events' : params.author === 'me' ? 'mine' : TABS.includes(params.tab) ? params.tab : 'company'
     this.event = undefined
     this.posts = []
     this.updateContext()
@@ -457,7 +456,7 @@ export class GalleryPage extends localize(i18next)(PageView) {
     if (this.tag) filter.tag = this.tag
     if (this.authorId) filter.authorId = this.authorId
     else if (this.tab === 'company') filter.space = 'COMPANY'
-    else if (this.tab === 'mine' && this.me) filter.authorId = this.me
+    else if (this.tab === 'mine') filter.mine = true
     return filter
   }
 
@@ -471,6 +470,8 @@ export class GalleryPage extends localize(i18next)(PageView) {
       const page = await galleryApi.posts(this.filter(), more ? this.posts.length : 0, PAGE)
       this.posts = more ? [...this.posts, ...page.items] : page.items
       this.total = page.total
+      /* The slideshow is offered once there is something to show. */
+      this.updateContext()
       if (this.eventId && !this.event)
         this.event =
           page.items.find(one => one.event)?.event ?? (await galleryApi.events()).find(one => one.id === this.eventId)
@@ -523,6 +524,7 @@ export class GalleryPage extends localize(i18next)(PageView) {
     const next = await popup.result
     if (next?.edit) this.upload([], next.edit)
     else if (next?.go) navigate(next.go)
+    else if (next?.show) GalleryShow.open({ filter: this.filter(), start: next.show })
   }
 
   private async openById(id: string) {