NotAShelf/pinakes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

treewide: fix various UI bugs; optimize crypto dependencies & format

Browse source 
Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: If8fe8b38c1d9c4fecd40ff71f88d2ae06a6a6964
This commit is contained in:
raf 2026-02-10 12:56:05 +03:00
commit 3ccddce7fd
Signed by: NotAShelf
GPG key ID: 29D95B64378DB4BF
178 changed files with 58342 additions and 54241 deletions
Download patch file Download diff file Expand all files Collapse all files

3
crates/pinakes-ui/Cargo.toml
View file

@ -32,4 +32,5 @@ web = ["dioxus/web"]
desktop = ["dioxus/desktop"]
mobile = ["dioxus/mobile"]
[build-dependencies]
grass = "0.13"

21
crates/pinakes-ui/Dioxus.toml Normal file
View file

@ -0,0 +1,21 @@
[application]
[web.app]
# HTML title tag content
title = "pinakes"
# include `assets` in web platform
[web.resource]
# Additional CSS style files
style = []
# Additional JavaScript files
script = []
[web.resource.dev]
# Javascript code file
# serve: [dev-server] only
script = []

1
crates/pinakes-ui/assets/css/main.css Normal file
View file

File diff suppressed because one or more lines are too long

493
crates/pinakes-ui/assets/styles/_audit.scss Normal file
View file

@ -0,0 +1,493 @@
@use 'variables' as *;
@use 'mixins' as *;
// Audit log
.audit-controls {
@include flex(row, flex-start, center, $space-4);
margin-bottom: $space-6;
}
.filter-select {
padding: $space-2 24px $space-2 $space-4;
font-size: $font-size-base;
background: $bg-2;
}
.action-danger {
background: $error-medium;
color: $error-text;
}
.action-updated {
background: $action-updated-bg;
color: $action-updated-text;
}
.action-collection {
background: $action-collection-bg;
color: $action-collection-text;
}
.action-collection-remove {
background: $action-collection-remove-bg;
color: $action-collection-remove-text;
}
.action-opened {
background: $action-opened-bg;
color: $action-opened-text;
}
.action-scanned {
background: $action-scanned-bg;
color: $text-2;
}
.clickable {
cursor: pointer;
color: $accent-text;
&:hover {
text-decoration: underline;
}
}
.clickable-row {
cursor: pointer;
&:hover {
background: $overlay-light;
}
}
// Duplicates
.duplicates-view {
padding: 0;
}
.duplicates-header {
@include flex-between;
margin-bottom: $space-8;
h3 {
margin: 0;
}
}
.duplicates-summary {
@include flex(row, flex-start, center, $space-6);
}
.duplicate-group {
border: 1px solid $border;
border-radius: $radius;
margin-bottom: $space-4;
overflow: hidden;
}
.duplicate-group-header {
@include flex(row, flex-start, center, $space-6);
width: 100%;
padding: 10px 14px;
background: $bg-2;
border: none;
cursor: pointer;
text-align: left;
color: $text-0;
font-size: $font-size-lg;
&:hover {
background: $bg-3;
}
}
.expand-icon {
font-size: $font-size-sm;
width: 14px;
flex-shrink: 0;
}
.group-name {
font-weight: $font-weight-semibold;
flex: 1;
@include text-truncate;
}
.group-badge {
background: $accent;
color: white;
padding: $space-1 $space-4;
border-radius: 10px;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
flex-shrink: 0;
}
.group-size {
flex-shrink: 0;
font-size: $font-size-md;
}
.group-hash {
font-size: $font-size-base;
flex-shrink: 0;
}
.duplicate-items {
border-top: 1px solid $border;
}
.duplicate-item {
@include flex(row, flex-start, center, $space-6);
padding: 10px 14px;
border-bottom: 1px solid $border-subtle;
&:last-child {
border-bottom: none;
}
&-keep {
background: $green-light;
}
}
.dup-thumb {
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: $radius-sm;
overflow: hidden;
}
.dup-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dup-thumb-placeholder {
width: 100%;
height: 100%;
@include flex-center;
background: $bg-3;
font-size: 20px;
color: $text-2;
}
.dup-info {
flex: 1;
min-width: 0;
}
.dup-filename {
font-weight: $font-weight-semibold;
font-size: $font-size-lg;
@include text-truncate;
}
.dup-path {
font-size: $font-size-base;
@include text-truncate;
}
.dup-meta {
font-size: $font-size-md;
margin-top: $space-1;
}
.dup-actions {
@include flex(row, flex-start, center, 6px);
flex-shrink: 0;
}
.keep-badge {
background: $green-medium;
color: $green-text;
padding: $space-1 $space-5;
border-radius: 10px;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
}
// Saved searches
.saved-searches-list {
@include flex(column, flex-start, stretch, $space-2);
max-height: 300px;
overflow-y: auto;
}
.saved-search-item {
@include flex-between;
padding: $space-4 $space-6;
background: $bg-1;
border-radius: $radius-sm;
cursor: pointer;
transition: background $transition-slow ease;
&:hover {
background: $bg-2;
}
}
.saved-search-info {
@include flex(column, flex-start, stretch, $space-1);
flex: 1;
min-width: 0;
}
.saved-search-name {
font-weight: $font-weight-medium;
color: $text-0;
}
.saved-search-query {
font-size: $font-size-base;
@include text-truncate;
}
// Backlinks
.backlinks-panel,
.outgoing-links-panel {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
margin-top: $space-8;
overflow: hidden;
}
.backlinks-header,
.outgoing-links-header {
@include flex(row, flex-start, center, $space-4);
padding: 10px 14px;
background: $bg-3;
cursor: pointer;
user-select: none;
transition: background $transition-base;
&:hover {
background: $overlay-medium;
}
}
.backlinks-toggle,
.outgoing-links-toggle {
font-size: $font-size-sm;
color: $text-2;
width: 12px;
text-align: center;
}
.backlinks-title,
.outgoing-links-title {
font-size: $font-size-md;
font-weight: $font-weight-semibold;
color: $text-0;
flex: 1;
}
.backlinks-count,
.outgoing-links-count {
font-size: $font-size-base;
color: $text-2;
}
.backlinks-reindex-btn {
@include flex-center;
width: 22px;
height: 22px;
padding: 0;
margin-left: auto;
background: transparent;
border: 1px solid $border;
border-radius: $radius-sm;
color: $text-2;
font-size: $font-size-md;
cursor: pointer;
transition: background $transition-base, color $transition-base,
border-color $transition-base;
&:hover:not(:disabled) {
background: $bg-2;
color: $text-0;
border-color: $border-strong;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.backlinks-content,
.outgoing-links-content {
padding: $space-6;
border-top: 1px solid $border-subtle;
}
.backlinks-loading,
.outgoing-links-loading {
@include flex(row, flex-start, center, $space-4);
padding: $space-6;
color: $text-2;
font-size: $font-size-md;
}
.backlinks-error,
.outgoing-links-error {
padding: $space-4 $space-6;
background: $error-bg;
border: 1px solid $error-border;
border-radius: $radius-sm;
font-size: $font-size-md;
color: $error;
}
.backlinks-empty,
.outgoing-links-empty {
padding: $space-8;
text-align: center;
color: $text-2;
font-size: $font-size-md;
font-style: italic;
}
.backlinks-list,
.outgoing-links-list {
list-style: none;
padding: 0;
margin: 0;
@include flex(column, flex-start, stretch, 6px);
}
.backlink-item,
.outgoing-link-item {
padding: $space-5 $space-6;
background: $bg-0;
border: 1px solid $border-subtle;
border-radius: $radius-sm;
cursor: pointer;
transition: background $transition-base, border-color $transition-base;
&:hover {
background: $bg-1;
border-color: $border;
}
&.unresolved {
opacity: 0.7;
border-style: dashed;
}
}
.backlink-source,
.outgoing-link-target {
@include flex(row, flex-start, center, $space-4);
margin-bottom: $space-1;
}
.backlink-title,
.outgoing-link-text {
font-size: $font-size-lg;
font-weight: $font-weight-medium;
color: $text-0;
flex: 1;
@include text-truncate;
}
.backlink-type-badge,
.outgoing-link-type-badge {
display: inline-block;
padding: 1px $space-3;
border-radius: $radius-xl;
font-size: 9px;
font-weight: $font-weight-semibold;
text-transform: uppercase;
letter-spacing: $letter-spacing-wide;
&.backlink-type-wikilink,
&.link-type-wikilink {
background: $accent-dim;
color: $accent-text;
}
&.backlink-type-embed,
&.link-type-embed {
background: $type-audio-bg;
color: $type-audio-text;
}
&.backlink-type-markdown_link,
&.link-type-markdown_link {
background: $type-document-bg;
color: $type-document-text;
}
}
.backlink-context {
font-size: $font-size-base;
color: $text-2;
line-height: $line-height-normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.backlink-line {
color: $text-1;
font-weight: $font-weight-medium;
}
.unresolved-badge {
padding: 1px $space-3;
border-radius: $radius-xl;
font-size: 9px;
font-weight: $font-weight-semibold;
background: $warning-light;
color: $warning;
}
.outgoing-links-unresolved-badge {
margin-left: $space-4;
padding: $space-1 $space-4;
border-radius: 10px;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
background: $warning-medium;
color: $warning;
}
.outgoing-links-global-unresolved {
@include flex(row, flex-start, center, 6px);
margin-top: $space-6;
padding: $space-5 $space-6;
background: $warning-bg;
border: 1px solid $warning-border;
border-radius: $radius-sm;
font-size: $font-size-base;
color: $text-2;
.unresolved-icon {
color: $warning;
}
}
.backlinks-message {
padding: $space-4 $space-5;
margin-bottom: 10px;
border-radius: $radius-sm;
font-size: $font-size-base;
&.success {
background: $success-bg;
border: 1px solid $success-border;
color: $success;
}
&.error {
background: $error-bg;
border: 1px solid $error-border;
color: $error;
}
}

210
crates/pinakes-ui/assets/styles/_base.scss Normal file
View file

@ -0,0 +1,210 @@
@use 'variables' as *;
@use 'mixins' as *;
// Reset & base
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
@include scrollbar;
}
// CSS custom properties
:root {
// Background
--bg-0: #{$bg-0};
--bg-1: #{$bg-1};
--bg-2: #{$bg-2};
--bg-3: #{$bg-3};
// Border
--border-subtle: #{$border-subtle};
--border: #{$border};
--border-strong: #{$border-strong};
// Text
--text-0: #{$text-0};
--text-1: #{$text-1};
--text-2: #{$text-2};
// Accent
--accent: #{$accent};
--accent-dim: #{$accent-dim};
--accent-text: #{$accent-text};
// Semantic
--success: #{$success};
--error: #{$error};
--warning: #{$warning};
// Border radius
--radius-sm: #{$radius-sm};
--radius: #{$radius};
--radius-md: #{$radius-md};
// Shadows
--shadow-sm: #{$shadow-sm};
--shadow: #{$shadow};
--shadow-lg: #{$shadow-lg};
}
// Body
body {
font-family: $font-family-base;
background: var(--bg-0);
color: var(--text-0);
font-size: $font-size-lg;
line-height: $line-height-relaxed;
-webkit-font-smoothing: antialiased;
overflow: hidden;
}
// Focus styles
:focus-visible {
@include focus-outline;
}
// Selection
::selection {
background: $accent-dim;
color: $accent-text;
}
// Links
a {
color: $accent-text;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// Code
code {
padding: 1px 5px;
border-radius: $radius-sm;
background: $bg-0;
color: $accent-text;
font-family: $font-family-mono;
font-size: $font-size-base;
}
// Lists
ul {
list-style: none;
padding: 0;
li {
padding: 3px 0;
font-size: $font-size-md;
color: $text-1;
}
}
// Utility text
.text-muted {
color: $text-1;
}
.text-sm {
font-size: $font-size-base;
}
.mono {
font-family: $font-family-mono;
font-size: $font-size-md;
}
// Utility layout
.flex-row {
@include flex(row, flex-start, center, $space-4);
}
.flex-between {
@include flex-between;
}
.mb-16 {
margin-bottom: $space-8;
}
.mb-8 {
margin-bottom: $space-6;
}
// Animations
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slide-up {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes skeleton-pulse {
0% {
opacity: 0.6;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0.6;
}
}
@keyframes indeterminate {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(400%);
}
}

1132
crates/pinakes-ui/assets/styles/_components.scss Normal file
View file

File diff suppressed because it is too large Load diff

310
crates/pinakes-ui/assets/styles/_graph.scss Normal file
View file

@ -0,0 +1,310 @@
@use 'variables' as *;
@use 'mixins' as *;
// Graph view
.graph-view {
@include flex(column);
height: 100%;
background: $bg-1;
border-radius: $radius;
overflow: hidden;
}
.graph-toolbar {
@include flex(row, flex-start, center, $space-8);
padding: $space-6 $space-8;
background: $bg-2;
border-bottom: 1px solid $border;
}
.graph-title {
font-size: $font-size-xl;
font-weight: $font-weight-semibold;
color: $text-0;
}
.graph-controls {
@include flex(row, flex-start, center, $space-4);
font-size: $font-size-md;
color: $text-1;
select {
padding: $space-2 20px $space-2 $space-4;
font-size: $font-size-base;
background: $bg-3;
}
}
.graph-stats {
margin-left: auto;
font-size: $font-size-base;
color: $text-2;
}
.graph-container {
flex: 1;
position: relative;
@include flex-center;
overflow: hidden;
background: $bg-0;
}
.graph-loading,
.graph-error,
.graph-empty {
@include flex(column, center, center, $space-5);
padding: 48px;
color: $text-2;
font-size: $font-size-lg;
text-align: center;
}
.graph-svg {
max-width: 100%;
max-height: 100%;
cursor: grab;
}
.graph-svg-container {
position: relative;
width: 100%;
height: 100%;
}
.graph-zoom-controls {
position: absolute;
top: $space-8;
left: $space-8;
@include flex(column, flex-start, stretch, $space-4);
z-index: 5;
}
.zoom-btn {
width: 36px;
height: 36px;
border-radius: 6px;
background: $bg-2;
border: 1px solid $border;
color: $text-0;
font-size: 18px;
font-weight: bold;
@include flex-center;
cursor: pointer;
transition: all $transition-slow;
box-shadow: $shadow-sm;
&:hover {
background: $bg-3;
border-color: $border-strong;
transform: scale(1.05);
}
&:active {
transform: scale(0.95);
}
}
// Graph elements
.graph-edges line {
stroke: $border-strong;
stroke-width: 1;
opacity: 0.6;
&.edge-type-wikilink {
stroke: $accent;
}
&.edge-type-embed {
stroke: $graph-edge-embed;
stroke-dasharray: 4 2;
}
}
.graph-nodes {
.graph-node {
cursor: pointer;
circle {
fill: $graph-node-fill;
stroke: $graph-node-stroke;
stroke-width: 2;
transition: fill $transition-slow, stroke $transition-slow;
}
&:hover circle {
fill: $graph-node-hover;
}
&.selected circle {
fill: $accent;
stroke: $graph-node-selected;
}
text {
fill: $text-1;
font-size: 11px;
pointer-events: none;
text-anchor: middle;
dominant-baseline: central;
transform: translateY(16px);
}
}
}
// Node details panel
.node-details-panel {
position: absolute;
top: $space-8;
right: $space-8;
width: 280px;
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
box-shadow: $shadow;
z-index: 10;
}
.node-details-header {
@include flex-between;
padding: $space-5 14px;
border-bottom: 1px solid $border-subtle;
h3 {
font-size: $font-size-lg;
font-weight: $font-weight-semibold;
color: $text-0;
margin: 0;
@include text-truncate;
}
.close-btn {
background: none;
border: none;
color: $text-2;
cursor: pointer;
font-size: 14px;
padding: $space-1 $space-3;
line-height: 1;
&:hover {
color: $text-0;
}
}
}
.node-details-content {
padding: 14px;
.node-title {
font-size: $font-size-md;
color: $text-1;
margin-bottom: $space-6;
}
}
.node-stats {
display: flex;
gap: $space-8;
margin-bottom: $space-6;
.stat {
font-size: $font-size-md;
color: $text-2;
strong {
color: $text-0;
}
}
}
// Physics controls
.physics-controls-panel {
position: absolute;
top: $space-8;
right: $space-8;
width: 300px;
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
box-shadow: $shadow;
padding: $space-8;
z-index: 10;
h4 {
font-size: $font-size-lg;
font-weight: $font-weight-semibold;
color: $text-0;
margin: 0 0 $space-8 0;
padding-bottom: $space-4;
border-bottom: 1px solid $border-subtle;
}
.btn {
width: 100%;
margin-top: $space-4;
}
}
.control-group {
margin-bottom: 14px;
label {
display: block;
font-size: $font-size-base;
font-weight: $font-weight-medium;
color: $text-1;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: $letter-spacing-uppercase;
}
input[type='range'] {
width: 100%;
height: 4px;
border-radius: $space-2;
background: $bg-3;
outline: none;
-webkit-appearance: none;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: $accent;
cursor: pointer;
transition: transform $transition-base;
&:hover {
transform: scale(1.15);
}
}
&::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: $accent;
cursor: pointer;
border: none;
transition: transform $transition-base;
&:hover {
transform: scale(1.15);
}
}
}
}
.control-value {
display: inline-block;
margin-top: $space-1;
font-size: $font-size-base;
color: $text-2;
font-family: $font-family-mono;
}

344
crates/pinakes-ui/assets/styles/_layout.scss Normal file
View file

@ -0,0 +1,344 @@
@use 'variables' as *;
@use 'mixins' as *;
// App layout
.app {
@include flex(row, flex-start, stretch);
height: 100vh;
overflow: hidden;
}
// Sidebar
.sidebar {
width: $sidebar-width;
min-width: $sidebar-width;
max-width: $sidebar-width;
background: $bg-1;
border-right: 1px solid $border;
@include flex(column);
flex-shrink: 0;
user-select: none;
overflow-y: auto;
overflow-x: hidden;
z-index: $z-dropdown;
transition: width $transition-slow, min-width $transition-slow,
max-width $transition-slow;
&.collapsed {
width: $sidebar-collapsed-width;
min-width: $sidebar-collapsed-width;
max-width: $sidebar-collapsed-width;
.nav-label,
.sidebar-header .logo,
.sidebar-header .version,
.nav-badge,
.nav-item-text,
.sidebar-footer .status-text,
.user-name,
.role-badge,
.user-info .btn,
.sidebar-import-header span,
.sidebar-import-file {
display: none;
}
.nav-item {
justify-content: center;
padding: $space-4;
border-left: none;
border-radius: $radius-sm;
&.active {
border-left: none;
}
}
.nav-icon {
width: auto;
margin: 0;
}
.sidebar-header {
padding: 12px $space-4;
justify-content: center;
}
.nav-section {
padding: 0 $space-2;
}
.sidebar-footer {
padding: $space-4;
.user-info {
justify-content: center;
padding: $space-2;
}
}
.sidebar-import-progress {
padding: 6px;
}
}
}
.sidebar-header {
padding: $space-8 $space-8 20px;
@include flex(row, flex-start, baseline, $space-4);
.logo {
font-size: $font-size-2xl;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-tight;
color: $text-0;
}
.version {
font-size: $font-size-sm;
color: $text-2;
}
}
.sidebar-toggle {
@include button-ghost;
color: $text-2;
padding: $space-4;
font-size: $font-size-4xl;
width: 100%;
text-align: center;
&:hover {
color: $text-0;
}
}
.sidebar-spacer {
flex: 1;
}
.sidebar-footer {
padding: $space-6;
border-top: 1px solid $border-subtle;
overflow: visible;
min-width: 0;
}
// Navigation
.nav-section {
padding: 0 $space-4;
margin-bottom: $space-1;
}
.nav-label {
padding: $space-4 $space-4 $space-2;
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
@include text-uppercase;
color: $text-2;
}
.nav-item {
@include flex(row, flex-start, center, $space-4);
padding: 6px $space-4;
border-radius: $radius-sm;
cursor: pointer;
color: $text-1;
font-size: $font-size-lg;
font-weight: 450;
transition: color $transition-base, background $transition-base;
border: none;
background: none;
width: 100%;
text-align: left;
border-left: 2px solid transparent;
margin-left: 0;
&:hover {
color: $text-0;
background: $overlay-light;
}
&.active {
color: $accent-text;
border-left-color: $accent;
background: $accent-dim;
}
}
.nav-item-text {
flex: 1;
@include text-truncate;
min-width: 0;
}
.sidebar:not(.collapsed) .nav-item-text {
overflow: visible;
}
.nav-icon {
width: 18px;
text-align: center;
font-size: 14px;
opacity: 0.7;
}
.nav-badge {
margin-left: auto;
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
color: $text-2;
background: $bg-3;
padding: 1px $space-3;
border-radius: $radius-xl;
min-width: 20px;
text-align: center;
font-variant-numeric: tabular-nums;
}
// Status indicator
.status-indicator {
@include flex(row, center, center, 6px);
font-size: $font-size-base;
font-weight: $font-weight-medium;
min-width: 0;
overflow: visible;
}
.sidebar:not(.collapsed) .status-indicator {
justify-content: flex-start;
}
.status-dot {
@include status-dot;
&.connected {
background: $success;
}
&.disconnected {
background: $error;
}
&.checking {
background: $warning;
@include pulse;
}
}
.status-text {
color: $text-2;
@include text-truncate;
min-width: 0;
}
.sidebar:not(.collapsed) .status-text {
overflow: visible;
}
// Main content
.main {
flex: 1;
@include flex(column);
overflow: hidden;
min-width: 0;
}
.header {
height: $header-height;
min-height: $header-height;
border-bottom: 1px solid $border-subtle;
@include flex(row, flex-start, center, 12px);
padding: 0 20px;
background: $bg-1;
}
.page-title {
font-size: $font-size-xl;
font-weight: $font-weight-semibold;
color: $text-0;
}
.header-spacer {
flex: 1;
}
.content {
flex: 1;
overflow-y: auto;
padding: 20px;
scrollbar-width: thin;
scrollbar-color: $overlay-strong transparent;
}
// Import progress
.sidebar-import-progress {
padding: $space-5 $space-6;
background: $bg-2;
border-top: 1px solid $border-subtle;
font-size: $font-size-base;
}
.sidebar-import-header {
@include flex(row, flex-start, center, 6px);
margin-bottom: $space-2;
color: $text-1;
}
.sidebar-import-file {
color: $text-2;
font-size: $font-size-sm;
@include text-truncate;
margin-bottom: $space-2;
}
.sidebar-import-progress .progress-bar {
height: 3px;
}
// User info
.user-info {
@include flex(row, flex-start, center, 6px);
font-size: $font-size-md;
overflow: hidden;
min-width: 0;
}
.user-name {
font-weight: $font-weight-medium;
color: $text-0;
@include text-truncate;
max-width: 90px;
flex-shrink: 1;
}
.role-badge {
display: inline-block;
padding: 1px $space-3;
border-radius: $radius-sm;
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
text-transform: uppercase;
&.role-admin {
background: $role-admin-bg;
color: $role-admin-text;
}
&.role-editor {
background: $role-editor-bg;
color: $role-editor-text;
}
&.role-viewer {
background: $role-viewer-bg;
color: $role-viewer-text;
}
}

715
crates/pinakes-ui/assets/styles/_media.scss Normal file
View file

@ -0,0 +1,715 @@
@use 'variables' as *;
@use 'mixins' as *;
// Media cards & grid
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: $space-6;
}
.media-card {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
overflow: hidden;
cursor: pointer;
transition: border-color 0.12s, box-shadow 0.12s;
position: relative;
&:hover {
border-color: $border-strong;
box-shadow: $shadow-sm;
}
&.selected {
border-color: $accent;
box-shadow: 0 0 0 1px $accent;
}
}
.card-checkbox {
position: absolute;
top: 6px;
left: 6px;
z-index: 2;
opacity: 0;
transition: opacity $transition-base;
input[type='checkbox'] {
width: 16px;
height: 16px;
cursor: pointer;
filter: drop-shadow(0 1px 2px $drop-shadow);
}
}
.media-card:hover .card-checkbox,
.media-card.selected .card-checkbox {
opacity: 1;
}
.card-thumbnail {
width: 100%;
aspect-ratio: 1;
background: $bg-0;
@include flex-center;
overflow: hidden;
position: relative;
img,
.card-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
}
.card-type-icon {
font-size: 32px;
opacity: 0.4;
@include flex-center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.card-info {
padding: $space-4 $space-5;
}
.card-name {
font-size: $font-size-md;
font-weight: $font-weight-medium;
color: $text-0;
@include text-truncate;
margin-bottom: $space-2;
}
.card-title,
.card-artist {
font-size: $font-size-sm;
@include text-truncate;
line-height: $line-height-base;
}
.card-meta {
@include flex(row, flex-start, center, 6px);
font-size: $font-size-sm;
}
.card-size {
color: $text-2;
font-size: $font-size-sm;
}
// Table thumbnails
.table-thumb-cell {
width: 36px;
padding: $space-2 6px !important;
position: relative;
}
.table-thumb {
width: 28px;
height: 28px;
object-fit: cover;
border-radius: 3px;
display: block;
}
.table-thumb-overlay {
position: absolute;
top: $space-2;
left: 6px;
z-index: 1;
}
.table-type-icon {
@include flex-center;
width: 28px;
height: 28px;
font-size: 14px;
opacity: 0.5;
border-radius: 3px;
background: $bg-0;
z-index: 0;
}
// Type badges
.type-badge {
display: inline-block;
padding: 1px $space-3;
border-radius: $radius-sm;
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
@include text-uppercase;
&.type-audio {
background: $type-audio-bg;
color: $type-audio-text;
}
&.type-video {
background: $type-video-bg;
color: $type-video-text;
}
&.type-image {
background: $type-image-bg;
color: $type-image-text;
}
&.type-document {
background: $type-document-bg;
color: $type-document-text;
}
&.type-text {
background: $type-text-bg;
color: $type-text-text;
}
&.type-other {
background: $type-other-bg;
color: $text-2;
}
}
// Tag badges
.tag-list {
display: flex;
flex-wrap: wrap;
gap: $space-2;
}
.tag-badge {
display: inline-flex;
align-items: center;
gap: $space-2;
padding: $space-1 $space-5;
background: $accent-dim;
color: $accent-text;
border-radius: 12px;
font-size: $font-size-base;
font-weight: $font-weight-medium;
&.selected {
background: $accent;
color: white;
cursor: pointer;
}
&:not(.selected) {
cursor: pointer;
}
.tag-remove {
cursor: pointer;
opacity: 0.4;
font-size: $font-size-lg;
line-height: 1;
transition: opacity $transition-base;
&:hover {
opacity: 1;
}
}
}
// Tag hierarchy
.tag-group {
margin-bottom: 6px;
}
.tag-children {
margin-left: $space-8;
margin-top: $space-2;
display: flex;
flex-wrap: wrap;
gap: $space-2;
}
.tag-confirm-delete {
display: inline-flex;
align-items: center;
gap: $space-2;
font-size: $font-size-sm;
color: $text-1;
}
.tag-confirm-yes {
cursor: pointer;
color: $error;
font-weight: $font-weight-semibold;
&:hover {
text-decoration: underline;
}
}
.tag-confirm-no {
cursor: pointer;
color: $text-2;
font-weight: $font-weight-medium;
&:hover {
text-decoration: underline;
}
}
// Detail view
.detail-actions {
display: flex;
gap: 6px;
margin-bottom: $space-8;
}
.detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $space-4;
}
.detail-field {
padding: $space-5 $space-6;
background: $bg-0;
border-radius: $radius-sm;
border: 1px solid $border-subtle;
&.full-width {
grid-column: 1 / -1;
}
input[type='text'],
textarea,
select {
width: 100%;
margin-top: $space-2;
}
textarea {
min-height: 64px;
resize: vertical;
}
}
.detail-label {
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
color: $text-2;
@include text-uppercase($letter-spacing-wider);
margin-bottom: $space-1;
}
.detail-value {
font-size: $font-size-lg;
color: $text-0;
word-break: break-all;
&.mono {
font-family: $font-family-mono;
font-size: $font-size-base;
color: $text-1;
}
}
.detail-preview {
margin-bottom: $space-8;
background: $bg-0;
border: 1px solid $border-subtle;
border-radius: $radius;
overflow: hidden;
text-align: center;
&:has(.markdown-viewer) {
max-height: none;
overflow-y: auto;
text-align: left;
}
&:not(:has(.markdown-viewer)) {
max-height: 450px;
}
img {
max-width: 100%;
max-height: 400px;
object-fit: contain;
display: block;
margin: 0 auto;
}
audio {
width: 100%;
padding: $space-8;
}
video {
max-width: 100%;
max-height: 400px;
display: block;
margin: 0 auto;
}
}
.detail-no-preview {
padding: $space-8 $space-8;
text-align: center;
@include flex(column, center, center, $space-5);
}
// Frontmatter
.frontmatter-card {
max-width: 800px;
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
padding: $space-6 $space-8;
margin-bottom: $space-8;
}
.frontmatter-fields {
display: grid;
grid-template-columns: auto 1fr;
gap: $space-2 $space-6;
margin: 0;
dt {
font-weight: $font-weight-semibold;
font-size: $font-size-md;
color: $text-1;
text-transform: capitalize;
}
dd {
font-size: $font-size-lg;
color: $text-0;
margin: 0;
}
}
// Empty state
.empty-state {
text-align: center;
padding: 48px $space-6;
color: $text-2;
.empty-icon {
font-size: $font-size-7xl;
margin-bottom: $space-6;
opacity: 0.3;
}
}
.empty-title {
font-size: $font-size-2xl;
font-weight: $font-weight-semibold;
color: $text-1;
margin-bottom: $space-2;
}
.empty-subtitle {
font-size: $font-size-md;
max-width: 320px;
margin: 0 auto;
line-height: $line-height-relaxed;
}
// Toast
.toast-container {
position: fixed;
bottom: $space-8;
right: $space-8;
z-index: $z-toast;
display: flex;
flex-direction: column-reverse;
gap: 6px;
align-items: flex-end;
.toast {
position: static;
transform: none;
}
}
.toast {
position: fixed;
bottom: $space-8;
right: $space-8;
padding: $space-5 $space-8;
border-radius: $radius;
background: $bg-3;
border: 1px solid $border;
color: $text-0;
font-size: $font-size-md;
box-shadow: $shadow;
z-index: $z-toast;
animation: slide-up 0.15s ease-out;
max-width: 420px;
&.success {
border-left: 3px solid $success;
}
&.error {
border-left: 3px solid $error;
}
}
// Banners
.offline-banner,
.error-banner {
background: $error-bg;
border: 1px solid $error-border;
border-radius: $radius-sm;
padding: $space-5 $space-6;
margin-bottom: $space-6;
font-size: $font-size-md;
color: $error-text;
@include flex(row, flex-start, center, $space-4);
.offline-icon,
.error-icon {
font-size: 14px;
flex-shrink: 0;
}
}
.error-banner {
padding: 10px 14px;
}
.readonly-banner {
@include flex(row, flex-start, center, $space-4);
padding: $space-5 $space-6;
background: $warning-bg;
border: 1px solid $warning-border;
border-radius: $radius-sm;
margin-bottom: $space-8;
font-size: $font-size-md;
color: $warning;
}
.batch-actions {
@include flex(row, flex-start, center, $space-4);
padding: $space-4 $space-5;
background: $accent-dim;
border: 1px solid $accent-border;
border-radius: $radius-sm;
margin-bottom: $space-6;
font-size: $font-size-md;
font-weight: $font-weight-medium;
color: $accent-text;
}
.select-all-banner {
@include flex(row, center, center, $space-4);
padding: $space-5 $space-8;
background: $info-bg;
border-radius: 6px;
margin-bottom: $space-4;
font-size: 0.85rem;
color: $text-1;
button {
background: none;
border: none;
color: $accent;
cursor: pointer;
font-weight: $font-weight-semibold;
text-decoration: underline;
font-size: 0.85rem;
padding: 0;
&:hover {
color: $text-0;
}
}
}
// Import status
.import-status-panel {
background: $bg-2;
border: 1px solid $accent;
border-radius: $radius;
padding: $space-6 $space-8;
margin-bottom: $space-8;
}
.import-status-header {
@include flex(row, flex-start, center, $space-4);
margin-bottom: $space-4;
font-size: $font-size-lg;
color: $text-0;
}
.import-current-file {
@include flex(row, flex-start, center, $space-1);
margin-bottom: 6px;
font-size: $font-size-md;
overflow: hidden;
}
.import-file-label {
color: $text-2;
flex-shrink: 0;
}
.import-file-name {
color: $text-0;
@include text-truncate;
font-family: monospace;
font-size: $font-size-base;
}
.import-queue-indicator {
@include flex(row, flex-start, center, $space-1);
margin-bottom: $space-4;
font-size: $font-size-base;
}
.import-queue-badge {
@include flex-center;
min-width: 18px;
height: 18px;
padding: 0 6px;
background: $accent-dim;
color: $accent-text;
border-radius: 9px;
font-weight: $font-weight-semibold;
font-size: $font-size-sm;
}
.import-queue-text {
color: $text-2;
}
.import-tabs {
display: flex;
gap: 0;
margin-bottom: $space-8;
border-bottom: 1px solid $border;
}
.import-tab {
padding: $space-5 $space-8;
background: none;
border: none;
border-bottom: 2px solid transparent;
color: $text-2;
font-size: $font-size-md;
font-weight: $font-weight-medium;
cursor: pointer;
transition: color $transition-base, border-color $transition-base;
&:hover {
color: $text-0;
}
&.active {
color: $accent-text;
border-bottom-color: $accent;
}
}
// Queue panel
.queue-panel {
@include flex(column);
border-left: 1px solid $border;
background: $bg-1;
min-width: 280px;
max-width: 320px;
}
.queue-header {
@include flex-between;
padding: $space-6 $space-8;
border-bottom: 1px solid $border-subtle;
h3 {
margin: 0;
font-size: 0.9rem;
color: $text-0;
}
}
.queue-controls {
display: flex;
gap: $space-1;
}
.queue-list {
overflow-y: auto;
flex: 1;
}
.queue-item {
@include flex(row, flex-start, center);
padding: $space-4 $space-8;
cursor: pointer;
border-bottom: 1px solid $border-subtle;
transition: background $transition-slow;
&:hover {
background: $bg-2;
.queue-item-remove {
opacity: 1;
}
}
&-active {
background: $accent-dim;
border-left: 3px solid $accent;
}
}
.queue-item-info {
flex: 1;
min-width: 0;
}
.queue-item-title {
display: block;
font-size: 0.85rem;
color: $text-0;
@include text-truncate;
}
.queue-item-artist {
display: block;
font-size: 0.75rem;
color: $text-2;
}
.queue-item-remove {
opacity: 0;
transition: opacity $transition-slow;
}
.queue-empty {
padding: $space-8 $space-8;
text-align: center;
color: $text-2;
font-size: 0.85rem;
}

