diff --git a/src/ClipperCatalog.tsx b/src/ClipperCatalog.tsx index 01e36b9..54185e8 100644 --- a/src/ClipperCatalog.tsx +++ b/src/ClipperCatalog.tsx @@ -485,11 +485,19 @@ const ClipperCatalog: React.FC = ({ app, plugin }) => { > - + {(() => { + const abstractFile = app.vault.getAbstractFileByPath(article.path); + if (abstractFile instanceof TFile) { + return ( + + ); + } + return {article.title}; + })()} @@ -540,114 +548,6 @@ const ClipperCatalog: React.FC = ({ app, plugin }) => { )} - - ); }; diff --git a/src/main.tsx b/src/main.tsx index 0ce933f..b9fb09b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -48,8 +48,8 @@ export default class ObsidianClipperCatalog extends Plugin { this.addCommand({ - id: 'open-clipper-catalog', - name: 'Open Clipper Catalog', + id: 'show-all-clippings', + name: 'Show All Clippings', callback: () => { // Get active leaf or create new one in center const leaf = this.app.workspace.getLeaf('tab'); @@ -108,10 +108,6 @@ class ClipperCatalogSettingTab extends PluginSettingTab { cls: 'advanced-settings-name' }); - // Add some styling to the heading element - settingsHeader.style.padding = '10px 0'; - settingsHeader.style.fontWeight = 'bold'; - new Setting(containerEl) .setName('Property Name') .setDesc('Specify which frontmatter property contains your clipped URLs (e.g., "source", "url", "link").') @@ -121,14 +117,5 @@ class ClipperCatalogSettingTab extends PluginSettingTab { this.plugin.settings.sourcePropertyName = value; await this.plugin.saveSettings(); })); - - // Add CSS - containerEl.createEl('style', { - text: ` - .text-sm{ - font-size:.75rem; - } - ` - }); } } \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 0e342fd..3a6533d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -12,6 +12,11 @@ } } +/* Text utilities */ +.text-sm { + font-size: .75rem; +} + /* Scoped plugin styles */ .clipper-catalog-plugin { /* Add minimal reset only for our plugin elements */ @@ -107,3 +112,109 @@ } } } + +/* Container styles */ +.clipper-catalog-advanced { + background-color: var(--background-secondary); + border: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-search { + background-color: var(--background-secondary); + border: 1px solid var(--background-modifier-border); +} + +/* Button styles */ +.clipper-catalog-button { + background-color: var(--interactive-accent) !important; + color: var(--text-on-accent) !important; + transition: opacity 0.2s ease; +} + +.clipper-catalog-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.clipper-catalog-button:hover:not(:disabled) { + opacity: 0.9; +} + +/* Directory chip styles */ +.cc-bg-chip { + background-color: var(--background-modifier-form-field); +} + +.cc-bg-chip-hover { + background-color: var(--background-secondary-alt); +} + +.cc-text-close-icon { + color: var(--background-secondary); +} + +/* For dark theme support */ +.theme-dark .cc-text-close-icon { + color: var(--background-primary); +} + +/* Table styles */ +.clipper-catalog-header-row { + border-bottom: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-header-cell { + color: var(--text-normal); +} + +.clipper-catalog-header-cell:hover { + background-color: var(--background-modifier-hover); +} + +.clipper-catalog-row { + border-bottom: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-row:hover { + background-color: var(--background-modifier-hover); +} + +/* Text and icon styles */ +.clipper-catalog-input { + color: var(--text-normal); +} + +.clipper-catalog-icon, +.clipper-catalog-clear-btn, +.clipper-catalog-refresh, +.clipper-catalog-muted { + color: var(--text-muted); +} + +.clipper-catalog-title { + color: var(--text-normal); +} + +/* Tag styles */ +.clipper-catalog-tag { + background-color: var(--interactive-accent); + color: var(--text-on-accent); + transition: opacity 0.2s ease; +} + +.clipper-catalog-tag:hover { + opacity: 0.8; +} + +/* Link styles */ +.clipper-catalog-link { + color: var(--text-accent); + font-size: 0.75rem; + padding: 0.25rem 0; + transition: opacity 0.2s ease; +} + +.clipper-catalog-link:hover { + opacity: 0.8; + text-decoration: underline; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 3f25610..bc87155 100644 --- a/styles.css +++ b/styles.css @@ -383,6 +383,12 @@ } } +/* Text utilities */ + +.text-sm { + font-size: .75rem; +} + /* Scoped plugin styles */ .clipper-catalog-plugin { @@ -468,6 +474,120 @@ } } +/* Container styles */ + +.clipper-catalog-advanced { + background-color: var(--background-secondary); + border: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-search { + background-color: var(--background-secondary); + border: 1px solid var(--background-modifier-border); +} + +/* Button styles */ + +.clipper-catalog-button { + background-color: var(--interactive-accent) !important; + color: var(--text-on-accent) !important; + transition: opacity 0.2s ease; +} + +.clipper-catalog-button:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +.clipper-catalog-button:hover:not(:disabled) { + opacity: 0.9; +} + +/* Directory chip styles */ + +.cc-bg-chip { + background-color: var(--background-modifier-form-field); +} + +.cc-bg-chip-hover { + background-color: var(--background-secondary-alt); +} + +.cc-text-close-icon { + color: var(--background-secondary); +} + +/* For dark theme support */ + +.theme-dark .cc-text-close-icon { + color: var(--background-primary); +} + +/* Table styles */ + +.clipper-catalog-header-row { + border-bottom: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-header-cell { + color: var(--text-normal); +} + +.clipper-catalog-header-cell:hover { + background-color: var(--background-modifier-hover); +} + +.clipper-catalog-row { + border-bottom: 1px solid var(--background-modifier-border); +} + +.clipper-catalog-row:hover { + background-color: var(--background-modifier-hover); +} + +/* Text and icon styles */ + +.clipper-catalog-input { + color: var(--text-normal); +} + +.clipper-catalog-icon, +.clipper-catalog-clear-btn, +.clipper-catalog-refresh, +.clipper-catalog-muted { + color: var(--text-muted); +} + +.clipper-catalog-title { + color: var(--text-normal); +} + +/* Tag styles */ + +.clipper-catalog-tag { + background-color: var(--interactive-accent); + color: var(--text-on-accent); + transition: opacity 0.2s ease; +} + +.clipper-catalog-tag:hover { + opacity: 0.8; +} + +/* Link styles */ + +.clipper-catalog-link { + color: var(--text-accent); + font-size: 0.75rem; + padding: 0.25rem 0; + transition: opacity 0.2s ease; +} + +.clipper-catalog-link:hover { + opacity: 0.8; + text-decoration: underline; +} + .hover\:cc-bg-blue-200:hover { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1)); @@ -555,4 +675,4 @@ .dark\:hover\:cc-text-gray-300:hover:is(.cc-dark *) { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); -} +} \ No newline at end of file