quasar-ui-danx 0.4.95 → 0.5.0

package/src/components/Utility/Code/MarkdownContent.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="dx-markdown-content">
+    <template v-for="(token, index) in tokens" :key="index">
+      <!-- Headings -->
+      <component
+        v-if="token.type === 'heading'"
+        :is="'h' + token.level"
+        v-html="parseInlineContent(token.content)"
+      />
+
+      <!-- Code blocks with syntax highlighting -->
+      <div
+        v-else-if="token.type === 'code_block'"
+        class="dx-markdown-code-block"
+      >
+        <!-- Language toggle badge (only for json/yaml) -->
+        <LanguageBadge
+          v-if="isToggleableLanguage(token.language)"
+          :format="getCodeBlockFormat(index, token.language)"
+          :available-formats="['json', 'yaml']"
+          :toggleable="true"
+          @change="(fmt) => setCodeBlockFormat(index, fmt)"
+        />
+        <LanguageBadge
+          v-else-if="token.language"
+          :format="token.language"
+          :available-formats="[]"
+          :toggleable="false"
+        />
+        <pre><code
+          :class="'language-' + getCodeBlockFormat(index, token.language)"
+          v-html="highlightCodeBlock(index, token.content, token.language)"
+        ></code></pre>
+      </div>
+
+      <!-- Blockquotes (recursive) -->
+      <blockquote
+        v-else-if="token.type === 'blockquote'"
+        v-html="renderBlockquote(token.content)"
+      />
+
+      <!-- Unordered lists -->
+      <ul v-else-if="token.type === 'ul'">
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+        >
+          <span v-html="parseInlineContent(item.content)" />
+          <template v-if="item.children && item.children.length > 0">
+            <template v-for="(child, childIndex) in item.children" :key="'child-' + childIndex">
+              <!-- Nested unordered list -->
+              <ul v-if="child.type === 'ul'">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ul>
+              <!-- Nested ordered list -->
+              <ol v-else-if="child.type === 'ol'" :start="child.start">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ol>
+            </template>
+          </template>
+        </li>
+      </ul>
+
+      <!-- Ordered lists -->
+      <ol
+        v-else-if="token.type === 'ol'"
+        :start="token.start"
+      >
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+        >
+          <span v-html="parseInlineContent(item.content)" />
+          <template v-if="item.children && item.children.length > 0">
+            <template v-for="(child, childIndex) in item.children" :key="'child-' + childIndex">
+              <!-- Nested unordered list -->
+              <ul v-if="child.type === 'ul'">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ul>
+              <!-- Nested ordered list -->
+              <ol v-else-if="child.type === 'ol'" :start="child.start">
+                <li
+                  v-for="(nestedItem, nestedIndex) in child.items"
+                  :key="nestedIndex"
+                  v-html="renderListItem(nestedItem)"
+                />
+              </ol>
+            </template>
+          </template>
+        </li>
+      </ol>
+
+      <!-- Task lists -->
+      <ul
+        v-else-if="token.type === 'task_list'"
+        class="task-list"
+      >
+        <li
+          v-for="(item, itemIndex) in token.items"
+          :key="itemIndex"
+          class="task-list-item"
+        >
+          <input
+            type="checkbox"
+            :checked="item.checked"
+            disabled
+          />
+          <span v-html="parseInlineContent(item.content)" />
+        </li>
+      </ul>
+
+      <!-- Tables -->
+      <table v-else-if="token.type === 'table'">
+        <thead>
+          <tr>
+            <th
+              v-for="(header, hIndex) in token.headers"
+              :key="hIndex"
+              :style="token.alignments[hIndex] ? { textAlign: token.alignments[hIndex] } : {}"
+              v-html="parseInlineContent(header)"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rIndex) in token.rows" :key="rIndex">
+            <td
+              v-for="(cell, cIndex) in row"
+              :key="cIndex"
+              :style="token.alignments[cIndex] ? { textAlign: token.alignments[cIndex] } : {}"
+              v-html="parseInlineContent(cell)"
+            />
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Definition lists -->
+      <dl v-else-if="token.type === 'dl'">
+        <template v-for="(item, itemIndex) in token.items" :key="itemIndex">
+          <dt v-html="parseInlineContent(item.term)" />
+          <dd
+            v-for="(def, defIndex) in item.definitions"
+            :key="'def-' + defIndex"
+            v-html="parseInlineContent(def)"
+          />
+        </template>
+      </dl>
+
+      <!-- Horizontal rules -->
+      <hr v-else-if="token.type === 'hr'" />
+
+      <!-- Paragraphs -->
+      <p
+        v-else-if="token.type === 'paragraph'"
+        v-html="parseInlineContent(token.content).replace(/\n/g, '<br />')"
+      />
+    </template>
+
+    <!-- Footnotes section -->
+    <section v-if="hasFootnotes" class="footnotes">
+      <hr />
+      <ol class="footnote-list">
+        <li
+          v-for="fn in sortedFootnotes"
+          :key="fn.id"
+          :id="'fn-' + fn.id"
+          class="footnote-item"
+        >
+          <span v-html="parseInlineContent(fn.content)" />
+          <a :href="'#fnref-' + fn.id" class="footnote-backref">&#8617;</a>
+        </li>
+      </ol>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, reactive } from "vue";
+import { parse as parseYAML, stringify as stringifyYAML } from "yaml";
+import { tokenizeBlocks, parseInline, renderMarkdown, getFootnotes, resetParserState } from "../../../helpers/formats/markdown";
+import type { BlockToken, ListItem } from "../../../helpers/formats/markdown";
+import { highlightJSON, highlightYAML } from "../../../helpers/formats/highlightSyntax";
+import LanguageBadge from "./LanguageBadge.vue";
+
+export interface MarkdownContentProps {
+  content: string;
+  defaultCodeFormat?: "json" | "yaml";
+}
+
+const props = withDefaults(defineProps<MarkdownContentProps>(), {
+  content: ""
+});
+
+// Track format overrides for each code block (for toggling json<->yaml)
+const codeBlockFormats = reactive<Record<number, string>>({});
+// Cache converted content for each code block
+const convertedContent = reactive<Record<number, string>>({});
+
+// Tokenize the markdown content
+const tokens = computed<BlockToken[]>(() => {
+  if (!props.content) return [];
+  // Reset parser state before tokenizing to clear refs from previous content
+  // This ensures link refs and footnotes are freshly parsed for this content
+  resetParserState();
+  return tokenizeBlocks(props.content);
+});
+
+// Computed properties for footnotes
+// IMPORTANT: Access tokens.value to ensure tokenizeBlocks runs first,
+// which populates currentFootnotes and currentLinkRefs
+const footnotes = computed(() => {
+  // Force dependency on tokens - this ensures tokenizeBlocks has run
+  // and populated the module-level currentFootnotes before we read it
+  tokens.value;
+  return getFootnotes();
+});
+
+const hasFootnotes = computed(() => Object.keys(footnotes.value).length > 0);
+
+const sortedFootnotes = computed(() => {
+  return Object.entries(footnotes.value)
+    .sort((a, b) => a[1].index - b[1].index)
+    .map(([id, fn]) => ({ id, content: fn.content, index: fn.index }));
+});
+
+// Check if a language is toggleable (json or yaml)
+function isToggleableLanguage(language: string): boolean {
+  if (!language) return false;
+  const lang = language.toLowerCase();
+  return lang === "json" || lang === "yaml";
+}
+
+// Get the current format for a code block (respecting user toggle, then default override, then original)
+function getCodeBlockFormat(index: number, originalLanguage: string): string {
+  // If user has toggled this block, use their choice
+  if (codeBlockFormats[index]) {
+    return codeBlockFormats[index];
+  }
+
+  // If a default is set and this is a toggleable language, use the default
+  const lang = originalLanguage?.toLowerCase();
+  if (props.defaultCodeFormat && (lang === "json" || lang === "yaml")) {
+    return props.defaultCodeFormat;
+  }
+
+  // Otherwise use the original language
+  return lang || "text";
+}
+
+// Get converted content for a code block (handles initial conversion for defaultCodeFormat)
+function getConvertedContent(index: number, originalContent: string, originalLang: string): string {
+  const format = getCodeBlockFormat(index, originalLang);
+
+  // If format matches original, no conversion needed
+  if (format === originalLang || !isToggleableLanguage(originalLang)) {
+    return originalContent;
+  }
+
+  // Convert from original to target format
+  try {
+    let parsed: unknown;
+
+    if (originalLang === "json") {
+      parsed = JSON.parse(originalContent);
+    } else if (originalLang === "yaml") {
+      parsed = parseYAML(originalContent);
+    }
+
+    if (parsed !== undefined) {
+      if (format === "json") {
+        return JSON.stringify(parsed, null, 2);
+      } else if (format === "yaml") {
+        return stringifyYAML(parsed as object);
+      }
+    }
+  } catch {
+    // Conversion failed, return original
+  }
+
+  return originalContent;
+}
+
+// Set format for a code block (converts content to the new format)
+function setCodeBlockFormat(index: number, newFormat: string) {
+  const token = tokens.value[index];
+  if (token?.type !== "code_block") return;
+
+  const originalLang = token.language?.toLowerCase() || "json";
+  const current = getCodeBlockFormat(index, originalLang);
+
+  // No change needed if already in target format
+  if (current === newFormat) return;
+
+  // Convert the content
+  try {
+    // Use the currently displayed content (which may already be converted due to defaultCodeFormat)
+    const sourceContent = convertedContent[index] || getConvertedContent(index, token.content, originalLang);
+    let parsed: unknown;
+
+    // Parse from current format
+    if (current === "json") {
+      parsed = JSON.parse(sourceContent);
+    } else {
+      parsed = parseYAML(sourceContent);
+    }
+
+    // Convert to new format
+    if (newFormat === "json") {
+      convertedContent[index] = JSON.stringify(parsed, null, 2);
+    } else {
+      convertedContent[index] = stringifyYAML(parsed as object);
+    }
+
+    codeBlockFormats[index] = newFormat;
+  } catch {
+    // If conversion fails, just set the format without converting
+    codeBlockFormats[index] = newFormat;
+  }
+}
+
+// Highlight code block content based on format
+function highlightCodeBlock(index: number, originalContent: string, originalLanguage: string): string {
+  const format = getCodeBlockFormat(index, originalLanguage);
+  const originalLang = originalLanguage?.toLowerCase() || "text";
+
+  // Get the content (converted if needed, or from cache if user toggled)
+  const content = convertedContent[index] || getConvertedContent(index, originalContent, originalLang);
+
+  // Apply syntax highlighting
+  switch (format) {
+    case "json":
+      return highlightJSON(content);
+    case "yaml":
+      return highlightYAML(content);
+    default:
+      // For other languages, just escape HTML
+      return content
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
+  }
+}
+
+// Parse inline markdown (bold, italic, links, etc.)
+function parseInlineContent(text: string): string {
+  return parseInline(text, true);
+}
+
+// Render a list item with potential nested children
+function renderListItem(item: ListItem): string {
+  let html = parseInline(item.content, true);
+  if (item.children && item.children.length > 0) {
+    for (const child of item.children) {
+      if (child.type === "ul") {
+        const items = child.items.map((i) => `<li>${renderListItem(i)}</li>`).join("");
+        html += `<ul>${items}</ul>`;
+      } else if (child.type === "ol") {
+        const items = child.items.map((i) => `<li>${renderListItem(i)}</li>`).join("");
+        const startAttr = child.start !== 1 ? ` start="${child.start}"` : "";
+        html += `<ol${startAttr}>${items}</ol>`;
+      }
+    }
+  }
+  return html;
+}
+
+// Render blockquote content (can contain nested markdown)
+// Use preserveState to keep link refs and footnotes from parent document
+function renderBlockquote(content: string): string {
+  return renderMarkdown(content, { preserveState: true });
+}
+</script>
+
+<style lang="scss">
+.dx-markdown-code-block {
+  position: relative;
+  margin: 1em 0;
+
+  pre {
+    margin: 0;
+    background: rgba(0, 0, 0, 0.3);
+    padding: 1em;
+    border-radius: 6px;
+    overflow-x: auto;
+
+    code {
+      background: transparent;
+      padding: 0;
+      font-size: 0.875em;
+      font-family: 'Fira Code', 'Monaco', monospace;
+    }
+  }
+}
+</style>

