postnhost 0.0.0 → 0.1.1

data/app/javascript/controllers/author_manager_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+import { showElement, hideElement } from "../helpers/dom_helpers"
+
+export default class extends Controller {
+  static targets = ["selector", "addButton", "authorList", "template"]
+
+  connect() {
+    this.#updateAddButtonVisibility()
+  }
+
+  showSelector() {
+    this.#updateSelectorOptions()
+    showElement(this.selectorTarget)
+    hideElement(this.addButtonTarget)
+  }
+
+  hideSelector() {
+    hideElement(this.selectorTarget)
+    showElement(this.addButtonTarget)
+  }
+
+  addAuthor(event) {
+    const select = event.target
+    const authorId = select.value
+    const authorName = select.options[select.selectedIndex].text
+
+    if (authorId && !this.#isAuthorSelected(authorId)) {
+      this.#createAuthorItem(authorId, authorName)
+      this.hideSelector()
+      this.#updateSelectorOptions()
+      this.#updateAddButtonVisibility()
+      this.#markFormAsChanged()
+    }
+
+    select.value = ""
+  }
+
+  removeAuthor(event) {
+    const authorItem = event.target.closest("[data-author-id]")
+    if (authorItem) {
+      authorItem.remove()
+      this.#updateSelectorOptions()
+      this.#updateAddButtonVisibility()
+      this.#markFormAsChanged()
+    }
+  }
+
+  #createAuthorItem(authorId, authorName) {
+    const template = this.templateTarget.content.cloneNode(true)
+    const authorItem = template.querySelector("[data-author-id]")
+    const nameSpan = template.querySelector("[data-author-name]")
+    const hiddenInput = template.querySelector("input[type='hidden']")
+
+    authorItem.dataset.authorId = authorId
+    nameSpan.textContent = authorName
+    hiddenInput.value = authorId
+
+    this.authorListTarget.appendChild(template)
+  }
+
+  #isAuthorSelected(authorId) {
+    return this.authorListTarget.querySelector(`[data-author-id="${authorId}"]`) !== null
+  }
+
+  #updateAddButtonVisibility() {
+    const select = this.selectorTarget.querySelector("select")
+    const hasAvailableOptions = Array.from(select.options).some(option =>
+      option.value && !this.#isAuthorSelected(option.value)
+    )
+
+    if (hasAvailableOptions) {
+      showElement(this.addButtonTarget)
+    } else {
+      hideElement(this.addButtonTarget)
+    }
+  }
+
+  #updateSelectorOptions() {
+    const select = this.selectorTarget.querySelector("select")
+    const options = Array.from(select.options)
+
+    options.forEach(option => {
+      if (option.value && this.#isAuthorSelected(option.value)) {
+        option.style.display = "none"
+      } else {
+        option.style.display = ""
+      }
+    })
+  }
+
+  #markFormAsChanged() {
+    const autoSaveRoot = this.element.closest('[data-controller*="auto-save"]')
+    const autoSaveController = this.application.getControllerForElementAndIdentifier(autoSaveRoot, "auto-save")
+    autoSaveController.markAsChanged()
+  }
+}

data/app/javascript/controllers/auto_save_controller.js