300
crates/pinakes-ui/assets/styles/_mixins.scss Normal file
View file

@ -0,0 +1,300 @@
@use 'variables' as *;
// Utility mixins
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $gap: 0) {
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
@if $gap != 0 {
gap: $gap;
}
}
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
@mixin flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
// Text mixins
@mixin text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@mixin text-uppercase($letter-spacing: $letter-spacing-wider) {
text-transform: uppercase;
letter-spacing: $letter-spacing;
}
@mixin font-mono($size: $font-size-md) {
font-family: $font-family-mono;
font-size: $size;
}
// Button mixins
@mixin button-base {
padding: 5px 12px;
border-radius: $radius-sm;
border: none;
cursor: pointer;
font-size: $font-size-md;
font-weight: $font-weight-medium;
transition: all $transition-base;
display: inline-flex;
align-items: center;
gap: 5px;
white-space: nowrap;
line-height: 1.5;
}
@mixin button-variant($bg, $color, $border: null, $hover-bg: null) {
background: $bg;
color: $color;
@if $border {
border: 1px solid $border;
}
@if $hover-bg {
&:hover {
background: $hover-bg;
}
}
}
@mixin button-ghost {
background: transparent;
border: none;
}
// Card mixins
@mixin card($padding: $space-8) {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
padding: $padding;
}
@mixin card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $space-6;
}
// Form mixins
@mixin input-base {
padding: 6px 10px;
border-radius: $radius-sm;
border: 1px solid $border;
background: $bg-0;
color: $text-0;
font-size: $font-size-lg;
outline: none;
transition: border-color $transition-slow;
font-family: inherit;
&::placeholder {
color: $text-2;
}
&:focus {
border-color: $accent;
}
}
@mixin form-label {
display: block;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
color: $text-1;
margin-bottom: $space-2;
@include text-uppercase($letter-spacing-wide);
}
// Scrollbar mixins
@mixin scrollbar($width: 5px, $thumb-color: $overlay-strong, $track-color: transparent) {
&::-webkit-scrollbar {
width: $width;
height: $width;
}
&::-webkit-scrollbar-track {
background: $track-color;
}
&::-webkit-scrollbar-thumb {
background: $thumb-color;
border-radius: 3px;
&:hover {
background: $border-strong;
}
}
scrollbar-width: thin;
scrollbar-color: $thumb-color $track-color;
}
// Status/state mixins
@mixin status-dot($size: 6px) {
width: $size;
height: $size;
border-radius: 50%;
flex-shrink: 0;
}
@mixin disabled-state($opacity: 0.4) {
opacity: $opacity;
cursor: not-allowed;
pointer-events: none;
}
@mixin focus-outline($color: $accent, $width: 2px, $offset: 2px) {
&:focus-visible {
outline: $width solid $color;
outline-offset: $offset;
}
}
// Animation mixins
@mixin animation($name, $duration: 0.7s, $timing: linear, $iteration: infinite) {
animation: $name $duration $timing $iteration;
}
@mixin fade-in($duration: 0.1s) {
animation: fade-in $duration ease-out;
}
@mixin slide-up($duration: 0.15s, $distance: 8px) {
animation: slide-up $duration ease-out;
@keyframes slide-up {
from {
opacity: 0;
transform: translateY($distance);
}
to {
opacity: 1;
transform: translateY(0);
}
}
}
@mixin pulse($duration: 1.5s) {
animation: pulse $duration infinite;
}
@mixin skeleton-pulse {
animation: skeleton-pulse 1.5s ease-in-out infinite;
background: $bg-3;
}
// Badge mixins
@mixin badge-base {
display: inline-flex;
align-items: center;
gap: $space-2;
padding: $space-1 $space-3;
border-radius: $radius-xl;
font-size: $font-size-sm;
font-weight: $font-weight-medium;
}
@mixin badge-variant($bg, $color) {
background: $bg;
color: $color;
}
// Tooltip mixins
@mixin tooltip-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
border-radius: 50%;
background: $bg-3;
color: $text-2;
font-size: $font-size-xs;
font-weight: $font-weight-bold;
cursor: help;
position: relative;
flex-shrink: 0;
margin-left: $space-2;
&:hover {
background: $accent-dim;
color: $accent-text;
}
}
@mixin tooltip-content {
display: none;
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 6px 10px;
background: $bg-3;
border: 1px solid $border;
border-radius: $radius-sm;
color: $text-0;
font-size: $font-size-base;
font-weight: $font-weight-normal;
line-height: $line-height-normal;
white-space: normal;
width: 220px;
text-transform: none;
letter-spacing: normal;
box-shadow: $shadow;
z-index: 100;
pointer-events: none;
}
// Media queries
@mixin mobile {
@media (max-width: 768px) {
@content;
}
}
@mixin tablet {
@media (min-width: 769px) and (max-width: 1024px) {
@content;
}
}
@mixin desktop {
@media (min-width: 1025px) {
@content;
}
}
// Reduced motion
@mixin respect-reduced-motion {
@media (prefers-reduced-motion: reduce) {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

508
crates/pinakes-ui/assets/styles/_sections.scss Normal file
View file

@ -0,0 +1,508 @@
@use 'variables' as *;
@use 'mixins' as *;
// Statistics
.statistics-page {
padding: 20px;
}
.stats-overview,
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: $space-8;
margin-bottom: $space-12;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.stat-card {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
padding: 20px;
@include flex(row, flex-start, center, $space-8);
&.stat-primary {
border-left: 3px solid $accent;
}
&.stat-success {
border-left: 3px solid $success;
}
&.stat-info {
border-left: 3px solid $type-document-text;
}
&.stat-warning {
border-left: 3px solid $warning;
}
&.stat-purple {
border-left: 3px solid $type-audio-text;
}
&.stat-danger {
border-left: 3px solid $error;
}
}
.stat-icon {
flex-shrink: 0;
color: $text-2;
}
.stat-content {
flex: 1;
}
.stat-value {
font-size: $font-size-6xl;
font-weight: $font-weight-bold;
color: $text-0;
line-height: $line-height-tight;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: $font-size-md;
color: $text-2;
margin-top: $space-2;
font-weight: $font-weight-medium;
}
.stats-section {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
padding: $space-8;
margin-bottom: 20px;
}
.section-title {
font-size: $font-size-3xl;
font-weight: $font-weight-semibold;
color: $text-0;
margin-bottom: 20px;
// Alternative smaller size used in some places
&.small {
font-size: $font-size-xl;
margin-bottom: $space-6;
padding-bottom: 6px;
border-bottom: 1px solid $border-subtle;
}
}
// Chart bars
.chart-bars {
@include flex(column, flex-start, stretch, $space-8);
}
.bar-item {
display: grid;
grid-template-columns: 120px 1fr 80px;
align-items: center;
gap: $space-8;
}
.bar-label {
font-size: $font-size-lg;
font-weight: $font-weight-medium;
color: $text-1;
text-align: right;
}
.bar-track {
height: 28px;
background: $bg-3;
border-radius: $radius-sm;
overflow: hidden;
position: relative;
}
.bar-fill {
height: 100%;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: $radius-sm;
&.bar-primary {
background: linear-gradient(90deg, $accent 0%, $gradient-accent-end 100%);
}
&.bar-success {
background: linear-gradient(90deg, $success 0%, $gradient-success-end 100%);
}
}
.bar-value {
font-size: $font-size-lg;
font-weight: $font-weight-semibold;
color: $text-1;
text-align: right;
font-variant-numeric: tabular-nums;
}
// Settings
.settings-section {
margin-bottom: $space-8;
}
.settings-card {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius-md;
padding: 20px;
margin-bottom: $space-8;
&.danger-card {
border: 1px solid $error-border-light;
}
}
.settings-card-header {
@include flex-between;
margin-bottom: $space-8;
padding-bottom: $space-6;
border-bottom: 1px solid $border-subtle;
}
.settings-card-title {
font-size: $font-size-xl;
font-weight: $font-weight-semibold;
}
.settings-card-body {
padding-top: $space-1;
}
.settings-field {
@include flex-between;
padding: $space-4 0;
border-bottom: 1px solid $border-subtle;
&:last-child {
border-bottom: none;
}
select {
min-width: 120px;
}
}
// Config status
.config-path {
font-size: $font-size-base;
color: $text-2;
margin-bottom: $space-6;
font-family: $font-family-mono;
padding: 6px $space-5;
background: $bg-0;
border-radius: $radius-sm;
border: 1px solid $border-subtle;
}
.config-status {
@include flex(row, flex-start, center, 6px);
padding: 3px $space-5;
border-radius: 12px;
font-size: $font-size-base;
font-weight: $font-weight-semibold;
&.writable {
background: $success-light;
color: $success;
}
&.readonly {
background: $error-medium;
color: $error;
}
}
// Root list
.root-list {
list-style: none;
}
.root-item {
@include flex-between;
padding: $space-4 $space-6;
background: $bg-0;
border: 1px solid $border-subtle;
border-radius: $radius-sm;
margin-bottom: $space-2;
font-family: $font-family-mono;
font-size: $font-size-md;
color: $text-1;
}
// Info row
.info-row {
@include flex-between;
padding: 6px 0;
border-bottom: 1px solid $border-subtle;
font-size: $font-size-lg;
&:last-child {
border-bottom: none;
}
}
.info-label {
color: $text-1;
font-weight: $font-weight-medium;
}
.info-value {
color: $text-0;
}
// Tasks
.tasks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: $space-8;
padding: $space-6;
}
.task-card {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius;
overflow: hidden;
transition: all $transition-slower;
&:hover {
border-color: $border-strong;
box-shadow: $shadow-card-hover;
transform: translateY(-2px);
}
&-enabled {
border-left: 3px solid $success;
}
&-disabled {
border-left: 3px solid $text-3;
opacity: 0.7;
}
}
.task-card-header {
@include flex-between;
align-items: flex-start;
padding: $space-8;
border-bottom: 1px solid $border-subtle;
}
.task-header-left {
flex: 1;
min-width: 0;
}
.task-name {
font-size: $font-size-3xl;
font-weight: $font-weight-semibold;
color: $text-0;
margin-bottom: $space-1;
}
.task-schedule {
@include flex(row, flex-start, center, 6px);
font-size: $font-size-md;
color: $text-2;
font-family: $font-family-mono-alt;
}
.schedule-icon {
font-size: 14px;
}
.task-status-badge {
flex-shrink: 0;
}
.status-badge {
@include flex(row, flex-start, center, 6px);
padding: $space-1 10px;
border-radius: $radius-sm;
font-size: $font-size-sm;
font-weight: $font-weight-semibold;
text-transform: uppercase;
letter-spacing: $letter-spacing-wide;
&.status-enabled {
background: $green-medium;
color: $success;
.status-dot {
animation: pulse 1.5s infinite;
}
}
&.status-disabled {
background: $bg-3;
color: $text-2;
}
.status-dot {
@include status-dot;
background: currentColor;
}
}
.task-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: $space-6;
padding: $space-8;
}
.task-info-item {
@include flex(row, flex-start, flex-start, 10px);
}
.task-info-icon {
font-size: 18px;
color: $text-2;
flex-shrink: 0;
}
.task-info-content {
flex: 1;
min-width: 0;
}
.task-info-label {
font-size: $font-size-sm;
color: $text-2;
font-weight: $font-weight-semibold;
@include text-uppercase($letter-spacing-wide);
margin-bottom: $space-1;
}
.task-info-value {
font-size: $font-size-md;
color: $text-1;
font-weight: $font-weight-medium;
@include text-truncate;
}
.task-card-actions {
display: flex;
gap: $space-4;
padding: $space-5 $space-8;
background: $bg-1;
border-top: 1px solid $border-subtle;
button {
flex: 1;
}
}
// Database actions
.db-actions {
@include flex(column, flex-start, stretch, $space-8);
padding: $space-5;
}
.db-action-row {
@include flex(row, space-between, center, $space-8);
padding: $space-5;
border-radius: 6px;
background: $overlay-inverse-light;
}
.db-action-info {
flex: 1;
h4 {
font-size: 0.95rem;
font-weight: $font-weight-semibold;
color: $text-0;
margin-bottom: $space-1;
}
}
.db-action-confirm {
@include flex(row, flex-start, center, $space-4);
flex-shrink: 0;
}
// Library page
.library-toolbar {
@include flex-between;
padding: $space-4 0;
margin-bottom: $space-6;
gap: $space-6;
flex-wrap: wrap;
}
.toolbar-left {
@include flex(row, flex-start, center, $space-5);
}
.toolbar-right {
@include flex(row, flex-start, center, $space-5);
}
.sort-control,
.page-size-control {
select {
padding: $space-2 24px $space-2 $space-4;
font-size: $font-size-base;
background: $bg-2;
}
}
.page-size-control {
@include flex(row, flex-start, center, $space-2);
}
.library-stats {
@include flex-between;
padding: $space-1 0 6px 0;
font-size: $font-size-base;
}
.type-filter-row {
@include flex(row, flex-start, center, 6px);
padding: $space-2 0;
margin-bottom: 6px;
flex-wrap: wrap;
}
// Pagination
.pagination {
@include flex-center;
gap: $space-2;
margin-top: $space-8;
padding: $space-4 0;
}
.page-btn {
min-width: 28px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.page-ellipsis {
color: $text-2;
padding: 0 $space-2;
font-size: $font-size-md;
user-select: none;
}

281
crates/pinakes-ui/assets/styles/_themes.scss Normal file
View file

@ -0,0 +1,281 @@
@use 'variables' as *;
@use 'mixins' as *;
// Light theme
.theme-light {
// Background
--bg-0: #{$light-bg-0};
--bg-1: #{$light-bg-1};
--bg-2: #{$light-bg-2};
--bg-3: #{$light-bg-3};
// Border
--border-subtle: #{$light-border-subtle};
--border: #{$light-border};
--border-strong: #{$light-border-strong};
// Text
--text-0: #{$light-text-0};
--text-1: #{$light-text-1};
--text-2: #{$light-text-2};
// Accent
--accent: #{$light-accent};
--accent-dim: #{$light-accent-dim};
--accent-text: #{$light-accent-text};
// Shadows
--shadow-sm: #{$light-shadow-sm};
--shadow: #{$light-shadow};
--shadow-lg: #{$light-shadow-lg};
// Scrollbar
::-webkit-scrollbar-thumb {
background: $overlay-inverse-strong;
&:hover {
background: $overlay-inverse-medium;
}
}
::-webkit-scrollbar-track {
background: $overlay-inverse-light;
}
// Graph
.graph-nodes .graph-node text {
fill: $light-text-0;
}
.graph-edges line {
stroke: $overlay-inverse-strong;
}
// PDF
.pdf-container {
background: $light-bg-3;
}
}
// Skeleton
.skeleton-pulse {
@include skeleton-pulse;
border-radius: 4px;
}
.skeleton-card {
@include flex(column, flex-start, stretch, $space-4);
padding: $space-4;
}
.skeleton-thumb {
width: 100%;
aspect-ratio: 1;
border-radius: 6px;
}
.skeleton-text {
height: 14px;
width: 80%;
&-short {
width: 50%;
}
}
.skeleton-row {
display: flex;
gap: $space-6;
padding: 10px $space-8;
align-items: center;
}
.skeleton-cell {
height: 14px;
flex: 1;
border-radius: 4px;
&-icon {
width: 32px;
height: 32px;
flex: none;
border-radius: 4px;
}
&-wide {
flex: 3;
}
}
.loading-overlay {
position: absolute;
inset: 0;
@include flex(column, center, center, $space-5);
background: $media-overlay-light;
z-index: 100;
border-radius: $radius-lg;
}
.loading-spinner {
width: 32px;
height: 32px;
border: 3px solid $border;
border-top-color: $accent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.loading-message {
color: $text-1;
font-size: 0.9rem;
}
// Login
.login-container {
@include flex-center;
height: 100vh;
background: $bg-0;
}
.login-card {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius-md;
padding: $space-12;
width: 360px;
box-shadow: $shadow-lg;
}
.login-title {
font-size: 20px;
font-weight: $font-weight-bold;
color: $text-0;
text-align: center;
margin-bottom: $space-1;
}
.login-subtitle {
font-size: $font-size-lg;
color: $text-2;
text-align: center;
margin-bottom: 20px;
}
.login-error {
background: $error-light;
border: 1px solid $error-border;
border-radius: $radius-sm;
padding: $space-4 $space-6;
margin-bottom: $space-6;
font-size: $font-size-md;
color: $error;
}
.login-form {
input[type='text'],
input[type='password'] {
width: 100%;
}
}
.login-btn {
width: 100%;
padding: $space-4 $space-8;
font-size: $font-size-lg;
margin-top: $space-1;
}
// Pagination
.pagination {
@include flex(row, center, center, $space-1);
margin-top: $space-8;
padding: $space-4 0;
}
.page-btn {
min-width: 28px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.page-ellipsis {
color: $text-2;
padding: 0 $space-2;
font-size: $font-size-md;
user-select: none;
}
// Help overlay
.help-overlay {
position: fixed;
inset: 0;
background: $media-overlay-medium;
@include flex-center;
z-index: 200;
animation: fade-in 0.1s ease-out;
}
.help-dialog {
background: $bg-2;
border: 1px solid $border;
border-radius: $radius-md;
padding: $space-8;
min-width: 300px;
max-width: 400px;
box-shadow: $shadow-lg;
h3 {
font-size: $font-size-3xl;
font-weight: $font-weight-semibold;
margin-bottom: $space-8;
}
}
.help-shortcuts {
@include flex(column, flex-start, stretch, $space-4);
margin-bottom: $space-8;
}
.shortcut-row {
@include flex(row, flex-start, center, $space-6);
kbd {
display: inline-block;
padding: $space-1 $space-4;
background: $bg-0;
border: 1px solid $border;
border-radius: $radius-sm;
font-family: $font-family-mono;
font-size: $font-size-base;
color: $text-0;
min-width: 32px;
text-align: center;
}
span {
font-size: $font-size-lg;
color: $text-1;
}
}
.help-close {
display: block;
width: 100%;
padding: 6px $space-6;
background: $bg-3;
border: 1px solid $border;
border-radius: $radius-sm;
color: $text-0;
font-size: $font-size-md;
cursor: pointer;
text-align: center;
&:hover {
background: $overlay-strong;
}
}

256
crates/pinakes-ui/assets/styles/_variables.scss Normal file
View file

@ -0,0 +1,256 @@
// Background colors
$bg-0: #111118;
$bg-1: #18181f;
$bg-2: #1f1f28;
$bg-3: #26263a;
// Border colors
$border-subtle: rgba(255, 255, 255, 0.06);
$border: rgba(255, 255, 255, 0.09);
$border-strong: rgba(255, 255, 255, 0.14);
// Text colors
$text-0: #dcdce4;
$text-1: #a0a0b8;
$text-2: #6c6c84;
$text-3: #4a4a5e;
// Accent colors
$accent: #7c7ef5;
$accent-dim: rgba(124, 126, 245, 0.15);
$accent-text: #9698f7;
$accent-hover: #8b8df7;
// Semantic colors
$success: #3ec97a;
$error: #e45858;
$warning: #d4a037;
// Derived semantic colors with transparency
$error-bg: rgba(228, 88, 88, 0.06);
$error-border: rgba(228, 88, 88, 0.2);
$error-text: #d47070;
$success-bg: rgba(62, 201, 122, 0.08);
$success-border: rgba(62, 201, 122, 0.2);
$warning-bg: rgba(212, 160, 55, 0.06);
$warning-border: rgba(212, 160, 55, 0.15);
// Type badge colors
$type-audio-bg: rgba(139, 92, 246, 0.1);
$type-audio-text: #9d8be0;
$type-video-bg: rgba(200, 72, 130, 0.1);
$type-video-text: #d07eaa;
$type-image-bg: rgba(34, 160, 80, 0.1);
$type-image-text: #5cb97a;
$type-document-bg: rgba(59, 120, 200, 0.1);
$type-document-text: #6ca0d4;
$type-text-bg: rgba(200, 160, 36, 0.1);
$type-text-text: #c4a840;
$type-other-bg: rgba(128, 128, 160, 0.08);
// Action badge colors (audit)
$action-updated-bg: rgba(59, 120, 200, 0.1);
$action-updated-text: #6ca0d4;
$action-collection-bg: rgba(34, 160, 80, 0.1);
$action-collection-text: #5cb97a;
$action-collection-remove-bg: rgba(212, 160, 55, 0.1);
$action-collection-remove-text: #c4a840;
$action-opened-bg: rgba(139, 92, 246, 0.1);
$action-opened-text: #9d8be0;
$action-scanned-bg: rgba(128, 128, 160, 0.08);
// Role badge colors
$role-admin-bg: rgba(139, 92, 246, 0.1);
$role-admin-text: #9d8be0;
$role-editor-bg: rgba(34, 160, 80, 0.1);
$role-editor-text: #5cb97a;
$role-viewer-bg: rgba(59, 120, 200, 0.1);
$role-viewer-text: #6ca0d4;
// Graph colors
$graph-node-fill: #4caf50;
$graph-node-stroke: #388e3c;
$graph-node-hover: #66bb6a;
$graph-node-selected: #5456d6;
$graph-edge-embed: #9d8be0;
// Overlay backgrounds
$overlay-light: rgba(255, 255, 255, 0.03);
$overlay-medium: rgba(255, 255, 255, 0.04);
$overlay-strong: rgba(255, 255, 255, 0.06);
$overlay-subtle: rgba(255, 255, 255, 0.02);
// Inverse overlays (for light backgrounds)
$overlay-inverse-light: rgba(0, 0, 0, 0.06);
$overlay-inverse-medium: rgba(0, 0, 0, 0.08);
$overlay-inverse-strong: rgba(0, 0, 0, 0.12);
// Semantic variants
$error-light: rgba(228, 88, 88, 0.08);
$error-medium: rgba(228, 88, 88, 0.1);
$error-border-light: rgba(228, 88, 88, 0.25);
$success-light: rgba(62, 201, 122, 0.1);
$info-bg: rgba(99, 102, 241, 0.08);
$info-bg-light: rgba(99, 102, 241, 0.12);
$accent-border: rgba(124, 126, 245, 0.2);
$purple-bg: rgba(124, 126, 245, 0.04);
$purple-light: rgba(139, 92, 246, 0.08);
$purple-border: rgba(139, 92, 246, 0.3);
$warning-light: rgba(212, 160, 55, 0.1);
$warning-medium: rgba(212, 160, 55, 0.12);
$green-light: rgba(76, 175, 80, 0.06);
$green-medium: rgba(76, 175, 80, 0.12);
$green-text: #4caf50;
// UI element backgrounds
$btn-danger-hover: rgba(228, 88, 88, 0.08);
$btn-ghost-hover: rgba(255, 255, 255, 0.04);
$btn-secondary-hover: rgba(255, 255, 255, 0.06);
// Media viewer overlays
$media-overlay-bg: rgba(0, 0, 0, 0.92);
$media-overlay-medium: rgba(0, 0, 0, 0.5);
$media-overlay-light: rgba(0, 0, 0, 0.3);
$media-controls-bg: rgba(0, 0, 0, 0.7);
// Image viewer
$image-viewer-toolbar-bg: rgba(0, 0, 0, 0.5);
$image-viewer-border: rgba(255, 255, 255, 0.08);
$image-viewer-btn-bg: rgba(255, 255, 255, 0.06);
$image-viewer-btn-border: rgba(255, 255, 255, 0.1);
$image-viewer-btn-hover: rgba(255, 255, 255, 0.12);
// Shadows
$drop-shadow: rgba(0, 0, 0, 0.5);
// Gradients
$gradient-accent-end: #7c7ef3;
$gradient-success-end: #66bb6a;
// Light theme
$light-bg-0: #f5f5f7;
$light-bg-1: #eeeef0;
$light-bg-2: #ffffff;
$light-bg-3: #e8e8ec;
$light-border-subtle: rgba(0, 0, 0, 0.06);
$light-border: rgba(0, 0, 0, 0.1);
$light-border-strong: rgba(0, 0, 0, 0.16);
$light-text-0: #1a1a2e;
$light-text-1: #555570;
$light-text-2: #8888a0;
$light-accent: #6366f1;
$light-accent-dim: rgba(99, 102, 241, 0.1);
$light-accent-text: #4f52e8;
// Spacing
$space-1: 2px;
$space-2: 4px;
$space-3: 6px;
$space-4: 8px;
$space-5: 10px;
$space-6: 12px;
$space-7: 14px;
$space-8: 16px;
$space-10: 20px;
$space-12: 24px;
$space-16: 32px;
$space-20: 40px;
$space-24: 48px;
// Border radius
$radius-sm: 3px;
$radius: 5px;
$radius-md: 7px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-full: 50%;
// Shadows
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
$shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
$shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.45);
$shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
$light-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
$light-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
$light-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.12);
// Typography
$font-family-base: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
$font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
$font-family-mono-alt: 'Menlo', 'Monaco', 'Courier New', monospace;
$font-size-xs: 9px;
$font-size-sm: 10px;
$font-size-base: 11px;
$font-size-md: 12px;
$font-size-lg: 13px;
$font-size-xl: 14px;
$font-size-2xl: 15px;
$font-size-3xl: 16px;
$font-size-4xl: 18px;
$font-size-5xl: 20px;
$font-size-6xl: 28px;
$font-size-7xl: 32px;
$font-size-8xl: 48px;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$line-height-tight: 1.2;
$line-height-base: 1.3;
$line-height-normal: 1.4;
$line-height-relaxed: 1.5;
$line-height-loose: 1.7;
$letter-spacing-tight: -0.4px;
$letter-spacing-normal: 0;
$letter-spacing-wide: 0.03em;
$letter-spacing-wider: 0.04em;
$letter-spacing-widest: 0.06em;
$letter-spacing-uppercase: 0.5px;
// Layout dimensions
$sidebar-width: 220px;
$sidebar-collapsed-width: 48px;
$header-height: 48px;
// Z-index scale
$z-base: 0;
$z-dropdown: 10;
$z-sticky: 20;
$z-fixed: 30;
$z-modal-backdrop: 100;
$z-modal: 200;
$z-toast: 300;
// Transitions
$transition-fast: 0.08s;
$transition-base: 0.1s;
$transition-slow: 0.15s;
$transition-slower: 0.2s;
$transition-timing-default: ease;
$transition-timing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

13
crates/pinakes-ui/assets/styles/main.scss Normal file
View file

@ -0,0 +1,13 @@
// Main stylesheet entry point
// Imports all partials in order
@use 'variables' as *;
@use 'mixins' as *;
@use 'base';
@use 'layout';
@use 'components';
@use 'media';
@use 'sections';
@use 'audit';
@use 'graph';
@use 'themes';

27
crates/pinakes-ui/build.rs Normal file
View file

@ -0,0 +1,27 @@
use std::{fs, path::Path};
fn main() {
// Compile SCSS to CSS
let scss_dir = Path::new("assets/styles");
let css_dir = Path::new("assets/css");
// Create CSS output directory if it doesn't exist
fs::create_dir_all(css_dir).expect("Failed to create CSS directory");
// Compile main.scss
let scss_input = scss_dir.join("main.scss");
let css_output = css_dir.join("main.css");
if scss_input.exists() {
let css = grass::from_path(
&scss_input,
&grass::Options::default().style(grass::OutputStyle::Compressed),
)
.expect("Failed to compile SCSS");
fs::write(&css_output, css).expect("Failed to write CSS");
// Tell cargo to rerun if SCSS files change
println!("cargo:rerun-if-changed=assets/styles");
}
}

4958
crates/pinakes-ui/src/app.rs
View file

File diff suppressed because it is too large Load diff

2202
crates/pinakes-ui/src/client.rs
View file

File diff suppressed because it is too large Load diff

216
crates/pinakes-ui/src/components/audit.rs
View file

@ -1,124 +1,126 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::format_timestamp;
use super::{
pagination::Pagination as PaginationControls,
utils::format_timestamp,
};
use crate::client::AuditEntryResponse;
const ACTION_OPTIONS: &[&str] = &[
"All",
"imported",
"deleted",
"tagged",
"untagged",
"updated",
"added_to_collection",
"removed_from_collection",
"opened",
"scanned",
"All",
"imported",
"deleted",
"tagged",
"untagged",
"updated",
"added_to_collection",
"removed_from_collection",
"opened",
"scanned",
];
#[component]
pub fn AuditLog(
entries: Vec<AuditEntryResponse>,
on_select: EventHandler<String>,
audit_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
audit_filter: String,
on_filter_change: EventHandler<String>,
entries: Vec<AuditEntryResponse>,
on_select: EventHandler<String>,
audit_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
audit_filter: String,
on_filter_change: EventHandler<String>,
) -> Element {
if entries.is_empty() {
return rsx! {
div { class: "empty-state",
h3 { class: "empty-title", "No audit entries" }
p { class: "empty-subtitle", "Activity will appear here as you use the application." }
}
};
}
rsx! {
div { class: "audit-controls",
select {
class: "filter-select",
value: "{audit_filter}",
onchange: move |evt: Event<FormData>| {
on_filter_change.call(evt.value().to_string());
},
for option in ACTION_OPTIONS.iter() {
option {
key: "{option}",
value: "{option}",
selected: audit_filter == *option,
"{option}"
}
}
}
if entries.is_empty() {
return rsx! {
div { class: "empty-state",
h3 { class: "empty-title", "No audit entries" }
p { class: "empty-subtitle", "Activity will appear here as you use the application." }
}
};
}
table { class: "data-table",
thead {
tr {
th { "Action" }
th { "Media ID" }
th { "Details" }
th { "Timestamp" }
}
}
tbody {
for entry in entries.iter() {
{
let media_id = entry.media_id.clone().unwrap_or_default();
let truncated_id = if media_id.len() > 8 {
format!("{}...", &media_id[..8])
} else {
media_id.clone()
};
let details = entry.details.clone().unwrap_or_default();
let action_class = action_badge_class(&entry.action);
let timestamp = format_timestamp(&entry.timestamp);
let click_id = media_id.clone();
let has_media_id = !media_id.is_empty();
rsx! {
tr { key: "{entry.id}",
td {
span { class: "type-badge {action_class}", "{entry.action}" }
}
td {
if has_media_id {
span {
class: "mono clickable",
onclick: move |_| {
on_select.call(click_id.clone());
},
"{truncated_id}"
}
} else {
span { class: "mono", "{truncated_id}" }
}
}
td { "{details}" }
td { "{timestamp}" }
}
}
}
}
}
}
rsx! {
div { class: "audit-controls",
select {
class: "filter-select",
value: "{audit_filter}",
onchange: move |evt: Event<FormData>| {
on_filter_change.call(evt.value().to_string());
},
for option in ACTION_OPTIONS.iter() {
option {
key: "{option}",
value: "{option}",
selected: audit_filter == *option,
"{option}"
}
}
}
}
PaginationControls { current_page: audit_page, total_pages, on_page_change }
}
table { class: "data-table",
thead {
tr {
th { "Action" }
th { "Media ID" }
th { "Details" }
th { "Timestamp" }
}
}
tbody {
for entry in entries.iter() {
{
let media_id = entry.media_id.clone().unwrap_or_default();
let truncated_id = if media_id.len() > 8 {
format!("{}...", &media_id[..8])
} else {
media_id.clone()
};
let details = entry.details.clone().unwrap_or_default();
let action_class = action_badge_class(&entry.action);
let timestamp = format_timestamp(&entry.timestamp);
let click_id = media_id.clone();
let has_media_id = !media_id.is_empty();
rsx! {
tr { key: "{entry.id}",
td {
span { class: "type-badge {action_class}", "{entry.action}" }
}
td {
if has_media_id {
span {
class: "mono clickable",
onclick: move |_| {
on_select.call(click_id.clone());
},
"{truncated_id}"
}
} else {
span { class: "mono", "{truncated_id}" }
}
}
td { "{details}" }
td { "{timestamp}" }
}
}
}
}
}
}
PaginationControls { current_page: audit_page, total_pages, on_page_change }
}
}
fn action_badge_class(action: &str) -> &'static str {
match action {
"imported" => "type-image",
"deleted" => "action-danger",
"tagged" | "untagged" => "tag-badge",
"updated" => "action-updated",
"added_to_collection" => "action-collection",
"removed_from_collection" => "action-collection-remove",
"opened" => "action-opened",
"scanned" => "action-scanned",
_ => "type-other",
}
match action {
"imported" => "type-image",
"deleted" => "action-danger",
"tagged" | "untagged" => "tag-badge",
"updated" => "action-updated",
"added_to_collection" => "action-collection",
"removed_from_collection" => "action-collection-remove",
"opened" => "action-opened",
"scanned" => "action-scanned",
_ => "type-other",
}
}

696
crates/pinakes-ui/src/components/backlinks_panel.rs
View file

@ -7,374 +7,384 @@ use crate::client::{ApiClient, BacklinkItem, BacklinksResponse};
/// Panel displaying backlinks (incoming links) to a media item.
#[component]
pub fn BacklinksPanel(
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
) -> Element {
let mut backlinks = use_signal(|| Option::<BacklinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| false);
let mut reindexing = use_signal(|| false);
let mut reindex_message = use_signal(|| Option::<(String, bool)>::None); // (message, is_error)
let mut backlinks = use_signal(|| Option::<BacklinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| false);
let mut reindexing = use_signal(|| false);
let mut reindex_message = use_signal(|| Option::<(String, bool)>::None); // (message, is_error)
// Clone values for manual fetch function (used after reindex)
let fetch_client = client.clone();
let fetch_media_id = media_id.clone();
// Clone values for manual fetch function (used after reindex)
let fetch_client = client.clone();
let fetch_media_id = media_id.clone();
// Clone for reindex handler
let reindex_client = client.clone();
let reindex_media_id = media_id.clone();
// Clone for reindex handler
let reindex_client = client.clone();
let reindex_media_id = media_id.clone();
// Fetch backlinks using use_resource to automatically track media_id changes
// This ensures the backlinks are reloaded whenever we navigate to a different note
let backlinks_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move { client.get_backlinks(&id).await }
});
// Fetch backlinks using use_resource to automatically track media_id changes
// This ensures the backlinks are reloaded whenever we navigate to a different
// note
let backlinks_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move { client.get_backlinks(&id).await }
});
// Update local state based on resource state
use_effect(move || match &*backlinks_resource.read_unchecked() {
Some(Ok(resp)) => {
backlinks.set(Some(resp.clone()));
loading.set(false);
error.set(None);
}
Some(Err(e)) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
loading.set(false);
}
None => {
loading.set(true);
}
});
// Fetch backlinks function for manual refresh (like after reindex)
let fetch_backlinks = {
let client = fetch_client;
let id = fetch_media_id;
move || {
let client = client.clone();
let id = id.clone();
spawn(async move {
loading.set(true);
error.set(None);
match client.get_backlinks(&id).await {
Ok(resp) => {
backlinks.set(Some(resp));
}
Err(e) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
}
}
loading.set(false);
});
}
};
// Reindex links handler
let on_reindex = {
let client = reindex_client;
let id = reindex_media_id;
let fetch_backlinks = fetch_backlinks.clone();
move |evt: MouseEvent| {
evt.stop_propagation(); // Don't toggle collapse
let client = client.clone();
let id = id.clone();
let fetch_backlinks = fetch_backlinks.clone();
spawn(async move {
reindexing.set(true);
reindex_message.set(None);
match client.reindex_links(&id).await {
Ok(resp) => {
reindex_message.set(Some((
format!("Reindexed: {} links extracted", resp.links_extracted),
false,
)));
// Refresh backlinks after reindex
fetch_backlinks();
}
Err(e) => {
reindex_message.set(Some((format!("Reindex failed: {e}"), true)));
}
}
reindexing.set(false);
});
}
};
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let is_reindexing = *reindexing.read();
let backlink_data = backlinks.read();
let count = backlink_data.as_ref().map(|b| b.count).unwrap_or(0);
rsx! {
div { class: "backlinks-panel",
// Header with toggle
div {
class: "backlinks-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "backlinks-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "backlinks-title", "Backlinks" }
span { class: "backlinks-count", "({count})" }
// Reindex button
button {
class: "backlinks-reindex-btn",
title: "Re-extract links from this note",
disabled: is_reindexing,
onclick: on_reindex,
if is_reindexing {
span { class: "spinner-tiny" }
} else {
"\u{21bb}" // Refresh symbol
}
}
}
if !is_collapsed {
div { class: "backlinks-content",
// Show reindex message if present
if let Some((ref msg, is_err)) = *reindex_message.read() {
div { class: if is_err { "backlinks-message error" } else { "backlinks-message success" },
"{msg}"
}
}
if is_loading {
div { class: "backlinks-loading",
div { class: "spinner-small" }
"Loading backlinks..."
}
}
if let Some(ref err) = *error.read() {
div { class: "backlinks-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *backlink_data {
if data.backlinks.is_empty() {
div { class: "backlinks-empty", "No other notes link to this one." }
} else {
ul { class: "backlinks-list",
for backlink in &data.backlinks {
BacklinkItemView {
backlink: backlink.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
}
}
}
}
// Update local state based on resource state
use_effect(move || {
match &*backlinks_resource.read_unchecked() {
Some(Ok(resp)) => {
backlinks.set(Some(resp.clone()));
loading.set(false);
error.set(None);
},
Some(Err(e)) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
loading.set(false);
},
None => {
loading.set(true);
},
}
});
// Fetch backlinks function for manual refresh (like after reindex)
let fetch_backlinks = {
let client = fetch_client;
let id = fetch_media_id;
move || {
let client = client.clone();
let id = id.clone();
spawn(async move {
loading.set(true);
error.set(None);
match client.get_backlinks(&id).await {
Ok(resp) => {
backlinks.set(Some(resp));
},
Err(e) => {
error.set(Some(format!("Failed to load backlinks: {e}")));
},
}
loading.set(false);
});
}
};
// Reindex links handler
let on_reindex = {
let client = reindex_client;
let id = reindex_media_id;
let fetch_backlinks = fetch_backlinks.clone();
move |evt: MouseEvent| {
evt.stop_propagation(); // Don't toggle collapse
let client = client.clone();
let id = id.clone();
let fetch_backlinks = fetch_backlinks.clone();
spawn(async move {
reindexing.set(true);
reindex_message.set(None);
match client.reindex_links(&id).await {
Ok(resp) => {
reindex_message.set(Some((
format!("Reindexed: {} links extracted", resp.links_extracted),
false,
)));
// Refresh backlinks after reindex
fetch_backlinks();
},
Err(e) => {
reindex_message.set(Some((format!("Reindex failed: {e}"), true)));
},
}
reindexing.set(false);
});
}
};
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let is_reindexing = *reindexing.read();
let backlink_data = backlinks.read();
let count = backlink_data.as_ref().map(|b| b.count).unwrap_or(0);
rsx! {
div { class: "backlinks-panel",
// Header with toggle
div {
class: "backlinks-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "backlinks-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "backlinks-title", "Backlinks" }
span { class: "backlinks-count", "({count})" }
// Reindex button
button {
class: "backlinks-reindex-btn",
title: "Re-extract links from this note",
disabled: is_reindexing,
onclick: on_reindex,
if is_reindexing {
span { class: "spinner-tiny" }
} else {
"\u{21bb}" // Refresh symbol
}
}
}
if !is_collapsed {
div { class: "backlinks-content",
// Show reindex message if present
if let Some((ref msg, is_err)) = *reindex_message.read() {
div { class: if is_err { "backlinks-message error" } else { "backlinks-message success" },
"{msg}"
}
}
if is_loading {
div { class: "backlinks-loading",
div { class: "spinner-small" }
"Loading backlinks..."
}
}
if let Some(ref err) = *error.read() {
div { class: "backlinks-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *backlink_data {
if data.backlinks.is_empty() {
div { class: "backlinks-empty", "No other notes link to this one." }
} else {
ul { class: "backlinks-list",
for backlink in &data.backlinks {
BacklinkItemView {
backlink: backlink.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
}
}
}
}
}
}
/// Individual backlink item view.
#[component]
fn BacklinkItemView(backlink: BacklinkItem, on_navigate: EventHandler<String>) -> Element {
let source_id = backlink.source_id.clone();
let title = backlink
.source_title
.clone()
.unwrap_or_else(|| backlink.source_path.clone());
let context = backlink.context.clone();
let line_number = backlink.line_number;
let link_type = backlink.link_type.clone();
fn BacklinkItemView(
backlink: BacklinkItem,
on_navigate: EventHandler<String>,
) -> Element {
let source_id = backlink.source_id.clone();
let title = backlink
.source_title
.clone()
.unwrap_or_else(|| backlink.source_path.clone());
let context = backlink.context.clone();
let line_number = backlink.line_number;
let link_type = backlink.link_type.clone();
rsx! {
li {
class: "backlink-item",
onclick: move |_| on_navigate.call(source_id.clone()),
div { class: "backlink-source",
span { class: "backlink-title", "{title}" }
span { class: "backlink-type-badge backlink-type-{link_type}", "{link_type}" }
}
if let Some(ref ctx) = context {
div { class: "backlink-context",
if let Some(ln) = line_number {
span { class: "backlink-line", "L{ln}: " }
}
"\"{ctx}\""
}
}
}
}
rsx! {
li {
class: "backlink-item",
onclick: move |_| on_navigate.call(source_id.clone()),
div { class: "backlink-source",
span { class: "backlink-title", "{title}" }
span { class: "backlink-type-badge backlink-type-{link_type}", "{link_type}" }
}
if let Some(ref ctx) = context {
div { class: "backlink-context",
if let Some(ln) = line_number {
span { class: "backlink-line", "L{ln}: " }
}
"\"{ctx}\""
}
}
}
}
}
/// Outgoing links panel showing what this note links to.
#[component]
pub fn OutgoingLinksPanel(
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
media_id: String,
client: ApiClient,
on_navigate: EventHandler<String>,
) -> Element {
let mut links = use_signal(|| Option::<crate::client::OutgoingLinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| true); // Collapsed by default
let mut global_unresolved = use_signal(|| Option::<u64>::None);
let mut links =
use_signal(|| Option::<crate::client::OutgoingLinksResponse>::None);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut collapsed = use_signal(|| true); // Collapsed by default
let mut global_unresolved = use_signal(|| Option::<u64>::None);
// Fetch outgoing links using use_resource to automatically track media_id changes
// This ensures the links are reloaded whenever we navigate to a different note
let links_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move {
let links_result = client.get_outgoing_links(&id).await;
let unresolved_count = client.get_unresolved_links_count().await.ok();
(links_result, unresolved_count)
}
});
// Update local state based on resource state
use_effect(move || match &*links_resource.read_unchecked() {
Some((Ok(resp), unresolved_count)) => {
links.set(Some(resp.clone()));
loading.set(false);
error.set(None);
if let Some(count) = unresolved_count {
global_unresolved.set(Some(*count));
}
}
Some((Err(e), _)) => {
error.set(Some(format!("Failed to load links: {e}")));
loading.set(false);
}
None => {
loading.set(true);
}
});
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let link_data = links.read();
let count = link_data.as_ref().map(|l| l.count).unwrap_or(0);
let unresolved_in_note = link_data
.as_ref()
.map(|l| l.links.iter().filter(|link| !link.is_resolved).count())
.unwrap_or(0);
rsx! {
div { class: "outgoing-links-panel",
// Header with toggle
div {
class: "outgoing-links-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "outgoing-links-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "outgoing-links-title", "Outgoing Links" }
span { class: "outgoing-links-count", "({count})" }
if unresolved_in_note > 0 {
span {
class: "outgoing-links-unresolved-badge",
title: "Unresolved links in this note",
"{unresolved_in_note} unresolved"
}
}
}
if !is_collapsed {
div { class: "outgoing-links-content",
if is_loading {
div { class: "outgoing-links-loading",
div { class: "spinner-small" }
"Loading links..."
}
}
if let Some(ref err) = *error.read() {
div { class: "outgoing-links-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *link_data {
if data.links.is_empty() {
div { class: "outgoing-links-empty", "This note has no outgoing links." }
} else {
ul { class: "outgoing-links-list",
for link in &data.links {
OutgoingLinkItemView {
link: link.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
// Show global unresolved count if any
if let Some(global_count) = *global_unresolved.read() {
if global_count > 0 {
div { class: "outgoing-links-global-unresolved",
span { class: "unresolved-icon", "\u{26a0}" }
" {global_count} unresolved links across all notes"
}
}
}
}
}
}
}
// Fetch outgoing links using use_resource to automatically track media_id
// changes This ensures the links are reloaded whenever we navigate to a
// different note
let links_resource = use_resource(move || {
let client = client.clone();
let id = media_id.clone();
async move {
let links_result = client.get_outgoing_links(&id).await;
let unresolved_count = client.get_unresolved_links_count().await.ok();
(links_result, unresolved_count)
}
});
// Update local state based on resource state
use_effect(move || {
match &*links_resource.read_unchecked() {
Some((Ok(resp), unresolved_count)) => {
links.set(Some(resp.clone()));
loading.set(false);
error.set(None);
if let Some(count) = unresolved_count {
global_unresolved.set(Some(*count));
}
},
Some((Err(e), _)) => {
error.set(Some(format!("Failed to load links: {e}")));
loading.set(false);
},
None => {
loading.set(true);
},
}
});
let is_loading = *loading.read();
let is_collapsed = *collapsed.read();
let link_data = links.read();
let count = link_data.as_ref().map(|l| l.count).unwrap_or(0);
let unresolved_in_note = link_data
.as_ref()
.map(|l| l.links.iter().filter(|link| !link.is_resolved).count())
.unwrap_or(0);
rsx! {
div { class: "outgoing-links-panel",
// Header with toggle
div {
class: "outgoing-links-header",
onclick: move |_| {
let current = *collapsed.read();
collapsed.set(!current);
},
span { class: "outgoing-links-toggle",
if is_collapsed {
"\u{25b6}"
} else {
"\u{25bc}"
}
}
span { class: "outgoing-links-title", "Outgoing Links" }
span { class: "outgoing-links-count", "({count})" }
if unresolved_in_note > 0 {
span {
class: "outgoing-links-unresolved-badge",
title: "Unresolved links in this note",
"{unresolved_in_note} unresolved"
}
}
}
if !is_collapsed {
div { class: "outgoing-links-content",
if is_loading {
div { class: "outgoing-links-loading",
div { class: "spinner-small" }
"Loading links..."
}
}
if let Some(ref err) = *error.read() {
div { class: "outgoing-links-error", "{err}" }
}
if !is_loading && error.read().is_none() {
if let Some(ref data) = *link_data {
if data.links.is_empty() {
div { class: "outgoing-links-empty", "This note has no outgoing links." }
} else {
ul { class: "outgoing-links-list",
for link in &data.links {
OutgoingLinkItemView {
link: link.clone(),
on_navigate: on_navigate.clone(),
}
}
}
}
}
// Show global unresolved count if any
if let Some(global_count) = *global_unresolved.read() {
if global_count > 0 {
div { class: "outgoing-links-global-unresolved",
span { class: "unresolved-icon", "\u{26a0}" }
" {global_count} unresolved links across all notes"
}
}
}
}
}
}
}
}
}
/// Individual outgoing link item view.
#[component]
fn OutgoingLinkItemView(
link: crate::client::OutgoingLinkItem,
on_navigate: EventHandler<String>,
link: crate::client::OutgoingLinkItem,
on_navigate: EventHandler<String>,
) -> Element {
let target_id = link.target_id.clone();
let target_path = link.target_path.clone();
let link_text = link.link_text.clone();
let is_resolved = link.is_resolved;
let link_type = link.link_type.clone();
let target_id = link.target_id.clone();
let target_path = link.target_path.clone();
let link_text = link.link_text.clone();
let is_resolved = link.is_resolved;
let link_type = link.link_type.clone();
let display_text = link_text.unwrap_or_else(|| target_path.clone());
let resolved_class = if is_resolved {
"resolved"
} else {
"unresolved"
};
let display_text = link_text.unwrap_or_else(|| target_path.clone());
let resolved_class = if is_resolved {
"resolved"
} else {
"unresolved"
};
rsx! {
li {
class: "outgoing-link-item {resolved_class}",
onclick: move |_| {
if let Some(ref id) = target_id {
on_navigate.call(id.clone());
}
},
div { class: "outgoing-link-target",
span { class: "outgoing-link-text", "{display_text}" }
span { class: "outgoing-link-type-badge link-type-{link_type}", "{link_type}" }
if !is_resolved {
span { class: "unresolved-badge", "unresolved" }
}
}
}
}
rsx! {
li {
class: "outgoing-link-item {resolved_class}",
onclick: move |_| {
if let Some(ref id) = target_id {
on_navigate.call(id.clone());
}
},
div { class: "outgoing-link-target",
span { class: "outgoing-link-text", "{display_text}" }
span { class: "outgoing-link-type-badge link-type-{link_type}", "{link_type}" }
if !is_resolved {
span { class: "unresolved-badge", "unresolved" }
}
}
}
}
}

64
crates/pinakes-ui/src/components/breadcrumb.rs
View file

@ -2,41 +2,41 @@ use dioxus::prelude::*;
#[derive(Debug, Clone, PartialEq)]
pub struct BreadcrumbItem {
pub label: String,
pub view: Option<String>,
pub label: String,
pub view: Option<String>,
}
#[component]
pub fn Breadcrumb(
items: Vec<BreadcrumbItem>,
on_navigate: EventHandler<Option<String>>,
items: Vec<BreadcrumbItem>,
on_navigate: EventHandler<Option<String>>,
) -> Element {
rsx! {
nav { class: "breadcrumb",
for (i , item) in items.iter().enumerate() {
if i > 0 {
span { class: "breadcrumb-sep", " > " }
}
if i < items.len() - 1 {
{
let view = item.view.clone();
let label = item.label.clone();
rsx! {
a {
class: "breadcrumb-link",
href: "#",
onclick: move |e: Event<MouseData>| {
e.prevent_default();
on_navigate.call(view.clone());
},
"{label}"
}
}
}
} else {
span { class: "breadcrumb-current", "{item.label}" }
}
}
}
}
rsx! {
nav { class: "breadcrumb",
for (i , item) in items.iter().enumerate() {
if i > 0 {
span { class: "breadcrumb-sep", " > " }
}
if i < items.len() - 1 {
{
let view = item.view.clone();
let label = item.label.clone();
rsx! {
a {
class: "breadcrumb-link",
href: "#",
onclick: move |e: Event<MouseData>| {
e.prevent_default();
on_navigate.call(view.clone());
},
"{label}"
}
}
}
} else {
span { class: "breadcrumb-current", "{item.label}" }
}
}
}
}
}

551
crates/pinakes-ui/src/components/collections.rs
View file

@ -5,101 +5,101 @@ use crate::client::{CollectionResponse, MediaResponse};
#[component]
pub fn Collections(
collections: Vec<CollectionResponse>,
collection_members: Vec<MediaResponse>,
viewing_collection: Option<String>,
on_create: EventHandler<(String, String, Option<String>, Option<String>)>,
on_delete: EventHandler<String>,
on_view_members: EventHandler<String>,
on_back_to_list: EventHandler<()>,
on_remove_member: EventHandler<(String, String)>,
on_select: EventHandler<String>,
on_add_member: EventHandler<(String, String)>,
all_media: Vec<MediaResponse>,
collections: Vec<CollectionResponse>,
collection_members: Vec<MediaResponse>,
viewing_collection: Option<String>,
on_create: EventHandler<(String, String, Option<String>, Option<String>)>,
on_delete: EventHandler<String>,
on_view_members: EventHandler<String>,
on_back_to_list: EventHandler<()>,
on_remove_member: EventHandler<(String, String)>,
on_select: EventHandler<String>,
on_add_member: EventHandler<(String, String)>,
all_media: Vec<MediaResponse>,
) -> Element {
let mut new_name = use_signal(String::new);
let mut new_kind = use_signal(|| String::from("manual"));
let mut new_description = use_signal(String::new);
let mut new_filter_query = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut show_add_modal = use_signal(|| false);
let mut new_name = use_signal(String::new);
let mut new_kind = use_signal(|| String::from("manual"));
let mut new_description = use_signal(String::new);
let mut new_filter_query = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut show_add_modal = use_signal(|| false);
// Detail view: viewing a specific collection's members
if let Some(ref col_id) = viewing_collection {
let col_name = collections
.iter()
.find(|c| &c.id == col_id)
.map(|c| c.name.clone())
.unwrap_or_else(|| col_id.clone());
// Detail view: viewing a specific collection's members
if let Some(ref col_id) = viewing_collection {
let col_name = collections
.iter()
.find(|c| &c.id == col_id)
.map(|c| c.name.clone())
.unwrap_or_else(|| col_id.clone());
let back_click = move |_| on_back_to_list.call(());
let back_click = move |_| on_back_to_list.call(());
// Collect IDs of current members to filter available media
let member_ids: Vec<String> = collection_members.iter().map(|m| m.id.clone()).collect();
let available_media: Vec<&MediaResponse> = all_media
.iter()
.filter(|m| !member_ids.contains(&m.id))
.collect();
// Collect IDs of current members to filter available media
let member_ids: Vec<String> =
collection_members.iter().map(|m| m.id.clone()).collect();
let available_media: Vec<&MediaResponse> = all_media
.iter()
.filter(|m| !member_ids.contains(&m.id))
.collect();
let modal_col_id = col_id.clone();
let modal_col_id = col_id.clone();
return rsx! {
button { class: "btn btn-ghost mb-16", onclick: back_click, "\u{2190} Back to Collections" }
return rsx! {
button { class: "btn btn-ghost mb-16", onclick: back_click, "\u{2190} Back to Collections" }
h3 { class: "mb-16", "{col_name}" }
h3 { class: "mb-16", "{col_name}" }
div { class: "form-row mb-16",
button {
class: "btn btn-primary",
onclick: move |_| show_add_modal.set(true),
"Add Media"
}
div { class: "form-row mb-16",
button {
class: "btn btn-primary",
onclick: move |_| show_add_modal.set(true),
"Add Media"
}
}
if collection_members.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "This collection has no members." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
th { "" }
}
if collection_members.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "This collection has no members." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
th { "" }
}
tbody {
for item in collection_members.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let remove_cid = col_id.clone();
let remove_mid = item.id.clone();
let row_click = {
let mid = item.id.clone();
move |_| on_select.call(mid.clone())
};
rsx! {
tr { key: "{item.id}", class: "clickable-row", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
td {
button {
class: "btn btn-danger btn-sm",
onclick: move |e: Event<MouseData>| {
e.stop_propagation();
on_remove_member.call((remove_cid.clone(), remove_mid.clone()));
},
"Remove"
}
}
tbody {
for item in collection_members.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let remove_cid = col_id.clone();
let remove_mid = item.id.clone();
let row_click = {
let mid = item.id.clone();
move |_| on_select.call(mid.clone())
};
rsx! {
tr { key: "{item.id}", class: "clickable-row", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
td {
button {
class: "btn btn-danger btn-sm",
onclick: move |e: Event<MouseData>| {
e.stop_propagation();
on_remove_member.call((remove_cid.clone(), remove_mid.clone()));
},
"Remove"
}
}
}
@ -108,56 +108,56 @@ pub fn Collections(
}
}
}
}
// Add Media modal
if *show_add_modal.read() {
// Add Media modal
if *show_add_modal.read() {
div {
class: "modal-overlay",
onclick: move |_| show_add_modal.set(false),
div {
class: "modal-overlay",
onclick: move |_| show_add_modal.set(false),
div {
class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
div { class: "modal-header",
h3 { "Add Media to Collection" }
button {
class: "btn btn-ghost",
onclick: move |_| show_add_modal.set(false),
"\u{2715}"
}
class: "modal",
onclick: move |e: Event<MouseData>| e.stop_propagation(),
div { class: "modal-header",
h3 { "Add Media to Collection" }
button {
class: "btn btn-ghost",
onclick: move |_| show_add_modal.set(false),
"\u{2715}"
}
div { class: "modal-body",
if available_media.is_empty() {
p { "No media available to add." }
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
}
}
div { class: "modal-body",
if available_media.is_empty() {
p { "No media available to add." }
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
}
tbody {
for media in available_media.iter() {
{
let artist = media.artist.clone().unwrap_or_default();
let badge_class = type_badge_class(&media.media_type);
let add_click = {
let cid = modal_col_id.clone();
let mid = media.id.clone();
move |_| {
on_add_member.call((cid.clone(), mid.clone()));
show_add_modal.set(false);
}
};
rsx! {
tr { key: "{media.id}", class: "clickable-row", onclick: add_click,
td { "{media.file_name}" }
td {
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
td { "{artist}" }
}
tbody {
for media in available_media.iter() {
{
let artist = media.artist.clone().unwrap_or_default();
let badge_class = type_badge_class(&media.media_type);
let add_click = {
let cid = modal_col_id.clone();
let mid = media.id.clone();
move |_| {
on_add_member.call((cid.clone(), mid.clone()));
show_add_modal.set(false);
}
};
rsx! {
tr { key: "{media.id}", class: "clickable-row", onclick: add_click,
td { "{media.file_name}" }
td {
span { class: "type-badge {badge_class}", "{media.media_type}" }
}
td { "{artist}" }
}
}
}
@ -168,155 +168,156 @@ pub fn Collections(
}
}
}
};
}
// List view: show all collections with create form
let is_virtual = *new_kind.read() == "virtual";
let create_click = move |_| {
let name = new_name.read().clone();
if name.is_empty() {
return;
}
let kind = new_kind.read().clone();
let desc = {
let d = new_description.read().clone();
if d.is_empty() { None } else { Some(d) }
};
let filter = {
let f = new_filter_query.read().clone();
if f.is_empty() { None } else { Some(f) }
};
on_create.call((name, kind, desc, filter));
new_name.set(String::new());
new_kind.set(String::from("manual"));
new_description.set(String::new());
new_filter_query.set(String::new());
};
}
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Collections" }
}
// List view: show all collections with create form
let is_virtual = *new_kind.read() == "virtual";
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Collection name...",
value: "{new_name}",
oninput: move |e| new_name.set(e.value()),
}
select {
value: "{new_kind}",
onchange: move |e| new_kind.set(e.value()),
option { value: "manual", "Manual" }
option { value: "virtual", "Virtual" }
}
input {
r#type: "text",
placeholder: "Description (optional)...",
value: "{new_description}",
oninput: move |e| new_description.set(e.value()),
}
}
if is_virtual {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Filter query for virtual collection...",
value: "{new_filter_query}",
oninput: move |e| new_filter_query.set(e.value()),
}
}
}
div { class: "form-row mb-16",
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if collections.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No collections yet. Create one above." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Kind" }
th { "Description" }
th { "" }
th { "" }
}
}
tbody {
for col in collections.iter() {
{
let desc = col.description.clone().unwrap_or_default();
let kind_class = if col.kind == "virtual" {
"type-document"
} else {
"type-other"
};
let view_click = {
let id = col.id.clone();
move |_| on_view_members.call(id.clone())
};
let col_id_for_delete = col.id.clone();
let is_confirming = confirm_delete
.read()
.as_ref()
.map(|id| id == &col.id)
.unwrap_or(false);
rsx! {
tr { key: "{col.id}",
td { "{col.name}" }
td {
span { class: "type-badge {kind_class}", "{col.kind}" }
}
td { "{desc}" }
td {
button { class: "btn btn-sm btn-secondary", onclick: view_click, "View" }
}
td {
if is_confirming {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| {
on_delete.call(id.clone());
confirm_delete.set(None);
}
},
"Confirm"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
let create_click = move |_| {
let name = new_name.read().clone();
if name.is_empty() {
return;
}
let kind = new_kind.read().clone();
let desc = {
let d = new_description.read().clone();
if d.is_empty() { None } else { Some(d) }
};
let filter = {
let f = new_filter_query.read().clone();
if f.is_empty() { None } else { Some(f) }
};
on_create.call((name, kind, desc, filter));
new_name.set(String::new());
new_kind.set(String::from("manual"));
new_description.set(String::new());
new_filter_query.set(String::new());
};
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Collections" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Collection name...",
value: "{new_name}",
oninput: move |e| new_name.set(e.value()),
}
select {
value: "{new_kind}",
onchange: move |e| new_kind.set(e.value()),
option { value: "manual", "Manual" }
option { value: "virtual", "Virtual" }
}
input {
r#type: "text",
placeholder: "Description (optional)...",
value: "{new_description}",
oninput: move |e| new_description.set(e.value()),
}
}
if is_virtual {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Filter query for virtual collection...",
value: "{new_filter_query}",
oninput: move |e| new_filter_query.set(e.value()),
}
}
}
div { class: "form-row mb-16",
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if collections.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No collections yet. Create one above." }
}
} else {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Kind" }
th { "Description" }
th { "" }
th { "" }
}
}
tbody {
for col in collections.iter() {
{
let desc = col.description.clone().unwrap_or_default();
let kind_class = if col.kind == "virtual" {
"type-document"
} else {
"type-other"
};
let view_click = {
let id = col.id.clone();
move |_| on_view_members.call(id.clone())
};
let col_id_for_delete = col.id.clone();
let is_confirming = confirm_delete
.read()
.as_ref()
.map(|id| id == &col.id)
.unwrap_or(false);
rsx! {
tr { key: "{col.id}",
td { "{col.name}" }
td {
span { class: "type-badge {kind_class}", "{col.kind}" }
}
td { "{desc}" }
td {
button { class: "btn btn-sm btn-secondary", onclick: view_click, "View" }
}
td {
if is_confirming {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| {
on_delete.call(id.clone());
confirm_delete.set(None);
}
},
"Confirm"
}
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else {
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = col_id_for_delete.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}

358
crates/pinakes-ui/src/components/database.rs
View file

@ -5,191 +5,191 @@ use crate::client::DatabaseStatsResponse;
#[component]
pub fn Database(
stats: Option<DatabaseStatsResponse>,
on_refresh: EventHandler<()>,
on_vacuum: EventHandler<()>,
on_clear: EventHandler<()>,
on_backup: EventHandler<String>,
stats: Option<DatabaseStatsResponse>,
on_refresh: EventHandler<()>,
on_vacuum: EventHandler<()>,
on_clear: EventHandler<()>,
on_backup: EventHandler<String>,
) -> Element {
let mut confirm_clear = use_signal(|| false);
let mut confirm_vacuum = use_signal(|| false);
let mut backup_path = use_signal(String::new);
let mut confirm_clear = use_signal(|| false);
let mut confirm_vacuum = use_signal(|| false);
let mut backup_path = use_signal(String::new);
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Database Overview" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
rsx! {
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Database Overview" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
match stats.as_ref() {
Some(s) => {
let size_str = format_size(s.database_size_bytes);
rsx! {
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.media_count}" }
div { class: "stat-label", "Media Items" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.tag_count}" }
div { class: "stat-label", "Tags" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.collection_count}" }
div { class: "stat-label", "Collections" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.audit_count}" }
div { class: "stat-label", "Audit Entries" }
}
div { class: "stat-card",
div { class: "stat-value", "{size_str}" }
div { class: "stat-label", "Database Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.backend_name}" }
div { class: "stat-label", "Backend" }
}
}
}
}
None => rsx! {
div { class: "empty-state",
p { class: "text-muted", "Loading database stats..." }
}
},
}
}
match stats.as_ref() {
Some(s) => {
let size_str = format_size(s.database_size_bytes);
rsx! {
div { class: "stats-grid",
div { class: "stat-card",
div { class: "stat-value", "{s.media_count}" }
div { class: "stat-label", "Media Items" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.tag_count}" }
div { class: "stat-label", "Tags" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.collection_count}" }
div { class: "stat-label", "Collections" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.audit_count}" }
div { class: "stat-label", "Audit Entries" }
}
div { class: "stat-card",
div { class: "stat-value", "{size_str}" }
div { class: "stat-label", "Database Size" }
}
div { class: "stat-card",
div { class: "stat-value", "{s.backend_name}" }
div { class: "stat-label", "Backend" }
}
}
}
}
None => rsx! {
div { class: "empty-state",
p { class: "text-muted", "Loading database stats..." }
}
},
}
}
// Maintenance actions
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Maintenance" }
}
// Maintenance actions
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Maintenance" }
}
div { class: "db-actions",
// Vacuum
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Vacuum Database" }
p { class: "text-muted text-sm",
"Reclaim unused disk space and optimize the database. "
"This is safe to run at any time but may briefly lock the database."
}
}
if *confirm_vacuum.read() {
div { class: "db-action-confirm",
span { class: "text-sm", "Run vacuum?" }
button {
class: "btn btn-sm btn-primary",
onclick: move |_| {
confirm_vacuum.set(false);
on_vacuum.call(());
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_vacuum.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-secondary",
onclick: move |_| confirm_vacuum.set(true),
"Vacuum"
}
}
}
div { class: "db-actions",
// Vacuum
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Vacuum Database" }
p { class: "text-muted text-sm",
"Reclaim unused disk space and optimize the database. "
"This is safe to run at any time but may briefly lock the database."
}
}
if *confirm_vacuum.read() {
div { class: "db-action-confirm",
span { class: "text-sm", "Run vacuum?" }
button {
class: "btn btn-sm btn-primary",
onclick: move |_| {
confirm_vacuum.set(false);
on_vacuum.call(());
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_vacuum.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-secondary",
onclick: move |_| confirm_vacuum.set(true),
"Vacuum"
}
}
}
// Backup
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Backup Database" }
p { class: "text-muted text-sm",
"Create a copy of the database at the specified path. "
"The backup is a full snapshot of the current state."
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/backup.db",
value: "{backup_path}",
oninput: move |e| backup_path.set(e.value()),
style: "max-width: 300px;",
}
button {
class: "btn btn-secondary",
disabled: backup_path.read().is_empty(),
onclick: {
let mut backup_path = backup_path;
move |_| {
let path = backup_path.read().clone();
if !path.is_empty() {
on_backup.call(path);
backup_path.set(String::new());
}
}
},
"Backup"
}
}
}
}
}
// Backup
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Backup Database" }
p { class: "text-muted text-sm",
"Create a copy of the database at the specified path. "
"The backup is a full snapshot of the current state."
}
}
div { class: "form-row",
input {
r#type: "text",
placeholder: "/path/to/backup.db",
value: "{backup_path}",
oninput: move |e| backup_path.set(e.value()),
style: "max-width: 300px;",
}
button {
class: "btn btn-secondary",
disabled: backup_path.read().is_empty(),
onclick: {
let mut backup_path = backup_path;
move |_| {
let path = backup_path.read().clone();
if !path.is_empty() {
on_backup.call(path);
backup_path.set(String::new());
}
}
},
"Backup"
}
}
}
}
}
// Danger zone
div { class: "card mb-16 danger-card",
div { class: "card-header",
h3 { class: "card-title", style: "color: var(--danger);", "Danger Zone" }
}
// Danger zone
div { class: "card mb-16 danger-card",
div { class: "card-header",
h3 { class: "card-title", style: "color: var(--danger);", "Danger Zone" }
}
div { class: "db-actions",
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Clear All Data" }
p { class: "text-muted text-sm",
"Permanently delete all media records, tags, collections, and audit entries. "
"This cannot be undone. Files on disk are not affected."
}
}
if *confirm_clear.read() {
div { class: "db-action-confirm",
span {
class: "text-sm",
style: "color: var(--danger);",
"This will delete everything. Are you sure?"
}
button {
class: "btn btn-sm btn-danger",
onclick: move |_| {
confirm_clear.set(false);
on_clear.call(());
},
"Yes, Delete Everything"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_clear.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-danger",
onclick: move |_| confirm_clear.set(true),
"Clear All Data"
}
}
}
}
}
}
div { class: "db-actions",
div { class: "db-action-row",
div { class: "db-action-info",
h4 { "Clear All Data" }
p { class: "text-muted text-sm",
"Permanently delete all media records, tags, collections, and audit entries. "
"This cannot be undone. Files on disk are not affected."
}
}
if *confirm_clear.read() {
div { class: "db-action-confirm",
span {
class: "text-sm",
style: "color: var(--danger);",
"This will delete everything. Are you sure?"
}
button {
class: "btn btn-sm btn-danger",
onclick: move |_| {
confirm_clear.set(false);
on_clear.call(());
},
"Yes, Delete Everything"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_clear.set(false),
"Cancel"
}
}
} else {
button {
class: "btn btn-danger",
onclick: move |_| confirm_clear.set(true),
"Clear All Data"
}
}
}
}
}
}
}

1604
crates/pinakes-ui/src/components/detail.rs
View file

File diff suppressed because it is too large Load diff

303
crates/pinakes-ui/src/components/duplicates.rs
View file

@ -5,177 +5,178 @@ use crate::client::DuplicateGroupResponse;
#[component]
pub fn Duplicates(
groups: Vec<DuplicateGroupResponse>,
server_url: String,
on_delete: EventHandler<String>,
on_refresh: EventHandler<()>,
groups: Vec<DuplicateGroupResponse>,
server_url: String,
on_delete: EventHandler<String>,
on_refresh: EventHandler<()>,
) -> Element {
let mut expanded_group = use_signal(|| Option::<String>::None);
let mut confirm_delete = use_signal(|| Option::<String>::None);
let mut expanded_group = use_signal(|| Option::<String>::None);
let mut confirm_delete = use_signal(|| Option::<String>::None);
let total_groups = groups.len();
let total_duplicates: usize = groups.iter().map(|g| g.items.len().saturating_sub(1)).sum();
let total_groups = groups.len();
let total_duplicates: usize =
groups.iter().map(|g| g.items.len().saturating_sub(1)).sum();
rsx! {
div { class: "duplicates-view",
div { class: "duplicates-header",
h3 { "Duplicates" }
div { class: "duplicates-summary",
span { class: "text-muted",
"{total_groups} group(s), {total_duplicates} duplicate(s)"
}
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"Refresh"
}
}
}
rsx! {
div { class: "duplicates-view",
div { class: "duplicates-header",
h3 { "Duplicates" }
div { class: "duplicates-summary",
span { class: "text-muted",
"{total_groups} group(s), {total_duplicates} duplicate(s)"
}
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"Refresh"
}
}
}
if groups.is_empty() {
div { class: "empty-state",
p { class: "text-muted", "No duplicate files found." }
}
}
if groups.is_empty() {
div { class: "empty-state",
p { class: "text-muted", "No duplicate files found." }
}
}
for group in groups.iter() {
{
let hash = group.content_hash.clone();
let is_expanded = expanded_group.read().as_ref() == Some(&hash);
let hash_for_toggle = hash.clone();
let item_count = group.items.len();
let first_name = group
.items
for group in groups.iter() {
{
let hash = group.content_hash.clone();
let is_expanded = expanded_group.read().as_ref() == Some(&hash);
let hash_for_toggle = hash.clone();
let item_count = group.items.len();
let first_name = group
.items
// Group header
// Group header
// Expanded: show items
// Expanded: show items
// Thumbnail
// Thumbnail
// Info
// Info
// Actions
// Actions
.first()
.map(|i| i.file_name.clone())
.unwrap_or_default();
let total_size: u64 = group.items.iter().map(|i| i.file_size).sum();
let short_hash = if hash.len() > 12 {
format!("{}...", &hash[..12])
} else {
hash.clone()
};
rsx! {
div { class: "duplicate-group", key: "{hash}",
.first()
.map(|i| i.file_name.clone())
.unwrap_or_default();
let total_size: u64 = group.items.iter().map(|i| i.file_size).sum();
let short_hash = if hash.len() > 12 {
format!("{}...", &hash[..12])
} else {
hash.clone()
};
rsx! {
div { class: "duplicate-group", key: "{hash}",
button {
class: "duplicate-group-header",
onclick: move |_| {
let current = expanded_group.read().clone();
if current.as_ref() == Some(&hash_for_toggle) {
expanded_group.set(None);
} else {
expanded_group.set(Some(hash_for_toggle.clone()));
}
},
span { class: "expand-icon",
if is_expanded {
"\u{25bc}"
} else {
"\u{25b6}"
}
}
span { class: "group-name", "{first_name}" }
span { class: "group-badge", "{item_count} files" }
span { class: "group-size text-muted", "{format_size(total_size)}" }
span { class: "group-hash mono text-muted", "{short_hash}" }
}
button {
class: "duplicate-group-header",
onclick: move |_| {
let current = expanded_group.read().clone();
if current.as_ref() == Some(&hash_for_toggle) {
expanded_group.set(None);
} else {
expanded_group.set(Some(hash_for_toggle.clone()));
}
},
span { class: "expand-icon",
if is_expanded {
"\u{25bc}"
} else {
"\u{25b6}"
}
}
span { class: "group-name", "{first_name}" }
span { class: "group-badge", "{item_count} files" }
span { class: "group-size text-muted", "{format_size(total_size)}" }
span { class: "group-hash mono text-muted", "{short_hash}" }
}
if is_expanded {
div { class: "duplicate-items",
for (idx , item) in group.items.iter().enumerate() {
{
let item_id = item.id.clone();
let is_first = idx == 0;
let is_confirming = confirm_delete.read().as_ref() == Some(&item_id);
let thumb_url = format!("{}/api/v1/media/{}/thumbnail", server_url, item.id);
let has_thumb = item.has_thumbnail;
if is_expanded {
div { class: "duplicate-items",
for (idx , item) in group.items.iter().enumerate() {
{
let item_id = item.id.clone();
let is_first = idx == 0;
let is_confirming = confirm_delete.read().as_ref() == Some(&item_id);
let thumb_url = format!("{}/api/v1/media/{}/thumbnail", server_url, item.id);
let has_thumb = item.has_thumbnail;
rsx! {
div {
class: if is_first { "duplicate-item duplicate-item-keep" } else { "duplicate-item" },
key: "{item_id}",
rsx! {
div {
class: if is_first { "duplicate-item duplicate-item-keep" } else { "duplicate-item" },
key: "{item_id}",
div { class: "dup-thumb",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
class: "dup-thumb-img",
}
} else {
div { class: "dup-thumb-placeholder", "\u{1f5bc}" }
}
}
div { class: "dup-thumb",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
class: "dup-thumb-img",
}
} else {
div { class: "dup-thumb-placeholder", "\u{1f5bc}" }
}
}
div { class: "dup-info",
div { class: "dup-filename", "{item.file_name}" }
div { class: "dup-path mono text-muted", "{item.path}" }
div { class: "dup-meta",
span { "{format_size(item.file_size)}" }
span { class: "text-muted", " | " }
span { "{format_timestamp(&item.created_at)}" }
}
}
div { class: "dup-info",
div { class: "dup-filename", "{item.file_name}" }
div { class: "dup-path mono text-muted", "{item.path}" }
div { class: "dup-meta",
span { "{format_size(item.file_size)}" }
span { class: "text-muted", " | " }
span { "{format_timestamp(&item.created_at)}" }
}
}
div { class: "dup-actions",
if is_first {
span { class: "keep-badge", "Keep" }
}
div { class: "dup-actions",
if is_first {
span { class: "keep-badge", "Keep" }
}
if is_confirming {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| {
confirm_delete.set(None);
on_delete.call(id.clone());
}
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else if !is_first {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
if is_confirming {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| {
confirm_delete.set(None);
on_delete.call(id.clone());
}
},
"Confirm"
}
button {
class: "btn btn-sm btn-ghost",
onclick: move |_| confirm_delete.set(None),
"Cancel"
}
} else if !is_first {
button {
class: "btn btn-sm btn-danger",
onclick: {
let id = item_id.clone();
move |_| confirm_delete.set(Some(id.clone()))
},
"Delete"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}

1236
crates/pinakes-ui/src/components/graph_view.rs
View file

File diff suppressed because it is too large Load diff

452
crates/pinakes-ui/src/components/image_viewer.rs
View file

@ -2,243 +2,251 @@ use dioxus::prelude::*;
#[derive(Debug, Clone, Copy, PartialEq)]
enum FitMode {
FitScreen,
FitWidth,
Actual,
FitScreen,
FitWidth,
Actual,
}
impl FitMode {
fn next(self) -> Self {
match self {
Self::FitScreen => Self::FitWidth,
Self::FitWidth => Self::Actual,
Self::Actual => Self::FitScreen,
}
fn next(self) -> Self {
match self {
Self::FitScreen => Self::FitWidth,
Self::FitWidth => Self::Actual,
Self::Actual => Self::FitScreen,
}
}
fn label(self) -> &'static str {
match self {
Self::FitScreen => "Fit",
Self::FitWidth => "Width",
Self::Actual => "100%",
}
fn label(self) -> &'static str {
match self {
Self::FitScreen => "Fit",
Self::FitWidth => "Width",
Self::Actual => "100%",
}
}
}
#[component]
pub fn ImageViewer(
src: String,
alt: String,
on_close: EventHandler<()>,
#[props(default)] on_prev: Option<EventHandler<()>>,
#[props(default)] on_next: Option<EventHandler<()>>,
src: String,
alt: String,
on_close: EventHandler<()>,
#[props(default)] on_prev: Option<EventHandler<()>>,
#[props(default)] on_next: Option<EventHandler<()>>,
) -> Element {
let mut zoom = use_signal(|| 1.0f64);
let mut offset_x = use_signal(|| 0.0f64);
let mut offset_y = use_signal(|| 0.0f64);
let mut dragging = use_signal(|| false);
let mut drag_start_x = use_signal(|| 0.0f64);
let mut drag_start_y = use_signal(|| 0.0f64);
let mut fit_mode = use_signal(|| FitMode::FitScreen);
let mut zoom = use_signal(|| 1.0f64);
let mut offset_x = use_signal(|| 0.0f64);
let mut offset_y = use_signal(|| 0.0f64);
let mut dragging = use_signal(|| false);
let mut drag_start_x = use_signal(|| 0.0f64);
let mut drag_start_y = use_signal(|| 0.0f64);
let mut fit_mode = use_signal(|| FitMode::FitScreen);
let z = *zoom.read();
let ox = *offset_x.read();
let oy = *offset_y.read();
let is_dragging = *dragging.read();
let zoom_pct = (z * 100.0) as u32;
let current_fit = *fit_mode.read();
let z = *zoom.read();
let ox = *offset_x.read();
let oy = *offset_y.read();
let is_dragging = *dragging.read();
let zoom_pct = (z * 100.0) as u32;
let current_fit = *fit_mode.read();
let transform = format!("translate({ox}px, {oy}px) scale({z})");
let cursor = if z > 1.0 {
if is_dragging { "grabbing" } else { "grab" }
} else {
"default"
};
let transform = format!("translate({ox}px, {oy}px) scale({z})");
let cursor = if z > 1.0 {
if is_dragging { "grabbing" } else { "grab" }
} else {
"default"
};
// Compute image style based on fit mode
let img_style = match current_fit {
FitMode::FitScreen => format!(
"transform: {transform}; cursor: {cursor}; max-width: 100%; max-height: 100%; object-fit: contain;"
),
FitMode::FitWidth => {
format!("transform: {transform}; cursor: {cursor}; width: 100%; object-fit: contain;")
}
FitMode::Actual => format!("transform: {transform}; cursor: {cursor};"),
};
// Compute image style based on fit mode
let img_style = match current_fit {
FitMode::FitScreen => {
format!(
"transform: {transform}; cursor: {cursor}; max-width: 100%; \
max-height: 100%; object-fit: contain;"
)
},
FitMode::FitWidth => {
format!(
"transform: {transform}; cursor: {cursor}; width: 100%; object-fit: \
contain;"
)
},
FitMode::Actual => format!("transform: {transform}; cursor: {cursor};"),
};
let on_wheel = move |e: WheelEvent| {
e.prevent_default();
let delta = e.delta().strip_units();
let factor = if delta.y < 0.0 { 1.1 } else { 1.0 / 1.1 };
let new_zoom = (*zoom.read() * factor).clamp(0.1, 20.0);
zoom.set(new_zoom);
};
let on_wheel = move |e: WheelEvent| {
e.prevent_default();
let delta = e.delta().strip_units();
let factor = if delta.y < 0.0 { 1.1 } else { 1.0 / 1.1 };
let new_zoom = (*zoom.read() * factor).clamp(0.1, 20.0);
zoom.set(new_zoom);
};
let on_mouse_down = move |e: MouseEvent| {
if *zoom.read() > 1.0 {
dragging.set(true);
let coords = e.client_coordinates();
drag_start_x.set(coords.x - *offset_x.read());
drag_start_y.set(coords.y - *offset_y.read());
}
};
let on_mouse_move = move |e: MouseEvent| {
if *dragging.read() {
let coords = e.client_coordinates();
offset_x.set(coords.x - *drag_start_x.read());
offset_y.set(coords.y - *drag_start_y.read());
}
};
let on_mouse_up = move |_: MouseEvent| {
dragging.set(false);
};
let on_keydown = {
move |evt: KeyboardEvent| match evt.key() {
Key::Escape => on_close.call(()),
Key::Character(ref c) if c == "+" || c == "=" => {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
}
Key::Character(ref c) if c == "-" => {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
}
Key::Character(ref c) if c == "0" => {
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
fit_mode.set(FitMode::FitScreen);
}
Key::ArrowLeft => {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
}
Key::ArrowRight => {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
}
_ => {}
}
};
let zoom_in = move |_| {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
};
let zoom_out = move |_| {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
};
let cycle_fit = move |_| {
let next = fit_mode.read().next();
fit_mode.set(next);
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
};
let has_prev = on_prev.is_some();
let has_next = on_next.is_some();
rsx! {
div {
class: "image-viewer-overlay",
tabindex: "0",
onkeydown: on_keydown,
// Toolbar
div { class: "image-viewer-toolbar",
div { class: "image-viewer-toolbar-left",
if has_prev {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Previous",
"\u{25c0}"
}
}
if has_next {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Next",
"\u{25b6}"
}
}
}
div { class: "image-viewer-toolbar-center",
button {
class: "iv-btn",
onclick: cycle_fit,
title: "Cycle fit mode",
"{current_fit.label()}"
}
button {
class: "iv-btn",
onclick: zoom_out,
title: "Zoom out",
"\u{2212}"
}
span { class: "iv-zoom-label", "{zoom_pct}%" }
button { class: "iv-btn", onclick: zoom_in, title: "Zoom in", "+" }
}
div { class: "image-viewer-toolbar-right",
button {
class: "iv-btn iv-close",
onclick: move |_| on_close.call(()),
title: "Close",
"\u{2715}"
}
}
}
// Image canvas
div {
class: "image-viewer-canvas",
onwheel: on_wheel,
onmousedown: on_mouse_down,
onmousemove: on_mouse_move,
onmouseup: on_mouse_up,
onclick: move |e: MouseEvent| {
// Close on background click (not on image)
e.stop_propagation();
},
img {
src: "{src}",
alt: "{alt}",
style: "{img_style}",
draggable: "false",
onclick: move |e: MouseEvent| e.stop_propagation(),
}
}
}
let on_mouse_down = move |e: MouseEvent| {
if *zoom.read() > 1.0 {
dragging.set(true);
let coords = e.client_coordinates();
drag_start_x.set(coords.x - *offset_x.read());
drag_start_y.set(coords.y - *offset_y.read());
}
};
let on_mouse_move = move |e: MouseEvent| {
if *dragging.read() {
let coords = e.client_coordinates();
offset_x.set(coords.x - *drag_start_x.read());
offset_y.set(coords.y - *drag_start_y.read());
}
};
let on_mouse_up = move |_: MouseEvent| {
dragging.set(false);
};
let on_keydown = {
move |evt: KeyboardEvent| {
match evt.key() {
Key::Escape => on_close.call(()),
Key::Character(ref c) if c == "+" || c == "=" => {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
},
Key::Character(ref c) if c == "-" => {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
},
Key::Character(ref c) if c == "0" => {
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
fit_mode.set(FitMode::FitScreen);
},
Key::ArrowLeft => {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
Key::ArrowRight => {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
_ => {},
}
}
};
let zoom_in = move |_| {
let new_zoom = (*zoom.read() * 1.2).min(20.0);
zoom.set(new_zoom);
};
let zoom_out = move |_| {
let new_zoom = (*zoom.read() / 1.2).max(0.1);
zoom.set(new_zoom);
};
let cycle_fit = move |_| {
let next = fit_mode.read().next();
fit_mode.set(next);
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
};
let has_prev = on_prev.is_some();
let has_next = on_next.is_some();
rsx! {
div {
class: "image-viewer-overlay",
tabindex: "0",
onkeydown: on_keydown,
// Toolbar
div { class: "image-viewer-toolbar",
div { class: "image-viewer-toolbar-left",
if has_prev {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref prev) = on_prev {
prev.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Previous",
"\u{25c0}"
}
}
if has_next {
button {
class: "iv-btn",
onclick: move |_| {
if let Some(ref next) = on_next {
next.call(());
zoom.set(1.0);
offset_x.set(0.0);
offset_y.set(0.0);
}
},
title: "Next",
"\u{25b6}"
}
}
}
div { class: "image-viewer-toolbar-center",
button {
class: "iv-btn",
onclick: cycle_fit,
title: "Cycle fit mode",
"{current_fit.label()}"
}
button {
class: "iv-btn",
onclick: zoom_out,
title: "Zoom out",
"\u{2212}"
}
span { class: "iv-zoom-label", "{zoom_pct}%" }
button { class: "iv-btn", onclick: zoom_in, title: "Zoom in", "+" }
}
div { class: "image-viewer-toolbar-right",
button {
class: "iv-btn iv-close",
onclick: move |_| on_close.call(()),
title: "Close",
"\u{2715}"
}
}
}
// Image canvas
div {
class: "image-viewer-canvas",
onwheel: on_wheel,
onmousedown: on_mouse_down,
onmousemove: on_mouse_move,
onmouseup: on_mouse_up,
onclick: move |e: MouseEvent| {
// Close on background click (not on image)
e.stop_propagation();
},
img {
src: "{src}",
alt: "{alt}",
style: "{img_style}",
draggable: "false",
onclick: move |e: MouseEvent| e.stop_propagation(),
}
}
}
}
}

1542
crates/pinakes-ui/src/components/import.rs
View file

File diff suppressed because it is too large Load diff

1648
crates/pinakes-ui/src/components/library.rs
View file

File diff suppressed because it is too large Load diff

76
crates/pinakes-ui/src/components/loading.rs
View file

@ -2,58 +2,58 @@ use dioxus::prelude::*;
#[component]
pub fn SkeletonCard() -> Element {
rsx! {
div { class: "skeleton-card",
div { class: "skeleton-thumb skeleton-pulse" }
div { class: "skeleton-text skeleton-pulse" }
div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
}
}
rsx! {
div { class: "skeleton-card",
div { class: "skeleton-thumb skeleton-pulse" }
div { class: "skeleton-text skeleton-pulse" }
div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
}
}
}
#[component]
pub fn SkeletonRow() -> Element {
rsx! {
div { class: "skeleton-row",
div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
}
}
rsx! {
div { class: "skeleton-row",
div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
div { class: "skeleton-cell skeleton-pulse" }
}
}
}
#[component]
pub fn LoadingOverlay(message: Option<String>) -> Element {
let msg = message.unwrap_or_else(|| "Loading...".to_string());
rsx! {
div { class: "loading-overlay",
div { class: "loading-spinner" }
span { class: "loading-message", "{msg}" }
}
}
let msg = message.unwrap_or_else(|| "Loading...".to_string());
rsx! {
div { class: "loading-overlay",
div { class: "loading-spinner" }
span { class: "loading-message", "{msg}" }
}
}
}
#[component]
pub fn SkeletonGrid(count: Option<usize>) -> Element {
let n = count.unwrap_or(12);
rsx! {
div { class: "media-grid",
for i in 0..n {
SkeletonCard { key: "skel-{i}" }
}
}
}
let n = count.unwrap_or(12);
rsx! {
div { class: "media-grid",
for i in 0..n {
SkeletonCard { key: "skel-{i}" }
}
}
}
}
#[component]
pub fn SkeletonList(count: Option<usize>) -> Element {
let n = count.unwrap_or(10);
rsx! {
div { class: "media-list",
for i in 0..n {
SkeletonRow { key: "skel-row-{i}" }
}
}
}
let n = count.unwrap_or(10);
rsx! {
div { class: "media-list",
for i in 0..n {
SkeletonRow { key: "skel-row-{i}" }
}
}
}
}

142
crates/pinakes-ui/src/components/login.rs
View file

@ -2,78 +2,78 @@ use dioxus::prelude::*;
#[component]
pub fn Login(
on_login: EventHandler<(String, String)>,
#[props(default)] error: Option<String>,
#[props(default = false)] loading: bool,
on_login: EventHandler<(String, String)>,
#[props(default)] error: Option<String>,
#[props(default = false)] loading: bool,
) -> Element {
let mut username = use_signal(String::new);
let mut password = use_signal(String::new);
let mut username = use_signal(String::new);
let mut password = use_signal(String::new);
let on_submit = {
move |_| {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
let on_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
rsx! {
div { class: "login-container",
div { class: "login-card",
h2 { class: "login-title", "Pinakes" }
p { class: "login-subtitle", "Sign in to continue" }
if let Some(ref err) = error {
div { class: "login-error", "{err}" }
}
div { class: "login-form",
div { class: "form-group",
label { class: "form-label", "Username" }
input {
r#type: "text",
placeholder: "Enter username",
value: "{username}",
disabled: loading,
oninput: move |e: Event<FormData>| username.set(e.value()),
onkeypress: on_key,
}
}
div { class: "form-group",
label { class: "form-label", "Password" }
input {
r#type: "password",
placeholder: "Enter password",
value: "{password}",
disabled: loading,
oninput: move |e: Event<FormData>| password.set(e.value()),
onkeypress: on_key,
}
}
button {
class: "btn btn-primary login-btn",
disabled: loading,
onclick: on_submit,
if loading {
"Signing in..."
} else {
"Sign In"
}
}
}
}
}
let on_submit = {
move |_| {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
let on_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let u = username.read().clone();
let p = password.read().clone();
if !u.is_empty() && !p.is_empty() {
on_login.call((u, p));
}
}
};
rsx! {
div { class: "login-container",
div { class: "login-card",
h2 { class: "login-title", "Pinakes" }
p { class: "login-subtitle", "Sign in to continue" }
if let Some(ref err) = error {
div { class: "login-error", "{err}" }
}
div { class: "login-form",
div { class: "form-group",
label { class: "form-label", "Username" }
input {
r#type: "text",
placeholder: "Enter username",
value: "{username}",
disabled: loading,
oninput: move |e: Event<FormData>| username.set(e.value()),
onkeypress: on_key,
}
}
div { class: "form-group",
label { class: "form-label", "Password" }
input {
r#type: "password",
placeholder: "Enter password",
value: "{password}",
disabled: loading,
oninput: move |e: Event<FormData>| password.set(e.value()),
onkeypress: on_key,
}
}
button {
class: "btn btn-primary login-btn",
disabled: loading,
onclick: on_submit,
if loading {
"Signing in..."
} else {
"Sign In"
}
}
}
}
}
}
}

620
crates/pinakes-ui/src/components/markdown_viewer.rs
View file

@ -1,73 +1,75 @@
use dioxus::document::eval;
use dioxus::prelude::*;
use dioxus::{document::eval, prelude::*};
/// Event handler for wikilink clicks. Called with the target note name.
pub type WikilinkClickHandler = EventHandler<String>;
#[component]
pub fn MarkdownViewer(
content_url: String,
media_type: String,
#[props(default)] on_wikilink_click: Option<WikilinkClickHandler>,
content_url: String,
media_type: String,
#[props(default)] on_wikilink_click: Option<WikilinkClickHandler>,
) -> Element {
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut raw_content = use_signal(String::new);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut show_preview = use_signal(|| true);
let mut rendered_html = use_signal(String::new);
let mut frontmatter_html = use_signal(|| Option::<String>::None);
let mut raw_content = use_signal(String::new);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let mut show_preview = use_signal(|| true);
// Fetch content on mount
let url = content_url.clone();
let mtype = media_type.clone();
use_effect(move || {
let url = url.clone();
let mtype = mtype.clone();
spawn(async move {
loading.set(true);
error.set(None);
match reqwest::get(&url).await {
Ok(resp) => match resp.text().await {
Ok(text) => {
raw_content.set(text.clone());
if mtype == "md" || mtype == "markdown" {
let (fm_html, body_html) = render_markdown_with_frontmatter(&text);
frontmatter_html.set(fm_html);
rendered_html.set(body_html);
} else {
frontmatter_html.set(None);
rendered_html.set(render_plaintext(&text));
};
}
Err(e) => error.set(Some(format!("Failed to read content: {e}"))),
},
Err(e) => error.set(Some(format!("Failed to fetch: {e}"))),
}
loading.set(false);
});
// Fetch content on mount
let url = content_url.clone();
let mtype = media_type.clone();
use_effect(move || {
let url = url.clone();
let mtype = mtype.clone();
spawn(async move {
loading.set(true);
error.set(None);
match reqwest::get(&url).await {
Ok(resp) => {
match resp.text().await {
Ok(text) => {
raw_content.set(text.clone());
if mtype == "md" || mtype == "markdown" {
let (fm_html, body_html) =
render_markdown_with_frontmatter(&text);
frontmatter_html.set(fm_html);
rendered_html.set(body_html);
} else {
frontmatter_html.set(None);
rendered_html.set(render_plaintext(&text));
};
},
Err(e) => error.set(Some(format!("Failed to read content: {e}"))),
}
},
Err(e) => error.set(Some(format!("Failed to fetch: {e}"))),
}
loading.set(false);
});
});
// Set up global wikilink click handler that the inline onclick attributes will call
// This bridges JavaScript → Rust communication
use_effect(move || {
if let Some(handler) = on_wikilink_click {
spawn(async move {
// Set up a global function that wikilink onclick handlers can call
// The function stores the clicked target in localStorage
let setup_js = r#"
// Set up global wikilink click handler that the inline onclick attributes
// will call This bridges JavaScript → Rust communication
use_effect(move || {
if let Some(handler) = on_wikilink_click {
spawn(async move {
// Set up a global function that wikilink onclick handlers can call
// The function stores the clicked target in localStorage
let setup_js = r#"
window.__dioxus_wikilink_click = function(target) {
console.log('Wikilink clicked:', target);
localStorage.setItem('__wikilink_clicked', target);
};
"#;
let _ = eval(setup_js).await;
let _ = eval(setup_js).await;
// Poll localStorage to detect wikilink clicks
loop {
tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
// Poll localStorage to detect wikilink clicks
loop {
tokio::time::sleep(tokio::time::Duration::from_millis(100)).await;
let check_js = r#"
let check_js = r#"
(function() {
const target = localStorage.getItem('__wikilink_clicked');
if (target) {
@ -78,313 +80,321 @@ pub fn MarkdownViewer(
})();
"#;
if let Ok(result) = eval(check_js).await {
if let Some(target) = result.as_str() {
if !target.is_empty() {
handler.call(target.to_string());
}
}
}
}
});
}
});
let is_loading = *loading.read();
let is_preview = *show_preview.read();
rsx! {
div { class: "markdown-viewer",
// View toggle toolbar
if !is_loading && error.read().is_none() {
div { class: "markdown-toolbar",
button {
class: if is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(true),
title: "Preview Mode",
"Preview"
}
button {
class: if !is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(false),
title: "Source Mode",
"Source"
}
}
}
if is_loading {
div { class: "loading-overlay",
div { class: "spinner" }
"Loading content..."
}
}
if let Some(ref err) = *error.read() {
div { class: "error-banner",
span { class: "error-icon", "\u{26a0}" }
"{err}"
}
}
if !is_loading && error.read().is_none() {
if is_preview {
// Preview mode - show rendered markdown
if let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_html}",
}
} else {
// Source mode - show raw markdown
pre { class: "markdown-source",
code { "{raw_content}" }
}
}
}
if let Ok(result) = eval(check_js).await {
if let Some(target) = result.as_str() {
if !target.is_empty() {
handler.call(target.to_string());
}
}
}
}
});
}
});
let is_loading = *loading.read();
let is_preview = *show_preview.read();
rsx! {
div { class: "markdown-viewer",
// View toggle toolbar
if !is_loading && error.read().is_none() {
div { class: "markdown-toolbar",
button {
class: if is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(true),
title: "Preview Mode",
"Preview"
}
button {
class: if !is_preview { "toolbar-btn active" } else { "toolbar-btn" },
onclick: move |_| show_preview.set(false),
title: "Source Mode",
"Source"
}
}
}
if is_loading {
div { class: "loading-overlay",
div { class: "spinner" }
"Loading content..."
}
}
if let Some(ref err) = *error.read() {
div { class: "error-banner",
span { class: "error-icon", "\u{26a0}" }
"{err}"
}
}
if !is_loading && error.read().is_none() {
if is_preview {
// Preview mode - show rendered markdown
if let Some(ref fm) = *frontmatter_html.read() {
div {
class: "frontmatter-card",
dangerous_inner_html: "{fm}",
}
}
div {
class: "markdown-content",
dangerous_inner_html: "{rendered_html}",
}
} else {
// Source mode - show raw markdown
pre { class: "markdown-source",
code { "{raw_content}" }
}
}
}
}
}
}
/// Parse frontmatter and render markdown body. Returns (frontmatter_html, body_html).
/// Parse frontmatter and render markdown body. Returns (frontmatter_html,
/// body_html).
fn render_markdown_with_frontmatter(text: &str) -> (Option<String>, String) {
use gray_matter::Matter;
use gray_matter::engine::YAML;
use gray_matter::{Matter, engine::YAML};
let matter = Matter::<YAML>::new();
let Ok(result) = matter.parse(text) else {
// If frontmatter parsing fails, just render the whole text as markdown
return (None, render_markdown(text));
};
let matter = Matter::<YAML>::new();
let Ok(result) = matter.parse(text) else {
// If frontmatter parsing fails, just render the whole text as markdown
return (None, render_markdown(text));
};
let fm_html = result.data.and_then(|data| render_frontmatter_card(&data));
let fm_html = result.data.and_then(|data| render_frontmatter_card(&data));
let body_html = render_markdown(&result.content);
(fm_html, body_html)
let body_html = render_markdown(&result.content);
(fm_html, body_html)
}
/// Render frontmatter fields as an HTML card.
fn render_frontmatter_card(data: &gray_matter::Pod) -> Option<String> {
let gray_matter::Pod::Hash(map) = data else {
return None;
};
let gray_matter::Pod::Hash(map) = data else {
return None;
};
if map.is_empty() {
return None;
}
if map.is_empty() {
return None;
}
let mut html = String::from("<dl class=\"frontmatter-fields\">");
let mut html = String::from("<dl class=\"frontmatter-fields\">");
for (key, value) in map {
let display_value = pod_to_display(value);
let escaped_key = escape_html(key);
html.push_str(&format!("<dt>{escaped_key}</dt><dd>{display_value}</dd>"));
}
for (key, value) in map {
let display_value = pod_to_display(value);
let escaped_key = escape_html(key);
html.push_str(&format!("<dt>{escaped_key}</dt><dd>{display_value}</dd>"));
}
html.push_str("</dl>");
Some(html)
html.push_str("</dl>");
Some(html)
}
fn pod_to_display(pod: &gray_matter::Pod) -> String {
match pod {
gray_matter::Pod::String(s) => escape_html(s),
gray_matter::Pod::Integer(n) => n.to_string(),
gray_matter::Pod::Float(f) => f.to_string(),
gray_matter::Pod::Boolean(b) => b.to_string(),
gray_matter::Pod::Array(arr) => {
let items: Vec<String> = arr.iter().map(pod_to_display).collect();
items.join(", ")
}
gray_matter::Pod::Hash(map) => {
let items: Vec<String> = map
.iter()
.map(|(k, v)| format!("{}: {}", escape_html(k), pod_to_display(v)))
.collect();
items.join("; ")
}
gray_matter::Pod::Null => String::new(),
}
match pod {
gray_matter::Pod::String(s) => escape_html(s),
gray_matter::Pod::Integer(n) => n.to_string(),
gray_matter::Pod::Float(f) => f.to_string(),
gray_matter::Pod::Boolean(b) => b.to_string(),
gray_matter::Pod::Array(arr) => {
let items: Vec<String> = arr.iter().map(pod_to_display).collect();
items.join(", ")
},
gray_matter::Pod::Hash(map) => {
let items: Vec<String> = map
.iter()
.map(|(k, v)| format!("{}: {}", escape_html(k), pod_to_display(v)))
.collect();
items.join("; ")
},
gray_matter::Pod::Null => String::new(),
}
}
fn render_markdown(text: &str) -> String {
use pulldown_cmark::{Options, Parser, html};
use pulldown_cmark::{Options, Parser, html};
// First, convert wikilinks to standard markdown links
let text_with_links = convert_wikilinks(text);
// First, convert wikilinks to standard markdown links
let text_with_links = convert_wikilinks(text);
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_STRIKETHROUGH);
options.insert(Options::ENABLE_TASKLISTS);
options.insert(Options::ENABLE_FOOTNOTES);
options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_STRIKETHROUGH);
options.insert(Options::ENABLE_TASKLISTS);
options.insert(Options::ENABLE_FOOTNOTES);
options.insert(Options::ENABLE_HEADING_ATTRIBUTES);
let parser = Parser::new_ext(&text_with_links, options);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
let parser = Parser::new_ext(&text_with_links, options);
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
// Sanitize HTML using ammonia with a safe allowlist
sanitize_html(&html_output)
// Sanitize HTML using ammonia with a safe allowlist
sanitize_html(&html_output)
}
/// Convert wikilinks [[target]] and [[target|display]] to styled HTML links.
/// Uses a special URL scheme that can be intercepted by click handlers.
fn convert_wikilinks(text: &str) -> String {
use regex::Regex;
use regex::Regex;
// Match embeds ![[target]] first, convert to a placeholder image/embed span
let embed_re = Regex::new(r"!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = embed_re.replace_all(text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let alt = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
format!(
"<span class=\"wikilink-embed\" data-target=\"{}\" title=\"Embed: {}\">[Embed: {}]</span>",
escape_html_attr(target),
escape_html_attr(target),
escape_html(alt)
)
});
// Match embeds ![[target]] first, convert to a placeholder image/embed span
let embed_re = Regex::new(r"!\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = embed_re.replace_all(text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let alt = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
format!(
"<span class=\"wikilink-embed\" data-target=\"{}\" title=\"Embed: \
{}\">[Embed: {}]</span>",
escape_html_attr(target),
escape_html_attr(target),
escape_html(alt)
)
});
// Match wikilinks [[target]] or [[target|display]]
let wikilink_re = Regex::new(r"\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = wikilink_re.replace_all(&text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let display = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
// Create a styled link that uses a special pseudo-protocol scheme
// This makes it easier to intercept clicks via JavaScript
format!(
"<a href=\"javascript:void(0)\" class=\"wikilink\" data-wikilink-target=\"{target}\" onclick=\"if(window.__dioxus_wikilink_click){{window.__dioxus_wikilink_click('{target_escaped}')}}\">{display}</a>",
target = escape_html_attr(target),
target_escaped = escape_html_attr(&target.replace('\\', "\\\\").replace('\'', "\\'")),
display = escape_html(display)
)
});
// Match wikilinks [[target]] or [[target|display]]
let wikilink_re = Regex::new(r"\[\[([^\]|]+)(?:\|([^\]]+))?\]\]").unwrap();
let text = wikilink_re.replace_all(&text, |caps: &regex::Captures| {
let target = caps.get(1).unwrap().as_str().trim();
let display = caps.get(2).map(|m| m.as_str().trim()).unwrap_or(target);
// Create a styled link that uses a special pseudo-protocol scheme
// This makes it easier to intercept clicks via JavaScript
format!(
"<a href=\"javascript:void(0)\" class=\"wikilink\" \
data-wikilink-target=\"{target}\" \
onclick=\"if(window.__dioxus_wikilink_click){{window.\
__dioxus_wikilink_click('{target_escaped}')}}\">{display}</a>",
target = escape_html_attr(target),
target_escaped =
escape_html_attr(&target.replace('\\', "\\\\").replace('\'', "\\'")),
display = escape_html(display)
)
});
text.to_string()
text.to_string()
}
fn render_plaintext(text: &str) -> String {
let escaped = escape_html(text);
format!("<pre><code>{escaped}</code></pre>")
let escaped = escape_html(text);
format!("<pre><code>{escaped}</code></pre>")
}
/// Escape text for display in HTML content.
fn escape_html(text: &str) -> String {
text.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
text
.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
}
/// Escape text for use in HTML attributes (includes single quotes).
fn escape_html_attr(text: &str) -> String {
text.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
.replace('\'', "&#x27;")
text
.replace('&', "&amp;")
.replace('<', "&lt;")
.replace('>', "&gt;")
.replace('"', "&quot;")
.replace('\'', "&#x27;")
}
/// Sanitize HTML using ammonia with a safe allowlist.
/// This prevents XSS attacks by removing dangerous elements and attributes.
fn sanitize_html(html: &str) -> String {
use ammonia::Builder;
use std::collections::HashSet;
use std::collections::HashSet;
// Build a custom sanitizer that allows safe markdown elements
// but strips all event handlers and dangerous elements
let mut builder = Builder::default();
use ammonia::Builder;
// Allow common markdown elements
let allowed_tags: HashSet<&str> = [
"a",
"abbr",
"acronym",
"b",
"blockquote",
"br",
"code",
"dd",
"del",
"details",
"div",
"dl",
"dt",
"em",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hr",
"i",
"img",
"ins",
"kbd",
"li",
"mark",
"ol",
"p",
"pre",
"q",
"s",
"samp",
"small",
"span",
"strong",
"sub",
"summary",
"sup",
"table",
"tbody",
"td",
"tfoot",
"th",
"thead",
"tr",
"u",
"ul",
"var",
// Task list support
"input",
]
.into_iter()
.collect();
// Build a custom sanitizer that allows safe markdown elements
// but strips all event handlers and dangerous elements
let mut builder = Builder::default();
// Allow safe attributes
let allowed_attrs: HashSet<&str> = [
"href",
"src",
"alt",
"title",
"class",
"id",
"name",
"width",
"height",
"align",
"valign",
"colspan",
"rowspan",
"scope",
// Data attributes for wikilinks (safe - no code execution)
"data-target",
"data-wikilink-target",
// Task list checkbox support
"type",
"checked",
"disabled",
]
.into_iter()
.collect();
// Allow common markdown elements
let allowed_tags: HashSet<&str> = [
"a",
"abbr",
"acronym",
"b",
"blockquote",
"br",
"code",
"dd",
"del",
"details",
"div",
"dl",
"dt",
"em",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"hr",
"i",
"img",
"ins",
"kbd",
"li",
"mark",
"ol",
"p",
"pre",
"q",
"s",
"samp",
"small",
"span",
"strong",
"sub",
"summary",
"sup",
"table",
"tbody",
"td",
"tfoot",
"th",
"thead",
"tr",
"u",
"ul",
"var",
// Task list support
"input",
]
.into_iter()
.collect();
builder
// Allow safe attributes
let allowed_attrs: HashSet<&str> = [
"href",
"src",
"alt",
"title",
"class",
"id",
"name",
"width",
"height",
"align",
"valign",
"colspan",
"rowspan",
"scope",
// Data attributes for wikilinks (safe - no code execution)
"data-target",
"data-wikilink-target",
// Task list checkbox support
"type",
"checked",
"disabled",
]
.into_iter()
.collect();
builder
.tags(allowed_tags)
.generic_attributes(allowed_attrs)
// Allow relative URLs and fragment-only URLs for internal links

1235
crates/pinakes-ui/src/components/media_player.rs
View file

File diff suppressed because it is too large Load diff

162
crates/pinakes-ui/src/components/pagination.rs
View file

@ -2,101 +2,101 @@ use dioxus::prelude::*;
#[component]
pub fn Pagination(
current_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
current_page: u64,
total_pages: u64,
on_page_change: EventHandler<u64>,
) -> Element {
if total_pages <= 1 {
return rsx! {};
}
if total_pages <= 1 {
return rsx! {};
}
let pages = pagination_range(current_page, total_pages);
let pages = pagination_range(current_page, total_pages);
rsx! {
div { class: "pagination",
button {
class: "btn btn-sm btn-secondary",
disabled: current_page == 0,
onclick: move |_| {
if current_page > 0 {
on_page_change.call(current_page - 1);
}
},
"Prev"
}
rsx! {
div { class: "pagination",
button {
class: "btn btn-sm btn-secondary",
disabled: current_page == 0,
onclick: move |_| {
if current_page > 0 {
on_page_change.call(current_page - 1);
}
},
"Prev"
}
for page in pages {
if page == u64::MAX {
span { class: "page-ellipsis", "..." }
} else {
{
let btn_class = if page == current_page {
"btn btn-sm btn-primary page-btn"
} else {
"btn btn-sm btn-ghost page-btn"
};
rsx! {
button {
key: "page-{page}",
class: "{btn_class}",
onclick: move |_| on_page_change.call(page),
"{page + 1}"
}
}
}
}
}
for page in pages {
if page == u64::MAX {
span { class: "page-ellipsis", "..." }
} else {
{
let btn_class = if page == current_page {
"btn btn-sm btn-primary page-btn"
} else {
"btn btn-sm btn-ghost page-btn"
};
rsx! {
button {
key: "page-{page}",
class: "{btn_class}",
onclick: move |_| on_page_change.call(page),
"{page + 1}"
}
}
}
}
}
button {
class: "btn btn-sm btn-secondary",
disabled: current_page >= total_pages - 1,
onclick: move |_| {
if current_page < total_pages - 1 {
on_page_change.call(current_page + 1);
}
},
"Next"
}
}
}
button {
class: "btn btn-sm btn-secondary",
disabled: current_page >= total_pages - 1,
onclick: move |_| {
if current_page < total_pages - 1 {
on_page_change.call(current_page + 1);
}
},
"Next"
}
}
}
}
/// Compute a range of page numbers to display (with ellipsis as u64::MAX).
pub fn pagination_range(current: u64, total: u64) -> Vec<u64> {
let mut pages = Vec::new();
if total <= 7 {
for i in 0..total {
pages.push(i);
}
return pages;
let mut pages = Vec::new();
if total <= 7 {
for i in 0..total {
pages.push(i);
}
return pages;
}
pages.push(0);
pages.push(0);
if current > 2 {
pages.push(u64::MAX);
if current > 2 {
pages.push(u64::MAX);
}
let start = if current <= 2 { 1 } else { current - 1 };
let end = if current >= total - 3 {
total - 1
} else {
current + 2
};
for i in start..end {
if !pages.contains(&i) {
pages.push(i);
}
}
let start = if current <= 2 { 1 } else { current - 1 };
let end = if current >= total - 3 {
total - 1
} else {
current + 2
};
if current < total - 3 {
pages.push(u64::MAX);
}
for i in start..end {
if !pages.contains(&i) {
pages.push(i);
}
}
if !pages.contains(&(total - 1)) {
pages.push(total - 1);
}
if current < total - 3 {
pages.push(u64::MAX);
}
if !pages.contains(&(total - 1)) {
pages.push(total - 1);
}
pages
pages
}

202
crates/pinakes-ui/src/components/pdf_viewer.rs
View file

@ -2,111 +2,111 @@ use dioxus::prelude::*;
#[component]
pub fn PdfViewer(
src: String,
#[props(default = 1)] initial_page: usize,
#[props(default = 100)] initial_zoom: usize,
src: String,
#[props(default = 1)] initial_page: usize,
#[props(default = 100)] initial_zoom: usize,
) -> Element {
let current_page = use_signal(|| initial_page);
let mut zoom_level = use_signal(|| initial_zoom);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
let current_page = use_signal(|| initial_page);
let mut zoom_level = use_signal(|| initial_zoom);
let mut loading = use_signal(|| true);
let mut error = use_signal(|| Option::<String>::None);
// For navigation controls
let zoom = *zoom_level.read();
let page = *current_page.read();
// For navigation controls
let zoom = *zoom_level.read();
let page = *current_page.read();
rsx! {
div { class: "pdf-viewer",
// Toolbar
div { class: "pdf-toolbar",
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Zoom out",
disabled: zoom <= 50,
onclick: move |_| {
let new_zoom = (*zoom_level.read()).saturating_sub(25).max(50);
zoom_level.set(new_zoom);
},
"\u{2212}" // minus
}
span { class: "pdf-zoom-label", "{zoom}%" }
button {
class: "pdf-toolbar-btn",
title: "Zoom in",
disabled: zoom >= 200,
onclick: move |_| {
let new_zoom = (*zoom_level.read() + 25).min(200);
zoom_level.set(new_zoom);
},
"+" // plus
}
}
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Fit to width",
onclick: move |_| zoom_level.set(100),
"\u{2194}" // left-right arrow
}
}
}
rsx! {
div { class: "pdf-viewer",
// Toolbar
div { class: "pdf-toolbar",
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Zoom out",
disabled: zoom <= 50,
onclick: move |_| {
let new_zoom = (*zoom_level.read()).saturating_sub(25).max(50);
zoom_level.set(new_zoom);
},
"\u{2212}" // minus
}
span { class: "pdf-zoom-label", "{zoom}%" }
button {
class: "pdf-toolbar-btn",
title: "Zoom in",
disabled: zoom >= 200,
onclick: move |_| {
let new_zoom = (*zoom_level.read() + 25).min(200);
zoom_level.set(new_zoom);
},
"+" // plus
}
}
div { class: "pdf-toolbar-group",
button {
class: "pdf-toolbar-btn",
title: "Fit to width",
onclick: move |_| zoom_level.set(100),
"\u{2194}" // left-right arrow
}
}
}
// PDF embed container
div { class: "pdf-container",
if *loading.read() {
div { class: "pdf-loading",
div { class: "spinner" }
span { "Loading PDF..." }
}
}
// PDF embed container
div { class: "pdf-container",
if *loading.read() {
div { class: "pdf-loading",
div { class: "spinner" }
span { "Loading PDF..." }
}
}
if let Some(ref err) = *error.read() {
div { class: "pdf-error",
p { "{err}" }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
if let Some(ref err) = *error.read() {
div { class: "pdf-error",
p { "{err}" }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
// Use object/embed for PDF rendering
// The webview should handle PDF rendering natively
object {
class: "pdf-object",
r#type: "application/pdf",
data: "{src}#zoom={zoom}&page={page}",
width: "100%",
height: "100%",
onload: move |_| {
loading.set(false);
error.set(None);
},
onerror: move |_| {
loading.set(false);
error
.set(
Some(
"Unable to display PDF. Your browser may not support embedded PDF viewing."
.to_string(),
),
);
},
// Fallback content
div { class: "pdf-fallback",
p { "PDF preview is not available in this browser." }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
}
}
}
// Use object/embed for PDF rendering
// The webview should handle PDF rendering natively
object {
class: "pdf-object",
r#type: "application/pdf",
data: "{src}#zoom={zoom}&page={page}",
width: "100%",
height: "100%",
onload: move |_| {
loading.set(false);
error.set(None);
},
onerror: move |_| {
loading.set(false);
error
.set(
Some(
"Unable to display PDF. Your browser may not support embedded PDF viewing."
.to_string(),
),
);
},
// Fallback content
div { class: "pdf-fallback",
p { "PDF preview is not available in this browser." }
a {
href: "{src}",
target: "_blank",
class: "btn btn-primary",
"Download PDF"
}
}
}
}
}
}
}

840
crates/pinakes-ui/src/components/search.rs
View file

@ -1,427 +1,433 @@
use dioxus::prelude::*;
use super::pagination::Pagination as PaginationControls;
use super::utils::{format_size, type_badge_class, type_icon};
use super::{
pagination::Pagination as PaginationControls,
utils::{format_size, type_badge_class, type_icon},
};
use crate::client::{MediaResponse, SavedSearchResponse};
#[component]
pub fn Search(
results: Vec<MediaResponse>,
total_count: u64,
search_page: u64,
page_size: u64,
on_search: EventHandler<(String, Option<String>)>,
on_select: EventHandler<String>,
on_page_change: EventHandler<u64>,
server_url: String,
#[props(default)] saved_searches: Vec<SavedSearchResponse>,
#[props(default)] on_save_search: Option<EventHandler<(String, String, Option<String>)>>,
#[props(default)] on_delete_saved_search: Option<EventHandler<String>>,
#[props(default)] on_load_saved_search: Option<EventHandler<SavedSearchResponse>>,
results: Vec<MediaResponse>,
total_count: u64,
search_page: u64,
page_size: u64,
on_search: EventHandler<(String, Option<String>)>,
on_select: EventHandler<String>,
on_page_change: EventHandler<u64>,
server_url: String,
#[props(default)] saved_searches: Vec<SavedSearchResponse>,
#[props(default)] on_save_search: Option<
EventHandler<(String, String, Option<String>)>,
>,
#[props(default)] on_delete_saved_search: Option<EventHandler<String>>,
#[props(default)] on_load_saved_search: Option<
EventHandler<SavedSearchResponse>,
>,
) -> Element {
let mut query = use_signal(String::new);
let mut sort_by = use_signal(|| String::from("relevance"));
let mut show_help = use_signal(|| false);
let mut show_save_dialog = use_signal(|| false);
let mut save_name = use_signal(String::new);
let mut show_saved_list = use_signal(|| false);
// 0 = table, 1 = grid
let mut view_mode = use_signal(|| 0u8);
let mut query = use_signal(String::new);
let mut sort_by = use_signal(|| String::from("relevance"));
let mut show_help = use_signal(|| false);
let mut show_save_dialog = use_signal(|| false);
let mut save_name = use_signal(String::new);
let mut show_saved_list = use_signal(|| false);
// 0 = table, 1 = grid
let mut view_mode = use_signal(|| 0u8);
let do_search = {
let query = query;
let sort_by = sort_by;
move |_| {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
};
let on_key = {
let query = query;
let sort_by = sort_by;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
}
};
let toggle_help = move |_| {
let current = *show_help.read();
show_help.set(!current);
};
let help_visible = *show_help.read();
let current_mode = *view_mode.read();
let total_pages = if page_size > 0 {
total_count.div_ceil(page_size)
} else {
1
};
rsx! {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Search media...",
value: "{query}",
oninput: move |e| query.set(e.value()),
onkeypress: on_key,
}
select { value: "{sort_by}", onchange: move |e| sort_by.set(e.value()),
option { value: "relevance", "Relevance" }
option { value: "date_desc", "Newest" }
option { value: "date_asc", "Oldest" }
option { value: "name_asc", "Name A-Z" }
option { value: "name_desc", "Name Z-A" }
option { value: "size_desc", "Size (largest)" }
option { value: "size_asc", "Size (smallest)" }
}
button { class: "btn btn-primary", onclick: do_search, "Search" }
button { class: "btn btn-ghost", onclick: toggle_help, "Syntax Help" }
// Save/Load search buttons
if on_save_search.is_some() {
button {
class: "btn btn-secondary",
disabled: query.read().is_empty(),
onclick: move |_| show_save_dialog.set(true),
"Save"
}
}
if !saved_searches.is_empty() {
button {
class: "btn btn-ghost",
onclick: move |_| show_saved_list.toggle(),
"Saved ({saved_searches.len()})"
}
}
// View mode toggle
div { class: "view-toggle",
button {
class: if current_mode == 1 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(1),
title: "Grid view",
"\u{25a6}"
}
button {
class: if current_mode == 0 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(0),
title: "Table view",
"\u{2630}"
}
}
}
if help_visible {
div { class: "card mb-16",
h4 { "Search Syntax" }
ul {
li {
code { "hello world" }
" -- full text search (implicit AND)"
}
li {
code { "artist:Beatles" }
" -- field match"
}
li {
code { "type:pdf" }
" -- filter by media type"
}
li {
code { "tag:music" }
" -- filter by tag"
}
li {
code { "hello OR world" }
" -- OR operator"
}
li {
code { "-excluded" }
" -- NOT (exclude term)"
}
li {
code { "hel*" }
" -- prefix search"
}
li {
code { "hello~" }
" -- fuzzy search"
}
li {
code { "\"exact phrase\"" }
" -- quoted exact match"
}
}
}
}
// Save search dialog
if *show_save_dialog.read() {
div {
class: "modal-overlay",
onclick: move |_| show_save_dialog.set(false),
div {
class: "modal-content",
onclick: move |evt: MouseEvent| evt.stop_propagation(),
h3 { "Save Search" }
div { class: "form-field",
label { "Name" }
input {
r#type: "text",
placeholder: "Enter a name for this search...",
value: "{save_name}",
oninput: move |e| save_name.set(e.value()),
onkeypress: {
let query = query.read().clone();
let sort = sort_by.read().clone();
let handler = on_save_search;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort == "relevance" {
None
} else {
Some(sort.clone())
};
if let Some(ref h) = handler {
h.call((name, query.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
}
},
}
}
p { class: "text-muted text-sm", "Query: {query}" }
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_save_dialog.set(false);
save_name.set(String::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
disabled: save_name.read().is_empty(),
onclick: {
let query_val = query.read().clone();
let sort_val = sort_by.read().clone();
let handler = on_save_search;
move |_| {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort_val == "relevance" {
None
} else {
Some(sort_val.clone())
};
if let Some(ref h) = handler {
h.call((name, query_val.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
},
"Save"
}
}
}
}
}
// Saved searches list
if *show_saved_list.read() && !saved_searches.is_empty() {
div { class: "card mb-16",
div { class: "card-header",
h4 { "Saved Searches" }
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| show_saved_list.set(false),
"Close"
}
}
div { class: "saved-searches-list",
for search in saved_searches.iter() {
{
let search_clone = search.clone();
let id_for_delete = search.id.clone();
let load_handler = on_load_saved_search;
let delete_handler = on_delete_saved_search;
rsx! {
div { class: "saved-search-item", key: "{search.id}",
div {
class: "saved-search-info",
onclick: {
let sc = search_clone.clone();
move |_| {
if let Some(ref h) = load_handler {
h.call(sc.clone());
}
query.set(sc.query.clone());
if let Some(ref s) = sc.sort_order {
sort_by.set(s.clone());
} else {
sort_by.set("relevance".to_string());
}
show_saved_list.set(false);
}
},
span { class: "saved-search-name", "{search.name}" }
span { class: "saved-search-query text-muted", "{search.query}" }
}
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = id_for_delete.clone();
move |evt: MouseEvent| {
evt.stop_propagation();
if let Some(ref h) = delete_handler {
h.call(id.clone());
}
}
},
"Delete"
}
}
}
}
}
}
}
}
p { class: "text-muted text-sm mb-8", "Results: {total_count}" }
if results.is_empty() && query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "Search your media" }
p { class: "empty-subtitle",
"Enter a query above to find files by name, metadata, tags, or type."
}
}
}
if results.is_empty() && !query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "No results found" }
p { class: "empty-subtitle", "Try a different query or check the syntax help." }
}
}
// Content: grid or table
match current_mode {
1 => rsx! {
div { class: "media-grid",
for item in results.iter() {
{
let badge_class = type_badge_class(&item.media_type);
let card_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
let thumb_url = if item.has_thumbnail {
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
} else {
String::new()
};
let has_thumb = item.has_thumbnail;
let media_type = item.media_type.clone();
rsx! {
div { key: "{item.id}", class: "media-card", onclick: card_click,
div { class: "card-thumbnail",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
loading: "lazy",
}
} else {
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
}
}
div { class: "card-info",
div { class: "card-name", title: "{item.file_name}", "{item.file_name}" }
div { class: "card-meta",
span { class: "type-badge {badge_class}", "{item.media_type}" }
span { class: "card-size", "{format_size(item.file_size)}" }
}
}
}
}
}
}
}
},
_ => rsx! {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
}
}
tbody {
for item in results.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let row_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
rsx! {
tr { key: "{item.id}", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
}
}
}
}
}
}
},
}
// Pagination controls
PaginationControls { current_page: search_page, total_pages, on_page_change }
let do_search = {
let query = query;
let sort_by = sort_by;
move |_| {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
};
let on_key = {
let query = query;
let sort_by = sort_by;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let q = query.read().clone();
let s = sort_by.read().clone();
let sort = if s == "relevance" || s.is_empty() {
None
} else {
Some(s)
};
on_search.call((q, sort));
}
}
};
let toggle_help = move |_| {
let current = *show_help.read();
show_help.set(!current);
};
let help_visible = *show_help.read();
let current_mode = *view_mode.read();
let total_pages = if page_size > 0 {
total_count.div_ceil(page_size)
} else {
1
};
rsx! {
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "Search media...",
value: "{query}",
oninput: move |e| query.set(e.value()),
onkeypress: on_key,
}
select { value: "{sort_by}", onchange: move |e| sort_by.set(e.value()),
option { value: "relevance", "Relevance" }
option { value: "date_desc", "Newest" }
option { value: "date_asc", "Oldest" }
option { value: "name_asc", "Name A-Z" }
option { value: "name_desc", "Name Z-A" }
option { value: "size_desc", "Size (largest)" }
option { value: "size_asc", "Size (smallest)" }
}
button { class: "btn btn-primary", onclick: do_search, "Search" }
button { class: "btn btn-ghost", onclick: toggle_help, "Syntax Help" }
// Save/Load search buttons
if on_save_search.is_some() {
button {
class: "btn btn-secondary",
disabled: query.read().is_empty(),
onclick: move |_| show_save_dialog.set(true),
"Save"
}
}
if !saved_searches.is_empty() {
button {
class: "btn btn-ghost",
onclick: move |_| show_saved_list.toggle(),
"Saved ({saved_searches.len()})"
}
}
// View mode toggle
div { class: "view-toggle",
button {
class: if current_mode == 1 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(1),
title: "Grid view",
"\u{25a6}"
}
button {
class: if current_mode == 0 { "view-btn active" } else { "view-btn" },
onclick: move |_| view_mode.set(0),
title: "Table view",
"\u{2630}"
}
}
}
if help_visible {
div { class: "card mb-16",
h4 { "Search Syntax" }
ul {
li {
code { "hello world" }
" -- full text search (implicit AND)"
}
li {
code { "artist:Beatles" }
" -- field match"
}
li {
code { "type:pdf" }
" -- filter by media type"
}
li {
code { "tag:music" }
" -- filter by tag"
}
li {
code { "hello OR world" }
" -- OR operator"
}
li {
code { "-excluded" }
" -- NOT (exclude term)"
}
li {
code { "hel*" }
" -- prefix search"
}
li {
code { "hello~" }
" -- fuzzy search"
}
li {
code { "\"exact phrase\"" }
" -- quoted exact match"
}
}
}
}
// Save search dialog
if *show_save_dialog.read() {
div {
class: "modal-overlay",
onclick: move |_| show_save_dialog.set(false),
div {
class: "modal-content",
onclick: move |evt: MouseEvent| evt.stop_propagation(),
h3 { "Save Search" }
div { class: "form-field",
label { "Name" }
input {
r#type: "text",
placeholder: "Enter a name for this search...",
value: "{save_name}",
oninput: move |e| save_name.set(e.value()),
onkeypress: {
let query = query.read().clone();
let sort = sort_by.read().clone();
let handler = on_save_search;
move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort == "relevance" {
None
} else {
Some(sort.clone())
};
if let Some(ref h) = handler {
h.call((name, query.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
}
},
}
}
p { class: "text-muted text-sm", "Query: {query}" }
div { class: "modal-actions",
button {
class: "btn btn-ghost",
onclick: move |_| {
show_save_dialog.set(false);
save_name.set(String::new());
},
"Cancel"
}
button {
class: "btn btn-primary",
disabled: save_name.read().is_empty(),
onclick: {
let query_val = query.read().clone();
let sort_val = sort_by.read().clone();
let handler = on_save_search;
move |_| {
let name = save_name.read().clone();
if !name.is_empty() {
let sort_opt = if sort_val == "relevance" {
None
} else {
Some(sort_val.clone())
};
if let Some(ref h) = handler {
h.call((name, query_val.clone(), sort_opt));
}
show_save_dialog.set(false);
save_name.set(String::new());
}
}
},
"Save"
}
}
}
}
}
// Saved searches list
if *show_saved_list.read() && !saved_searches.is_empty() {
div { class: "card mb-16",
div { class: "card-header",
h4 { "Saved Searches" }
button {
class: "btn btn-ghost btn-sm",
onclick: move |_| show_saved_list.set(false),
"Close"
}
}
div { class: "saved-searches-list",
for search in saved_searches.iter() {
{
let search_clone = search.clone();
let id_for_delete = search.id.clone();
let load_handler = on_load_saved_search;
let delete_handler = on_delete_saved_search;
rsx! {
div { class: "saved-search-item", key: "{search.id}",
div {
class: "saved-search-info",
onclick: {
let sc = search_clone.clone();
move |_| {
if let Some(ref h) = load_handler {
h.call(sc.clone());
}
query.set(sc.query.clone());
if let Some(ref s) = sc.sort_order {
sort_by.set(s.clone());
} else {
sort_by.set("relevance".to_string());
}
show_saved_list.set(false);
}
},
span { class: "saved-search-name", "{search.name}" }
span { class: "saved-search-query text-muted", "{search.query}" }
}
button {
class: "btn btn-danger btn-sm",
onclick: {
let id = id_for_delete.clone();
move |evt: MouseEvent| {
evt.stop_propagation();
if let Some(ref h) = delete_handler {
h.call(id.clone());
}
}
},
"Delete"
}
}
}
}
}
}
}
}
p { class: "text-muted text-sm mb-8", "Results: {total_count}" }
if results.is_empty() && query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "Search your media" }
p { class: "empty-subtitle",
"Enter a query above to find files by name, metadata, tags, or type."
}
}
}
if results.is_empty() && !query.read().is_empty() {
div { class: "empty-state",
h3 { class: "empty-title", "No results found" }
p { class: "empty-subtitle", "Try a different query or check the syntax help." }
}
}
// Content: grid or table
match current_mode {
1 => rsx! {
div { class: "media-grid",
for item in results.iter() {
{
let badge_class = type_badge_class(&item.media_type);
let card_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
let thumb_url = if item.has_thumbnail {
format!("{}/api/v1/media/{}/thumbnail", server_url, item.id)
} else {
String::new()
};
let has_thumb = item.has_thumbnail;
let media_type = item.media_type.clone();
rsx! {
div { key: "{item.id}", class: "media-card", onclick: card_click,
div { class: "card-thumbnail",
if has_thumb {
img {
src: "{thumb_url}",
alt: "{item.file_name}",
loading: "lazy",
}
} else {
div { class: "card-type-icon {badge_class}", "{type_icon(&media_type)}" }
}
}
div { class: "card-info",
div { class: "card-name", title: "{item.file_name}", "{item.file_name}" }
div { class: "card-meta",
span { class: "type-badge {badge_class}", "{item.media_type}" }
span { class: "card-size", "{format_size(item.file_size)}" }
}
}
}
}
}
}
}
},
_ => rsx! {
table { class: "data-table",
thead {
tr {
th { "Name" }
th { "Type" }
th { "Artist" }
th { "Size" }
}
}
tbody {
for item in results.iter() {
{
let artist = item.artist.clone().unwrap_or_default();
let size = format_size(item.file_size);
let badge_class = type_badge_class(&item.media_type);
let row_click = {
let id = item.id.clone();
move |_| on_select.call(id.clone())
};
rsx! {
tr { key: "{item.id}", onclick: row_click,
td { "{item.file_name}" }
td {
span { class: "type-badge {badge_class}", "{item.media_type}" }
}
td { "{artist}" }
td { "{size}" }
}
}
}
}
}
}
},
}
// Pagination controls
PaginationControls { current_page: search_page, total_pages, on_page_change }
}
}

1090
crates/pinakes-ui/src/components/settings.rs
View file

File diff suppressed because it is too large Load diff

506
crates/pinakes-ui/src/components/statistics.rs
View file

@ -1,7 +1,15 @@
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaChartBar, FaCircle, FaClock, FaDatabase, FaFolder, FaLink, FaTags,
use dioxus_free_icons::{
Icon,
icons::fa_solid_icons::{
FaChartBar,
FaCircle,
FaClock,
FaDatabase,
FaFolder,
FaLink,
FaTags,
},
};
use super::utils::format_size;
@ -9,262 +17,262 @@ use crate::client::LibraryStatisticsResponse;
#[component]
pub fn Statistics(
stats: Option<LibraryStatisticsResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
stats: Option<LibraryStatisticsResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
) -> Element {
rsx! {
div { class: "statistics-page",
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Library Statistics" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
rsx! {
div { class: "statistics-page",
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Library Statistics" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
"\u{21bb} Refresh"
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
match stats.as_ref() {
Some(s) => {
let total_size = format_size(s.total_size_bytes);
let avg_size = format_size(s.avg_file_size_bytes);
rsx! {
div { class: "stats-overview",
div { class: "stat-card stat-primary",
div { class: "stat-icon",
Icon { icon: FaFolder, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_media}" }
div { class: "stat-label", "Total Media" }
}
}
div { class: "stat-card stat-success",
div { class: "stat-icon",
Icon { icon: FaDatabase, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{total_size}" }
div { class: "stat-label", "Total Size" }
}
}
div { class: "stat-card stat-info",
div { class: "stat-icon",
Icon { icon: FaChartBar, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{avg_size}" }
div { class: "stat-label", "Average Size" }
}
}
div { class: "stat-card stat-warning",
div { class: "stat-icon",
Icon { icon: FaTags, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_tags}" }
div { class: "stat-label", "Tags" }
}
}
div { class: "stat-card stat-purple",
div { class: "stat-icon",
Icon { icon: FaCircle, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_collections}" }
div { class: "stat-label", "Collections" }
}
}
div { class: "stat-card stat-danger",
div { class: "stat-icon",
Icon { icon: FaLink, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_duplicates}" }
div { class: "stat-label", "Duplicates" }
}
}
}
match stats.as_ref() {
Some(s) => {
let total_size = format_size(s.total_size_bytes);
let avg_size = format_size(s.avg_file_size_bytes);
rsx! {
div { class: "stats-overview",
div { class: "stat-card stat-primary",
div { class: "stat-icon",
Icon { icon: FaFolder, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_media}" }
div { class: "stat-label", "Total Media" }
}
}
div { class: "stat-card stat-success",
div { class: "stat-icon",
Icon { icon: FaDatabase, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{total_size}" }
div { class: "stat-label", "Total Size" }
}
}
div { class: "stat-card stat-info",
div { class: "stat-icon",
Icon { icon: FaChartBar, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{avg_size}" }
div { class: "stat-label", "Average Size" }
}
}
div { class: "stat-card stat-warning",
div { class: "stat-icon",
Icon { icon: FaTags, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_tags}" }
div { class: "stat-label", "Tags" }
}
}
div { class: "stat-card stat-purple",
div { class: "stat-icon",
Icon { icon: FaCircle, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_collections}" }
div { class: "stat-label", "Collections" }
}
}
div { class: "stat-card stat-danger",
div { class: "stat-icon",
Icon { icon: FaLink, width: 20, height: 20 }
}
div { class: "stat-content",
div { class: "stat-value", "{s.total_duplicates}" }
div { class: "stat-label", "Duplicates" }
}
}
}
if !s.media_by_type.is_empty() {
{
let max_count = s.media_by_type.iter().map(|i| i.count).max().unwrap_or(1)
if !s.media_by_type.is_empty() {
{
let max_count = s.media_by_type.iter().map(|i| i.count).max().unwrap_or(1)
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaChartBar,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Media by Type"
}
div { class: "chart-bars",
for item in s.media_by_type.iter() {
{
let percentage = (item.count as f64 / max_count) * 100.0;
let name = item.name.clone();
let count = item.count;
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-primary", style: "width: {percentage}%" }
}
div { class: "bar-value", "{count}" }
}
}
}
}
}
}
}
}
}
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaChartBar,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Media by Type"
}
div { class: "chart-bars",
for item in s.media_by_type.iter() {
{
let percentage = (item.count as f64 / max_count) * 100.0;
let name = item.name.clone();
let count = item.count;
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-primary", style: "width: {percentage}%" }
}
div { class: "bar-value", "{count}" }
}
}
}
}
}
}
}
}
}
if !s.storage_by_type.is_empty() {
{
let max_size = s.storage_by_type.iter().map(|i| i.count).max().unwrap_or(1)
if !s.storage_by_type.is_empty() {
{
let max_size = s.storage_by_type.iter().map(|i| i.count).max().unwrap_or(1)
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaDatabase,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Storage by Type"
}
div { class: "chart-bars",
for item in s.storage_by_type.iter() {
{
let percentage = (item.count as f64 / max_size) * 100.0;
let name = item.name.clone();
let size_str = format_size(item.count);
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-success", style: "width: {percentage}%" }
}
div { class: "bar-value", "{size_str}" }
}
}
}
}
}
}
}
}
}
as f64;
rsx! {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaDatabase,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Storage by Type"
}
div { class: "chart-bars",
for item in s.storage_by_type.iter() {
{
let percentage = (item.count as f64 / max_size) * 100.0;
let name = item.name.clone();
let size_str = format_size(item.count);
rsx! {
div { key: "{name}", class: "bar-item",
div { class: "bar-label", "{name}" }
div { class: "bar-track",
div { class: "bar-fill bar-success", style: "width: {percentage}%" }
}
div { class: "bar-value", "{size_str}" }
}
}
}
}
}
}
}
}
}
if !s.top_tags.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaTags,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Tags"
}
div { class: "tag-list",
for item in s.top_tags.iter() {
div { class: "tag-item",
span { class: "tag-badge", "{item.name}" }
span { class: "tag-count", "{item.count}" }
}
}
}
}
}
if !s.top_tags.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaTags,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Tags"
}
div { class: "tag-list",
for item in s.top_tags.iter() {
div { class: "tag-item",
span { class: "tag-badge", "{item.name}" }
span { class: "tag-count", "{item.count}" }
}
}
}
}
}
if !s.top_collections.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaCircle,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Collections"
}
div { class: "collection-list",
for item in s.top_collections.iter() {
div { class: "collection-item",
Icon {
icon: FaFolder,
width: 16,
height: 16,
class: "collection-icon",
}
span { class: "collection-name", "{item.name}" }
span { class: "collection-count", "{item.count}" }
}
}
}
}
}
if !s.top_collections.is_empty() {
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaCircle,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Top Collections"
}
div { class: "collection-list",
for item in s.top_collections.iter() {
div { class: "collection-item",
Icon {
icon: FaFolder,
width: 16,
height: 16,
class: "collection-icon",
}
span { class: "collection-name", "{item.name}" }
span { class: "collection-count", "{item.count}" }
}
}
}
}
}
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaClock,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Date Range"
}
div { class: "date-range",
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Oldest Item" }
div { class: "date-value", "{s.oldest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Newest Item" }
div { class: "date-value", "{s.newest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
}
}
}
}
None => rsx! {
div { class: "empty-state",
div { class: "spinner" }
p { "Loading statistics..." }
}
},
}
}
}
}
div { class: "stats-section",
h4 { class: "section-title",
Icon {
icon: FaClock,
width: 16,
height: 16,
style: "margin-right: 8px; vertical-align: middle;",
}
"Date Range"
}
div { class: "date-range",
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Oldest Item" }
div { class: "date-value", "{s.oldest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
div { class: "date-item",
Icon { icon: FaClock, width: 16, height: 16 }
div { class: "date-content",
div { class: "date-label", "Newest Item" }
div { class: "date-value", "{s.newest_item.as_deref().unwrap_or(\"N/A\")}" }
}
}
}
}
}
}
None => rsx! {
div { class: "empty-state",
div { class: "spinner" }
p { "Loading statistics..." }
}
},
}
}
}
}
}