package/src/components/Utility/Code/index.ts

@@ -0,0 +1,5 @@
+export { default as CodeViewer } from "./CodeViewer.vue";
+export { default as CodeViewerCollapsed } from "./CodeViewerCollapsed.vue";
+export { default as CodeViewerFooter } from "./CodeViewerFooter.vue";
+export { default as LanguageBadge } from "./LanguageBadge.vue";
+export { default as MarkdownContent } from "./MarkdownContent.vue";

package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue

@@ -10,58 +10,105 @@
         <!-- Header with filename and navigation -->
         <CarouselHeader
           v-if="currentFile"
-          :filename="currentFile.filename || currentFile.name"
+          :filename="filename"
           :show-back-button="hasParent"
+          :show-metadata-button="hasMetadata"
+          :metadata-count="metadataKeyCount"
           :show-transcodes-button="!!(currentFile.transcodes && currentFile.transcodes.length > 0)"
           :transcodes-count="currentFile.transcodes?.length || 0"
           @back="navigateToParent"
+          @metadata="onMetadataClick"
           @transcodes="showTranscodeNav = true"
         />
 
-        <!-- Carousel -->
-        <div class="flex-grow relative">
-          <div class="absolute inset-0">
+        <!-- Content Area with optional split panel -->
+        <div class="flex-grow flex relative min-h-0">
+          <!-- Carousel Section -->
+          <div class="flex-grow relative">
+            <div class="absolute inset-0">
+              <div
+                v-for="slide in visibleSlides"
+                :key="slide.file.id"
+                :class="[
+                  'absolute inset-0 flex items-center justify-center transition-opacity duration-300',
+                  slide.isActive ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
+                ]"
+              >
+                <FileRenderer
+                  :file="slide.file"
+                  :autoplay="slide.isActive"
+                />
+              </div>
+            </div>
+
+            <!-- Navigation Arrows -->
             <div
