diff --git a/client/src/stores/useMessageRenderStore.ts b/client/src/stores/useMessageRenderStore.ts new file mode 100644 index 0000000..e68fbe7 --- /dev/null +++ b/client/src/stores/useMessageRenderStore.ts @@ -0,0 +1,78 @@ +import { defineStore } from 'pinia'; +import { ref, watch } from 'vue'; + +export const useMessageRenderStore = defineStore('messageRender', () => { + // State - load from localStorage or use defaults + const renderMarkdown = ref(() => { + const stored = localStorage.getItem('message-render-markdown'); + return stored ? JSON.parse(stored) : true; + }); + + const renderHTML = ref(() => { + const stored = localStorage.getItem('message-render-html'); + return stored ? JSON.parse(stored) : true; + }); + + const enableDynamicTables = ref(() => { + const stored = localStorage.getItem('message-render-tables'); + return stored ? JSON.parse(stored) : false; + }); + + const enableDrawing = ref(() => { + const stored = localStorage.getItem('message-render-drawing'); + return stored ? JSON.parse(stored) : false; + }); + + // Watch for changes and persist to localStorage + watch(renderMarkdown, (value) => { + localStorage.setItem('message-render-markdown', JSON.stringify(value)); + }); + + watch(renderHTML, (value) => { + localStorage.setItem('message-render-html', JSON.stringify(value)); + }); + + watch(enableDynamicTables, (value) => { + localStorage.setItem('message-render-tables', JSON.stringify(value)); + }); + + watch(enableDrawing, (value) => { + localStorage.setItem('message-render-drawing', JSON.stringify(value)); + }); + + // Actions + function toggleMarkdown() { + renderMarkdown.value = !renderMarkdown.value; + } + + function toggleHTML() { + renderHTML.value = !renderHTML.value; + } + + function toggleDynamicTables() { + enableDynamicTables.value = !enableDynamicTables.value; + } + + function toggleDrawing() { + enableDrawing.value = !enableDrawing.value; + } + + function resetAll() { + renderMarkdown.value = true; + renderHTML.value = true; + enableDynamicTables.value = false; + enableDrawing.value = false; + } + + return { + renderMarkdown, + renderHTML, + enableDynamicTables, + enableDrawing, + toggleMarkdown, + toggleHTML, + toggleDynamicTables, + toggleDrawing, + resetAll, + }; +});