Panel.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import qs.Commons
import qs.Ui

Panel {
  id: root
  moduleName: "marcuspelo.omalink"
  ipcTarget: "marcuspelo.omalink"

  // ---------------------------------------------------------------- config
  readonly property string baseUrl: {
    var v = settings ? settings.baseUrl : undefined
    var fromSettings = (typeof v === "string" && v.length > 0) ? v : ""
    var raw = fromSettings || root.envBaseUrl || ""
    return raw.replace(/\/+$/, "")
  }
  readonly property int pageSize: {
    var v = settings ? settings.pageSize : undefined
    return (typeof v === "number" && v >= 5) ? v : 20
  }
  readonly property int defaultCollectionId: {
    var v = settings ? settings.defaultCollectionId : undefined
    return (typeof v === "number" && v > 0) ? v : 0
  }

  readonly property color fg: root.bar ? root.bar.foreground : Color.foreground
  readonly property color dim: Qt.darker(fg, 1.45)
  readonly property string fontFamily: root.bar ? root.bar.fontFamily : "JetBrainsMono Nerd Font"
  readonly property string barIcon: "" // nf-fa-link

  // ---------------------------------------------------------------- credentials
  property string apiKey: ""
  property string envBaseUrl: ""
  property bool apiKeyLoaded: false
  property int myUserId: 0

  // Backslash/quote escaping alone is not enough: a raw CR or LF byte in any
  // value (e.g. a server-controlled `nextCursor`/link `id` from Linkwarden)
  // ends the current `key = "..."` line in the curl -K config regardless of
  // the surrounding quotes, letting the rest of the value be parsed as new
  // curl directives (arbitrary `-K` options — including local file
  // read/write via `upload-file`/`output`). Escaping \r and \n to their
  // literal two-character curl quoted-string escapes keeps them inside the
  // value instead of breaking the config's line structure.
  function curlConfigEscape(s) {
    return String(s).replace(/\\/g, "\\\\").replace(/"/g, '\\"')
      .replace(/\r/g, "\\r").replace(/\n/g, "\\n")
  }

  function parseEnv(raw) {
    var lines = String(raw || "").split("\n")
    for (var i = 0; i < lines.length; i++) {
      var line = lines[i].trim()
      if (!line || line.indexOf("#") === 0) continue
      var eq = line.indexOf("=")
      if (eq < 0) continue
      var key = line.substring(0, eq).trim()
      var value = line.substring(eq + 1).trim().replace(/^["']|["']$/g, "")
      if (key === "API_KEY") root.apiKey = value
      else if (key === "URL_BASE" || key === "BASE_URL") root.envBaseUrl = value
    }
    root.apiKeyLoaded = true
  }

  // ---------------------------------------------------------------- networking
  // Every Linkwarden call is built as a `curl -K -` config and written to the
  // process's stdin, never passed as argv/URL — keeps the bearer token and
  // JSON bodies out of `ps`/`/proc/<pid>/cmdline`.
  function startRequest(proc, method, path, query, body) {
    var url = root.baseUrl + "/api/v1" + path
    if (query) url += (path.indexOf("?") >= 0 ? "&" : "?") + query

    var config = 'url = "' + root.curlConfigEscape(url) + '"\n'
    config += 'header = "Authorization: Bearer ' + root.curlConfigEscape(root.apiKey) + '"\n'
    config += 'header = "Accept: application/json"\n'
    if (method && method !== "GET") config += 'request = "' + method + '"\n'
    if (body !== undefined) {
      config += 'header = "Content-Type: application/json"\n'
      config += 'data = "' + root.curlConfigEscape(JSON.stringify(body)) + '"\n'
    }

    proc.reqConfig = config
    proc.command = ["curl", "-sS", "--max-time", "10", "-K", "-"]
    proc.stdinEnabled = true
    proc.running = true
  }

  // Success payloads never carry `response` as a plain string; error payloads
  // always do ({"response": "message"}), so this is the one reliable signal
  // across every Linkwarden endpoint used here.
  function parseApiError(data) {
    if (data && typeof data.response === "string") return data.response
    return ""
  }

  // ---------------------------------------------------------------- account
  function fetchMe() {
    if (meProc.running) return
    root.startRequest(meProc, "GET", "/users/me")
  }

  function handleMe(raw) {
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err) return
      if (data.response && data.response.id) root.myUserId = data.response.id
    } catch (e) {}
  }

  // ---------------------------------------------------------------- collections
  property var collections: []

  function fetchCollections() {
    if (collectionsProc.running) return
    root.startRequest(collectionsProc, "GET", "/collections")
  }

  function handleCollections(raw) {
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      root.collections = err ? [] : (data.response || [])
    } catch (e) {
      root.collections = []
    }
  }

  // Linkwarden's PUT /links/{id} requires a concrete {id, ownerId} collection
  // on every update (no "leave unchanged" or "default" option server-side),
  // so the dropdown only ever offers real collections — never a synthetic
  // empty value.
  readonly property var collectionOptions: {
    var opts = []
    for (var i = 0; i < root.collections.length; i++)
      opts.push({ value: String(root.collections[i].id), label: root.collections[i].name })
    return opts
  }

  function findCollection(id) {
    for (var i = 0; i < root.collections.length; i++)
      if (root.collections[i].id === id) return root.collections[i]
    return null
  }

  function defaultFormCollectionValue() {
    if (root.defaultCollectionId > 0 && root.findCollection(root.defaultCollectionId))
      return String(root.defaultCollectionId)
    for (var i = 0; i < root.collections.length; i++)
      if (root.collections[i].name === "Unorganized") return String(root.collections[i].id)
    return root.collections.length > 0 ? String(root.collections[0].id) : ""
  }

  // ---------------------------------------------------------------- tags
  property var tagOptions: []

  function fetchTags() {
    if (tagsProc.running) return
    root.startRequest(tagsProc, "GET", "/tags")
  }

  function handleTags(raw) {
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err || !data.data || !data.data.tags) { root.tagOptions = []; return }
      root.tagOptions = data.data.tags.map(function(t) { return t.name })
    } catch (e) {
      root.tagOptions = []
    }
  }

  // ---------------------------------------------------------------- list (search / favorites)
  property string activeTab: "all" // "all" | "favorites"
  property string searchQuery: ""
  property var items: []
  property bool listLoading: false
  property bool hasError: false
  property string errorText: ""
  property var nextCursor: null

  function switchTab(tab) {
    if (root.activeTab === tab) return
    root.activeTab = tab
    root.nextCursor = null
    root.refreshList()
  }

  function refreshList() {
    if (!root.apiKeyLoaded || !root.apiKey || !root.baseUrl) return
    root.nextCursor = null
    root.fetchList(false)
  }

  function fetchList(append) {
    if (listProc.running) return
    root.listLoading = true
    root.hasError = false
    listProc.appendResults = !!append

    var query = ""
    if (root.searchQuery) query += "searchQueryString=" + encodeURIComponent(root.searchQuery)
    if (append && root.nextCursor) query += (query ? "&" : "") + "cursor=" + encodeURIComponent(root.nextCursor)

    if (root.activeTab === "favorites") {
      query += (query ? "&" : "") + "pinnedOnly=true"
      root.startRequest(listProc, "GET", "/links", query)
    } else {
      root.startRequest(listProc, "GET", "/search", query)
    }
  }

  function handleListResult(raw, append) {
    root.listLoading = false
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err) {
        root.hasError = true
        root.errorText = err
        if (!append) root.items = []
        return
      }
      var links = []
      var cursor = null
      if (data.data && Array.isArray(data.data.links)) {
        links = data.data.links
        cursor = (data.data.nextCursor !== undefined) ? data.data.nextCursor : null
      } else if (Array.isArray(data.response)) {
        links = data.response
      }
      root.items = append ? root.items.concat(links) : links
      root.nextCursor = cursor
      root.hasError = false
      root.errorText = ""
    } catch (e) {
      root.hasError = true
      root.errorText = "Failed to read Linkwarden response"
      if (!append) root.items = []
    }
  }

  function loadMore() {
    if (!root.nextCursor || listProc.running) return
    root.fetchList(true)
  }

  function isPinned(link) {
    var by = link && link.pinnedBy
    if (!by || !root.myUserId) return false
    for (var i = 0; i < by.length; i++) {
      var entry = by[i]
      var id = (entry && typeof entry === "object") ? entry.id : entry
      if (id === root.myUserId) return true
    }
    return false
  }

  function domainOf(url) {
    try {
      var m = String(url || "").match(/^[a-z]+:\/\/([^\/]+)/i)
      return m ? m[1] : String(url || "")
    } catch (e) {
      return String(url || "")
    }
  }

  // GET /api/v1/getFavicon has no security requirement in Linkwarden's OpenAPI
  // spec (verified against a live instance: no Authorization header needed,
  // 200 image/{png,x-icon} on hit, 204 on no favicon, 308 if given a full URL
  // instead of just the origin) — unlike every other endpoint this plugin
  // calls. That's why this is the one request built as a plain URL for
  // Image.source instead of going through startRequest/curl: there's no
  // bearer token or JSON body to keep off argv here. Passing just the origin
  // (not the full link URL) skips the 308 the API would otherwise issue, and
  // lets Image's own cache dedupe repeated fetches across links on the same
  // domain.
  function faviconUrl(link) {
    var url = link && link.url ? String(link.url) : ""
    var m = url.match(/^[a-z]+:\/\/[^\/]+/i)
    var origin = m ? m[0] : url
    if (!root.baseUrl || !origin) return ""
    return root.baseUrl + "/api/v1/getFavicon?url=" + encodeURIComponent(origin)
  }

  function relativeTime(iso) {
    if (!iso) return ""
    var t = Date.parse(iso)
    if (isNaN(t)) return ""
    var diffSec = Math.max(0, (Date.now() - t) / 1000)
    if (diffSec < 60) return "just now"
    var mins = Math.floor(diffSec / 60)
    if (mins < 60) return mins + "m ago"
    var hours = Math.floor(mins / 60)
    if (hours < 24) return hours + "h ago"
    return Math.floor(hours / 24) + "d ago"
  }

  // ---------------------------------------------------------------- pin/favorite
  property int pinBusyId: 0

  // Despite the OpenAPI docs describing pinnedBy/tags/collection as optional
  // on PUT /links/{id}, the live server rejects the update entirely unless
  // id, url, tags (possibly []) and a concrete collection {id, ownerId} are
  // all present — confirmed against a real instance. Every PUT must go
  // through this to stay valid.
  function requiredPutBase(link) {
    var col = link.collection
    return {
      id: link.id,
      url: link.url,
      name: link.name || "",
      description: link.description || "",
      tags: (link.tags || []).map(function(t) { return { name: t.name } }),
      collection: col ? { id: col.id, ownerId: col.ownerId } : null
    }
  }

  function togglePin(link) {
    if (!link || pinProc.running) return
    if (!link.collection) {
      root.hasError = true
      root.errorText = "Missing collection info for this link — refresh and try again"
      return
    }
    root.pinBusyId = link.id
    var nextPinned = !root.isPinned(link)
    var body = root.requiredPutBase(link)
    body.pinnedBy = nextPinned ? [{ id: root.myUserId }] : []
    pinProc.targetId = link.id
    pinProc.nextPinned = nextPinned
    root.startRequest(pinProc, "PUT", "/links/" + encodeURIComponent(link.id), "", body)
  }

  function handlePinResult(raw, targetId, nextPinned) {
    root.pinBusyId = 0
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err) { root.errorText = err; root.hasError = true; return }
    } catch (e) {
      root.hasError = true
      root.errorText = "Failed to update pin status"
      return
    }
    for (var i = 0; i < root.items.length; i++) {
      if (root.items[i].id === targetId) {
        var updated = root.items.slice()
        var link = Object.assign({}, updated[i])
        link.pinnedBy = nextPinned ? [{ id: root.myUserId }] : []
        updated[i] = link
        root.items = updated
        break
      }
    }
  }

  // ---------------------------------------------------------------- add / edit form
  property string viewMode: "list" // "list" | "form" | "settings"
  property string formMode: "add" // "add" | "edit"
  property int formId: 0
  property string formUrl: ""
  property string formName: ""
  property string formDescription: ""
  property string formCollectionValue: ""
  property var formTags: []
  property string formNewTagText: ""
  property bool formSubmitting: false
  property string formStatusText: ""
  property bool formStatusError: false

  function openAddForm() {
    root.viewMode = "form"
    root.formMode = "add"
    root.formId = 0
    root.formUrl = ""
    root.formName = ""
    root.formDescription = ""
    root.formCollectionValue = root.defaultFormCollectionValue()
    root.formTags = []
    root.formNewTagText = ""
    root.formStatusText = ""
    root.formStatusError = false
  }

  function openEditForm(link) {
    if (!link) return
    root.viewMode = "form"
    root.formMode = "edit"
    root.formId = link.id
    root.formUrl = link.url || ""
    root.formName = link.name || ""
    root.formDescription = link.description || ""
    root.formCollectionValue = link.collectionId ? String(link.collectionId) : root.defaultFormCollectionValue()
    root.formTags = (link.tags || []).map(function(t) { return t.name })
    root.formNewTagText = ""
    root.formStatusText = ""
    root.formStatusError = false
  }

  function closeForm() {
    root.viewMode = "list"
  }

  function addNewTag() {
    var name = String(root.formNewTagText || "").trim()
    if (!name) return
    if (root.formTags.indexOf(name) === -1) root.formTags = root.formTags.concat([name])
    root.formNewTagText = ""
  }

  function removeFormTag(name) {
    root.formTags = root.formTags.filter(function(t) { return t !== name })
  }

  function submitForm() {
    if (formProc.running) return
    var url = String(root.formUrl || "").trim()
    if (root.formMode === "add" && !url) {
      root.formStatusError = true
      root.formStatusText = "URL is required"
      return
    }
    var col = root.formCollectionValue ? root.findCollection(parseInt(root.formCollectionValue)) : null
    if (root.formMode === "edit" && !col) {
      root.formStatusError = true
      root.formStatusText = "Collection list not loaded yet — try again in a moment"
      return
    }

    root.formSubmitting = true
    root.formStatusError = false
    root.formStatusText = ""

    var body = {
      name: root.formName || "",
      description: root.formDescription || "",
      tags: root.formTags.map(function(name) { return { name: name } })
    }
    if (col) body.collection = { id: col.id, ownerId: col.ownerId }

    if (root.formMode === "add") {
      body.url = url
      root.startRequest(formProc, "POST", "/links", "", body)
    } else {
      body.id = root.formId
      body.url = url
      root.startRequest(formProc, "PUT", "/links/" + root.formId, "", body)
    }
  }

  function handleFormResult(raw) {
    root.formSubmitting = false
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err) {
        root.formStatusError = true
        root.formStatusText = err
        return
      }
      root.formStatusError = false
      root.formStatusText = root.formMode === "add" ? "Link added" : "Link updated"
      root.refreshList()
      formSuccessTimer.restart()
    } catch (e) {
      root.formStatusError = true
      root.formStatusText = "Failed to read Linkwarden response"
    }
  }

  // ---------------------------------------------------------------- delete
  property int confirmDeleteId: 0
  property int deleteBusyId: 0

  function requestDelete(id) {
    root.confirmDeleteId = (root.confirmDeleteId === id) ? 0 : id
  }

  function cancelDelete() {
    root.confirmDeleteId = 0
  }

  function confirmDelete() {
    var id = root.confirmDeleteId
    if (!id || deleteProc.running) return
    root.deleteBusyId = id
    deleteProc.targetId = id
    root.startRequest(deleteProc, "DELETE", "/links/" + id)
  }

  function handleDeleteResult(raw, targetId) {
    root.deleteBusyId = 0
    root.confirmDeleteId = 0
    try {
      var data = JSON.parse(String(raw || ""))
      var err = root.parseApiError(data)
      if (err) { root.hasError = true; root.errorText = err; return }
    } catch (e) {
      root.hasError = true
      root.errorText = "Failed to delete link"
      return
    }
    root.items = root.items.filter(function(l) { return l.id !== targetId })
  }

  // ---------------------------------------------------------------- selection / keyboard
  property int selectedIndex: 0

  function moveSelection(delta) {
    var list = root.items
    if (list.length === 0) return
    var next = root.selectedIndex + delta
    if (next < 0) next = 0
    if (next > list.length - 1) next = list.length - 1
    root.selectedIndex = next
  }

  function selectedLink() {
    var list = root.items
    if (list.length === 0) return null
    return list[Math.max(0, Math.min(root.selectedIndex, list.length - 1))]
  }

  function activateSelection() {
    var link = root.selectedLink()
    if (link) root.openExternalUrl(link.url)
  }

  onItemsChanged: root.selectedIndex = 0

  // Only http(s) links stored in the user's own Linkwarden are ever handed to
  // xdg-open — never anything carrying the bearer token or a linkwarden.app
  // internal path.
  function openExternalUrl(url) {
    if (!/^https?:\/\//i.test(String(url || ""))) return
    browserProc.command = ["xdg-open", url]
    browserProc.running = true
  }

  // ---------------------------------------------------------------- settings
  property string draftBaseUrl: ""
  property int draftPageSize: 20
  property int draftDefaultCollectionId: 0
  property string settingsStatusText: ""

  function openSettingsView() {
    root.viewMode = "settings"
    root.draftBaseUrl = (settings && settings.baseUrl) || ""
    root.draftPageSize = root.pageSize
    root.draftDefaultCollectionId = root.defaultCollectionId
    root.settingsStatusText = ""
  }

  function closeSettingsView() {
    root.viewMode = "list"
  }

  function canPersistSettings() {
    return !!(root.bar && root.bar.shell && typeof root.bar.shell.updateEntryInline === "function")
  }

  function saveSettings() {
    var next = {
      baseUrl: String(root.draftBaseUrl || "").trim(),
      pageSize: Math.max(5, Math.min(100, Math.round(Number(root.draftPageSize) || 20))),
      defaultCollectionId: Math.max(0, Math.round(Number(root.draftDefaultCollectionId) || 0))
    }
    root.settings = next
    if (root.canPersistSettings()) {
      root.bar.shell.updateEntryInline(root.moduleName, next)
      root.settingsStatusText = "Saved"
    } else {
      root.settingsStatusText = "Saved for this session only (bar unavailable)"
    }
    root.refreshList()
  }

  // ---------------------------------------------------------------- lifecycle
  function bootstrap() {
    if (!root.apiKeyLoaded || !root.apiKey || !root.baseUrl) return
    if (!root.myUserId) root.fetchMe()
    root.fetchCollections()
    root.fetchTags()
    root.refreshList()
  }

  onApiKeyLoadedChanged: if (opened) root.bootstrap()

  onOpenedChanged: {
    if (opened) {
      root.viewMode = "list"
      root.bootstrap()
      Qt.callLater(function() { keyCatcher.forceActiveFocus() })
    }
  }

  Timer {
    id: searchDebounce
    interval: 400
    onTriggered: root.refreshList()
  }

  Timer {
    id: formSuccessTimer
    interval: 900
    onTriggered: root.closeForm()
  }

  // ---------------------------------------------------------------- io
  FileView {
    id: envFile
    path: Quickshell.env("HOME") + "/.config/omalink/.env"
    watchChanges: true
    printErrors: false
    onLoaded: {
      root.parseEnv(text())
      envPermProc.command = ["chmod", "600", envFile.path]
      envPermProc.running = true
    }
    onLoadFailed: {
      root.apiKeyLoaded = true
      root.hasError = true
      root.errorText = "~/.config/omalink/.env not found (see README)"
    }
  }

  Process { id: envPermProc }
  Process { id: browserProc }

  Process {
    id: meProc
    property string reqConfig: ""
    stdinEnabled: true
    onStarted: { meProc.write(meProc.reqConfig); meProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleMe(text) }
  }

  Process {
    id: collectionsProc
    property string reqConfig: ""
    stdinEnabled: true
    onStarted: { collectionsProc.write(collectionsProc.reqConfig); collectionsProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleCollections(text) }
  }

  Process {
    id: tagsProc
    property string reqConfig: ""
    stdinEnabled: true
    onStarted: { tagsProc.write(tagsProc.reqConfig); tagsProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleTags(text) }
  }

  Process {
    id: listProc
    property string reqConfig: ""
    property bool appendResults: false
    stdinEnabled: true
    onStarted: { listProc.write(listProc.reqConfig); listProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleListResult(text, listProc.appendResults) }
    onExited: function(code) {
      if (code !== 0) {
        root.listLoading = false
        root.hasError = true
        root.errorText = "Linkwarden unavailable at " + root.baseUrl
      }
    }
  }

  Process {
    id: pinProc
    property string reqConfig: ""
    property int targetId: 0
    property bool nextPinned: false
    stdinEnabled: true
    onStarted: { pinProc.write(pinProc.reqConfig); pinProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handlePinResult(text, pinProc.targetId, pinProc.nextPinned) }
    onExited: function(code) { if (code !== 0) root.pinBusyId = 0 }
  }

  Process {
    id: formProc
    property string reqConfig: ""
    stdinEnabled: true
    onStarted: { formProc.write(formProc.reqConfig); formProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleFormResult(text) }
    onExited: function(code) {
      if (code !== 0) {
        root.formSubmitting = false
        root.formStatusError = true
        if (!root.formStatusText) root.formStatusText = "Failed to connect to Linkwarden"
      }
    }
  }

  Process {
    id: deleteProc
    property string reqConfig: ""
    property int targetId: 0
    stdinEnabled: true
    onStarted: { deleteProc.write(deleteProc.reqConfig); deleteProc.stdinEnabled = false }
    stdout: StdioCollector { waitForEnd: true; onStreamFinished: root.handleDeleteResult(text, deleteProc.targetId) }
    onExited: function(code) { if (code !== 0) root.deleteBusyId = 0 }
  }

  // ---------------------------------------------------------------- components
  // Small favicon tile for a list row. Falls back to root.barIcon (the same
  // nf-fa-link glyph the bar chip uses) whenever the Image isn't showing a
  // real favicon — covers the loading state, a 204 (no favicon found), and
  // any fetch error, same convention as marcuspelo.omatv's Poster component.
  component FaviconIcon: Item {
    id: favicon
    property string source: ""
    implicitWidth: Style.space(16)
    implicitHeight: Style.space(16)

    Text {
      anchors.centerIn: parent
      visible: faviconImage.status !== Image.Ready
      text: root.barIcon
      textFormat: Text.PlainText
      color: root.dim
      font.family: root.fontFamily
      font.pixelSize: Style.font.caption
    }

    Image {
      id: faviconImage
      anchors.fill: parent
      source: favicon.source
      asynchronous: true
      cache: true
      smooth: true
      fillMode: Image.PreserveAspectFit
      sourceSize.width: 32
      sourceSize.height: 32
    }
  }

  // ---------------------------------------------------------------- bar chip
  function triggerPress(button) {
    if (opened) close(); else open()
  }

  WidgetButton {
    id: button
    anchors.fill: parent
    bar: root.bar
    text: root.hasError ? root.barIcon + " !" : root.barIcon
    fixedWidth: root.bar && root.bar.vertical ? -1 : Style.space(30)
    fixedHeight: root.bar && root.bar.vertical ? Style.space(26) : -1
    tooltipText: root.hasError ? root.errorText : "OmaLink — Linkwarden"
    onPressed: function(b) { root.triggerPress(b) }
  }

  implicitWidth: button.implicitWidth
  implicitHeight: button.implicitHeight

  // ---------------------------------------------------------------- panel
  KeyboardPanel {
    id: panel
    anchorItem: button
    owner: root
    bar: root.bar
    open: root.opened
    focusTarget: keyCatcher
    contentWidth: panel.fittedContentWidth(Style.space(480))
    contentHeight: panel.fittedContentHeight(contentColumn.implicitHeight, Style.space(680))

    PanelKeyCatcher {
      id: keyCatcher
      anchors.fill: parent
      blocked: searchField.activeFocus || urlField.activeFocus || nameField.activeFocus
        || descriptionField.activeFocus || newTagField.activeFocus || baseUrlField.activeFocus
      onCloseRequested: {
        if (root.confirmDeleteId) root.cancelDelete()
        else if (root.viewMode !== "list") root.viewMode = "list"
        else root.close()
      }
      onMoveRequested: function(dx, dy) {
        if (root.viewMode !== "list") return
        if (dy !== 0) root.moveSelection(dy)
        else if (dx < 0) root.switchTab("all")
        else if (dx > 0) root.switchTab("favorites")
      }
      onActivateRequested: if (root.viewMode === "list") root.activateSelection()
      onDeleteRequested: {
        if (root.viewMode !== "list") return
        var link = root.selectedLink()
        if (link) root.requestDelete(link.id)
      }
      onTextKey: function(t) {
        var k = String(t).toLowerCase()
        if (root.viewMode !== "list") return
        if (k === "/") {
          Qt.callLater(function() { searchField.forceActiveFocus(); searchField.selectAll() })
        } else if (k === "a") {
          root.openAddForm()
        } else if (k === "e") {
          var link = root.selectedLink()
          if (link) root.openEditForm(link)
        } else if (k === "f") {
          var l2 = root.selectedLink()
          if (l2) root.togglePin(l2)
        } else if (k === "r") {
          root.refreshList()
        }
      }
    }

    ColumnLayout {
      id: contentColumn
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top: parent.top
      spacing: Style.space(10)

      // ------------------------------------------------------------ header
      RowLayout {
        Layout.fillWidth: true
        spacing: 8

        Text {
          text: root.barIcon + "  " + (root.viewMode === "form" ? (root.formMode === "add" ? "Add link" : "Edit link") : root.viewMode === "settings" ? "Settings" : "OmaLink")
          color: root.fg
          font.family: root.fontFamily
          font.pixelSize: Style.font.title
          font.bold: true
          Layout.fillWidth: true
        }

        Button {
          visible: root.viewMode === "list"
          text: "+ Add"
          foreground: root.fg
          accent: Color.accent
          tooltipText: "Add a new link (a)"
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          onClicked: root.openAddForm()
        }

        Button {
          visible: root.viewMode === "list"
          text: root.listLoading ? "Refreshing…" : "Refresh"
          foreground: root.fg
          tooltipText: "Refresh now (r)"
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          active: root.listLoading
          onClicked: root.refreshList()
        }

        Button {
          visible: root.viewMode === "list"
          text: "⚙"
          foreground: root.fg
          tooltipText: "Settings"
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          onClicked: root.openSettingsView()
        }

        Button {
          visible: root.viewMode !== "list"
          text: "Back"
          foreground: root.fg
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          onClicked: root.viewMode === "settings" ? root.closeSettingsView() : root.closeForm()
        }
      }

      // ------------------------------------------------------------ settings view
      ColumnLayout {
        visible: root.viewMode === "settings"
        Layout.fillWidth: true
        spacing: Style.space(10)

        Text {
          text: "Linkwarden base URL"
          color: root.dim
          font.family: root.fontFamily
          font.pixelSize: Style.font.caption
        }

        TextField {
          id: baseUrlField
          Layout.fillWidth: true
          placeholderText: "https://link.example.com"
          foreground: root.fg
          text: root.draftBaseUrl
          onTextChanged: root.draftBaseUrl = text
        }

        NumberField {
          label: "Results per page"
          value: root.draftPageSize
          from: 5
          to: 100
          stepSize: 5
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          onModified: function(v) { root.draftPageSize = v }
        }

        NumberField {
          label: "Default collection ID (0 = Unorganized)"
          value: root.draftDefaultCollectionId
          from: 0
          to: 999999
          stepSize: 1
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          onModified: function(v) { root.draftDefaultCollectionId = v }
        }

        Text {
          visible: root.settingsStatusText !== ""
          Layout.fillWidth: true
          text: root.settingsStatusText
          color: root.dim
          font.family: root.fontFamily
          font.pixelSize: Style.font.caption
          wrapMode: Text.WordWrap
        }

        Button {
          text: "Save"
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          onClicked: root.saveSettings()
        }

        Text {
          Layout.fillWidth: true
          text: "The API token stays in ~/.config/omalink/.env and is not editable here."
          color: root.dim
          font.family: root.fontFamily
          font.pixelSize: Style.font.caption
          wrapMode: Text.WordWrap
        }

        Text {
          Layout.fillWidth: true
          text: "Tip: disabling and re-enabling the plugin resets this field. Add URL_BASE=... to ~/.config/omalink/.env to keep a fallback that survives that."
          color: root.dim
          font.family: root.fontFamily
          font.pixelSize: Style.font.caption
          wrapMode: Text.WordWrap
        }
      }

      // ------------------------------------------------------------ add/edit form view
      ColumnLayout {
        visible: root.viewMode === "form"
        Layout.fillWidth: true
        spacing: Style.space(10)

        TextField {
          id: urlField
          Layout.fillWidth: true
          placeholderText: "https://example.com"
          foreground: root.fg
          text: root.formUrl
          onTextChanged: root.formUrl = text
        }

        TextField {
          id: nameField
          Layout.fillWidth: true
          placeholderText: "Name (optional)"
          foreground: root.fg
          text: root.formName
          onTextChanged: root.formName = text
        }

        TextField {
          id: descriptionField
          Layout.fillWidth: true
          placeholderText: "Description (optional)"
          foreground: root.fg
          text: root.formDescription
          onTextChanged: root.formDescription = text
        }

        Dropdown {
          Layout.fillWidth: true
          label: "Collection"
          value: root.formCollectionValue
          options: root.collectionOptions
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          onChanged: function(v) { root.formCollectionValue = v }
        }

        MultiSelect {
          Layout.fillWidth: true
          label: "Tags"
          values: root.formTags
          options: root.tagOptions
          placeholderText: "Search existing tags…"
          noSelectionText: "No tags"
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          onChanged: function(v) { root.formTags = v }
        }

        RowLayout {
          Layout.fillWidth: true
          spacing: 6

          TextField {
            id: newTagField
            Layout.fillWidth: true
            placeholderText: "New tag name…"
            foreground: root.fg
            text: root.formNewTagText
            onTextChanged: root.formNewTagText = text
            Keys.onReturnPressed: root.addNewTag()
          }

          Button {
            text: "+ Tag"
            foreground: root.fg
            fontFamily: root.fontFamily
            fontSize: Style.font.caption
            horizontalPadding: Style.spacing.controlPaddingX
            verticalPadding: Style.spacing.controlPaddingY
            onClicked: root.addNewTag()
          }
        }

        Flow {
          Layout.fillWidth: true
          spacing: 4
          visible: root.formTags.length > 0

          Repeater {
            model: root.formTags
            delegate: Rectangle {
              required property string modelData
              radius: Style.cornerRadius
              color: Qt.rgba(Color.accent.r, Color.accent.g, Color.accent.b, 0.15)
              implicitWidth: tagRow.implicitWidth + 12
              implicitHeight: tagRow.implicitHeight + 6

              RowLayout {
                id: tagRow
                anchors.centerIn: parent
                spacing: 4
                Text {
                  text: modelData
                  textFormat: Text.PlainText
                  color: root.fg
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                }
                Text {
                  text: "✕"
                  color: root.dim
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                  MouseArea {
                    anchors.fill: parent
                    anchors.margins: -4
                    cursorShape: Qt.PointingHandCursor
                    onClicked: root.removeFormTag(modelData)
                  }
                }
              }
            }
          }
        }

        Text {
          visible: root.formStatusText !== ""
          Layout.fillWidth: true
          text: root.formStatusText
          textFormat: Text.PlainText
          color: root.formStatusError ? Color.urgent : "#8fd694"
          font.family: root.fontFamily
          font.pixelSize: Style.font.caption
          wrapMode: Text.WordWrap
        }

        Button {
          text: root.formSubmitting ? "Saving…" : (root.formMode === "add" ? "Add link" : "Save changes")
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          active: root.formSubmitting
          onClicked: root.submitForm()
        }
      }

      // ------------------------------------------------------------ list view
      Text {
        visible: root.hasError && root.viewMode === "list"
        text: root.errorText
        textFormat: Text.PlainText
        color: Color.urgent
        font.family: root.fontFamily
        font.pixelSize: Style.font.caption
        wrapMode: Text.WordWrap
        Layout.fillWidth: true
      }

      RowLayout {
        visible: root.viewMode === "list"
        Layout.fillWidth: true
        spacing: 6

        Button {
          text: "All"
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          selected: root.activeTab === "all"
          onClicked: root.switchTab("all")
        }

        Button {
          text: "★ Favorites"
          foreground: root.fg
          accent: Color.accent
          fontFamily: root.fontFamily
          fontSize: Style.font.caption
          horizontalPadding: Style.spacing.controlPaddingX
          verticalPadding: Style.spacing.controlPaddingY
          selected: root.activeTab === "favorites"
          onClicked: root.switchTab("favorites")
        }

        Item { Layout.fillWidth: true }
      }

      TextField {
        id: searchField
        visible: root.viewMode === "list"
        Layout.fillWidth: true
        placeholderText: "Search links… (/)"
        foreground: root.fg
        text: root.searchQuery
        onTextChanged: { root.searchQuery = text; searchDebounce.restart() }
        Keys.onEscapePressed: text = ""
      }

      Text {
        visible: root.viewMode === "list" && !root.listLoading && root.items.length === 0 && !root.hasError
        Layout.fillWidth: true
        Layout.topMargin: 8
        horizontalAlignment: Text.AlignHCenter
        text: root.activeTab === "favorites" ? "No favorites yet" : "No links found"
        color: root.dim
        font.family: root.fontFamily
        font.pixelSize: Style.font.caption
      }

      ListView {
        id: linkList
        visible: root.viewMode === "list" && root.items.length > 0
        Layout.fillWidth: true
        Layout.preferredHeight: Style.space(400)
        clip: true
        spacing: Style.space(8)
        model: root.items
        boundsBehavior: Flickable.StopAtBounds
        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }

        delegate: ColumnLayout {
          id: row
          required property var modelData
          required property int index
          width: linkList.width
          height: implicitHeight
          spacing: 3

          readonly property bool confirming: root.confirmDeleteId === modelData.id
          readonly property bool pinBusy: root.pinBusyId === modelData.id
          readonly property bool delBusy: root.deleteBusyId === modelData.id
          readonly property bool current: root.selectedIndex === index

          Rectangle {
            visible: row.current
            Layout.fillWidth: true
            Layout.preferredHeight: 2
            color: Color.accent
          }

          RowLayout {
            Layout.fillWidth: true
            spacing: 6

            FaviconIcon {
              Layout.alignment: Qt.AlignVCenter
              source: root.faviconUrl(row.modelData)
            }

            Text {
              Layout.fillWidth: true
              text: (row.modelData.name && row.modelData.name.length > 0) ? row.modelData.name : row.modelData.url
              textFormat: Text.PlainText
              color: root.fg
              font.family: root.fontFamily
              font.pixelSize: Style.font.caption
              font.bold: true
              elide: Text.ElideRight
            }

            Text {
              text: root.isPinned(row.modelData) ? "★" : "☆"
              color: root.isPinned(row.modelData) ? Color.accent : root.dim
              font.pixelSize: Style.font.body
              opacity: row.pinBusy ? 0.5 : 1.0
              MouseArea {
                anchors.fill: parent
                anchors.margins: -4
                cursorShape: Qt.PointingHandCursor
                enabled: !row.pinBusy
                onClicked: root.togglePin(row.modelData)
              }
            }
          }

          Text {
            Layout.fillWidth: true
            text: root.domainOf(row.modelData.url) + (row.modelData.createdAt ? "  ·  " + root.relativeTime(row.modelData.createdAt) : "")
            textFormat: Text.PlainText
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.caption
            elide: Text.ElideRight
            MouseArea {
              anchors.fill: parent
              cursorShape: Qt.PointingHandCursor
              onClicked: root.openExternalUrl(row.modelData.url)
            }
          }

          Text {
            visible: !!row.modelData.description
            Layout.fillWidth: true
            text: row.modelData.description || ""
            textFormat: Text.PlainText
            color: root.dim
            font.family: root.fontFamily
            font.pixelSize: Style.font.caption
            elide: Text.ElideRight
            maximumLineCount: 1
          }

          Flow {
            visible: (row.modelData.tags || []).length > 0
            Layout.fillWidth: true
            spacing: 3

            Repeater {
              model: row.modelData.tags || []
              delegate: Rectangle {
                required property var modelData
                radius: Style.cornerRadius
                color: Qt.rgba(root.fg.r, root.fg.g, root.fg.b, 0.08)
                implicitWidth: tagLabel.implicitWidth + 10
                implicitHeight: tagLabel.implicitHeight + 4
                Text {
                  id: tagLabel
                  anchors.centerIn: parent
                  text: modelData.name
                  textFormat: Text.PlainText
                  color: root.dim
                  font.family: root.fontFamily
                  font.pixelSize: Style.font.caption
                }
              }
            }
          }

          RowLayout {
            visible: !row.confirming
            Layout.fillWidth: true
            spacing: 4

            Button {
              text: "Open"
              foreground: root.fg
              fontFamily: root.fontFamily
              fontSize: Style.font.caption
              horizontalPadding: Style.spacing.controlPaddingX
              verticalPadding: Style.spacing.controlPaddingY
              onClicked: root.openExternalUrl(row.modelData.url)
            }

            Button {
              text: "Edit"
              foreground: root.fg
              fontFamily: root.fontFamily
              fontSize: Style.font.caption
              horizontalPadding: Style.spacing.controlPaddingX
              verticalPadding: Style.spacing.controlPaddingY
              onClicked: root.openEditForm(row.modelData)
            }

            Button {
              text: row.delBusy ? "…" : "Delete"
              foreground: Color.urgent
              fontFamily: root.fontFamily
              fontSize: Style.font.caption
              horizontalPadding: Style.spacing.controlPaddingX
              verticalPadding: Style.spacing.controlPaddingY
              onClicked: if (!row.delBusy) root.requestDelete(row.modelData.id)
            }

            Item { Layout.fillWidth: true }
          }

          RowLayout {
            visible: row.confirming
            Layout.fillWidth: true
            spacing: 4

            Text {
              text: "Delete this link?"
              color: root.dim
              font.family: root.fontFamily
              font.pixelSize: Style.font.caption
            }
            Button {
              text: "Delete"
              foreground: Color.urgent
              fontFamily: root.fontFamily
              fontSize: Style.font.caption
              horizontalPadding: Style.spacing.controlPaddingX
              verticalPadding: Style.spacing.controlPaddingY
              onClicked: root.confirmDelete()
            }
            Button {
              text: "Cancel"
              foreground: root.fg
              fontFamily: root.fontFamily
              fontSize: Style.font.caption
              horizontalPadding: Style.spacing.controlPaddingX
              verticalPadding: Style.spacing.controlPaddingY
              onClicked: root.cancelDelete()
            }
            Item { Layout.fillWidth: true }
          }
        }
      }

      Button {
        visible: root.viewMode === "list" && root.activeTab === "all" && !!root.nextCursor
        text: root.listLoading ? "Loading…" : "Load more"
        foreground: root.fg
        fontFamily: root.fontFamily
        fontSize: Style.font.caption
        horizontalPadding: Style.spacing.controlPaddingX
        verticalPadding: Style.spacing.controlPaddingY
        active: root.listLoading
        onClicked: root.loadMore()
      }

      Text {
        visible: root.viewMode === "list"
        Layout.fillWidth: true
        Layout.topMargin: 4
        text: "j/k move · enter open · f pin · e edit · x delete · / search · a add · h/l tabs · esc back"
        color: root.dim
        font.family: root.fontFamily
        font.pixelSize: Style.font.caption
        wrapMode: Text.WordWrap
      }
    }
  }
}