-              v-for="slide in visibleSlides"
-              :key="slide.file.id"
-              :class="[
-                'absolute inset-0 flex items-center justify-center transition-opacity duration-300',
-                slide.isActive ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
-              ]"
+              v-if="canNavigatePrevious"
+              class="absolute left-4 top-1/2 -translate-y-1/2 z-20"
             >
-              <FileRenderer
-                :file="slide.file"
-                :autoplay="slide.isActive"
-              />
+              <QBtn
+                round
+                size="lg"
+                class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+                @click="navigatePrevious"
+              >
+                <ChevronLeftIcon class="w-8" />
+              </QBtn>
             </div>
-          </div>
-
-          <!-- Navigation Arrows -->
-          <div
-            v-if="canNavigatePrevious"
-            class="absolute left-4 top-1/2 -translate-y-1/2 z-20"
-          >
-            <QBtn
-              round
-              size="lg"
-              class="bg-slate-800 text-white opacity-70 hover:opacity-100"
-              @click="navigatePrevious"
+            <div
+              v-if="canNavigateNext"
+              class="absolute right-4 top-1/2 -translate-y-1/2 z-20"
             >
-              <ChevronLeftIcon class="w-8" />
-            </QBtn>
+              <QBtn
+                round
+                size="lg"
+                class="bg-slate-800 text-white opacity-70 hover:opacity-100"
+                @click="navigateNext"
+              >
+                <ChevronRightIcon class="w-8" />
+              </QBtn>
+            </div>
           </div>
