obsidian-plugin/bfloydd_streams
1
0
Fork 0
mirror of https://github.com/bfloydd/streams.git synced 2026-07-22 05:49:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix up Create file screen

Browse source
This commit is contained in:
Ben Floyd 2025-04-28 11:37:27 -06:00
parent 372929d66b
commit ea200c12fa
3 changed files with 201 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
src/Widgets/CreateFileView.ts
View file

@ -29,7 +29,9 @@ export class CreateFileView extends ItemView {
}
getDisplayText(): string {
return `Create: ${this.filePath}`;
// Extract just the filename without extension for the tab title
const fileName = this.filePath.split('/').pop()?.replace('.md', '') || '';
return fileName;
}
getState(): any {
@ -45,15 +47,78 @@ export class CreateFileView extends ItemView {
async setState(state: any, result?: any): Promise<void> {
if (state) {
this.log.debug(`Setting state with: ${JSON.stringify(state)}`);
const oldFilePath = this.filePath;
const oldDate = this.date ? new Date(this.date.getTime()) : null;
this.filePath = state.filePath || this.filePath;
this.stream = state.stream || this.stream;
let dateChanged = false;
if (state.date) {
// Handle date which could be a string or Date object
this.date = typeof state.date === 'string'
? new Date(state.date)
: state.date;
try {
if (typeof state.date === 'string') {
this.date = new Date(state.date);
this.log.debug(`Parsed date from string: ${this.date.toISOString()}`);
} else if (state.date instanceof Date) {
this.date = state.date;
this.log.debug(`Used date object directly: ${this.date.toISOString()}`);
} else {
// Try to extract date from filepath if all else fails
const filePathMatch = this.filePath.match(/(\d{4}-\d{2}-\d{2})\.md$/);
if (filePathMatch && filePathMatch[1]) {
const [year, month, day] = filePathMatch[1].split('-').map(n => parseInt(n, 10));
this.date = new Date(year, month - 1, day);
this.log.debug(`Extracted date from filepath: ${this.date.toISOString()}`);
} else {
this.date = new Date(); // Last resort fallback
this.log.debug(`Using current date as fallback: ${this.date.toISOString()}`);
}
}
// Validate the date
if (isNaN(this.date.getTime())) {
this.log.error(`Invalid date after parsing: ${state.date}`);
// Try to extract from filename as fallback
this.extractDateFromFilename();
}
// Check if date has changed
if (oldDate && this.date) {
dateChanged = oldDate.toDateString() !== this.date.toDateString();
}
} catch (error) {
this.log.error(`Error setting date: ${error}`);
// Try to extract from filename as fallback
this.extractDateFromFilename();
}
} else {
// Try to extract from filename if no date provided
this.extractDateFromFilename();
}
// If date or file path changed, refresh the view
if (dateChanged || oldFilePath !== this.filePath) {
this.log.debug("Date or file path changed, refreshing view");
await this.refreshView();
}
}
}
private extractDateFromFilename(): void {
// Extract date from filename
const fileNameMatch = this.filePath.match(/(\d{4}-\d{2}-\d{2})\.md$/);
if (fileNameMatch && fileNameMatch[1]) {
const [year, month, day] = fileNameMatch[1].split('-').map(n => parseInt(n, 10));
this.date = new Date(year, month - 1, day);
this.log.debug(`Extracted date from filename fallback: ${this.date.toISOString()}`);
} else {
this.date = new Date();
this.log.debug(`Using today as final fallback: ${this.date.toISOString()}`);
}
}
@ -61,39 +126,56 @@ export class CreateFileView extends ItemView {
this.contentEl.empty();
this.contentEl.addClass('streams-create-file-container');
// Always ensure we have the correct date based on the file path first
const fileNameMatch = this.filePath.match(/(\d{4}-\d{2}-\d{2})\.md$/);
if (fileNameMatch && fileNameMatch[1]) {
const [year, month, day] = fileNameMatch[1].split('-').map(n => parseInt(n, 10));
const fileDate = new Date(year, month - 1, day);
if (!isNaN(fileDate.getTime())) {
if (!this.date || this.date.toDateString() !== fileDate.toDateString()) {
this.log.debug(`Updating date from file path: ${fileDate.toISOString()}`);
this.date = fileDate;
}
}
}
const container = this.contentEl.createDiv('streams-create-file-content');
// Stream name
const streamName = container.createDiv('streams-create-file-stream');
// Create note icon at the top
const iconContainer = container.createDiv('streams-create-file-icon');
setIcon(iconContainer, 'file-plus');
// Stream name with icon
const streamContainer = container.createDiv('streams-create-file-stream-container');
const streamIcon = streamContainer.createSpan('streams-create-file-stream-icon');
setIcon(streamIcon, this.stream.icon || 'book');
const streamName = streamContainer.createSpan('streams-create-file-stream');
streamName.setText(this.stream.name);
// Date
// Date with more prominence - no calendar icon
const dateEl = container.createDiv('streams-create-file-date');
dateEl.setText(this.formatDate(this.date));
// File path
const pathEl = container.createDiv('streams-create-file-path');
pathEl.setText(this.filePath);
// Log the date to help with debugging
this.log.debug(`Date for formatting: ${this.date.toISOString()}`);
// Make sure we have a valid date object
if (!(this.date instanceof Date) || isNaN(this.date.getTime())) {
this.log.error("Invalid date object, creating a new one");
this.extractDateFromFilename();
}
const formattedDate = this.formatDate(this.date);
this.log.debug(`Formatted date for display: ${formattedDate}`);
dateEl.setText(formattedDate);
// Create button
const buttonContainer = container.createDiv('streams-create-file-button-container');
const createButton = buttonContainer.createEl('button', {
cls: 'mod-cta streams-create-file-button'
});
// Add text and icon to button
const buttonContent = createButton.createSpan({
cls: 'mod-cta streams-create-file-button',
text: 'Create file'
});
buttonContent.addClass('streams-create-file-button-text');
// Add file-plus icon if available
try {
setIcon(createButton, 'file-plus');
} catch (e) {
// Fallback if icon not available
this.log.debug('Could not set icon:', e);
}
createButton.addEventListener('click', async () => {
await this.createAndOpenFile();
@ -101,12 +183,19 @@ export class CreateFileView extends ItemView {
}
private formatDate(date: Date): string {
return date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
this.log.debug(`Formatting date: ${date.toISOString()}`);
try {
return date.toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
} catch (error) {
this.log.error(`Error formatting date: ${error}`);
return "Invalid Date";
}
}
private async createAndOpenFile(): Promise<void> {
@ -140,4 +229,10 @@ export class CreateFileView extends ItemView {
async onClose(): Promise<void> {
this.contentEl.empty();
}
private async refreshView(): Promise<void> {
// Force a refresh of the view content
this.contentEl.empty();
await this.onOpen();
}
}

2
src/utils/streamUtils.ts
View file

@ -137,7 +137,7 @@ export async function openStreamDate(app: App, stream: Stream, date: Date = new
date: date.toISOString()
}
});
log.debug(`Set view state with date: ${date.toISOString()}`);
log.debug(`Set view state with date: ${date.toISOString()} for file: ${filePath}`);
app.workspace.setActiveLeaf(leaf, { focus: true });
log.debug(`==== OPEN STREAM DATE END (create view) ====`);

93
styles.css
View file

@ -206,6 +206,7 @@ If your plugin does not need CSS, delete this file.
align-items: center;
height: 100%;
padding: 20px;
background-color: var(--background-primary);
}
.streams-create-file-content {
@ -214,34 +215,67 @@ If your plugin does not need CSS, delete this file.
align-items: center;
max-width: 500px;
background-color: var(--background-secondary);
border-radius: 10px;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
text-align: center;
animation: fade-in 0.3s ease-in-out;
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.streams-create-file-icon {
margin-bottom: 24px;
}
.streams-create-file-icon svg {
width: 48px;
height: 48px;
color: var(--text-accent);
opacity: 0.9;
}
.streams-create-file-stream-container {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.streams-create-file-stream-icon {
margin-right: 8px;
display: flex;
align-items: center;
}
.streams-create-file-stream-icon svg {
width: 18px;
height: 18px;
color: var(--text-muted);
}
.streams-create-file-stream {
font-size: 1.2em;
font-size: 1.1em;
font-weight: 600;
color: var(--text-normal);
margin-bottom: 8px;
color: var(--text-muted);
}
.streams-create-file-date {
font-size: 1.8em;
font-size: 2em;
font-weight: 700;
color: var(--text-accent);
margin-bottom: 12px;
color: var(--text-normal);
margin-bottom: 30px;
line-height: 1.2;
}
.streams-create-file-path {
font-family: var(--font-monospace);
font-size: 0.9em;
font-size: 0.8em;
color: var(--text-muted);
margin-bottom: 24px;
padding: 6px 12px;
background-color: var(--background-primary);
border-radius: 4px;
margin-bottom: 32px;
opacity: 0.8;
}
.streams-create-file-button-container {
@ -249,11 +283,21 @@ If your plugin does not need CSS, delete this file.
}
.streams-create-file-button {
padding: 8px 24px;
padding: 10px 24px;
font-size: 1.1em;
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
transition: all 0.2s ease;
background-color: var(--interactive-accent);
text-align: center;
}
.streams-create-file-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.streams-create-file-button:active {
transform: translateY(0);
}
.streams-create-file-button-text {
@ -269,9 +313,20 @@ If your plugin does not need CSS, delete this file.
.is-mobile .streams-create-file-content {
width: 100%;
max-width: none;
padding: 20px;
padding: 30px 20px;
border-radius: 8px;
}
.is-phone .streams-create-file-date {
font-size: 1.5em;
}
/* Hide the calendar icon */
svg.svg-icon.lucide-calendar {
display: none;
}
/* Alternative way to hide it if the above doesn't work */
[data-icon="calendar"] {
display: none;
}