mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
264 lines
18 KiB
Plaintext
264 lines
18 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<%= csrf_meta_tags %>
|
|
|
|
<%= stylesheet_link_tag 'application', media: 'all' %>
|
|
<!--
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha256-rByPlHULObEjJ6XQxW/flG2r+22R5dKiAoef+aXWfik=" crossorigin="anonymous" />
|
|
-->
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
|
|
<%= render 'layouts/favicon' %>
|
|
<%= javascript_include_tag 'application' %>
|
|
<%= javascript_pack_tag 'application' %>
|
|
<%= render 'layouts/seo' %>
|
|
<script defer type="text/javascript" src="https://js.stripe.com/v2/"></script>
|
|
|
|
<!-- todo mirror this in-repo? -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body data-in-app="true"
|
|
class="<%= controller_name %> <%= action_name %> <%= 'dark' if user_signed_in? && current_user.dark_mode_enabled? %>"
|
|
x-data="{ showSidebar: <%= user_signed_in? ? 'window.innerWidth >= 1024' : 'false' %> }"
|
|
>
|
|
<%= render 'layouts/tailwind/navbar' %>
|
|
<%# render 'cards/ui/alert' %>
|
|
<%# render 'cards/ui/notice' %>
|
|
|
|
<!-- sidebar -->
|
|
<% if user_signed_in? %>
|
|
<!-- Floating sidebar toggle button (shows when sidebar is hidden) -->
|
|
<button x-show="!showSidebar" @click="showSidebar = true"
|
|
class="fixed bottom-8 left-4 z-30 p-3 bg-notebook-blue hover:bg-blue-600 text-white rounded-full shadow-lg transition-all duration-300 transform hover:scale-110"
|
|
x-cloak>
|
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
|
|
<nav x-show="showSidebar" class="notebook--sidebar fixed top-0 pt-16 flex flex-col left-0 z-20 h-screen overflow-hidden transition-all duration-300 origin-left transform bg-white border-r w-56 sm:w-64 lg:w-56" :class="{ '-translate-x-full' : !showSidebar, 'translate-x-0' : showSidebar }" <%# @click.away="showSidebar = false" %>>
|
|
|
|
<!-- Universe selector - moved here for mobile/tablet -->
|
|
<div class="lg:hidden p-3 border-b border-gray-200 bg-gray-50 shrink-0">
|
|
<% if @universe_scope %>
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<%= link_to main_app.multiverse_path, class: "flex items-center px-3 py-2 hover:bg-gray-50 border-b border-gray-100" do %>
|
|
<i class="material-icons <%= Universe.text_color %> text-lg mr-2"><%= Universe.icon %></i>
|
|
<span class="text-xs text-gray-500 uppercase tracking-wide font-medium">Universe</span>
|
|
<% end %>
|
|
<%= link_to @universe_scope, class: "flex items-center px-3 py-3 hover:bg-purple-50 group" do %>
|
|
<div class="w-8 h-8 rounded-full <%= Universe.color %> flex items-center justify-center mr-3 group-hover:scale-105 transition-transform">
|
|
<i class="material-icons text-white text-sm"><%= Universe.icon %></i>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium text-gray-900 truncate"><%= @universe_scope.name %></div>
|
|
<div class="text-xs text-gray-500">Active universe</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<% else %>
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<%= link_to main_app.multiverse_path, class: "flex items-center px-3 py-4 hover:bg-purple-50 group" do %>
|
|
<div class="flex-1">
|
|
<div class="text-sm font-medium text-purple-700 group-hover:text-purple-800">Choose a universe</div>
|
|
<div class="text-xs text-gray-500">Filter your notebook</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<nav class="notebook--sidebar text-sm font-medium text-gray-600 pt-1 overflow-y-auto flex-1 min-h-0 border-b border-gray-300 shadow" aria-label="Main Navigation">
|
|
<!--
|
|
<%= link_to main_app.table_of_contents_path, class: 'flex items-center px-2 py-3 transition cursor-pointer group hover:bg-gray-100' do %>
|
|
<i class="material-icons text-gray-400 shrink-0 w-6 h-6 mr-2 <%= Universe.text_color %>">dashboard</i>
|
|
<span class="group-hover:text-gray-900">Table of Contents</span>
|
|
<% end %>
|
|
-->
|
|
|
|
<div x-data="{ expandedWorldbuildingSidebar: <%= @sidenav_expansion == 'worldbuilding' %> }">
|
|
<div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" @click="expandedWorldbuildingSidebar = !expandedWorldbuildingSidebar" >
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-notebook-blue shrink-0 w-6 h-6 mr-2">book</i>
|
|
<span>Worldbuilding</span>
|
|
</div>
|
|
<svg :class="{ 'rotate-90': expandedWorldbuildingSidebar }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div x-show="expandedWorldbuildingSidebar" x-cloak class="mb-1 pl-1">
|
|
<% @activated_content_types.each do |content_type| %>
|
|
<% content_type_klass = content_class_from_name(content_type) %>
|
|
<% is_current_page = current_page?(main_app.polymorphic_path(content_type_klass)) %>
|
|
<%= link_to main_app.polymorphic_path(content_type_klass), class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{is_current_page ? 'bg-notebook-blue text-white' : 'hover:bg-notebook-blue hover:text-white'}" do %>
|
|
<i class="material-icons <%= content_type_klass.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= content_type_klass.icon %></i>
|
|
<span class="flex-grow text-sm min-w-0 truncate"><%= content_type.pluralize %></span>
|
|
<span class="text-black rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
<%= number_with_delimiter @current_user_content.fetch(content_type, []).count %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= link_to main_app.customization_content_types_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.customization_content_types_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons text-notebook-blue shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full">add</i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Add more...</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-data="{ expandedWritingSidebar: <%= @sidenav_expansion == 'writing' %> }">
|
|
<div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" @click="expandedWritingSidebar = !expandedWritingSidebar" >
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-notebook-blue shrink-0 w-6 h-6 mr-2">book</i>
|
|
<span>Writing</span>
|
|
</div>
|
|
<svg :class="{ 'rotate-90': expandedWritingSidebar }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div x-show="expandedWritingSidebar" x-cloak class="pl-1 mb-2">
|
|
<%= link_to main_app.timelines_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.timelines_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons <%= Timeline.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= Timeline.icon %></i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Timelines</span>
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
<%= @current_user_content.fetch('Timeline', []).count %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= link_to main_app.documents_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.documents_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons <%= Document.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= Document.icon %></i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Documents</span>
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
<%= @current_user_content.fetch('Document', []).count %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= link_to main_app.prompts_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.prompts_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons text-orange-400 shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full">lightbulb</i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Prompts</span>
|
|
<!--
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700">
|
|
0
|
|
</span>
|
|
-->
|
|
<% end %>
|
|
|
|
<%= link_to '#new-analysis-onboarding', class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?('#new-analysis-onboarding')} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons <%= DocumentAnalysis.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= DocumentAnalysis.icon %></i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Analysis</span>
|
|
<!--
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700">
|
|
0
|
|
</span>
|
|
-->
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-data="{ expandedCommunitySidebar: <%= @sidenav_expansion == 'community' %> }">
|
|
<div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" @click="expandedCommunitySidebar = !expandedCommunitySidebar" >
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-notebook-blue shrink-0 w-6 h-6 mr-2">book</i>
|
|
<span>Community</span>
|
|
</div>
|
|
<svg :class="{ 'rotate-90': expandedCommunitySidebar }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div x-show="expandedCommunitySidebar" x-cloak class="pl-1 mb-2">
|
|
<%= link_to main_app.page_collections_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.page_collections_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons <%= PageCollection.text_color %> shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full"><%= PageCollection.icon %></i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Collections</span>
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
<%= @current_user_content.fetch('PageCollection', []).count %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= link_to main_app.thredded_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.thredded_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons text-blue-500 shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full">forum</i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Discussions</span>
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
0
|
|
</span>
|
|
<% end %>
|
|
|
|
<%= link_to main_app.stream_path, class: "flex items-center px-2 sm:px-4 py-2 cursor-pointer group rounded-l-full transition #{'bg-notebook-blue text-white' if current_page?(main_app.stream_path)} hover:bg-notebook-blue hover:text-white" do %>
|
|
<i class="material-icons text-purple-400 shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full">ballot</i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Activity</span>
|
|
<!--
|
|
<span class="bg-gray-100 rounded px-1 text-xs group-hover:text-white group-hover:bg-blue-700 shrink-0">
|
|
0
|
|
</span>
|
|
-->
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div @click="showSidebar = false" class="flex items-center px-2 sm:px-4 py-1 cursor-pointer group hover:bg-notebook-blue hover:text-white shrink-0">
|
|
<i class="material-icons text-blue-500 shrink-0 w-6 h-6 sm:w-7 sm:h-7 lg:w-8 lg:h-8 lg:p-1 mr-2 bg-white rounded-full p-1">arrow_left</i>
|
|
<span class="flex-grow text-sm min-w-0 truncate">Hide Sidebar</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- sidebar backdrop on mobile -->
|
|
<div class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 lg:hidden" x-show="showSidebar" @click="showSidebar = false" x-cloak></div>
|
|
|
|
<% end %>
|
|
|
|
<!-- main content -->
|
|
<main <% if user_signed_in? %>:class="{ 'ml-56 sm:ml-64 lg:ml-56': showSidebar }"<% end %> class="transition-all duration-300">
|
|
<%= yield %>
|
|
</main>
|
|
|
|
<footer <% if user_signed_in? %>:class="{ 'ml-56 sm:ml-64 lg:ml-56': showSidebar }"<% end %> class="transition-all duration-300">
|
|
<div class="max-w-7xl mx-auto pt-24 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8">
|
|
<div class="flex justify-center space-x-6 md:order-2">
|
|
<%= link_to 'https://www.facebook.com/notebookai/', class: 'text-gray-400 hover:text-gray-500' do %>
|
|
<span class="sr-only">Facebook</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
|
|
</svg>
|
|
<% end %>
|
|
|
|
<%= link_to 'https://twitter.com/indentlabs', class: 'text-gray-400 hover:text-gray-500' do %>
|
|
<span class="sr-only">Twitter</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
</svg>
|
|
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
|
|
<% end %>
|
|
|
|
<%= link_to 'https://github.com/indentlabs/notebook', class: 'text-gray-400 hover:text-gray-500' do %>
|
|
<span class="sr-only">GitHub</span>
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
|
|
</svg>
|
|
<% end %>
|
|
</div>
|
|
<div class="mt-8 md:mt-0 md:order-1">
|
|
<p class="text-center text-base text-gray-400">Notebook.ai © 2016-2025 Indent Labs, LLC</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<%# react_component("Footer") unless defined?(@show_footer) && !@show_footer %>
|
|
<%# render 'layouts/quick_add_fab' unless defined?(@show_footer) && !@show_footer %>
|
|
|
|
<script type="text/javascript">
|
|
<% if user_signed_in? %>
|
|
DISABLE_KEYBOARD_SHORTCUTS = <%= !current_user.keyboard_shortcuts_preference %>;
|
|
<% end %>
|
|
|
|
$(document).ready(function() {
|
|
<%= yield :javascript %>
|
|
});
|
|
</script>
|
|
|
|
<%# render partial: 'content/keyboard_controls_help_modal' %>
|
|
<%= render 'layouts/ganalytics' %>
|
|
</body>
|
|
</html>
|