+
+          <!-- Split Metadata Panel -->
           <div
-            v-if="canNavigateNext"
-            class="absolute right-4 top-1/2 -translate-y-1/2 z-20"
+            v-if="metadataSplitMode && showMetadataDialog && hasMetadata"
+            class="w-[40%] max-w-[600px] min-w-[300px] bg-slate-900 border-l border-slate-700 flex flex-col"
           >
-            <QBtn
-              round
-              size="lg"
-              class="bg-slate-800 text-white opacity-70 hover:opacity-100"
-              @click="navigateNext"
-            >
-              <ChevronRightIcon class="w-8" />
-            </QBtn>
+            <div class="px-4 py-3 bg-slate-800 border-b border-slate-700 flex items-center justify-between flex-shrink-0">
+              <h3 class="text-slate-200 font-medium">Metadata</h3>
+              <div class="flex items-center gap-1">
+                <QBtn
+                  flat
+                  dense
+                  round
+                  size="sm"
+                  class="text-slate-400 hover:text-white hover:bg-slate-700"
+                  @click="undockToModal"
+                >
+                  <UndockIcon class="w-4 h-4" />
+                  <QTooltip>Undock to modal</QTooltip>
+                </QBtn>
+                <QBtn
+                  flat
+                  dense
+                  round
+                  size="sm"
+                  class="text-slate-400 hover:text-white hover:bg-slate-700"
+                  @click="showMetadataDialog = false"
+                >
+                  <CloseIcon class="w-4 h-4" />
+                  <QTooltip>Close</QTooltip>
+                </QBtn>
+              </div>
+            </div>
+            <div class="flex-1 min-h-0 p-4">
+              <CodeViewer
+                :model-value="filteredMetadata"
+                :readonly="true"
+                format="yaml"
+              />
+            </div>
           </div>
         </div>
 
@@ -88,19 +135,35 @@
         :transcodes="currentFile.transcodes"
         @select="onSelectTranscode"
       />