@@ -0,0 +1,244 @@
+import { Controller } from "@hotwired/stimulus"
+import AutoSaveState from "../helpers/auto_save_state"
+import { setSavedButton, setSavingButton, setUploadingButton, setErrorButton } from "../helpers/style_helpers"
+
+const TEXT_INPUT_TYPES = ['text', 'email', 'url', 'tel', 'search']
+const ERROR_RESET_DELAY = 3000
+const UNSAVED_CHANGES_MESSAGE = 'You have unsaved changes. Are you sure you want to leave?'
+
+export default class extends Controller {
+  static targets = ["form", "titleField", "saveButton"]
+  static values = {
+    delay: { type: Number, default: 500 }
+  }
+
+  connect() {
+    this.saveState = new AutoSaveState()
+    this.uploadsInProgress = 0
+    this.saveTimeout = null
+    this.errorResetTimeout = null
+    this.#setupEventListeners()
+    this.#setupBeforeUnload()
+    this.#setupKeyboardShortcut()
+    this.#setupTurboInterceptor()
+  }
+
+  disconnect() {
+    if (this.saveTimeout) clearTimeout(this.saveTimeout)
+    if (this.errorResetTimeout) clearTimeout(this.errorResetTimeout)
+    window.removeEventListener('beforeunload', this.#handleBeforeUnload)
+    document.removeEventListener('keydown', this.#handleKeyboardShortcut)
+    document.removeEventListener('turbo:before-visit', this.#handleTurboVisit)
+  }
+
+  markAsChanged() {
+    this.saveState.markChanged()
+    this.#updateSaveButton()
+    this.#scheduleAutoSave()
+  }
+
+  save(event) {
+    if (event) event.preventDefault()
+    this.#performSave()
+  }
+
+  #setupEventListeners() {
+    // Title field changes
+    if (this.hasTitleFieldTarget) {
+      this.titleFieldTarget.addEventListener('input', () => this.markAsChanged())
+    }
+
+    // External component events
+    document.addEventListener('tiptap:content-changed', () => this.markAsChanged())
+    document.addEventListener('cover-image-upload:upload-start', () => this.#startUploadState())
+    document.addEventListener('cover-image-upload:upload-complete', () => this.markAsChanged())
+    document.addEventListener('cover-image-upload:upload-complete', () => this.#finishUploadState())
+    document.addEventListener('cover-image-upload:upload-failed', () => this.#finishUploadState())
+    document.addEventListener('tiptap-editor:upload-start', () => this.#startUploadState())
+    document.addEventListener('tiptap-editor:upload-complete', () => this.#finishUploadState())
+    document.addEventListener('tiptap-editor:upload-failed', () => this.#finishUploadState())
+    document.addEventListener('cover-image-upload:delete-complete', () => this.markAsChanged())
+
+    // Form field changes
+    this.formTarget.querySelectorAll('input, select, textarea').forEach(field => {
+      if (this.#shouldListenToField(field)) {
+        field.addEventListener(this.#getEventType(field), () => this.markAsChanged())
+      }
+    })
+  }
+
+  #shouldListenToField(field) {
+    const isTipTapField = field.closest('.tiptap') || field.closest('[data-controller*="tiptap"]')
+    return field !== this.titleFieldTarget && field.type !== 'file' && !isTipTapField
+  }
+
+  #getEventType(field) {
+    const isTextInput = field.tagName === 'TEXTAREA' ||
+      (field.tagName === 'INPUT' && TEXT_INPUT_TYPES.includes(field.type))
+    return isTextInput ? 'input' : 'change'
+  }
+
+  #setupBeforeUnload() {
+    window.addEventListener('beforeunload', this.#handleBeforeUnload)
+  }
+
+  #setupKeyboardShortcut() {
+    document.addEventListener('keydown', this.#handleKeyboardShortcut)
+  }
+
+  #setupTurboInterceptor() {
+    document.addEventListener('turbo:before-visit', this.#handleTurboVisit)
+  }
+
+  #handleBeforeUnload = (e) => {
+    if (this.saveState.hasUnsavedChanges) {
+      e.preventDefault()
+      e.returnValue = UNSAVED_CHANGES_MESSAGE
+      return e.returnValue
+    }
+  }
+
+  #handleKeyboardShortcut = (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 's') {
+      e.preventDefault()
+      if (this.saveState.hasUnsavedChanges) this.save(e)
+    }
+  }
+
+  #handleTurboVisit = (e) => {
+    if (this.saveState.hasUnsavedChanges && !confirm(UNSAVED_CHANGES_MESSAGE)) {
+      e.preventDefault()
+    }
+  }
+
+  #scheduleAutoSave() {
+    if (this.saveTimeout) clearTimeout(this.saveTimeout)
+    this.saveTimeout = null
+    if (this.saveState.isSaving || !this.saveState.hasUnsavedChanges) return
+
+    this.saveTimeout = setTimeout(() => {
+      this.saveTimeout = null
+      this.#performSave()
+    }, this.delayValue)
+  }
+
+  #updateSaveButton() {
+    if (!this.hasSaveButtonTarget) return
+
+    if (this.uploadsInProgress > 0) {
+      this.#showUploading()
+      return
+    }
+
+    if (this.saveState.isSaving) {
+      this.#showSaving()
+      return
+    }
+
+    if (this.saveState.hasUnsavedChanges) {
+      setSavedButton(this.saveButtonTarget)
+      this.saveButtonTarget.disabled = false
+      this.saveButtonTarget.classList.remove('cursor-not-allowed')
+      this.saveButtonTarget.classList.add('cursor-pointer')
+      this.saveButtonTarget.textContent = 'Save Changes'
+    } else {
+      setSavedButton(this.saveButtonTarget)
+      this.saveButtonTarget.textContent = 'Saved'
+    }
+  }
+
+  async #performSave() {
+    const savingGeneration = this.saveState.beginSave()
+    if (savingGeneration === null) return
+
+    if (this.saveTimeout) clearTimeout(this.saveTimeout)
+    this.saveTimeout = null
+    this.#showSaving()
+    let saveSucceeded = false
+
+    try {
+      const formData = new FormData(this.formTarget)
+      const response = await fetch(this.formTarget.action, {
+        method: this.formTarget.method || 'POST',
+        body: formData,
+        headers: {
+          'Accept': 'text/vnd.turbo-stream.html, application/json',
+          'X-CSRF-Token': document.querySelector('[name="csrf-token"]').getAttribute('content')
+        }
+      })
+
+      if (response.ok) {
+        const contentType = response.headers.get('content-type')
+        if (contentType?.includes('turbo-stream')) {
+          const html = await response.text()
+          Turbo.renderStreamMessage(html)
+        }
+
+        this.saveState.completeSave(savingGeneration)
+        saveSucceeded = true
+      } else {
+        throw new Error(`HTTP ${response.status}`)
+      }
+    } catch (error) {
+      if (this.saveState.isSaving) this.saveState.failSave(savingGeneration)
+      console.error('Save failed:', error)
+      this.#showError()
+    } finally {
+      if (saveSucceeded) this.#showSaved()
+      if (this.saveState.hasChangesAfter(savingGeneration)) this.#scheduleAutoSave()
+    }
+  }
+
+  #showSaving() {
+    if (!this.hasSaveButtonTarget) return
+    this.#clearErrorReset()
+    setSavingButton(this.saveButtonTarget)
+    this.saveButtonTarget.textContent = 'Saving...'
+  }
+
+  #showUploading() {
+    if (!this.hasSaveButtonTarget) return
+    setUploadingButton(this.saveButtonTarget)
+    this.saveButtonTarget.innerHTML = `
+      <span class="inline-flex items-center justify-center">
+        <span class="inline-block h-3 w-3 mr-2 rounded-full border-2 border-current border-t-transparent animate-spin"></span>
+        Uploading...
+      </span>
+    `
+  }
+
+  #startUploadState() {
+    this.uploadsInProgress += 1
+    this.#showUploading()
+  }
+
+  #finishUploadState() {
+    this.uploadsInProgress = Math.max(0, this.uploadsInProgress - 1)
+    if (this.uploadsInProgress === 0) this.#updateSaveButton()
+  }
+
+  #showSaved() {
+    if (!this.hasSaveButtonTarget) return
+    this.#updateSaveButton()
+  }
+
+  #showError() {
+    if (!this.hasSaveButtonTarget) return
+
+    this.#clearErrorReset()
+    setErrorButton(this.saveButtonTarget)
+    this.saveButtonTarget.textContent = 'Save Failed'
+
+    this.errorResetTimeout = setTimeout(() => {
+      this.errorResetTimeout = null
+      this.#updateSaveButton()
+    }, ERROR_RESET_DELAY)
+  }
+
+  #clearErrorReset() {
+    if (!this.errorResetTimeout) return
+
+    clearTimeout(this.errorResetTimeout)
+    this.errorResetTimeout = null
+  }
+}