534
crates/pinakes-ui/src/components/tags.rs
View file

@ -4,273 +4,275 @@ use crate::client::TagResponse;
#[component]
pub fn Tags(
tags: Vec<TagResponse>,
on_create: EventHandler<(String, Option<String>)>,
on_delete: EventHandler<String>,
tags: Vec<TagResponse>,
on_create: EventHandler<(String, Option<String>)>,
on_delete: EventHandler<String>,
) -> Element {
let mut new_tag_name = use_signal(String::new);
let mut parent_tag = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let mut new_tag_name = use_signal(String::new);
let mut parent_tag = use_signal(String::new);
let mut confirm_delete: Signal<Option<String>> = use_signal(|| None);
let create_click = move |_| {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
};
let create_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
}
};
// Separate root tags and child tags
let root_tags: Vec<&TagResponse> = tags.iter().filter(|t| t.parent_id.is_none()).collect();
let child_tags: Vec<&TagResponse> = tags.iter().filter(|t| t.parent_id.is_some()).collect();
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Tags" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "New tag name...",
value: "{new_tag_name}",
oninput: move |e| new_tag_name.set(e.value()),
onkeypress: create_key,
}
select {
value: "{parent_tag}",
onchange: move |e| parent_tag.set(e.value()),
option { value: "", "No Parent" }
for tag in tags.iter() {
option { key: "{tag.id}", value: "{tag.id}", "{tag.name}" }
}
}
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if tags.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No tags yet. Create one above." }
}
} else {
div { class: "tag-list",
// Root tags
for tag in root_tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let children: Vec<&TagResponse> = child_tags
.iter()
.filter(|c| c.parent_id.as_deref() == Some(tag_id.as_str()))
.copied()
.collect();
let is_confirming = confirm_delete.read().as_deref() == Some(tag_id.as_str());
rsx! {
div { key: "{tag_id}", class: "tag-group",
span { class: "tag-badge",
"{tag_name}"
if is_confirming {
{
let confirm_id = tag_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = tag_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
if !children.is_empty() {
div {
class: "tag-children",
style: "margin-left: 16px; margin-top: 4px;",
for child in children.iter() {
{
let child_id = child.id.clone();
let child_name = child.name.clone();
let child_is_confirming = confirm_delete.read().as_deref()
== Some(child_id.as_str());
rsx! {
span { key: "{child_id}", class: "tag-badge",
"{child_name}"
if child_is_confirming {
{
let confirm_id = child_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = child_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
// Orphan child tags (parent not found in current list)
for tag in child_tags.iter() {
{
let parent_exists = root_tags
.iter()
.any(|r| Some(r.id.as_str()) == tag.parent_id.as_deref())
|| child_tags
.iter()
.any(|c| {
c.id != tag.id && Some(c.id.as_str()) == tag.parent_id.as_deref()
});
if !parent_exists {
let orphan_id = tag.id.clone();
let orphan_name = tag.name.clone();
let parent_label = tag.parent_id.clone().unwrap_or_default();
let is_confirming = confirm_delete.read().as_deref()
== Some(orphan_id.as_str());
rsx! {
span { key: "{orphan_id}", class: "tag-badge",
"{orphan_name}"
span { class: "text-muted text-sm", " (parent: {parent_label})" }
if is_confirming {
{
let confirm_id = orphan_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = orphan_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
} else {
rsx! {}
}
}
}
}
}
}
let create_click = move |_| {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
};
let create_key = move |e: KeyboardEvent| {
if e.key() == Key::Enter {
let name = new_tag_name.read().clone();
if name.is_empty() {
return;
}
let parent = {
let p = parent_tag.read().clone();
if p.is_empty() { None } else { Some(p) }
};
on_create.call((name, parent));
new_tag_name.set(String::new());
parent_tag.set(String::new());
}
};
// Separate root tags and child tags
let root_tags: Vec<&TagResponse> =
tags.iter().filter(|t| t.parent_id.is_none()).collect();
let child_tags: Vec<&TagResponse> =
tags.iter().filter(|t| t.parent_id.is_some()).collect();
rsx! {
div { class: "card",
div { class: "card-header",
h3 { class: "card-title", "Tags" }
}
div { class: "form-row mb-16",
input {
r#type: "text",
placeholder: "New tag name...",
value: "{new_tag_name}",
oninput: move |e| new_tag_name.set(e.value()),
onkeypress: create_key,
}
select {
value: "{parent_tag}",
onchange: move |e| parent_tag.set(e.value()),
option { value: "", "No Parent" }
for tag in tags.iter() {
option { key: "{tag.id}", value: "{tag.id}", "{tag.name}" }
}
}
button { class: "btn btn-primary", onclick: create_click, "Create" }
}
if tags.is_empty() {
div { class: "empty-state",
p { class: "empty-subtitle", "No tags yet. Create one above." }
}
} else {
div { class: "tag-list",
// Root tags
for tag in root_tags.iter() {
{
let tag_id = tag.id.clone();
let tag_name = tag.name.clone();
let children: Vec<&TagResponse> = child_tags
.iter()
.filter(|c| c.parent_id.as_deref() == Some(tag_id.as_str()))
.copied()
.collect();
let is_confirming = confirm_delete.read().as_deref() == Some(tag_id.as_str());
rsx! {
div { key: "{tag_id}", class: "tag-group",
span { class: "tag-badge",
"{tag_name}"
if is_confirming {
{
let confirm_id = tag_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = tag_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
if !children.is_empty() {
div {
class: "tag-children",
style: "margin-left: 16px; margin-top: 4px;",
for child in children.iter() {
{
let child_id = child.id.clone();
let child_name = child.name.clone();
let child_is_confirming = confirm_delete.read().as_deref()
== Some(child_id.as_str());
rsx! {
span { key: "{child_id}", class: "tag-badge",
"{child_name}"
if child_is_confirming {
{
let confirm_id = child_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = child_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
}
}
}
}
}
}
}
}
// Orphan child tags (parent not found in current list)
for tag in child_tags.iter() {
{
let parent_exists = root_tags
.iter()
.any(|r| Some(r.id.as_str()) == tag.parent_id.as_deref())
|| child_tags
.iter()
.any(|c| {
c.id != tag.id && Some(c.id.as_str()) == tag.parent_id.as_deref()
});
if !parent_exists {
let orphan_id = tag.id.clone();
let orphan_name = tag.name.clone();
let parent_label = tag.parent_id.clone().unwrap_or_default();
let is_confirming = confirm_delete.read().as_deref()
== Some(orphan_id.as_str());
rsx! {
span { key: "{orphan_id}", class: "tag-badge",
"{orphan_name}"
span { class: "text-muted text-sm", " (parent: {parent_label})" }
if is_confirming {
{
let confirm_id = orphan_id.clone();
rsx! {
span { class: "tag-confirm-delete",
" Are you sure? "
span {
class: "tag-confirm-yes",
onclick: move |_| {
on_delete.call(confirm_id.clone());
confirm_delete.set(None);
},
"Confirm"
}
" "
span {
class: "tag-confirm-no",
onclick: move |_| {
confirm_delete.set(None);
},
"Cancel"
}
}
}
}
} else {
{
let remove_id = orphan_id.clone();
rsx! {
span {
class: "tag-remove",
onclick: move |_| {
confirm_delete.set(Some(remove_id.clone()));
},
"\u{00d7}"
}
}
}
}
}
}
} else {
rsx! {}
}
}
}
}
}
}
}
}

307
crates/pinakes-ui/src/components/tasks.rs
View file

@ -1,166 +1,175 @@
use dioxus::prelude::*;
use dioxus_free_icons::Icon;
use dioxus_free_icons::icons::fa_solid_icons::{
FaArrowsRotate, FaCalendar, FaCircleCheck, FaClock, FaPause, FaPlay,
use dioxus_free_icons::{
Icon,
icons::fa_solid_icons::{
FaArrowsRotate,
FaCalendar,
FaCircleCheck,
FaClock,
FaPause,
FaPlay,
},
};
use crate::client::ScheduledTaskResponse;
#[component]
pub fn Tasks(
tasks: Vec<ScheduledTaskResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
on_toggle: EventHandler<String>,
on_run_now: EventHandler<String>,
tasks: Vec<ScheduledTaskResponse>,
#[props(default)] error: Option<String>,
on_refresh: EventHandler<()>,
on_toggle: EventHandler<String>,
on_run_now: EventHandler<String>,
) -> Element {
rsx! {
div { class: "tasks-container",
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Scheduled Tasks" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
Icon { icon: FaArrowsRotate, width: 14, height: 14 }
" Refresh"
}
}
rsx! {
div { class: "tasks-container",
div { class: "card mb-16",
div { class: "card-header",
h3 { class: "card-title", "Scheduled Tasks" }
button {
class: "btn btn-sm btn-secondary",
onclick: move |_| on_refresh.call(()),
Icon { icon: FaArrowsRotate, width: 14, height: 14 }
" Refresh"
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if let Some(ref err) = error {
div { class: "alert alert-error mb-8",
span { "{err}" }
button {
class: "btn btn-sm btn-secondary ml-8",
onclick: move |_| on_refresh.call(()),
"Retry"
}
}
}
if tasks.is_empty() {
div { class: "empty-state",
div { class: "empty-icon",
Icon { icon: FaCalendar, width: 48, height: 48 }
}
p { "No scheduled tasks configured." }
p { class: "text-muted",
"Tasks will appear here once configured on the server."
}
}
} else {
div { class: "tasks-grid",
for task in tasks.iter() {
{
let task_id_toggle = task.id.clone();
let task_id_run = task.id.clone();
let last_run = task.last_run.clone().unwrap_or_else(|| "Never".to_string());
let next_run = task
if tasks.is_empty() {
div { class: "empty-state",
div { class: "empty-icon",
Icon { icon: FaCalendar, width: 48, height: 48 }
}
p { "No scheduled tasks configured." }
p { class: "text-muted",
"Tasks will appear here once configured on the server."
}
}
} else {
div { class: "tasks-grid",
for task in tasks.iter() {
{
let task_id_toggle = task.id.clone();
let task_id_run = task.id.clone();
let last_run = task.last_run.clone().unwrap_or_else(|| "Never".to_string());
let next_run = task
// Header with status and actions
// Header with status and actions
// Task info grid
// Task info grid
// Actions
.next_run
.clone()
.unwrap_or_else(|| "Not scheduled".to_string());
let last_status = task
.last_status
.clone()
.unwrap_or_else(|| "No runs yet".to_string());
let is_enabled = task.enabled;
let task_name = task.name.clone();
let schedule = task.schedule.clone();
rsx! {
div { class: if is_enabled { "task-card task-card-enabled" } else { "task-card task-card-disabled" },
// Actions
.next_run
.clone()
.unwrap_or_else(|| "Not scheduled".to_string());
let last_status = task
.last_status
.clone()
.unwrap_or_else(|| "No runs yet".to_string());
let is_enabled = task.enabled;
let task_name = task.name.clone();
let schedule = task.schedule.clone();
rsx! {
div { class: if is_enabled { "task-card task-card-enabled" } else { "task-card task-card-disabled" },
div { class: "task-card-header",
div { class: "task-header-left",
div { class: "task-name", "{task_name}" }
div { class: "task-schedule",
span { class: "schedule-icon",
Icon { icon: FaClock, width: 14, height: 14 }
}
"{schedule}"
}
}
div { class: "task-status-badge",
if is_enabled {
span { class: "status-badge status-enabled",
span { class: "status-dot" }
"Active"
}
} else {
span { class: "status-badge status-disabled",
span { class: "status-dot" }
"Disabled"
}
}
}
}
div { class: "task-info-grid",
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Run" }
div { class: "task-info-value", "{last_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Next Run" }
div { class: "task-info-value", "{next_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaCircleCheck, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Status" }
div { class: "task-info-value", "{last_status}" }
}
}
}
div { class: "task-card-actions",
button {
class: if is_enabled { "btn btn-sm btn-secondary" } else { "btn btn-sm btn-primary" },
onclick: move |_| on_toggle.call(task_id_toggle.clone()),
if is_enabled {
span {
Icon { icon: FaPause, width: 14, height: 14 }
" Disable"
}
} else {
span {
Icon { icon: FaPlay, width: 14, height: 14 }
" Enable"
}
}
}
button {
class: "btn btn-sm btn-primary",
onclick: move |_| on_run_now.call(task_id_run.clone()),
disabled: !is_enabled,
Icon { icon: FaPlay, width: 14, height: 14 }
" Run Now"
}
}
}
}
}
}
}
}
}
}
}
div { class: "task-card-header",
div { class: "task-header-left",
div { class: "task-name", "{task_name}" }
div { class: "task-schedule",
span { class: "schedule-icon",
Icon { icon: FaClock, width: 14, height: 14 }
}
"{schedule}"
}
}
div { class: "task-status-badge",
if is_enabled {
span { class: "status-badge status-enabled",
span { class: "status-dot" }
"Active"
}
} else {
span { class: "status-badge status-disabled",
span { class: "status-dot" }
"Disabled"
}
}
}
}
div { class: "task-info-grid",
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Run" }
div { class: "task-info-value", "{last_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaClock, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Next Run" }
div { class: "task-info-value", "{next_run}" }
}
}
div { class: "task-info-item",
div { class: "task-info-icon",
Icon { icon: FaCircleCheck, width: 16, height: 16 }
}
div { class: "task-info-content",
div { class: "task-info-label", "Last Status" }
div { class: "task-info-value", "{last_status}" }
}
}
}
div { class: "task-card-actions",
button {
class: if is_enabled { "btn btn-sm btn-secondary" } else { "btn btn-sm btn-primary" },
onclick: move |_| on_toggle.call(task_id_toggle.clone()),
if is_enabled {
span {
Icon { icon: FaPause, width: 14, height: 14 }
" Disable"
}
} else {
span {
Icon { icon: FaPlay, width: 14, height: 14 }
" Enable"
}
}
}
button {
class: "btn btn-sm btn-primary",
onclick: move |_| on_run_now.call(task_id_run.clone()),
disabled: !is_enabled,
Icon { icon: FaPlay, width: 14, height: 14 }
" Run Now"
}
}
}
}
}
}
}
}
}
}
}
}

104
crates/pinakes-ui/src/components/utils.rs
View file

@ -1,69 +1,69 @@
pub fn format_size(bytes: u64) -> String {
if bytes < 1024 {
format!("{bytes} B")
} else if bytes < 1024 * 1024 {
format!("{:.1} KB", bytes as f64 / 1024.0)
} else if bytes < 1024 * 1024 * 1024 {
format!("{:.1} MB", bytes as f64 / (1024.0 * 1024.0))
} else {
format!("{:.2} GB", bytes as f64 / (1024.0 * 1024.0 * 1024.0))
}
if bytes < 1024 {
format!("{bytes} B")
} else if bytes < 1024 * 1024 {
format!("{:.1} KB", bytes as f64 / 1024.0)
} else if bytes < 1024 * 1024 * 1024 {
format!("{:.1} MB", bytes as f64 / (1024.0 * 1024.0))
} else {
format!("{:.2} GB", bytes as f64 / (1024.0 * 1024.0 * 1024.0))
}
}
pub fn type_badge_class(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "type-audio",
"mp4" | "mkv" | "avi" | "webm" => "type-video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "type-image",
"pdf" | "epub" | "djvu" => "type-document",
"md" | "markdown" => "type-text",
_ => "type-other",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "type-audio",
"mp4" | "mkv" | "avi" | "webm" => "type-video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "type-image",
"pdf" | "epub" | "djvu" => "type-document",
"md" | "markdown" => "type-text",
_ => "type-other",
}
}
pub fn type_icon(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "\u{266b}",
"mp4" | "mkv" | "avi" | "webm" => "\u{25b6}",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "\u{1f5bc}",
"pdf" | "epub" | "djvu" => "\u{1f4c4}",
"md" | "markdown" => "\u{270e}",
_ => "\u{1f4c1}",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "\u{266b}",
"mp4" | "mkv" | "avi" | "webm" => "\u{25b6}",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "\u{1f5bc}",
"pdf" | "epub" | "djvu" => "\u{1f4c4}",
"md" | "markdown" => "\u{270e}",
_ => "\u{1f4c1}",
}
}
pub fn format_timestamp(ts: &str) -> String {
let trimmed = ts.replace('T', " ");
if let Some(dot_pos) = trimmed.find('.') {
trimmed[..dot_pos].to_string()
} else if let Some(z_pos) = trimmed.find('Z') {
trimmed[..z_pos].to_string()
} else if trimmed.len() > 19 {
trimmed[..19].to_string()
} else {
trimmed
}
let trimmed = ts.replace('T', " ");
if let Some(dot_pos) = trimmed.find('.') {
trimmed[..dot_pos].to_string()
} else if let Some(z_pos) = trimmed.find('Z') {
trimmed[..z_pos].to_string()
} else if trimmed.len() > 19 {
trimmed[..19].to_string()
} else {
trimmed
}
}
pub fn media_category(media_type: &str) -> &'static str {
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "audio",
"mp4" | "mkv" | "avi" | "webm" => "video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "image",
"pdf" | "epub" | "djvu" => "document",
"md" | "markdown" => "text",
_ => "other",
}
match media_type {
"mp3" | "flac" | "ogg" | "wav" => "audio",
"mp4" | "mkv" | "avi" | "webm" => "video",
"jpeg" | "jpg" | "png" | "gif" | "webp" | "avif" => "image",
"pdf" | "epub" | "djvu" => "document",
"md" | "markdown" => "text",
_ => "other",
}
}
pub fn format_duration(secs: f64) -> String {
let total = secs as u64;
let hours = total / 3600;
let mins = (total % 3600) / 60;
let s = total % 60;
if hours > 0 {
format!("{hours}:{mins:02}:{s:02}")
} else {
format!("{mins:02}:{s:02}")
}
let total = secs as u64;
let hours = total / 3600;
let mins = (total % 3600) / 60;
let s = total % 60;
if hours > 0 {
format!("{hours}:{mins:02}:{s:02}")
} else {
format!("{mins:02}:{s:02}")
}
}

44
crates/pinakes-ui/src/main.rs
View file

@ -13,34 +13,36 @@ use dioxus::prelude::*;
#[derive(Parser)]
#[command(name = "pinakes-ui", version, about)]
struct Cli {
/// Server URL to connect to
#[arg(
short,
long,
env = "PINAKES_SERVER_URL",
default_value = "http://localhost:3000"
)]
server: String,
/// Server URL to connect to
#[arg(
short,
long,
env = "PINAKES_SERVER_URL",
default_value = "http://localhost:3000"
)]
server: String,
/// Set log level (trace, debug, info, warn, error)
#[arg(long, default_value = "warn")]
log_level: String,
/// Set log level (trace, debug, info, warn, error)
#[arg(long, default_value = "warn")]
log_level: String,
}
fn main() {
let cli = Cli::parse();
let cli = Cli::parse();
let env_filter = EnvFilter::try_new(&cli.log_level).unwrap_or_else(|_| EnvFilter::new("warn"));
let env_filter = EnvFilter::try_new(&cli.log_level)
.unwrap_or_else(|_| EnvFilter::new("warn"));
tracing_subscriber::fmt()
.with_env_filter(env_filter)
.compact()
.init();
tracing_subscriber::fmt()
.with_env_filter(env_filter)
.compact()
.init();
// SAFETY: Called before any threads are spawned (single-threaded at this point).
unsafe { std::env::set_var("PINAKES_SERVER_URL", &cli.server) };
// SAFETY: Called before any threads are spawned (single-threaded at this
// point).
unsafe { std::env::set_var("PINAKES_SERVER_URL", &cli.server) };
tracing::info!(server = %cli.server, "starting pinakes desktop UI");
tracing::info!(server = %cli.server, "starting pinakes desktop UI");
launch(app::App);
launch(app::App);
}

4175
crates/pinakes-ui/src/styles.rs
View file

File diff suppressed because it is too large Load diff