+
+      <!-- Metadata Dialog (only in modal mode) -->
+      <FileMetadataDialog
+        v-if="showMetadataDialog && !metadataSplitMode"
+        :filename="filename"
+        :mime-type="mimeType"
+        :metadata="filteredMetadata"
+        :show-dock-button="true"
+        @close="showMetadataDialog = false"
+        @dock="dockToSplit"
+      />
     </div>
   </QDialog>
 </template>
 
 <script setup lang="ts">
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/outline";
+import { FaSolidWindowMaximize as UndockIcon } from "danx-icon";
 import { ref } from "vue";
 import { useFileNavigation } from "../../../composables/useFileNavigation";
+import { useFilePreview } from "../../../composables/useFilePreview";
 import { useKeyboardNavigation } from "../../../composables/useKeyboardNavigation";
 import { useVirtualCarousel } from "../../../composables/useVirtualCarousel";
+import { getItem, setItem } from "../../../helpers";
 import { XIcon as CloseIcon } from "../../../svg";
 import { UploadedFile } from "../../../types";
+import { CodeViewer } from "../Code";
 import CarouselHeader from "../Files/CarouselHeader.vue";
+import FileMetadataDialog from "../Files/FileMetadataDialog.vue";
 import FileRenderer from "../Files/FileRenderer.vue";
 import ThumbnailStrip from "../Files/ThumbnailStrip.vue";
 import TranscodeNavigator from "../Files/TranscodeNavigator.vue";
@@ -155,4 +218,37 @@ function onSelectTranscode(transcode: UploadedFile, index: number) {
 		diveInto(transcode, currentFile.value.transcodes);
 	}
 }
+
+// Metadata navigation
+const showMetadataDialog = ref(false);
+const METADATA_MODE_KEY = "danx-file-preview-metadata-mode";
+const metadataSplitMode = ref(getItem(METADATA_MODE_KEY, false));
+
+function onMetadataClick() {
+	// Toggle metadata visibility - mode determines whether it shows as split or modal
+	showMetadataDialog.value = !showMetadataDialog.value;
+}
+
+function dockToSplit() {
+	// Switch from modal to split view
+	metadataSplitMode.value = true;
+	setItem(METADATA_MODE_KEY, true);
+	// Keep showMetadataDialog true so it shows in split mode
+}
+
+function undockToModal() {
+	// Switch from split to modal view
+	metadataSplitMode.value = false;
+	setItem(METADATA_MODE_KEY, false);
+	// Keep showMetadataDialog true so it shows as modal
+}
+
+// Use file preview composable for metadata
+const {
+	filename,
+	mimeType,
+	hasMetadata,
+	metadataKeyCount,
+	filteredMetadata
+} = useFilePreview({ file: currentFile });
 </script>

package/src/components/Utility/Files/CarouselHeader.vue

@@ -22,6 +22,24 @@
         {{ filename }}
       </div>
 
+      <!-- Metadata Button -->
+      <QBtn
+        v-if="showMetadataButton"
+        flat
+        dense
+        class="bg-purple-700 text-purple-200 hover:bg-purple-600"
+        @click="$emit('metadata')"
+      >
+        <div class="flex items-center flex-nowrap gap-1">
+          <MetaIcon class="w-4" />
+          <QBadge
+            class="bg-purple-900 text-purple-200"
+            :label="metadataCount"
+          />
+          <span class="text-sm ml-1">Metadata</span>
+        </div>
+      </QBtn>
+
       <!-- Transcodes Button -->
       <QBtn
         v-if="showTranscodesButton"
@@ -57,16 +75,21 @@
 
 <script setup lang="ts">
 import { ArrowLeftIcon, FilmIcon } from "@heroicons/vue/outline";
+import { FaSolidBarcode as MetaIcon } from "danx-icon";
 import { XIcon as CloseIcon } from "../../../svg";
 
 withDefaults(defineProps<{
 	filename: string;
 	showBackButton?: boolean;
+	showMetadataButton?: boolean;
+	metadataCount?: number;
 	showTranscodesButton?: boolean;
 	transcodesCount?: number;
 	showCloseButton?: boolean;
 }>(), {
 	showBackButton: false,
+	showMetadataButton: false,
+	metadataCount: 0,
 	showTranscodesButton: false,
 	transcodesCount: 0,
 	showCloseButton: false
@@ -74,6 +97,7 @@ withDefaults(defineProps<{
 
 defineEmits<{
 	'back': [];
+	'metadata': [];
 	'transcodes': [];
 	'close': [];
 }>();