data/app/javascript/controllers/bulk_selection_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+import { showElement, hideElement } from "../helpers/dom_helpers"
+
+export default class extends Controller {
+  static targets = ["checkbox", "checkAll", "bulkActions", "selectedCount"]
+
+  connect() {
+    this.#uncheckAll()
+  }
+
+  toggleAll() {
+    const checked = this.checkAllTarget.checked
+    this.#selectableCheckboxTargets().forEach(checkbox => {
+      checkbox.checked = checked
+    })
+    this.#updateBulkActions()
+  }
+
+  toggle() {
+    this.#updateCheckAllState()
+    this.#updateBulkActions()
+  }
+
+  #selectableCheckboxTargets() {
+    return this.checkboxTargets.filter(cb => !cb.disabled)
+  }
+
+  #syncCheckAllEnabled() {
+    const selectable = this.#selectableCheckboxTargets()
+    this.checkAllTarget.disabled = selectable.length === 0
+  }
+
+  #updateCheckAllState() {
+    const selectable = this.#selectableCheckboxTargets()
+    if (selectable.length === 0) {
+      this.checkAllTarget.checked = false
+      this.checkAllTarget.indeterminate = false
+      return
+    }
+
+    const allChecked = selectable.every(cb => cb.checked)
+    const someChecked = selectable.some(cb => cb.checked)
+
+    this.checkAllTarget.checked = allChecked
+    this.checkAllTarget.indeterminate = someChecked && !allChecked
+  }
+
+  #updateBulkActions() {
+    const selectedCount = this.#selectedCount
+
+    if (selectedCount > 0) {
+      showElement(this.bulkActionsTarget)
+      if (this.hasSelectedCountTarget) {
+        this.selectedCountTarget.textContent = selectedCount
+      }
+    } else {
+      hideElement(this.bulkActionsTarget)
+    }
+  }
+
+  #uncheckAll() {
+    this.checkAllTarget.checked = false
+    this.checkAllTarget.indeterminate = false
+    this.#selectableCheckboxTargets().forEach(cb => {
+      cb.checked = false
+    })
+    this.#syncCheckAllEnabled()
+    this.#updateBulkActions()
+  }
+
+  get #selectedCount() {
+    return this.#selectableCheckboxTargets().filter(cb => cb.checked).length
+  }
+}

data/app/javascript/controllers/burger_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+import { toggleElement, hideElement } from "../helpers/dom_helpers"
+
+export default class extends Controller {
+  connect() {
+    const menu = document.getElementById('menu')
+
+    if (!menu) {
+      const icon = this.element.querySelector('svg[data-action*="burger#toggleMenu"]')
+      if (icon) hideElement(icon)
+    }
+  }
+
+  toggleMenu() {
+    const menu = document.getElementById('menu')
+    if (menu) {
+      toggleElement(menu)
+    }
+  }
+}

data/app/javascript/controllers/category_manager_controller.js

@@ -0,0 +1,99 @@
+import { Controller } from "@hotwired/stimulus"
+import { showElement, hideElement } from "../helpers/dom_helpers"
+
+export default class extends Controller {
+  static targets = ["selector", "addButton", "categoryList", "template"]
+
+  connect() {
+    this.#updateAddButtonVisibility()
+  }
+
+  showSelector() {
+    this.#updateSelectorOptions()
+    showElement(this.selectorTarget)
+    hideElement(this.addButtonTarget)
+  }
+
+  hideSelector() {
+    hideElement(this.selectorTarget)
+    showElement(this.addButtonTarget)
+  }
+
+  addCategory(event) {
+    const select = event.target
+    const categoryId = select.value
+    const categoryName = select.options[select.selectedIndex].text
+
+    if (categoryId && !this.#isCategorySelected(categoryId)) {
+      this.#createCategoryItem(categoryId, categoryName)
+      this.hideSelector()
+      this.#updateSelectorOptions()
+      this.#updateAddButtonVisibility()
+      this.#markFormAsChanged()
+    }
+
+    select.value = ""
+  }
+
+  removeCategory(event) {
+    const categoryItem = event.target.closest("[data-category-id]")
+    if (categoryItem) {
+      categoryItem.remove()
+      this.#updateSelectorOptions()
+      this.#updateAddButtonVisibility()
+      this.#markFormAsChanged()
+    }
+  }
+
+  #createCategoryItem(categoryId, categoryName) {
+    const template = this.templateTarget.content.cloneNode(true)
+    const categoryItem = template.querySelector("[data-category-id]")
+    const nameSpan = template.querySelector("[data-category-name]")
+    const hiddenInput = template.querySelector("input[type='hidden']")
+
+    categoryItem.dataset.categoryId = categoryId
+    nameSpan.textContent = categoryName
+    hiddenInput.value = categoryId
+
+    this.categoryListTarget.appendChild(template)
+  }
+
+  #isCategorySelected(categoryId) {
+    return this.categoryListTarget.querySelector(`[data-category-id="${categoryId}"]`) !== null
+  }
+
+  #updateAddButtonVisibility() {
+    const select = this.selectorTarget.querySelector("select")
+    const hasAvailableOptions = Array.from(select.options).some(option =>
+      option.value && !this.#isCategorySelected(option.value)
+    )
+
+    if (hasAvailableOptions) {
+      showElement(this.addButtonTarget)
+    } else {
+      hideElement(this.addButtonTarget)
+    }
+  }
+
+  #updateSelectorOptions() {
+    const select = this.selectorTarget.querySelector("select")
+    const options = Array.from(select.options)
+
+    options.forEach(option => {
+      if (option.value && this.#isCategorySelected(option.value)) {
+        option.style.display = "none"
+      } else {
+        option.style.display = ""
+      }
+    })
+  }
+
+  #markFormAsChanged() {
+    const autoSaveRoot = this.element.closest('[data-controller*="auto-save"]')
+    const autoSaveController = this.application.getControllerForElementAndIdentifier(
+      autoSaveRoot,
+      'auto-save'
+    )
+    autoSaveController.markAsChanged()
+  }
+}

data/app/javascript/controllers/collapsible_sidebar_controller.js

@@ -0,0 +1,87 @@
+import { Controller } from "@hotwired/stimulus"
+
+const EXPANDED_ICON_CLASSES = ["rotate-0"]
+const COLLAPSED_ICON_CLASSES = ["-rotate-90"]
+
+export default class extends Controller {
+  static targets = ["section"]
+  static values = { storageKey: String }
+
+  connect() {
+    this.savedState = this.#readSavedState()
+    this.sectionTargets.forEach(section => this.#syncSectionState(section))
+  }
+
+  toggle(event) {
+    event.preventDefault()
+
+    const sectionId = event.params.id
+    if (!sectionId) return
+
+    const section = this.sectionTargets.find(item => item.dataset.sectionId === sectionId)
+    if (!section) return
+
+    const isCollapsed = this.#isCollapsed(section)
+    this.#setCollapsed(section, !isCollapsed)
+    this.#persistSectionState(sectionId, !isCollapsed)
+  }
+
+  #syncSectionState(section) {
+    const sectionId = section.dataset.sectionId
+    if (!sectionId) return
+
+    const hasSavedState = Object.prototype.hasOwnProperty.call(this.savedState, sectionId)
+    const savedCollapsed = this.savedState[sectionId]
+    const defaultCollapsed = section.dataset.defaultCollapsed === "true"
+    const shouldCollapse = hasSavedState ? savedCollapsed : defaultCollapsed
+
+    this.#setCollapsed(section, shouldCollapse)
+  }
+
+  #setCollapsed(section, collapsed) {
+    const content = section.querySelector('[data-role="section-content"]')
+    const button = section.querySelector('[data-role="section-toggle"]')
+    const icon = section.querySelector('[data-role="section-icon"]')
+    const accessory = section.querySelector('[data-role="section-accessory"]')
+    if (!content || !button || !icon) return
+
+    content.classList.toggle("hidden", collapsed)
+    if (accessory) {
+      accessory.style.visibility = collapsed ? "hidden" : ""
+      accessory.style.opacity = collapsed ? "0" : ""
+      accessory.style.pointerEvents = collapsed ? "none" : ""
+    }
+    button.setAttribute("aria-expanded", (!collapsed).toString())
+
+    icon.classList.remove(...EXPANDED_ICON_CLASSES, ...COLLAPSED_ICON_CLASSES)
+    icon.classList.add(...(collapsed ? COLLAPSED_ICON_CLASSES : EXPANDED_ICON_CLASSES))
+  }
+
+  #isCollapsed(section) {
+    const content = section.querySelector('[data-role="section-content"]')
+    return content ? content.classList.contains("hidden") : false
+  }
+
+  #persistSectionState(sectionId, collapsed) {
+    this.savedState[sectionId] = collapsed
+
+    if (!this.hasStorageKeyValue) return
+
+    try {
+      localStorage.setItem(this.storageKeyValue, JSON.stringify(this.savedState))
+    } catch {
+      // Ignore write errors (private mode/quota); UI should still work.
+    }
+  }
+
+  #readSavedState() {
+    if (!this.hasStorageKeyValue) return {}
+
+    try {
+      const raw = localStorage.getItem(this.storageKeyValue)
+      return raw ? JSON.parse(raw) : {}
+    } catch {
+      return {}
+    }
+  }
+}